page.tsx (19057B)
1 import Link from "next/link" 2 import { Shield, Users, BarChart, Settings, AlertTriangle, CheckCircle, Ban, Eye, LogIn, Menu } from "lucide-react" 3 import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet" 4 5 import { Button } from "@/components/ui/button" 6 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" 7 import { VisuallyHidden } from "@radix-ui/react-visually-hidden"; 8 import { cookies } from "next/headers" 9 10 export const experimental_ppr = true 11 const d4all_support_url = process.env.NEXT_PUBLIC_D4ALL_SUPPORT_URL || "#" 12 13 export default async function Home() { 14 // Get session cookie if available 15 const cookieStore = await cookies() 16 const sessionCookie = cookieStore.has("d4all_session") 17 18 return ( 19 <div className="flex min-h-screen flex-col bg-black text-white"> 20 <header className="sticky top-0 z-10 border-b border-gray-800 bg-black/80 backdrop-blur-sm"> 21 <div className="container flex h-16 items-center justify-between px-4 md:px-6"> 22 <div className="flex items-center gap-2"> 23 <Shield className="h-6 w-6 text-purple-400" /> 24 <span className="text-xl font-bold tracking-tighter">Draupnir4All</span> 25 </div> 26 <nav className="hidden md:flex gap-6"> 27 <Link className="text-sm font-medium text-gray-400 transition-colors hover:text-white" href="#features"> 28 Features 29 </Link> 30 <Link 31 className="text-sm font-medium text-gray-400 transition-colors hover:text-white" 32 href="https://the-draupnir-project.github.io/draupnir-documentation/category/moderators-guide" 33 > 34 Documentation 35 </Link> 36 <Link 37 className="text-sm font-medium text-gray-400 transition-colors hover:text-white" 38 href={d4all_support_url} 39 > 40 Support 41 </Link> 42 </nav> 43 <div className="flex items-center gap-4"> 44 <div className="hidden md:flex items-center gap-4"> 45 {sessionCookie ? ( 46 <Link href="/dashboard"> 47 <Button className="bg-purple-600 text-white hover:bg-purple-700">Dashboard</Button> 48 </Link> 49 ) : 50 ( 51 <> 52 <Link href="/login"> 53 <Button 54 variant="outline" 55 className="border-purple-500 text-purple-400 hover:bg-purple-950 hover:text-purple-300" 56 > 57 <LogIn className="mr-2 h-4 w-4" /> 58 Log In 59 </Button> 60 </Link> 61 <Link href="/register"> 62 <Button className="bg-purple-600 text-white hover:bg-purple-700">Register</Button> 63 </Link> 64 </> 65 )} 66 </div> 67 <Sheet> 68 <SheetTrigger asChild> 69 <Button variant="ghost" size="icon" className="md:hidden"> 70 <Menu className="h-5 w-5" /> 71 <span className="sr-only">Toggle menu</span> 72 </Button> 73 </SheetTrigger> 74 <SheetContent side="right" className="bg-gray-950 border-gray-800 p-0"> 75 <VisuallyHidden asChild> 76 <SheetTitle>Navigaion</SheetTitle> 77 </VisuallyHidden> 78 <div className="flex flex-col h-full"> 79 <div className="border-b border-gray-800 p-4"> 80 <div className="flex items-center gap-2"> 81 <Shield className="h-5 w-5 text-purple-400" /> 82 <span className="font-medium">Draupnir4All</span> 83 </div> 84 </div> 85 <nav className="flex flex-col p-4 gap-4"> 86 <Link 87 className="text-sm font-medium text-gray-400 transition-colors hover:text-white" 88 href="#features" 89 > 90 Features 91 </Link> 92 <Link 93 className="text-sm font-medium text-gray-400 transition-colors hover:text-white" 94 href="https://the-draupnir-project.github.io/draupnir-documentation/category/moderators-guide" 95 > 96 Documentation 97 </Link> 98 <Link 99 className="text-sm font-medium text-gray-400 transition-colors hover:text-white" 100 href={d4all_support_url} 101 > 102 Support 103 </Link> 104 </nav> 105 <div className="mt-auto border-t border-gray-800 p-4 flex flex-col gap-3"> 106 <Link href="/login" className="w-full"> 107 <Button 108 variant="outline" 109 className="w-full border-purple-500 text-purple-400 hover:bg-purple-950 hover:text-purple-300" 110 > 111 <LogIn className="mr-2 h-4 w-4" /> 112 Log In 113 </Button> 114 </Link> 115 <Link href="/register" className="w-full"> 116 <Button className="w-full bg-purple-600 text-white hover:bg-purple-700">Register</Button> 117 </Link> 118 </div> 119 </div> 120 </SheetContent> 121 </Sheet> 122 </div> 123 </div> 124 </header> 125 <main className="flex-1"> 126 <section className="relative py-24 md:py-32"> 127 <div className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-900/20 via-black to-black"></div> 128 <div className="container px-4 md:px-6"> 129 <div className="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]"> 130 <div className="flex flex-col justify-center space-y-4"> 131 <div className="space-y-2"> 132 <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">Draupnir4All</h1> 133 <p className="max-w-[600px] text-gray-300 md:text-xl"> 134 Self-service moderation for Matrix communities. Deploy your own Draupnir bot instance and protect 135 your spaces with advanced filtering, reporting, and management. 136 </p> 137 </div> 138 <div className="flex flex-col gap-2 min-[400px]:flex-row"> 139 <Link href="/register"> 140 <Button className="bg-purple-600 text-white hover:bg-purple-700">Register with Matrix</Button> 141 </Link> 142 <Link href="https://the-draupnir-project.github.io/draupnir-documentation/category/moderators-guide"> 143 <Button 144 variant="outline" 145 className="border-purple-500 text-purple-400 hover:bg-purple-950 hover:text-purple-300" 146 > 147 View Documentation 148 </Button> 149 </Link> 150 </div> 151 </div> 152 <div className="flex items-center justify-center"> 153 <div className="relative w-full max-w-[500px] overflow-hidden rounded-lg border border-gray-800 bg-black p-2"> 154 <div className="flex items-center justify-between border-b border-gray-800 p-2"> 155 <div className="flex items-center gap-2"> 156 <Shield className="h-5 w-5 text-purple-400" /> 157 <span className="text-sm font-medium">Draupnir Moderation</span> 158 </div> 159 <div className="flex items-center gap-1"> 160 <div className="h-2 w-2 rounded-full bg-red-500"></div> 161 <div className="h-2 w-2 rounded-full bg-yellow-500"></div> 162 <div className="h-2 w-2 rounded-full bg-green-500"></div> 163 </div> 164 </div> 165 <div className="space-y-2 p-4"> 166 <div className="flex items-center gap-2 rounded-md bg-gray-900 p-2"> 167 <AlertTriangle className="h-4 w-4 text-yellow-500" /> 168 <span className="text-xs">Spam detected in #general - Action required</span> 169 </div> 170 <div className="flex items-center gap-2 rounded-md bg-gray-900 p-2"> 171 <Ban className="h-4 w-4 text-red-500" /> 172 <span className="text-xs">User @spammer:example.com banned from 3 rooms</span> 173 </div> 174 <div className="flex items-center gap-2 rounded-md bg-gray-900 p-2"> 175 <CheckCircle className="h-4 w-4 text-green-500" /> 176 <span className="text-xs">Moderation report resolved by @admin:example.com</span> 177 </div> 178 <div className="flex items-center gap-2 rounded-md bg-gray-900 p-2"> 179 <Eye className="h-4 w-4 text-blue-500" /> 180 <span className="text-xs">Monitoring 12 active rooms - All systems normal</span> 181 </div> 182 </div> 183 </div> 184 </div> 185 </div> 186 </div> 187 </section> 188 189 <section className="bg-black py-12 md:py-16 lg:py-20"> 190 <div className="container px-4 md:px-6"> 191 <div className="flex flex-col items-center justify-center space-y-4 text-center"> 192 <div className="space-y-2"> 193 <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">How It Works</h2> 194 <p className="mx-auto max-w-[700px] text-gray-300 md:text-xl"> 195 Self-service provisioning for Draupnir moderation bots 196 </p> 197 </div> 198 <div className="grid gap-8 md:grid-cols-3 w-full max-w-4xl mt-8"> 199 <div className="flex flex-col items-center text-center"> 200 <div className="flex h-12 w-12 items-center justify-center rounded-full bg-purple-900 mb-4"> 201 <LogIn className="h-6 w-6 text-purple-300" /> 202 </div> 203 <h3 className="text-xl font-bold">1. Authenticate</h3> 204 <p className="text-gray-400 mt-2">Verify your identity with your Matrix account</p> 205 </div> 206 <div className="flex flex-col items-center text-center"> 207 <div className="flex h-12 w-12 items-center justify-center rounded-full bg-purple-900 mb-4"> 208 <Settings className="h-6 w-6 text-purple-300" /> 209 </div> 210 <h3 className="text-xl font-bold">2. Configure</h3> 211 <p className="text-gray-400 mt-2">Set up your Draupnir bot with custom rules and policies</p> 212 </div> 213 <div className="flex flex-col items-center text-center"> 214 <div className="flex h-12 w-12 items-center justify-center rounded-full bg-purple-900 mb-4"> 215 <Shield className="h-6 w-6 text-purple-300" /> 216 </div> 217 <h3 className="text-xl font-bold">3. Moderate</h3> 218 <p className="text-gray-400 mt-2">Access your moderation dashboard to manage your Matrix spaces</p> 219 </div> 220 </div> 221 </div> 222 </div> 223 </section> 224 225 <section className="bg-gray-950 py-12 md:py-16 lg:py-20"> 226 <div className="container px-4 md:px-6"> 227 <div className="flex flex-col items-center justify-center space-y-4 text-center mb-10"> 228 <div className="space-y-2"> 229 <h2 id="features" className="scroll-mt-24 text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl"> 230 Draupnir Features 231 </h2> 232 <p className="mx-auto max-w-[700px] text-gray-300 md:text-xl"> 233 Powerful moderation tools designed specifically for Matrix communities 234 </p> 235 </div> 236 </div> 237 <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3"> 238 <Card className="border-gray-800 bg-black"> 239 <CardHeader> 240 <div className="flex items-center gap-2"> 241 <Ban className="h-5 w-5 text-red-500" /> 242 <CardTitle>Ban Management</CardTitle> 243 </div> 244 <CardDescription className="text-gray-400"> 245 Efficiently manage bans across multiple rooms 246 </CardDescription> 247 </CardHeader> 248 <CardContent> 249 <p className="text-sm text-gray-300"> 250 Create and manage ban lists that can be shared across rooms and servers. Ban by user ID, server 251 name, or room patterns with powerful filtering options. 252 </p> 253 </CardContent> 254 </Card> 255 <Card className="border-gray-800 bg-black"> 256 <CardHeader> 257 <div className="flex items-center gap-2"> 258 <AlertTriangle className="h-5 w-5 text-yellow-500" /> 259 <CardTitle>Placeholder TODO</CardTitle> 260 </div> 261 <CardDescription className="text-gray-400">Placeholder TODO</CardDescription> 262 </CardHeader> 263 <CardContent> 264 <p className="text-sm text-gray-300">Meow Meow Meow</p> 265 </CardContent> 266 </Card> 267 <Card className="border-gray-800 bg-black"> 268 <CardHeader> 269 <div className="flex items-center gap-2"> 270 <Users className="h-5 w-5 text-blue-500" /> 271 <CardTitle>Distributed Moderation</CardTitle> 272 </div> 273 <CardDescription className="text-gray-400">Collaborate with trusted moderators</CardDescription> 274 </CardHeader> 275 <CardContent> 276 <p className="text-sm text-gray-300"> 277 Create policy rooms where trusted moderators can collaborate on moderation decisions. Share ban 278 lists and coordinate responses to abuse across communities. 279 </p> 280 </CardContent> 281 </Card> 282 <Card className="border-gray-800 bg-black"> 283 <CardHeader> 284 <div className="flex items-center gap-2"> 285 <BarChart className="h-5 w-5 text-green-500" /> 286 <CardTitle>Analytics Dashboard</CardTitle> 287 </div> 288 <CardDescription className="text-gray-400">Monitor moderation activity</CardDescription> 289 </CardHeader> 290 <CardContent> 291 <p className="text-sm text-gray-300"> 292 Track moderation actions, abuse patterns, and community reports. 293 </p> 294 </CardContent> 295 </Card> 296 <Card className="border-gray-800 bg-black"> 297 <CardHeader> 298 <div className="flex items-center gap-2"> 299 <Settings className="h-5 w-5 text-purple-500" /> 300 <CardTitle>Customizable Rules</CardTitle> 301 </div> 302 <CardDescription className="text-gray-400">Create rules tailored to your community</CardDescription> 303 </CardHeader> 304 <CardContent> 305 <p className="text-sm text-gray-300"> 306 Use powerful Draupnir Protections to configure the bot for your needs. 307 </p> 308 </CardContent> 309 </Card> 310 <Card className="border-gray-800 bg-black"> 311 <CardHeader> 312 <div className="flex items-center gap-2"> 313 <Eye className="h-5 w-5 text-orange-500" /> 314 <CardTitle>Placeholder TODO</CardTitle> 315 </div> 316 <CardDescription className="text-gray-400">Placeholder TODO</CardDescription> 317 </CardHeader> 318 <CardContent> 319 <p className="text-sm text-gray-300">Meow Meow Meow</p> 320 </CardContent> 321 </Card> 322 </div> 323 </div> 324 </section> 325 <section className="bg-black py-12 md:py-16 lg:py-20"> 326 <div className="container px-4 md:px-6"> 327 <div className="flex flex-col items-center justify-center space-y-4 text-center"> 328 <div className="space-y-2"> 329 <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl"> 330 Ready to Secure Your Matrix Community? 331 </h2> 332 <p className="mx-auto max-w-[700px] text-gray-300 md:text-xl"> 333 Register with your Matrix account and deploy your Draupnir bot in minutes 334 </p> 335 </div> 336 <div className="flex flex-col gap-2 min-[400px]:flex-row"> 337 <Link href="/register"> 338 <Button className="bg-purple-600 text-white hover:bg-purple-700">Register with Matrix</Button> 339 </Link> 340 <Link href="/login"> 341 <Button 342 variant="outline" 343 className="border-purple-500 text-purple-400 hover:bg-purple-950 hover:text-purple-300" 344 > 345 Log In 346 </Button> 347 </Link> 348 </div> 349 </div> 350 </div> 351 </section> 352 </main> 353 <footer className="border-t border-gray-800 bg-black py-6 md:py-8"> 354 <div className="container flex flex-col items-center justify-between gap-4 px-4 md:flex-row md:px-6"> 355 <div className="flex items-center gap-2"> 356 <Shield className="h-5 w-5 text-purple-400" /> 357 <span className="text-sm font-medium">Draupnir4All</span> 358 </div> 359 <p className="text-center text-sm text-gray-500 md:text-left"> 360 © 2025 Draupnir4All. Built for the Matrix ecosystem. 361 </p> 362 <div className="flex gap-4"> 363 <Link className="text-sm font-medium text-gray-500 transition-colors hover:text-white" href="#"> 364 Privacy 365 </Link> 366 <Link className="text-sm font-medium text-gray-500 transition-colors hover:text-white" href="#"> 367 Terms 368 </Link> 369 <Link className="text-sm font-medium text-gray-500 transition-colors hover:text-white" href="#"> 370 Contact 371 </Link> 372 </div> 373 </div> 374 </footer> 375 </div> 376 ) 377 }