[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/category/[slug]/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/thread/[id]/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" isMerged="true" "use client" import * as React from "react" import * as CheckboxPrimitive from "@radix-ui/react-checkbox" import { Check } from "lucide-react" import { cn } from "@/lib/utils" const Checkbox = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Checkbox.displayName = CheckboxPrimitive.Root.displayName export { Checkbox } [V0_FILE]plaintext:file="public/images/genvibe-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/GenVibe%20Logo.jpg-Wp1Rfr7kLjUrqjJKfuelxFIfCy9rh4.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, // GenVibe custom colors genvibe: { primary: "#F24F13", secondary: "#F26430", tertiary: "#F2865E", light: "#F2C1AE", bg: "#F2F2F2", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; /* Improve color accessibility */ @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 15 89% 51%; --primary-foreground: 0 0% 98%; --secondary: 14 89% 57%; --secondary-foreground: 0 0% 98%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 14 79% 66%; --accent-foreground: 0 0% 98%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 15 89% 51%; --radius: 0.5rem; } .dark { --background: 215 28% 17%; --foreground: 0 0% 98%; --card: 215 28% 17%; --card-foreground: 0 0% 98%; --popover: 215 28% 17%; --popover-foreground: 0 0% 98%; --primary: 15 89% 51%; --primary-foreground: 0 0% 98%; --secondary: 14 89% 57%; --secondary-foreground: 0 0% 98%; --muted: 215 28% 25%; --muted-foreground: 240 5% 84.9%; --accent: 14 79% 66%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 215 28% 25%; --input: 215 28% 25%; --ring: 15 89% 51%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/category/[slug]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import Image from "next/image" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { ArrowLeft, ArrowUp, ArrowDown, Bell, Bookmark, Compass, Filter, Home, LogIn, MessageSquare, Plus, Search, TrendingUp, } from "lucide-react" // Import the Footer component import { Footer } from "@/components/footer" export default function CategoryPage({ params }: { params: { slug: string } }) { const [upvotes, setUpvotes] = useState>({ "thread-1": 42, "thread-2": 18, "thread-3": 31, "thread-4": 76, "thread-5": 53, }) const handleUpvote = (id: string) => { setUpvotes((prev) => ({ ...prev, [id]: (prev[id] || 0) + 1, })) } const handleDownvote = (id: string) => { setUpvotes((prev) => ({ ...prev, [id]: Math.max(0, (prev[id] || 0) - 1), })) } // Mock data for threads const threads = [ { id: "thread-1", title: "Welcome to GenVibe!", author: "Sarah", authorAvatar: "/placeholder.svg?height=40&width=40", date: "2 days ago", replies: 24, pinned: true, excerpt: "This is a welcome thread for all new members. Please read the rules before posting.", }, { id: "thread-2", title: "How do I get started with Next.js?", author: "Alex", authorAvatar: "/placeholder.svg?height=40&width=40", date: "1 day ago", replies: 15, pinned: false, excerpt: "I'm new to Next.js and would like some guidance on how to get started with my first project.", }, { id: "thread-3", title: "Sharing my experience with Vercel deployment", author: "Michael", authorAvatar: "/placeholder.svg?height=40&width=40", date: "12 hours ago", replies: 8, pinned: false, excerpt: "I recently deployed my application to Vercel and wanted to share my experience with the community.", }, { id: "thread-4", title: "Best practices for state management in React applications", author: "Emma", authorAvatar: "/placeholder.svg?height=40&width=40", date: "3 days ago", replies: 42, pinned: false, excerpt: "I've been working with React for several years and wanted to share some best practices for state management that I've learned along the way.", }, { id: "thread-5", title: "How to optimize your Next.js application for production", author: "Daniel", authorAvatar: "/placeholder.svg?height=40&width=40", date: "5 days ago", replies: 19, pinned: false, excerpt: "In this thread, I'll share some tips and tricks for optimizing your Next.js application for production deployment.", }, ] // Get category name from slug const categoryNames: Record = { general: "General Discussion", introductions: "Introductions", announcements: "Announcements", } const categoryName = categoryNames[params.slug] || params.slug // Get category color based on slug const getCategoryColor = (slug: string) => { switch (slug) { case "announcements": return "bg-[#F24F13]/20 text-[#F24F13]" case "introductions": return "bg-[#F2865E]/20 text-[#F2865E]" default: return "bg-[#F26430]/20 text-[#F26430]" } } // Mock data for trending topics const trendingTopics = ["Next.js", "React", "Tailwind CSS", "TypeScript", "Vercel"] return (

{/* Sidebar */}

{/* Trending topics at the top */}

{categoryName}

{/* Mobile trending topics */}

{trendingTopics.map((topic) => ( {topic} ))}

Latest Top Hot

{threads.map((thread) => (

{/* Voting */}

{upvotes[thread.id] || 0}

{/* Content */}

{thread.pinned && ( Pinned )}

{thread.title}

{thread.author[0].toUpperCase()} {thread.author} • {thread.date}

{thread.excerpt}

{thread.replies} comments

))}

{/* Mobile new post button */}

{/* Add the Footer component at the end of the main return statement, right before the closing

*/}

) } [V0_FILE]typescriptreact:file="app/thread/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import Image from "next/image" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Textarea } from "@/components/ui/textarea" import { Input } from "@/components/ui/input" import { ArrowLeft, ArrowUp, ArrowDown, Bell, Bookmark, Compass, Home, LogIn, MessageSquare, MoreHorizontal, Plus, Search, Share, TrendingUp, } from "lucide-react" // Import the Footer component import { Footer } from "@/components/footer" export default function ThreadPage({ params }: { params: { id: string } }) { const [upvotes, setUpvotes] = useState({ thread: 42, replies: { "reply-1": 15, "reply-2": 8, "reply-3": 3, }, }) const handleUpvote = (id: string) => { if (id === "thread") { setUpvotes((prev) => ({ ...prev, thread: prev.thread + 1, })) } else { setUpvotes((prev) => ({ ...prev, replies: { ...prev.replies, [id]: (prev.replies[id] || 0) + 1, }, })) } } const handleDownvote = (id: string) => { if (id === "thread") { setUpvotes((prev) => ({ ...prev, thread: prev.thread - 1, })) } else { setUpvotes((prev) => ({ ...prev, replies: { ...prev.replies, [id]: Math.max(0, (prev.replies[id] || 0) - 1), }, })) } } // Mock thread data const thread = { id: params.id, title: "Welcome to GenVibe!", category: "announcements", categoryName: "Announcements", author: "Sarah", authorAvatar: "/placeholder.svg?height=40&width=40", date: "2 days ago", content: "Hello everyone! Welcome to our community forum. This is a place where we can discuss various topics, share ideas, and help each other out. Please make sure to read the community guidelines before posting. Let's keep this a friendly and productive space for everyone. Feel free to introduce yourself in the introductions category. Looking forward to engaging with all of you!", } // Mock replies data const replies = [ { id: "reply-1", author: "Alex", authorAvatar: "/placeholder.svg?height=40&width=40", date: "1 day ago", content: "Thanks for the welcome! I'm excited to be part of this community and looking forward to the discussions.", }, { id: "reply-2", author: "Michael", authorAvatar: "/placeholder.svg?height=40&width=40", date: "1 day ago", content: "Great to be here! I have a lot of questions about Next.js and Vercel, so this forum will be very helpful.", }, { id: "reply-3", author: "Jessica", authorAvatar: "/placeholder.svg?height=40&width=40", date: "12 hours ago", content: "Hello everyone! Just joined and already finding a lot of useful information here. Thanks for creating this space.", }, ] // Mock data for trending topics const trendingTopics = ["Next.js", "React", "Tailwind CSS", "TypeScript", "Vercel"] // Get category color based on category const getCategoryColor = (category: string) => { switch (category) { case "announcements": return "bg-[#F24F13]/20 text-[#F24F13] hover:bg-[#F24F13]/30" case "introductions": return "bg-[#F2865E]/20 text-[#F2865E] hover:bg-[#F2865E]/30" default: return "bg-[#F26430]/20 text-[#F26430] hover:bg-[#F26430]/30" } } return (

{/* Sidebar */}

{/* Trending topics at the top */}

{thread.title}

{/* Mobile trending topics */}

{trendingTopics.map((topic) => ( {topic} ))}

{/* Thread */}

{/* Voting */}

{upvotes.thread}

{/* Content */}

{thread.categoryName}

{thread.title}

{thread.author[0].toUpperCase()} {thread.author} • {thread.date}

{thread.content}

{replies.length} comments

{/* Comment form */}

Comment as guest

</CardContent>
            <CardFooter className="border-t border-[#2a3a4a] py-3 flex justify-end">
              <Button className="bg-gradient-to-r from-[#F24F13] to-[#F26430] hover:from-[#F26430] hover:to-[#F24F13] text-white">
                Comment
              </Button>
            </CardFooter>
          </Card>

{/* Comments */}
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <h2 className="text-lg font-medium">Comments ({replies.length})</h2>
              <div className="flex items-center gap-2 text-sm">
                <span className="text-[#F2C1AE]/70">Sort by:</span>
                <button className="text-[#F24F13] hover:underline">Best</button>
              </div>
            </div>

{replies.map((reply) => (
              <Card key={reply.id} className="bg-[#2a3a4a]/60 border-[#2a3a4a] overflow-hidden">
                <div className="flex">
                  {/* Voting */}
                  <div className="flex flex-col items-center p-4 border-r border-[#2a3a4a] text-[#F2C1AE]/70">
                    <button className="hover:text-[#F24F13] transition-colors" onClick={() => handleUpvote(reply.id)}>
                      <ArrowUp className="h-5 w-5" />
                    </button>
                    <span className="my-1 font-medium">{upvotes.replies[reply.id] || 0}</span>
                    <button className="hover:text-[#F26430] transition-colors" onClick={() => handleDownvote(reply.id)}>
                      <ArrowDown className="h-5 w-5" />
                    </button>
                  </div>

{/* Content */}
                  <div className="flex-1">
                    <CardHeader className="pb-2">
                      <div className="flex items-center gap-2 text-sm text-[#F2C1AE]/70">
                        <Avatar className="h-5 w-5 border border-[#2a3a4a]">
                          <AvatarImage src={reply.authorAvatar} alt={reply.author} />
                          <AvatarFallback className="text-xs bg-[#F26430] text-white">
                            {reply.author[0].toUpperCase()}
                          </AvatarFallback>
                        </Avatar>
                        <span className="font-medium text-[#F2C1AE]">{reply.author}</span>
                        <span>•</span>
                        <span>{reply.date}</span>
                      </div>
                    </CardHeader>
                    <CardContent>
                      <p className="text-[#F2C1AE]">{reply.content}</p>

<div className="flex items-center gap-4 mt-4 text-sm text-[#F2C1AE]/50">
                        <button className="hover:text-[#F2C1AE] transition-colors">Reply</button>
                        <button className="hover:text-[#F2C1AE] transition-colors">Share</button>
                        <button className="hover:text-[#F2C1AE] transition-colors">Report</button>
                      </div>
                    </CardContent>
                  </div>
                </div>
              </Card>
            ))}

<div className="flex justify-center mt-6">
              <Button
                variant="outline"
                className="border-[#2a3a4a] text-[#F2C1AE]/70 hover:text-[#F2C1AE] hover:bg-[#2a3a4a]"
              >
                Load More Comments
              </Button>
            </div>
          </div>
        </main>

{/* Mobile new post button */}
        <div className="md:hidden fixed bottom-4 right-4">
          <Button className="h-12 w-12 rounded-full bg-gradient-to-r from-[#F24F13] to-[#F26430] hover:from-[#F26430] hover:to-[#F24F13] text-white shadow-lg">
            <Plus className="h-6 w-6" />
          </Button>
        </div>
        <Footer />
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Checkbox } from "@/components/ui/checkbox"
import { ArrowLeft, Github, Home, Mail } from "lucide-react"
// Import the Footer component
import { Footer } from "@/components/footer"

export default function LoginPage() {
  const [activeTab, setActiveTab] = useState("login")

return (
    <div className="flex min-h-screen bg-[#1e2a36] text-white">
      <div className="flex-1 flex flex-col">
        <header className="sticky top-0 z-10 bg-[#1e2a36]/80 backdrop-blur-md border-b border-[#2a3a4a] p-4 flex justify-between items-center">
          <Link href="/" className="flex items-center space-x-2">
            <ArrowLeft className="h-5 w-5 text-[#F2C1AE]/70" />
            <Image src="/images/genvibe-logo.png" alt="GenVibe Logo" width={100} height={24} className="h-7 w-auto" />
          </Link>
          <Link href="/">
            <Button variant="ghost" className="text-[#F2C1AE]/70 hover:text-[#F2C1AE] hover:bg-[#2a3a4a]/50">
              <Home className="h-5 w-5" />
            </Button>
          </Link>
        </header>

<main className="flex items-center justify-center flex-1 p-4">
          <Card className="w-full max-w-md bg-[#2a3a4a]/60 border-[#2a3a4a]">
            <CardHeader>
              <CardTitle className="text-xl bg-gradient-to-r from-[#F24F13] to-[#F26430] bg-clip-text text-transparent">
                Welcome to GenVibe
              </CardTitle>
              <CardDescription className="text-[#F2C1AE]/70">
                Sign in to your account or create a new one
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Tabs defaultValue="login" onValueChange={setActiveTab} className="w-full">
                <TabsList className="grid w-full grid-cols-2 bg-[#1e2a36]/50">
                  <TabsTrigger
                    value="login"
                    className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-[#F24F13] data-[state=active]:to-[#F26430] data-[state=active]:text-white"
                  >
                    Login
                  </TabsTrigger>
                  <TabsTrigger
                    value="register"
                    className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-[#F24F13] data-[state=active]:to-[#F26430] data-[state=active]:text-white"
                  >
                    Register
                  </TabsTrigger>
                </TabsList>
                <TabsContent value="login" className="mt-6">
                  <div className="space-y-4">
                    <Button
                      variant="outline"
                      className="w-full border-[#2a3a4a] text-[#F2C1AE]/70 hover:bg-[#2a3a4a] hover:text-[#F2C1AE]"
                    >
                      <Github className="h-4 w-4 mr-2" />
                      Continue with GitHub
                    </Button>
                    <Button
                      variant="outline"
                      className="w-full border-[#2a3a4a] text-[#F2C1AE]/70 hover:bg-[#2a3a4a] hover:text-[#F2C1AE]"
                    >
                      <Mail className="h-4 w-4 mr-2" />
                      Continue with Google
                    </Button>

<div className="relative">
                      <div className="absolute inset-0 flex items-center">
                        <span className="w-full border-t border-[#2a3a4a]" />
                      </div>
                      <div className="relative flex justify-center text-xs">
                        <span className="bg-[#2a3a4a] px-2 text-[#F2C1AE]/50">OR CONTINUE WITH</span>
                      </div>
                    </div>

<form className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="email" className="text-[#F2C1AE]/70">
                          Email
                        </Label>
                        <Input
                          id="email"
                          type="email"
                          placeholder="m@example.com"
                          className="bg-[#1e2a36]/50 border-[#2a3a4a] text-white focus:border-[#F26430]"
                          required
                        />
                      </div>
                      <div className="space-y-2">
                        <div className="flex items-center justify-between">
                          <Label htmlFor="password" className="text-[#F2C1AE]/70">
                            Password
                          </Label>
                          <Link href="#" className="text-sm text-[#F24F13] hover:underline">
                            Forgot password?
                          </Link>
                        </div>
                        <Input
                          id="password"
                          type="password"
                          className="bg-[#1e2a36]/50 border-[#2a3a4a] text-white focus:border-[#F26430]"
                          required
                        />
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox
                          id="remember"
                          className="border-[#2a3a4a] data-[state=checked]:bg-[#F24F13] data-[state=checked]:border-[#F24F13]"
                        />
                        <label
                          htmlFor="remember"
                          className="text-sm text-[#F2C1AE]/70 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                        >
                          Remember me
                        </label>
                      </div>
                      <Button
                        type="submit"
                        className="w-full bg-gradient-to-r from-[#F24F13] to-[#F26430] hover:from-[#F26430] hover:to-[#F24F13] text-white"
                      >
                        Login
                      </Button>
                    </form>
                  </div>
                </TabsContent>
                <TabsContent value="register" className="mt-6">
                  <div className="space-y-4">
                    <Button
                      variant="outline"
                      className="w-full border-[#2a3a4a] text-[#F2C1AE]/70 hover:bg-[#2a3a4a] hover:text-[#F2C1AE]"
                    >
                      <Github className="h-4 w-4 mr-2" />
                      Sign up with GitHub
                    </Button>
                    <Button
                      variant="outline"
                      className="w-full border-[#2a3a4a] text-[#F2C1AE]/70 hover:bg-[#2a3a4a] hover:text-[#F2C1AE]"
                    >
                      <Mail className="h-4 w-4 mr-2" />
                      Sign up with Google
                    </Button>

<form className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="register-username" className="text-[#F2C1AE]/70">
                          Username
                        </Label>
                        <Input
                          id="register-username"
                          placeholder="johndoe"
                          className="bg-[#1e2a36]/50 border-[#2a3a4a] text-white focus:border-[#F26430]"
                          required
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="register-email" className="text-[#F2C1AE]/70">
                          Email
                        </Label>
                        <Input
                          id="register-email"
                          type="email"
                          placeholder="m@example.com"
                          className="bg-[#1e2a36]/50 border-[#2a3a4a] text-white focus:border-[#F26430]"
                          required
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="register-password" className="text-[#F2C1AE]/70">
                          Password
                        </Label>
                        <Input
                          id="register-password"
                          type="password"
                          className="bg-[#1e2a36]/50 border-[#2a3a4a] text-white focus:border-[#F26430]"
                          required
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="register-confirm" className="text-[#F2C1AE]/70">
                          Confirm Password
                        </Label>
                        <Input
                          id="register-confirm"
                          type="password"
                          className="bg-[#1e2a36]/50 border-[#2a3a4a] text-white focus:border-[#F26430]"
                          required
                        />
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox
                          id="terms"
                          className="border-[#2a3a4a] data-[state=checked]:bg-[#F24F13] data-[state=checked]:border-[#F24F13]"
                        />
                        <label
                          htmlFor="terms"
                          className="text-sm text-[#F2C1AE]/70 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                        >
                          I agree to the{" "}
                          <Link href="#" className="text-[#F24F13] hover:underline">
                            Terms of Service
                          </Link>{" "}
                          and{" "}
                          <Link href="#" className="text-[#F24F13] hover:underline">
                            Privacy Policy
                          </Link>
                        </label>
                      </div>
                      <Button
                        type="submit"
                        className="w-full bg-gradient-to-r from-[#F24F13] to-[#F26430] hover:from-[#F26430] hover:to-[#F24F13] text-white"
                      >
                        Register
                      </Button>
                    </form>
                  </div>
                </TabsContent>
              </Tabs>
            </CardContent>
            <CardFooter className="flex flex-col border-t border-[#2a3a4a] pt-4">
              <div className="text-sm text-[#F2C1AE]/70 text-center">
                {activeTab === "login" ? (
                  <p>
                    Don't have an account?{" "}
                    <button className="text-[#F24F13] hover:underline" onClick={() => setActiveTab("register")}>
                      Sign up
                    </button>
                  </p>
                ) : (
                  <p>
                    Already have an account?{" "}
                    <button className="text-[#F24F13] hover:underline" onClick={() => setActiveTab("login")}>
                      Sign in
                    </button>
                  </p>
                )}
              </div>
            </CardFooter>
          </Card>
        </main>
        <Footer />
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  ArrowUp,
  ArrowDown,
  Bell,
  Bookmark,
  Compass,
  Home,
  LogIn,
  MessageSquare,
  Plus,
  Search,
  TrendingUp,
  Users,
} from "lucide-react"

// Import the Footer component
import { Footer } from "@/components/footer"

export default function HomePage() {
  const [activeTab, setActiveTab] = useState("all")
  const [upvotes, setUpvotes] = useState<Record<string, number>>({
    "thread-1": 42,
    "thread-2": 18,
    "thread-3": 31,
    "thread-4": 12,
    "thread-5": 37,
  })

// Add state for loading more content
  const [showMorePosts, setShowMorePosts] = useState(false)

const handleUpvote = (id: string) => {
    setUpvotes((prev) => ({
      ...prev,
      [id]: (prev[id] || 0) + 1,
    }))
  }

const handleDownvote = (id: string) => {
    setUpvotes((prev) => ({
      ...prev,
      [id]: Math.max(0, (prev[id] || 0) - 1),
    }))
  }

// Mock data for categories
  const categories = [
    {
      id: "general",
      name: "General Discussion",
      description: "Talk about anything related to our community",
      threads: 124,
      posts: 1453,
      icon: <MessageSquare className="h-5 w-5" />,
    },
    {
      id: "introductions",
      name: "Introductions",
      description: "New to the forum? Introduce yourself here!",
      threads: 87,
      posts: 342,
      icon: <Users className="h-5 w-5" />,
    },
    {
      id: "announcements",
      name: "Announcements",
      description: "Important updates and announcements",
      threads: 32,
      posts: 156,
      icon: <TrendingUp className="h-5 w-5" />,
    },
  ]

// Mock data for all discussions
  const allDiscussions = [
    {
      id: "thread-1",
      title: "Welcome to GenVibe!",
      category: "announcements",
      categoryName: "Announcements",
      author: "Sarah",
      authorAvatar: "/placeholder.svg?height=40&width=40",
      date: "2 days ago",
      replies: 24,
      pinned: true,
      excerpt: "This is a welcome thread for all new members. Please read the rules before posting.",
    },
    {
      id: "thread-2",
      title: "How do I get started with Next.js?",
      category: "general",
      categoryName: "General Discussion",
      author: "Alex",
      authorAvatar: "/placeholder.svg?height=40&width=40",
      date: "1 day ago",
      replies: 15,
      pinned: false,
      excerpt: "I'm new to Next.js and would like some guidance on how to get started with my first project.",
    },
    {
      id: "thread-3",
      title: "Sharing my experience with Vercel deployment",
      category: "general",
      categoryName: "General Discussion",
      author: "Michael",
      authorAvatar: "/placeholder.svg?height=40&width=40",
      date: "12 hours ago",
      replies: 8,
      pinned: false,
      excerpt: "I recently deployed my application to Vercel and wanted to share my experience with the community.",
    },
    {
      id: "thread-4",
      title: "Introducing myself to the community",
      category: "introductions",
      categoryName: "Introductions",
      author: "Jessica",
      authorAvatar: "/placeholder.svg?height=40&width=40",
      date: "3 hours ago",
      replies: 5,
      pinned: false,
      excerpt:
        "Hello everyone! I'm new here and excited to be part of this community. I'm a frontend developer with 2 years of experience.",
    },
    {
      id: "thread-5",
      title: "Important changes to our community guidelines",
      category: "announcements",
      categoryName: "Announcements",
      author: "David",
      authorAvatar: "/placeholder.svg?height=40&width=40",
      date: "1 day ago",
      replies: 19,
      pinned: true,
      excerpt:
        "We've updated our community guidelines to ensure a better experience for everyone. Please take a moment to review them.",
    },
  ]

// Add additional discussions that will show when "Load More" is clicked
  const additionalDiscussions = [
    {
      id: "thread-6",
      title: "The ultimate guide to creating viral TikTok content",
      category: "social-media",
      categoryName: "Social Media",
      author: "TikTokCreator",
      authorAvatar: "/placeholder.svg?height=40&width=40",
      date: "5 hours ago",
      replies: 37,
      pinned: false,
      excerpt:
        "Want to go viral on TikTok? I've analyzed hundreds of trending videos and discovered these key patterns that can help boost your content.",
    },
    {
      id: "thread-7",
      title: "Is BeReal actually keeping it real? Let's discuss",
      category: "social-media",
      categoryName: "Social Media",
      author: "AuthenticVibes",
      authorAvatar: "/placeholder.svg?height=40&width=40",
      date: "1 day ago",
      replies: 42,
      pinned: false,
      excerpt:
        "BeReal promises authenticity, but are people really showing their unfiltered lives? Let's talk about the reality behind the app.",
    },
    {
      id: "thread-8",
      title: "Sustainable fashion brands that don't break the bank",
      category: "lifestyle",
      categoryName: "Lifestyle",
      author: "EcoFashionista",
      authorAvatar: "/placeholder.svg?height=40&width=40",
      date: "2 days ago",
      replies: 29,
      pinned: false,
      excerpt:
        "Looking for sustainable fashion that's actually affordable? I've compiled a list of brands that are both eco-friendly and budget-conscious.",
    },
  ]

// Update the trending topics with more Gen Z relevant topics
  const trendingTopics = [
    "BeReal",
    "Spotify Wrapped",
    "Sustainable Fashion",
    "AI Tools",
    "Mental Health",
    "Side Hustles",
    "TikTok",
  ]

// Modify the handleLoadMore function
  const handleLoadMore = () => {
    setShowMorePosts(true)
  }

// Mock data for popular posts
  const popularPosts = [
    {
      id: "popular-1",
      title: "How I built a 6-figure business on Etsy while in college",
      author: "SideHustleQueen",
      authorAvatar: "/placeholder.svg?height=40&width=40",
      upvotes: 156,
      replies: 42,
      date: "3 days ago",
    },
    {
      id: "popular-2",
      title: "The truth about 'That Girl' morning routines nobody talks about",
      author: "RealityCheck",
      authorAvatar: "/placeholder.svg?height=40&width=40",
      upvotes: 124,
      replies: 37,
      date: "2 days ago",
    },
    {
      id: "popular-3",
      title: "I deleted all social media for 30 days. Here's what happened to my mental health",
      author: "DigitalDetoxer",
      authorAvatar: "/placeholder.svg?height=40&width=40",
      upvotes: 98,
      replies: 29,
      date: "1 day ago",
    },
    {
      id: "popular-4",
      title: "Thrifting hacks that helped me build my dream wardrobe for under $200",
      author: "ThriftFlip",
      authorAvatar: "/placeholder.svg?height=40&width=40",
      upvotes: 87,
      replies: 31,
      date: "4 days ago",
    },
  ]

// Mock data for bookmarks
  const bookmarks = [
    {
      id: "bookmark-1",
      title: "Complete guide to Next.js App Router",
      author: "NextExpert",
      authorAvatar: "/placeholder.svg?height=40&width=40",
      category: "Tutorials",
      date: "Saved 2 days ago",
    },
    {
      id: "bookmark-2",
      title: "Understanding React Server Components",
      author: "ReactDev",
      authorAvatar: "/placeholder.svg?height=40&width=40",
      category: "Guides",
      date: "Saved 5 days ago",
    },
  ]

// Mock data for notifications
  const notifications = [
    {
      id: "notif-1",
      type: "reply",
      author: "Emma",
      authorAvatar: "/placeholder.svg?height=40&width=40",
      content: "replied to your post",
      thread: "How do I get started with Next.js?",
      time: "2 hours ago",
      read: false,
    },
    {
      id: "notif-2",
      type: "mention",
      author: "Daniel",
      authorAvatar: "/placeholder.svg?height=40&width=40",
      content: "mentioned you in a comment",
      thread: "The future of web development",
      time: "1 day ago",
      read: true,
    },
    {
      id: "notif-3",
      type: "upvote",
      author: "Alex",
      authorAvatar: "/placeholder.svg?height=40&width=40",
      content: "upvoted your post",
      thread: "Sharing my experience with Vercel deployment",
      time: "3 days ago",
      read: true,
    },
  ]

return (
    <div className="flex min-h-screen bg-[#1e2a36] text-white">
      {/* Sidebar */}
      <div className="hidden md:flex w-64 flex-col bg-[#1e2a36]/80 backdrop-blur-sm border-r border-[#2a3a4a]">
        <div className="p-4 border-b border-[#2a3a4a] flex justify-between items-center">
          <Link href="/" className="flex items-center space-x-2">
            <Image src="/images/genvibe-logo.png" alt="GenVibe Logo" width={40} height={40} className="h-8 w-auto" />
            <span className="text-xl font-bold text-white">GenVibe</span>
          </Link>
        </div>

{/* Trending topics at the top */}
        <div className="p-4 border-b border-[#2a3a4a]">
          <h3 className="text-xs font-medium uppercase text-[#F2C1AE] tracking-wider mb-2">Trending</h3>
          <div className="flex flex-wrap gap-2">
            {trendingTopics.map((topic) => (
              <Link
                key={topic}
                href={`/topic/${topic.toLowerCase().replace(/\s+/g, "-")}`}
                className="text-xs px-2 py-1 rounded-full bg-[#2a3a4a] text-white hover:bg-[#F24F13]/20 hover:text-white transition-colors"
              >
                {topic}
              </Link>
            ))}
          </div>
        </div>

<nav className="flex-1 p-4 space-y-1">
          <Link href="/" className="flex items-center space-x-2 px-3 py-2 rounded-md bg-[#F24F13]/20 text-[#F2C1AE]">
            <Home className="h-4 w-4" />
            <span>Home</span>
          </Link>
          <button
            onClick={() => setActiveTab("popular")}
            className={`w-full flex items-center space-x-2 px-3 py-2 rounded-md text-[#F2C1AE]/80 hover:text-[#F2C1AE] hover:bg-[#F24F13]/10 transition-colors ${activeTab === "popular" ? "bg-[#F24F13]/10 text-[#F2C1AE]" : ""}`}
          >
            <TrendingUp className="h-4 w-4" />
            <span>Popular</span>
          </button>
          <button
            onClick={() => setActiveTab("explore")}
            className={`w-full flex items-center space-x-2 px-3 py-2 rounded-md text-[#F2C1AE]/80 hover:text-[#F2C1AE] hover:bg-[#F24F13]/10 transition-colors ${activeTab === "explore" ? "bg-[#F24F13]/10 text-[#F2C1AE]" : ""}`}
          >
            <Compass className="h-4 w-4" />
            <span>Explore</span>
          </button>
          <button
            onClick={() => setActiveTab("bookmarks")}
            className={`w-full flex items-center space-x-2 px-3 py-2 rounded-md text-[#F2C1AE]/80 hover:text-[#F2C1AE] hover:bg-[#F24F13]/10 transition-colors ${activeTab === "bookmarks" ? "bg-[#F24F13]/10 text-[#F2C1AE]" : ""}`}
          >
            <Bookmark className="h-4 w-4" />
            <span>Bookmarks</span>
          </button>
          <button
            onClick={() => setActiveTab("notifications")}
            className={`w-full flex items-center space-x-2 px-3 py-2 rounded-md text-[#F2C1AE]/80 hover:text-[#F2C1AE] hover:bg-[#F24F13]/10 transition-colors ${activeTab === "notifications" ? "bg-[#F24F13]/10 text-[#F2C1AE]" : ""}`}
          >
            <Bell className="h-4 w-4" />
            <span>Notifications</span>
            <Badge className="ml-auto bg-[#F24F13] text-white text-xs">3</Badge>
          </button>
        </nav>

{/* Main content */}
      <div className="flex-1 overflow-auto">
        <header className="sticky top-0 z-10 bg-[#1e2a36]/80 backdrop-blur-md border-b border-[#2a3a4a] p-4 flex justify-between items-center">
          <div className="flex items-center space-x-4">
            {/* Update the mobile header logo to include text */}
            <div className="md:hidden flex items-center">
              <Image src="/images/genvibe-logo.png" alt="GenVibe Logo" width={32} height={32} className="h-7 w-auto" />
              <span className="ml-2 text-lg font-bold text-white">GenVibe</span>
            </div>
            <div className="relative hidden sm:block max-w-md w-full">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-[#F2C1AE]/50" />
              <Input
                type="search"
                placeholder="Search discussions..."
                className="w-full bg-[#2a3a4a]/80 border-[#2a3a4a] pl-9 text-sm text-[#F2C1AE] placeholder:text-[#F2C1AE]/50 focus:border-[#F26430]"
              />
            </div>
          </div>
          <div className="flex space-x-2">
            <Button
              variant="outline"
              className="md:hidden border-[#2a3a4a] text-[#F2C1AE]/80 hover:text-[#F2C1AE] hover:bg-[#2a3a4a]"
            >
              <Search className="h-4 w-4" />
            </Button>
            <Link href="/login">
              <Button
                variant="outline"
                className="border-[#2a3a4a] text-[#F2C1AE]/80 hover:text-[#F2C1AE] hover:bg-[#2a3a4a]"
              >
                <LogIn className="h-4 w-4 mr-2" />
                <span className="hidden sm:inline">Login</span>
              </Button>
            </Link>
          </div>
        </header>

<main className="p-4 md:p-6 max-w-5xl mx-auto">
          {/* Mobile trending topics */}
          <div className="md:hidden mb-6 overflow-x-auto pb-2">
            <div className="flex gap-2 w-max">
              {trendingTopics.map((topic) => (
                <Link
                  key={topic}
                  href={`/topic/${topic.toLowerCase().replace(/\s+/g, "-")}`}
                  className="text-xs px-2 py-1 rounded-full bg-[#2a3a4a] text-white hover:bg-[#F24F13]/20 hover:text-white transition-colors whitespace-nowrap"
                >
                  {topic}
                </Link>
              ))}
            </div>
          </div>

{/* Mobile navigation */}
          <div className="md:hidden mb-6 flex overflow-x-auto space-x-2 pb-2">
            <Button
              variant={activeTab === "all" ? "default" : "outline"}
              onClick={() => setActiveTab("all")}
              className={activeTab === "all" ? "bg-[#F24F13] text-white" : "border-[#2a3a4a] text-[#F2C1AE]/80"}
              size="sm"
            >
              <Home className="h-4 w-4 mr-2" />
              Home
            </Button>
            <Button
              variant={activeTab === "popular" ? "default" : "outline"}
              onClick={() => setActiveTab("popular")}
              className={activeTab === "popular" ? "bg-[#F24F13] text-white" : "border-[#2a3a4a] text-[#F2C1AE]/80"}
              size="sm"
            >
              <TrendingUp className="h-4 w-4 mr-2" />
              Popular
            </Button>
            <Button
              variant={activeTab === "explore" ? "default" : "outline"}
              onClick={() => setActiveTab("explore")}
              className={activeTab === "explore" ? "bg-[#F24F13] text-white" : "border-[#2a3a4a] text-[#F2C1AE]/80"}
              size="sm"
            >
              <Compass className="h-4 w-4 mr-2" />
              Explore
            </Button>
            <Button
              variant={activeTab === "bookmarks" ? "default" : "outline"}
              onClick={() => setActiveTab("bookmarks")}
              className={activeTab === "bookmarks" ? "bg-[#F24F13] text-white" : "border-[#2a3a4a] text-[#F2C1AE]/80"}
              size="sm"
            >
              <Bookmark className="h-4 w-4 mr-2" />
              Saved
            </Button>
            <Button
              variant={activeTab === "notifications" ? "default" : "outline"}
              onClick={() => setActiveTab("notifications")}
              className={
                activeTab === "notifications" ? "bg-[#F24F13] text-white" : "border-[#2a3a4a] text-[#F2C1AE]/80"
              }
              size="sm"
            >
              <Bell className="h-4 w-4 mr-2" />
              Alerts
            </Button>
          </div>

{/* Home Tab */}
          {(activeTab === "all" || activeTab === "home") && (
            <Tabs defaultValue="all" className="mb-8">
              <TabsList className="bg-[#2a3a4a]/80 p-1 mb-6">
                <TabsTrigger value="all" className="data-[state=active]:bg-[#F24F13] data-[state=active]:text-white">
                  All Discussions
                </TabsTrigger>
                <TabsTrigger
                  value="categories"
                  className="data-[state=active]:bg-[#F24F13] data-[state=active]:text-white"
                >
                  Categories
                </TabsTrigger>
              </TabsList>

<TabsContent value="all" className="space-y-6">
                <div className="grid gap-4">
                  {allDiscussions.map((thread) => (
                    <Card
                      key={thread.id}
                      className="bg-[#2a3a4a]/60 border-[#2a3a4a] hover:border-[#F26430]/50 transition-colors overflow-hidden"
                    >
                      <div className="flex">
                        {/* Voting */}
                        <div className="flex flex-col items-center p-4 border-r border-[#2a3a4a] text-[#F2C1AE]/70">
                          <button
                            className="hover:text-[#F24F13] transition-colors"
                            onClick={() => handleUpvote(thread.id)}
                          >
                            <ArrowUp className="h-5 w-5" />
                          </button>
                          <span className="my-1 font-medium">{upvotes[thread.id] || 0}</span>
                          <button
                            className="hover:text-[#F26430] transition-colors"
                            onClick={() => handleDownvote(thread.id)}
                          >
                            <ArrowDown className="h-5 w-5" />
                          </button>
                        </div>

{/* Content */}
                        <div className="flex-1">
                          <CardHeader className="pb-2">
                            <div className="flex flex-wrap items-center gap-2 mb-1">
                              {thread.pinned && (
                                <Badge
                                  variant="outline"
                                  className="text-xs font-normal border-[#2a3a4a] text-[#F2C1AE]/70 px-1.5 py-0"
                                >
                                  Pinned
                                </Badge>
                              )}
                              <Badge
                                className={`text-xs font-normal px-1.5 py-0 ${
                                  thread.category === "announcements"
                                    ? "bg-[#F24F13]/20 text-[#F24F13] hover:bg-[#F24F13]/30"
                                    : thread.category === "introductions"
                                      ? "bg-[#F2865E]/20 text-[#F2865E] hover:bg-[#F2865E]/30"
                                      : "bg-[#F26430]/20 text-[#F26430] hover:bg-[#F26430]/30"
                                }`}
                              >
                                {thread.categoryName}
                              </Badge>
                            </div>

<Link
                              href={`/thread/${thread.id}`}
                              className="text-lg font-medium hover:underline line-clamp-1 text-white"
                            >
                              {thread.title}
                            </Link>

<div className="flex items-center gap-2 mt-1 text-sm text-[#F2C1AE]/70">
                              <Avatar className="h-5 w-5 border border-[#2a3a4a]">
                                <AvatarImage src={thread.authorAvatar} alt={thread.author} />
                                <AvatarFallback className="text-xs bg-[#F26430] text-white">
                                  {thread.author[0].toUpperCase()}
                                </AvatarFallback>
                              </Avatar>
                              <span>{thread.author}</span>
                              <span>•</span>
                              <span>{thread.date}</span>
                            </div>
                          </CardHeader>
                          <CardContent>
                            <p className="text-sm text-[#F2C1AE] line-clamp-2">{thread.excerpt}</p>
                            <div className="flex items-center mt-4 text-sm text-[#F2C1AE]/50">
                              <MessageSquare className="h-4 w-4 mr-1" />
                              <span>{thread.replies} comments</span>
                            </div>
                          </CardContent>
                        </div>
                      </div>
                    </Card>
                  ))}
                </div>

{showMorePosts && (
                  <div className="grid gap-4 mt-6">
                    {additionalDiscussions.map((thread) => (
                      <Card
                        key={thread.id}
                        className="bg-[#2a3a4a]/60 border-[#2a3a4a] hover:border-[#F26430]/50 transition-colors overflow-hidden"
                      >
                        <div className="flex">
                          {/* Voting */}
                          <div className="flex flex-col items-center p-4 border-r border-[#2a3a4a] text-[#F2C1AE]/70">
                            <button
                              className="hover:text-[#F24F13] transition-colors"
                              onClick={() => handleUpvote(thread.id)}
                            >
                              <ArrowUp className="h-5 w-5 md:h-6 md:w-6" />
                            </button>
                            <span className="my-1 font-medium text-lg md:text-xl">
                              {upvotes[thread.id] || Math.floor(Math.random() * 50) + 10}
                            </span>
                            <button
                              className="hover:text-[#F26430] transition-colors"
                              onClick={() => handleDownvote(thread.id)}
                            >
                              <ArrowDown className="h-5 w-5 md:h-6 md:w-6" />
                            </button>
                          </div>

{/* Content */}
                          <div className="flex-1">
                            <CardHeader className="pb-2">
                              <div className="flex flex-wrap items-center gap-2 mb-1">
                                {thread.pinned && (
                                  <Badge
                                    variant="outline"
                                    className="text-xs font-normal border-[#2a3a4a] text-[#F2C1AE]/70 px-1.5 py-0"
                                  >
                                    Pinned
                                  </Badge>
                                )}
                                <Badge
                                  className={`text-xs font-normal px-1.5 py-0 ${
                                    thread.category === "announcements"
                                      ? "bg-[#F24F13]/20 text-[#F24F13] hover:bg-[#F24F13]/30"
                                      : thread.category === "introductions"
                                        ? "bg-[#F2865E]/20 text-[#F2865E] hover:bg-[#F2865E]/30"
                                        : thread.category === "social-media"
                                          ? "bg-[#F26430]/20 text-[#F26430] hover:bg-[#F26430]/30"
                                          : "bg-[#F2C1AE]/20 text-[#F2C1AE] hover:bg-[#F2C1AE]/30"
                                  }`}
                                >
                                  {thread.categoryName}
                                </Badge>
                              </div>

<Link
                                href={`/thread/${thread.id}`}
                                className="text-lg font-medium hover:underline line-clamp-1 text-white"
                              >
                                {thread.title}
                              </Link>

<div className="flex items-center gap-2 mt-1 text-sm text-[#F2C1AE]/70">
                                <Avatar className="h-5 w-5 border border-[#2a3a4a]">
                                  <AvatarImage src={thread.authorAvatar} alt={thread.author} />
                                  <AvatarFallback className="text-xs bg-[#F26430] text-white">
                                    {thread.author[0].toUpperCase()}
                                  </AvatarFallback>
                                </Avatar>
                                <span>{thread.author}</span>
                                <span>•</span>
                                <span>{thread.date}</span>
                              </div>
                            </CardHeader>
                            <CardContent>
                              <p className="text-sm text-[#F2C1AE] line-clamp-2">{thread.excerpt}</p>
                              <div className="flex items-center mt-4 text-sm text-[#F2C1AE]/50">
                                <MessageSquare className="h-4 w-4 mr-1" />
                                <span>{thread.replies} comments</span>
                              </div>
                            </CardContent>
                          </div>
                        </div>
                      </Card>
                    ))}
                  </div>
                )}

<div className="flex justify-center">
                  <Button
                    variant="outline"
                    className="border-[#2a3a4a] text-[#F2C1AE]/70 hover:text-[#F2C1AE] hover:bg-[#2a3a4a]"
                    onClick={handleLoadMore}
                  >
                    {showMorePosts ? "Show Less" : "Load More"}
                  </Button>
                </div>
              </TabsContent>

<TabsContent value="categories" className="space-y-6">
                <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                  {categories.map((category) => (
                    <Card
                      key={category.id}
                      className="bg-[#2a3a4a]/60 border-[#2a3a4a] hover:border-[#F26430]/50 transition-colors h-full"
                    >
                      <CardHeader className="flex flex-row items-center gap-4 pb-2">
                        <div
                          className={`rounded-md p-2 ${
                            category.id === "announcements"
                              ? "bg-[#F24F13]/20 text-[#F24F13]"
                              : category.id === "introductions"
                                ? "bg-[#F2865E]/20 text-[#F2865E]"
                                : "bg-[#F26430]/20 text-[#F26430]"
                          }`}
                        >
                          {category.icon}
                        </div>
                        <div className="space-y-1">
                          <Link
                            href={`/category/${category.id}`}
                            className="text-lg font-medium hover:underline text-white"
                          >
                            {category.name}
                          </Link>
                          <p className="text-[#F2C1AE]/70 text-sm">{category.description}</p>
                        </div>
                      </CardHeader>
                      <CardContent className="pb-4">
                        <div className="flex items-center text-sm text-[#F2C1AE]/50">
                          <span>{category.threads} threads</span>
                          <span className="mx-2">•</span>
                          <span>{category.posts} posts</span>
                        </div>
                        <Link
                          href={`/category/${category.id}`}
                          className="mt-4 inline-block text-sm text-[#F24F13] hover:text-[#F26430] transition-colors"
                        >
                          Browse category →
                        </Link>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </TabsContent>
            </Tabs>
          )}

{/* Popular Tab */}
          {activeTab === "popular" && (
            <div className="space-y-6">
              <h2 className="text-xl font-bold text-white">Popular Discussions</h2>
              <div className="grid gap-4">
                {popularPosts.map((post) => (
                  <Card
                    key={post.id}
                    className="bg-[#2a3a4a]/60 border-[#2a3a4a] hover:border-[#F26430]/50 transition-colors overflow-hidden"
                  >
                    <div className="flex">
                      {/* Voting */}
                      <div className="flex flex-col items-center p-4 border-r border-[#2a3a4a] text-[#F2C1AE]/70">
                        <button className="hover:text-[#F24F13] transition-colors">
                          <ArrowUp className="h-5 w-5" />
                        </button>
                        <span className="my-1 font-medium">{post.upvotes}</span>
                        <button className="hover:text-[#F26430] transition-colors">
                          <ArrowDown className="h-5 w-5" />
                        </button>
                      </div>

{/* Content */}
                      <div className="flex-1">
                        <CardHeader className="pb-2">
                          <Link
                            href={`/thread/${post.id}`}
                            className="text-lg font-medium hover:underline line-clamp-1 text-white"
                          >
                            {post.title}
                          </Link>

<div className="flex items-center gap-2 mt-1 text-sm text-[#F2C1AE]/70">
                            <Avatar className="h-5 w-5 border border-[#2a3a4a]">
                              <AvatarImage src={post.authorAvatar} alt={post.author} />
                              <AvatarFallback className="text-xs bg-[#F26430] text-white">
                                {post.author[0].toUpperCase()}
                              </AvatarFallback>
                            </Avatar>
                            <span>{post.author}</span>
                            <span>•</span>
                            <span>{post.date}</span>
                          </div>
                        </CardHeader>
                        <CardContent>
                          <div className="flex items-center mt-2 text-sm text-[#F2C1AE]/50">
                            <Badge className="bg-[#F24F13]/20 text-[#F24F13] mr-2">Trending</Badge>
                            <MessageSquare className="h-4 w-4 mr-1" />
                            <span>{post.replies} comments</span>
                          </div>
                        </CardContent>
                      </div>
                    </div>
                  </Card>
                ))}
              </div>

<div className="flex justify-center">
                <Button
                  variant="outline"
                  className="border-[#2a3a4a] text-[#F2C1AE]/70 hover:text-[#F2C1AE] hover:bg-[#2a3a4a]"
                >
                  Load More
                </Button>
              </div>
            </div>
          )}

{/* Explore Tab */}
          {activeTab === "explore" && (
            <div className="space-y-6">
              <h2 className="text-xl font-bold text-white">Explore Topics</h2>

<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                <Card className="bg-[#2a3a4a]/60 border-[#2a3a4a] hover:border-[#F26430]/50 transition-colors">
                  <CardHeader className="pb-2">
                    <h3 className="text-lg font-medium text-white">Side Hustles</h3>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-[#F2C1AE]/70 mb-4">Discussions about making money on your own terms.</p>
                    <div className="flex flex-wrap gap-2">
                      <Badge className="bg-[#F24F13]/20 text-[#F24F13]">Etsy</Badge>
                      <Badge className="bg-[#F26430]/20 text-[#F26430]">Dropshipping</Badge>
                      <Badge className="bg-[#F2865E]/20 text-[#F2865E]">Content Creation</Badge>
                    </div>
                  </CardContent>
                </Card>

<Card className="bg-[#2a3a4a]/60 border-[#2a3a4a] hover:border-[#F26430]/50 transition-colors">
                  <CardHeader className="pb-2">
                    <h3 className="text-lg font-medium text-white">Sustainable Living</h3>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-[#F2C1AE]/70 mb-4">
                      Discussions about eco-friendly lifestyles and choices.
                    </p>
                    <div className="flex flex-wrap gap-2">
                      <Badge className="bg-[#F24F13]/20 text-[#F24F13]">Thrifting</Badge>
                      <Badge className="bg-[#F26430]/20 text-[#F26430]">Zero Waste</Badge>
                      <Badge className="bg-[#F2865E]/20 text-[#F2865E]">Minimalism</Badge>
                    </div>
                  </CardContent>
                </Card>

<Card className="bg-[#2a3a4a]/60 border-[#2a3a4a] hover:border-[#F26430]/50 transition-colors">
                  <CardHeader className="pb-2">
                    <h3 className="text-lg font-medium text-white">Digital Wellness</h3>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-[#F2C1AE]/70 mb-4">
                      Discussions about healthy relationships with technology.
                    </p>
                    <div className="flex flex-wrap gap-2">
                      <Badge className="bg-[#F24F13]/20 text-[#F24F13]">Digital Detox</Badge>
                      <Badge className="bg-[#F26430]/20 text-[#F26430]">Mindfulness</Badge>
                      <Badge className="bg-[#F2865E]/20 text-[#F2865E]">Screen Time</Badge>
                    </div>
                  </CardContent>
                </Card>
              </div>

<div className="flex justify-center">
                <Button
                  variant="outline"
                  className="border-[#2a3a4a] text-[#F2C1AE]/70 hover:text-[#F2C1AE] hover:bg-[#2a3a4a]"
                >
                  Explore More
                </Button>
              </div>
            </div>
          )}

{/* Bookmarks Tab */}
          {activeTab === "bookmarks" && (
            <div className="space-y-6">
              <h2 className="text-xl font-bold text-white">Your Bookmarks</h2>

<div className="grid gap-4">
                {bookmarks.map((bookmark) => (
                  <Card
                    key={bookmark.id}
                    className="bg-[#2a3a4a]/60 border-[#2a3a4a] hover:border-[#F26430]/50 transition-colors"
                  >
                    <CardHeader className="pb-2">
                      <Badge className="w-fit mb-2 bg-[#F26430]/20 text-[#F26430]">{bookmark.category}</Badge>
                      <Link href={`/thread/${bookmark.id}`} className="text-lg font-medium hover:underline text-white">
                        {bookmark.title}
                      </Link>

<div className="flex items-center gap-2 mt-1 text-sm text-[#F2C1AE]/70">
                        <Avatar className="h-5 w-5 border border-[#2a3a4a]">
                          <AvatarImage src={bookmark.authorAvatar} alt={bookmark.author} />
                          <AvatarFallback className="text-xs bg-[#F26430] text-white">
                            {bookmark.author[0].toUpperCase()}
                          </AvatarFallback>
                        </Avatar>
                        <span>{bookmark.author}</span>
                        <span>•</span>
                        <span>{bookmark.date}</span>
                      </div>
                    </CardHeader>
                  </Card>
                ))}
              </div>

{bookmarks.length === 0 ? (
                <div className="text-center py-12">
                  <Bookmark className="h-12 w-12 mx-auto text-[#F2C1AE]/30 mb-4" />
                  <h3 className="text-lg font-medium text-white mb-2">No bookmarks yet</h3>
                  <p className="text-[#F2C1AE]/70 mb-4">Save posts to read them later</p>
                  <Button className="bg-[#F24F13] hover:bg-[#F26430] text-white">Browse Discussions</Button>
                </div>
              ) : null}
            </div>
          )}

{/* Notifications Tab */}
          {activeTab === "notifications" && (
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <h2 className="text-xl font-bold text-white">Notifications</h2>
                <Button
                  variant="outline"
                  className="text-xs border-[#2a3a4a] text-[#F2C1AE]/70 hover:text-[#F2C1AE] hover:bg-[#2a3a4a]"
                >
                  Mark all as read
                </Button>
              </div>

<div className="grid gap-3">
                {notifications.map((notification) => (
                  <Card
                    key={notification.id}
                    className={`bg-[#2a3a4a]/60 border-[#2a3a4a] hover:border-[#F26430]/50 transition-colors ${!notification.read ? "border-l-4 border-l-[#F24F13]" : ""}`}
                  >
                    <div className="p-4 flex items-start gap-3">
                      <Avatar className="h-8 w-8 border border-[#2a3a4a]">
                        <AvatarImage src={notification.authorAvatar} alt={notification.author} />
                        <AvatarFallback className="bg-[#F26430] text-white">
                          {notification.author[0].toUpperCase()}
                        </AvatarFallback>
                      </Avatar>
                      <div className="flex-1 min-w-0">
                        <p className="text-sm text-[#F2C1AE]">
                          <span className="font-medium text-white">{notification.author}</span> {notification.content}
                        </p>
                        <Link href="#" className="text-sm text-[#F24F13] hover:underline truncate block">
                          {notification.thread}
                        </Link>
                        <span className="text-xs text-[#F2C1AE]/50">{notification.time}</span>
                      </div>
                      {!notification.read && <div className="h-2 w-2 rounded-full bg-[#F24F13]" />}
                    </div>
                  </Card>
                ))}
              </div>
            </div>
          )}
        </main>

[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isMerged="true"
import Link from "next/link"

export function Footer() {
  const currentYear = new Date().getFullYear()

return (
    <footer className="bg-[#1e2a36] border-t border-[#2a3a4a] py-6 px-4 mt-8">
      <div className="max-w-5xl mx-auto">
        <div className="flex flex-col md:flex-row justify-between items-center">
          <div className="mb-4 md:mb-0">
            <p className="text-[#F2C1AE]/70 text-sm">© {currentYear} All rights reserved by GenVibe</p>
          </div>
          <div className="flex space-x-6">
            <Link href="/about" className="text-[#F2C1AE]/70 hover:text-[#F2C1AE] text-sm transition-colors">
              About
            </Link>
            <Link href="/privacy" className="text-[#F2C1AE]/70 hover:text-[#F2C1AE] text-sm transition-colors">
              Privacy
            </Link>
            <Link href="/terms" className="text-[#F2C1AE]/70 hover:text-[#F2C1AE] text-sm transition-colors">
              Terms
            </Link>
            <Link href="/contact" className="text-[#F2C1AE]/70 hover:text-[#F2C1AE] text-sm transition-colors">
              Contact
            </Link>
          </div>
        </div>
      </div>
    </footer>
  )
}

[V0_FILE]typescriptreact:file="package-installation.tsx" isMerged="true"
// This is just to show the installation command
// Run this in your terminal:
// npm i @vercel/speed-insights

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"
import Script from "next/script"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "GenVibe | Join the conversation",
  description: "GenVibe - A community forum for discussions and sharing ideas",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className="dark" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} disableTransitionOnChange>
          {children}
        </ThemeProvider>
        <Script strategy="afterInteractive" src="https://va.vercel-scripts.com/v1/speed-insights/script.js" />
      </body>
    </html>
  )
}
</article></body></html>

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This