[V0_FILE]typescriptreact:file="src/app/layout.tsx" isEdit="true" isMerged="true" import { Button } from "@/components/ui/button" 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 { MainNav } from "@/components/main-nav" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Lnkshop - Your Bio, Your Storefront", description: "Turn your social bio into a sleek, shoppable hub with Lnkshop", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]typescriptreact:file="src/lib/types.ts" isMerged="true" export interface Link { id: string url: string title: string image?: string order: number } export interface Design { layout: "list" | "grid" | "carousel" primaryColor: string } export interface User { username: string email: string links: Link[] design: Design } [V0_FILE]typescriptreact:file="src/app/page.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { StatusIndicator } from "@/components/status-indicator" import { FeatureCard } from "@/components/feature-card" import { ServiceCard } from "@/components/service-card" import { SponsorSection } from "@/components/sponsor-section" import { HowItWorks } from "@/components/how-it-works" import { LayoutGrid, LineChart, Link2, Globe, Share2, Mail, Search } from "lucide-react" export default function Home() { return (

{/* Hero Section */}

Now in Beta

Experience the Lnk shop revolution

We're more than just a link-in-bio tool, we're a complete sales aggregation platform for creators and businesses. Get access to exclusive features, analytics, and support.

{/* Sponsors Section */} {/* How It Works Section */} {/* Features Section */}

Benefits

Your Shortcut to Success

Transform your social media bio into a powerful sales channel. Connect your audience directly to your products, services, and content.

} title="Build Brand Trust" description="Create a professional storefront that builds credibility and trust with your audience." /> } title="More Leads" description="Convert your social media followers into customers with a seamless shopping experience." />

} title="Higher Conversions" description="Optimize your links with smart previews and analytics to increase conversion rates." /> } title="Test Marketing Ideas" description="Easily A/B test different layouts and designs to find what works best for your audience." />

{/* Services Section */}

Services

Grow Your Business

From marketing and sales to operations and strategy, we have the expertise to help you achieve your goals.

} title="Custom Domain Integration" description="Use your own domain for a professional and branded storefront experience." /> } title="Social Media Integrations" description="Connect your social media accounts for seamless content sharing and analytics." /> } title="Email Marketing Integrations" description="Capture leads and connect with your favorite email marketing platforms." /> } title="SEO Optimization" isPro={true} description="Improve your visibility in search engines with built-in SEO tools." />

{/* CTA Section */}

Ready to Transform Your Bio?

Join thousands of creators and businesses who are already using Lnkshop to turn their social media followers into customers.

No credit card required. 14-day free trial.

{/* Footer */}

) } [V0_FILE]typescriptreact:file="src/app/signup/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { z } from "zod" import { SignupForm } from "@/components/SignupForm" const signupSchema = z.object({ email: z.string().email({ message: "Please enter a valid email address" }), password: z.string().min(6, { message: "Password must be at least 6 characters" }), agreeToTerms: z.boolean().refine((value) => value === true, { message: "You must agree to the terms and conditions", }), }) type SignupFormValues = z.infer export default function SignupPage() { return (

) } [V0_FILE]typescriptreact:file="src/app/onboarding/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { useForm } from "react-hook-form" import { z } from "zod" import { zodResolver } from "@hookform/resolvers/zod" import { CheckCircle, XCircle } from "lucide-react" const usernameSchema = z.object({ username: z .string() .min(3, { message: "Username must be at least 3 characters" }) .max(20, { message: "Username must be at most 20 characters" }) .regex(/^[a-zA-Z0-9_-]+$/, { message: "Username can only contain letters, numbers, underscores, and hyphens" }) .refine((username) => username !== "testuser", { message: "Username is already taken" }), }) type UsernameFormValues = z.infer export default function OnboardingPage() { const router = useRouter() const [isSubmitting, setIsSubmitting] = useState(false) const [hasSetUsername, setHasSetUsername] = useState(false) const form = useForm({ resolver: zodResolver(usernameSchema), defaultValues: { username: "", }, }) useEffect(() => { // Check if the user has already set a username (dummy state for now) const checkUsername = async () => { // This would be replaced with a Supabase query in the future const hasUsername = localStorage.getItem("hasSetUsername") === "true" setHasSetUsername(hasUsername) if (hasUsername) { router.push("/dashboard") } } checkUsername() }, [router]) async function onSubmit(data: UsernameFormValues) { setIsSubmitting(true) console.log("Username submitted:", data.username) // TODO: Implement Supabase username update // const { data: profile, error } = await supabase // .from('profiles') // .upsert({ username: data.username }) // if (error) { // console.error("Error updating username:", error.message) // setIsSubmitting(false) // return // } // Simulate API call setTimeout(() => { setIsSubmitting(false) localStorage.setItem("hasSetUsername", "true") router.push("/dashboard") }, 1000) } if (hasSetUsername) { return null // This will prevent a flash of the onboarding page for users who have already set their username } return (

Choose Your Username

This will be your public Lnkshop URL.

( Username

lnkshop.xyz/

{field.value && !form.formState.errors.username && (

Username is available

)} {form.formState.errors.username && (

{form.formState.errors.username.message}

)} )} />

This will be your public link: lnkshop.xyz/{form.watch("username") || "[username]"}

) } [V0_FILE]typescriptreact:file="src/app/login/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { z } from "zod" import { LoginForm } from "@/components/LoginForm" const loginSchema = z.object({ email: z.string().email({ message: "Please enter a valid email address" }), password: z.string().min(6, { message: "Password must be at least 6 characters" }), }) type LoginFormValues = z.infer export default function LoginPage() { return (

) } [V0_FILE]typescriptreact:file="src/app/[username]/page.tsx" isMerged="true" import type { Link as LinkType, Design } from "@/lib/types" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import Link from "next/link" // This would normally be fetched from a database const getDummyData = (username: string) => { // Dummy data const links: LinkType[] = [ { id: "1", url: "https://example.com", title: "Product 1", image: null, order: 0 }, { id: "2", url: "https://shop.com", title: "Product 2", image: null, order: 1 }, { id: "3", url: "https://store.com", title: "Product 3", image: null, order: 2 }, ] const design: Design = { layout: "list", primaryColor: "#0D9488", } return { links, design } } export default function StorefrontPage({ params }: { params: { username: string } }) { const { username } = params const { links, design } = getDummyData(username) return (

{/* Header */}

{username}'s Shopfront

{/* Main Content */}

{links.length === 0 ? (

No links yet...

) : (

{links.map((link) => (

{/* Replace with */} Preview

{link.title}

))}

)}

{/* Footer */}

) } [V0_FILE]typescript:file="lib/types.ts" isQuickEdit="true" isMerged="true" export interface Link { id: string url: string title: string image?: string order: number } export interface Design { layout: "list" | "grid" | "carousel" primaryColor: string } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { StatusIndicator } from "@/components/status-indicator" import { FeatureCard } from "@/components/feature-card" import { ServiceCard } from "@/components/service-card" import { SponsorSection } from "@/components/sponsor-section" import { HowItWorks } from "@/components/how-it-works" import { LayoutGrid, LineChart, Link2, Smartphone, Users, Target, ImageIcon, MousePointerClick, Heading1, Globe, Share2, Mail, Search, } from "lucide-react" export default function Home() { return (

{/* Hero Section */}

Now in Beta

Experience the Lnk shop revolution

We're more than just a link-in-bio tool, we're a complete sales aggregation platform for creators and businesses. Get access to exclusive features, analytics, and support.

{/* Sponsors Section */} {/* How It Works Section */} {/* Benefits Section */}

Benefits

Your Shortcut to Success

Transform your social media bio into a powerful sales channel. Connect your audience directly to your products, services, and content.

{/* Features Section */}

Features

What Makes Us Different

Lnkshop combines powerful features with an intuitive interface to help you create the perfect storefront for your audience.

Mobile Friendly

Responsive design ensures your storefront looks great on any device, from desktop to mobile.

Social Proof

Showcase customer reviews and testimonials to build trust and credibility with your audience.

Targeted Content

Customize your storefront based on where your visitors are coming from for a personalized experience.

Strong Visuals

Auto-generate rich previews of your products with images and descriptions pulled directly from your links.

Clear CTA

Guide your visitors with clear call-to-action buttons that drive conversions and sales.

Clear Headline

Communicate your value proposition clearly with customizable headlines and descriptions.

{/* Services Section */}

Services

Grow Your Business

From marketing and sales to operations and strategy, we have the expertise to help you achieve your goals.

{/* CTA Section */}

Ready to Transform Your Bio?

Join thousands of creators and businesses who are already using Lnkshop to turn their social media followers into customers.

No credit card required. 14-day free trial.

) } [V0_FILE]typescriptreact:file="components/status-indicator.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Badge } from "@/components/ui/badge" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" type StatusType = "operational" | "degraded" | "partial_outage" | "major_outage" | "maintenance" interface StatusIndicatorProps { status?: StatusType } export function StatusIndicator({ status = "operational" }: StatusIndicatorProps) { const [currentStatus, setCurrentStatus] = useState(status) // In a real app, you would fetch the status from an API useEffect(() => { // Simulate fetching status const fetchStatus = async () => { // This would be an API call in a real app // const response = await fetch('/api/status') // const data = await response.json() // setCurrentStatus(data.status) // For demo purposes, we'll just use the prop setCurrentStatus(status) } fetchStatus() // Set up polling every 60 seconds const interval = setInterval(fetchStatus, 60000) return () => clearInterval(interval) }, [status]) const getStatusColor = () => { switch (currentStatus) { case "operational": return "bg-green-500" case "degraded": return "bg-yellow-500" case "partial_outage": return "bg-orange-500" case "major_outage": return "bg-red-500" case "maintenance": return "bg-blue-500" default: return "bg-gray-500" } } const getStatusText = () => { switch (currentStatus) { case "operational": return "All Systems Operational" case "degraded": return "Performance Issues" case "partial_outage": return "Partial Outage" case "major_outage": return "Major Outage" case "maintenance": return "Maintenance in Progress" default: return "Status Unknown" } } return ( Status

{getStatusText()}

View status page

) } [V0_FILE]typescriptreact:file="components/feature-card.tsx" isMerged="true" import type { ReactNode } from "react" import { Card, CardContent } from "@/components/ui/card" interface FeatureCardProps { number: string icon: ReactNode title: string description: string } export function FeatureCard({ number, icon, title, description }: FeatureCardProps) { return (

{icon}

{number}

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/service-card.tsx" isMerged="true" import type { ReactNode } from "react" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" interface ServiceCardProps { icon: ReactNode title: string description: string isPro?: boolean } export function ServiceCard({ icon, title, description, isPro = false }: ServiceCardProps) { return ( {isPro && PRO}

{icon}

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/sponsor-section.tsx" isMerged="true" export function SponsorSection() { return (

Trusted by leading brands

{/* Replace with actual sponsor logos */}

Brand One

Brand Two

Brand Three

Brand Four

Brand Five

) } [V0_FILE]typescriptreact:file="components/main-nav.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, } from "@/components/ui/navigation-menu" import { ModeToggle } from "@/components/mode-toggle" import { StatusIndicator } from "@/components/status-indicator" export function MainNav() { const pathname = usePathname() return (

Lnk shop Features

Lnkshop

Turn your social bio into a sleek, shoppable hub with Lnkshop.

Auto-generate rich previews of your products

Track clicks and optimize your storefront

Choose from multiple layouts and color schemes

Pricing About Contact Support

) } const ListItem = React.forwardRef, React.ComponentPropsWithoutRef<"a">>( ({ className, title, children, ...props }, ref) => { return (

{title}

{children}

) }, ) ListItem.displayName = "ListItem" [V0_FILE]typescriptreact:file="components/mode-toggle.tsx" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ModeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="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 { MainNav } from "@/components/main-nav" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Lnkshop - Your Bio, Your Storefront", description: "Turn your social bio into a sleek, shoppable hub with Lnkshop", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="app/status/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" export default function StatusPage() { // In a real app, you would fetch this data from an API const services = [ { name: "API", status: "operational", uptime: "99.99%" }, { name: "Web App", status: "operational", uptime: "99.98%" }, { name: "Dashboard", status: "operational", uptime: "99.95%" }, { name: "Authentication", status: "operational", uptime: "99.99%" }, { name: "Analytics", status: "operational", uptime: "99.97%" }, ] const incidents = [ { date: "2025-02-28", title: "API Performance Degradation", status: "Resolved", description: "We experienced a brief period of API performance degradation. The issue has been resolved and all systems are operating normally.", }, ] return (

System Status

Current Status All systems are operational

All Systems Operational

Service Status Uptime {services.map((service) => ( {service.name}

{service.status}

{service.uptime} ))}

Recent Incidents Past incidents and maintenance {incidents.length > 0 ? (

{incidents.map((incident, index) => (

{incident.title}

{incident.date}

{incident.status}

{incident.description}

))}

) : (

No incidents reported in the last 90 days.

)}

) } [V0_FILE]typescriptreact:file="app/pricing/page.tsx" isMerged="true" import { Check } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" export default function PricingPage() { return (

Simple, Transparent Pricing

Choose the plan that's right for you and start turning your social bio into a powerful sales channel.

Free For individuals just getting started

$0 / month

Up to 5 links
Basic analytics
Standard layouts
Lnkshop.xyz/username URL

POPULAR

Pro For creators and small businesses

$12 / month

Unlimited links
Advanced analytics
All layouts and customization
Custom domain support
Priority support

Business For teams and businesses

$29 / month

Everything in Pro
Team collaboration
Multiple storefronts
API access
Dedicated support

) } [V0_FILE]typescriptreact:file="app/faqs/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" export default function FAQsPage() { const faqs = [ { question: "What is Lnkshop?", answer: "Lnkshop is a link-in-bio sales aggregation tool that helps creators and businesses turn their social media bio into a sleek, shoppable hub. It allows you to showcase your products, services, and content in one place with smart previews and analytics.", }, { question: "How does Lnkshop differ from other link-in-bio tools?", answer: "Lnkshop is specifically designed for sales conversion, with features like smart previews, click analytics, and customizable layouts. We focus on helping you turn your social media followers into customers with a seamless shopping experience.", }, { question: "Can I use my own domain with Lnkshop?", answer: "Yes, our Pro and Business plans allow you to use your own custom domain for a more professional and branded experience.", }, { question: "How do I set up my Lnkshop page?", answer: "Setting up your Lnkshop page is easy. After signing up, you'll choose a username, add your links, customize your design, and you're ready to go. The entire process takes just a few minutes.", }, { question: "What analytics does Lnkshop provide?", answer: "Lnkshop provides detailed analytics on link clicks, visitor demographics, traffic sources, and conversion rates. This helps you understand which links are performing best and optimize your storefront accordingly.", }, { question: "Can I customize the appearance of my Lnkshop page?", answer: "You can choose from different layouts (list, grid, or carousel), customize colors, add your logo, and more to match your brand identity.", }, { question: "Is there a free plan available?", answer: "Yes, we offer a free plan with basic features to help you get started. You can upgrade to a paid plan anytime to access more advanced features.", }, { question: "How do I add links to my Lnkshop page?", answer: "In your dashboard, simply click the 'Add Link' button, enter the URL, and Lnkshop will automatically generate a preview. You can then customize the title and image if needed.", }, { question: "Can I reorder my links?", answer: "Yes, you can easily drag and drop your links to reorder them in your dashboard.", }, { question: "Does Lnkshop work with all social media platforms?", answer: "Yes, Lnkshop works with any platform that allows you to add a link in your bio, including Instagram, TikTok, Twitter, YouTube, and more.", }, ] return (

Frequently Asked Questions

Find answers to common questions about Lnkshop and how it can help you grow your business.

{faqs.map((faq, index) => ( {faq.question} {faq.answer} ))}

Still have questions?

) } [V0_FILE]typescriptreact:file="app/use-cases/page.tsx" isMerged="true" import Image from "next/image" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" export default function UseCasesPage() { const useCases = [ { title: "Content Creators", description: "Monetize your audience by showcasing your products, services, and affiliate links in one place.", image: "/placeholder.svg?height=300&width=400", features: [ "Showcase digital products", "Link to merchandise", "Promote affiliate products", "Track click-through rates", ], }, { title: "Small Businesses", description: "Create a mobile-friendly storefront that connects your social media followers to your products.", image: "/placeholder.svg?height=300&width=400", features: [ "Showcase your product catalog", "Link to your online store", "Promote special offers", "Track customer engagement", ], }, { title: "Freelancers", description: "Showcase your portfolio, services, and testimonials to attract new clients.", image: "/placeholder.svg?height=300&width=400", features: [ "Link to your portfolio", "Showcase client testimonials", "Offer service packages", "Schedule consultations", ], }, { title: "Musicians & Artists", description: "Connect fans to your music, merchandise, tour dates, and more.", image: "/placeholder.svg?height=300&width=400", features: [ "Link to streaming platforms", "Sell merchandise", "Promote upcoming events", "Share exclusive content", ], }, ] return (

Use Cases

Discover how different creators and businesses are using Lnkshop to grow their audience and increase sales.

{useCases.map((useCase, index) => (

{useCase.title} {useCase.description}

• {feature}

))}

Ready to create your own Lnkshop?

Join thousands of creators and businesses who are already using Lnkshop to grow their audience and increase sales.

) } [V0_FILE]typescriptreact:file="components/how-it-works.tsx" isMerged="true" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { UserPlus, Palette, Link, BarChart3 } from "lucide-react" export function HowItWorks() { const steps = [ { badge: "Step 1", icon: , title: "Create Your Profile", description: "Sign up and claim your unique Lnkshop URL in seconds. No coding required - just pick your username and start building.", }, { badge: "Step 2", icon: , title: "Design Your Storefront", description: "Choose from our professionally designed layouts and customize colors to match your brand identity.", }, { badge: "Step 3", icon: , title: "Add Your Links", description: "Add your products, services, and content with our smart preview technology that automatically generates rich link previews.", }, { badge: "Step 4", icon: , title: "Track & Optimize", description: "Monitor your performance with detailed analytics and optimize your storefront for maximum conversions.", }, ] return (

How It Works

Start Selling in Minutes

Follow our simple step-by-step process to transform your social bio into a powerful sales channel.

{steps.map((step, index) => ( {step.badge}

{step.icon}

{step.title}

{step.description}

))}

) } [V0_FILE]typescriptreact:file="app/features/smart-links/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Link, ExternalLink, Smartphone, Globe } from "lucide-react" export default function SmartLinksPage() { return (

Smart Links

Transform your bio into a powerful sales channel with Lnkshop's Smart Links technology.

Auto-Generated Previews

Our smart technology automatically generates rich previews for your links, including images, titles, and descriptions.

Customizable CTAs

Create eye-catching call-to-action buttons for each link to drive more conversions.

Mobile Optimization

All links are optimized for mobile viewing, ensuring a seamless experience across all devices.

Global Link Management

Easily manage and update all your links from a single, intuitive dashboard.

) } [V0_FILE]typescriptreact:file="app/features/analytics/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { BarChart, PieChart, TrendingUp, Users } from "lucide-react" export default function AnalyticsPage() { return (

Powerful Analytics

Gain valuable insights into your audience and optimize your performance with Lnkshop's advanced analytics.

Click-through Rates

Track the performance of each link with detailed click-through rate analytics.

Audience Demographics

Understand your audience better with insights into their demographics and interests.

Conversion Tracking

Set up custom conversion goals and track your success rates over time.

Traffic Sources

Identify which platforms and campaigns are driving the most traffic to your Lnkshop page.

) } [V0_FILE]typescriptreact:file="app/features/custom-design/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Palette, Layout, Image, Type } from "lucide-react" export default function CustomDesignPage() { return (

Custom Design

Create a unique and branded experience for your audience with Lnkshop's powerful design tools.

Custom Color Schemes

Choose from a wide range of color palettes or create your own to match your brand identity.

Flexible Layouts

Select from multiple layout options including grid, list, and carousel to showcase your content effectively.

Custom Backgrounds

Upload your own background images or choose from our library of professional designs.

Typography Options

Customize fonts and text styles to create a cohesive and professional look.

) } [V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { ArrowRight } from "lucide-react" export default function AboutPage() { return (

About Lnkshop

Empowering creators and businesses to turn their social media presence into a powerful sales channel.

Our Mission

At Lnkshop, we're on a mission to revolutionize the way creators and businesses connect with their audience and monetize their online presence. We believe that every link should be an opportunity, and every bio should be a storefront.

Our Story

Founded in 2023, Lnkshop was born out of the frustration of limited monetization options for social media creators. Our team of passionate developers and marketers came together to create a solution that empowers individuals and businesses to maximize their online potential.

Our Values

Innovation

We're constantly pushing the boundaries of what's possible in link-in-bio technology.

User-Centric

Our users' success is our success. We're dedicated to providing the best possible experience and support.

Transparency

We believe in open communication with our users and partners, fostering trust and collaboration.

) } [V0_FILE]typescriptreact:file="app/privacy/page.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" export default function PrivacyPolicyPage() { return (

Privacy Policy

At Lnkshop, we take your privacy seriously. This policy outlines how we collect, use, and protect your personal information.

Information We Collect

We collect information you provide directly to us, such as when you create an account, use our services, or communicate with us. This may include:

Name and contact information
Account credentials
Payment information
Content you upload to our platform
Communications with us

We also automatically collect certain information about your device and how you interact with our services.

How We Use Your Information

We use the information we collect to:

Provide, maintain, and improve our services
Process transactions and send related information
Send you technical notices, updates, security alerts, and support messages
Respond to your comments, questions, and customer service requests
Communicate with you about products, services, offers, and events
Monitor and analyze trends, usage, and activities in connection with our services

Data Security

We implement appropriate technical and organizational measures to protect the security of your personal information. However, please note that no method of transmission over the Internet or method of electronic storage is 100% secure.

Your Rights

You have the right to access, correct, or delete your personal information. You may also have the right to object to or restrict certain types of processing. To exercise these rights, please contact us using the information provided at the end of this policy.

Changes to This Policy

We may update this privacy policy from time to time. We will notify you of any changes by posting the new privacy policy on this page and updating the "Last updated" date at the top of this policy.

) } [V0_FILE]typescriptreact:file="app/terms/page.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" export default function TermsOfServicePage() { return (

Terms of Service

Please read these terms of service carefully before using Lnkshop's services.

1. Acceptance of Terms

By accessing or using Lnkshop's services, you agree to be bound by these Terms of Service and all applicable laws and regulations. If you do not agree with any part of these terms, you may not use our services.

2. Description of Service

Lnkshop provides a platform for users to create customizable link-in-bio pages. We reserve the right to modify, suspend, or discontinue any part of the service at any time without notice.

3. User Accounts

You are responsible for maintaining the confidentiality of your account and password. You agree to accept responsibility for all activities that occur under your account.

4. User Content

You retain all rights to the content you post on Lnkshop. By posting content, you grant Lnkshop a non-exclusive, worldwide, royalty-free license to use, modify, and display the content in connection with our services.

5. Prohibited Activities

You agree not to engage in any of the following prohibited activities:

Violating laws or regulations
Infringing on intellectual property rights
Transmitting harmful or malicious code
Impersonating others
Interfering with the proper functioning of the service

6. Limitation of Liability

Lnkshop shall not be liable for any indirect, incidental, special, consequential, or punitive damages resulting from your use of or inability to use the service.

7. Changes to Terms

We reserve the right to modify these Terms of Service at any time. We will notify users of any significant changes. Your continued use of Lnkshop after such modifications constitutes your acceptance of the updated terms.

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Mail, Phone, MessageCircle } from "lucide-react" export default function ContactPage() { const handleEmailClick = () => { window.location.href = "mailto:support@lnkshop.com" } const handleWhatsAppClick = () => { window.open("https://wa.me/1234567890", "_blank") } const handleScheduleCall = () => { window.open("https://cal.com/terfajohn", "_blank") } return (

Contact Us

We're here to help! Choose your preferred method of communication below.

Email Us

Send us an email and we'll get back to you within 24 hours.

Chat with our support team instantly on WhatsApp.

Schedule a Call

Book a call with one of our product specialists.

) } [V0_FILE]typescriptreact:file="app/support/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { HelpCircle, BookOpen, MessageCircle, Mail, Phone } from "lucide-react" export default function SupportPage() { const handleEmailClick = () => { window.location.href = "mailto:support@lnkshop.com" } const handleWhatsAppClick = () => { window.open("https://wa.me/1234567890", "_blank") } const handleScheduleCall = () => { window.open("https://cal.com/terfajohn", "_blank") } return (

Support Center

Find answers to your questions or get in touch with our support team.

FAQs

Find quick answers to common questions about Lnkshop.

Documentation

Explore our comprehensive guides and tutorials.

Contact Support

Email Support

Get help via email within 24 hours.

WhatsApp Support

Chat with our support team on WhatsApp.

Schedule a Call

Book a call with our support team.

) } [V0_FILE]typescriptreact:file="src/app/verify-email/page.tsx" isMerged="true" "use client" import { useSearchParams } from "next/navigation" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Mail } from "lucide-react" export default function VerifyEmailPage() { const searchParams = useSearchParams() const email = searchParams.get("email") return (

Verify Your Email

We've sent a verification link to {email}. Please check your email and click the link to verify your account.

) } [V0_FILE]typescriptreact:file="src/app/verify-email/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="src/components/LoginForm.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { useForm } from "react-hook-form" import { z } from "zod" import { zodResolver } from "@hookform/resolvers/zod" const loginSchema = z.object({ email: z.string().email({ message: "Please enter a valid email address" }), password: z.string().min(6, { message: "Password must be at least 6 characters" }), }) type LoginFormValues = z.infer export function LoginForm() { const router = useRouter() const [isSubmitting, setIsSubmitting] = useState(false) const form = useForm({ resolver: zodResolver(loginSchema), defaultValues: { email: "", password: "", }, }) async function onSubmit(data: LoginFormValues) { setIsSubmitting(true) console.log("Login submitted:", data) // TODO: Implement actual login logic here // Simulate API call setTimeout(() => { setIsSubmitting(false) router.push("/dashboard") }, 1000) } return ( Log In to Lnkshop ) } [V0_FILE]typescriptreact:file="src/components/SignupForm.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { useForm } from "react-hook-form" import { z } from "zod" import { zodResolver } from "@hookform/resolvers/zod" import { Checkbox } from "@/components/ui/checkbox" const signupSchema = z.object({ email: z.string().email({ message: "Please enter a valid email address" }), password: z.string().min(6, { message: "Password must be at least 6 characters" }), agreeToTerms: z.boolean().refine((value) => value === true, { message: "You must agree to the terms and conditions", }), }) type SignupFormValues = z.infer export function SignupForm() { const router = useRouter() const [isSubmitting, setIsSubmitting] = useState(false) const form = useForm({ resolver: zodResolver(signupSchema), defaultValues: { email: "", password: "", agreeToTerms: false, }, }) async function onSubmit(data: SignupFormValues) { setIsSubmitting(true) console.log("Form submitted:", data) // TODO: Implement actual signup logic here // Simulate API call setTimeout(() => { setIsSubmitting(false) router.push("/onboarding") }, 1000) } return ( Sign Up for Lnkshop

( Email )} /> ( Password )} /> (

I agree to the{" "} terms of service {" "} and{" "} privacy policy

)} />

Already have an account?{" "} Log In

) } [V0_FILE]typescriptreact:file="src/app/dashboard/page.tsx" isEdit="true" isMerged="true" import { DashboardClient } from "@/components/DashboardClient" export default function DashboardPage() { return } [V0_FILE]typescriptreact:file="src/components/DashboardClient.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Tabs, TabsContent } from "@/components/ui/tabs" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" // Types type Link = { id: string url: string title: string image?: string order: number } type Design = { layout: "list" | "grid" | "carousel" primaryColor: string } type Click = { title: string clicks: number } export function DashboardClient() { const router = useRouter() const [activeTab, setActiveTab] = useState("links") const [links, setLinks] = useState([ { id: "1", url: "https://example.com", title: "Product 1", image: null, order: 0 }, { id: "2", url: "https://shop.com", title: "Product 2", image: null, order: 1 }, { id: "3", url: "https://store.com", title: "Product 3", image: null, order: 2 }, ]) const [design, setDesign] = useState({ layout: "list", primaryColor: "#0D9488" }) const [clicks] = useState([ { title: "Product 1", clicks: 10 }, { title: "Product 2", clicks: 5 }, { title: "Product 3", clicks: 8 }, ]) const [isAddLinkOpen, setIsAddLinkOpen] = useState(false) const [newLink, setNewLink] = useState({ url: "", title: "", image: "" }) const [isLoadingPreview, setIsLoadingPreview] = useState(false) const handleLogout = () => { console.log("Logout") router.push("/") } const handleAddLink = () => { const newLinkObj: Link = { id: Date.now().toString(), url: newLink.url, title: newLink.title, image: newLink.image || null, order: links.length, } setLinks([...links, newLinkObj]) setNewLink({ url: "", title: "", image: "" }) setIsAddLinkOpen(false) } const handleUrlBlur = () => { if (newLink.url) { setIsLoadingPreview(true) // Simulate fetching preview data setTimeout(() => { setNewLink({ ...newLink, title: "Dummy Title" }) setIsLoadingPreview(false) }, 1000) } } const handleLayoutChange = (layout: "list" | "grid" | "carousel") => { setDesign({ ...design, layout }) } const handleColorChange = (e: React.ChangeEvent) => { setDesign({ ...design, primaryColor: e.target.value }) } return (

{/* Sidebar */}

Lnkshop

Logout

{/* Main Content */}

{/* Links Tab */} Your Links {links.length === 0 ? (

No links yet. Add one to get started!

) : (

{links.map((link) => (

{/* Replace with */} Preview

{link.title}

{link.url}

))}

)} {/* Add react-dnd DndProvider, useDrag, useDrop for reordering */} {/* Preview */} Live Preview

{links.map((link) => (

{/* Replace with */} Preview

{link.title}

))}

{/* Analytics Tab */} Analytics {clicks.length === 0 ? (

No clicks yet. Share your link to start tracking!

) : ( <>

{/* Replace with Chart.js Bar: labels=['Product 1', 'Product 2', 'Product 3'], data=[10, 5, 8] */} Bar Chart: Product 1 (10 clicks), Product 2 (5 clicks), Product 3 (8 clicks)

Total Clicks: {clicks.reduce((sum, click) => sum + click.clicks, 0)}

)} {/* Design Tab */} Design Your Storefront

Layout

Primary Color

) } [V0_FILE]json:file="tsconfig.json" isMerged="true" { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./src/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]typescriptreact:file="src/components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="src/components/main-nav.tsx" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { cn } from "@/lib/utils" export function MainNav() { const pathname = usePathname() return ( ) } [V0_FILE]typescript:file="src/lib/utils.ts" isEdit="true" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="src/components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]json:file="package.json" isMerged="true" { "name": "lnkshop", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@radix-ui/react-slot": "^1.0.2", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "lucide-react": "^0.294.0", "next": "14.0.3", "react": "^18", "react-dom": "^18", "tailwind-merge": "^2.1.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.3", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isQuickEdit="true" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="src/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="src/components/ui/card.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="src/components/status-indicator.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Badge } from "@/components/ui/badge" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" type StatusType = "operational" | "degraded" | "partial_outage" | "major_outage" | "maintenance" interface StatusIndicatorProps { status?: StatusType } export function StatusIndicator({ status = "operational" }: StatusIndicatorProps) { const [currentStatus, setCurrentStatus] = useState(status) // In a real app, you would fetch the status from an API useEffect(() => { // Simulate fetching status const fetchStatus = async () => { // This would be an API call in a real app // const response = await fetch('/api/status') // const data = await response.json() // setCurrentStatus(data.status) // For demo purposes, we'll just use the prop setCurrentStatus(status) } fetchStatus() // Set up polling every 60 seconds const interval = setInterval(fetchStatus, 60000) return () => clearInterval(interval) }, [status]) const getStatusColor = () => { switch (currentStatus) { case "operational": return "bg-green-500" case "degraded": return "bg-yellow-500" case "partial_outage": return "bg-orange-500" case "major_outage": return "bg-red-500" case "maintenance": return "bg-blue-500" default: return "bg-gray-500" } } const getStatusText = () => { switch (currentStatus) { case "operational": return "All Systems Operational" case "degraded": return "Performance Issues" case "partial_outage": return "Partial Outage" case "major_outage": return "Major Outage" case "maintenance": return "Maintenance in Progress" default: return "Status Unknown" } } return ( Status
{getStatusText()}

View status page
) } [V0_FILE]typescriptreact:file="src/components/ui/tooltip.tsx" isMerged="true" "use client" import * as React from "react" import * as TooltipPrimitive from "@radix-ui/react-tooltip" import { cn } from "@/lib/utils" const TooltipProvider = TooltipPrimitive.Provider const Tooltip = TooltipPrimitive.Root const TooltipTrigger = TooltipPrimitive.Trigger const TooltipContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) TooltipContent.displayName = TooltipPrimitive.Content.displayName export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } [V0_FILE]typescriptreact:file="src/components/feature-card.tsx" isMerged="true" import type { ReactNode } from "react" import { Card, CardContent } from "@/components/ui/card" interface FeatureCardProps { number: string icon: ReactNode title: string description: string } export function FeatureCard({ number, icon, title, description }: FeatureCardProps) { return (

{icon}
{number}

{title}

{description}
) } [V0_FILE]typescriptreact:file="src/components/service-card.tsx" isMerged="true" import type { ReactNode } from "react" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" interface ServiceCardProps { icon: ReactNode title: string description: string isPro?: boolean } export function ServiceCard({ icon, title, description, isPro = false }: ServiceCardProps) { return ( {isPro && PRO}
{icon}

{title}

{description}
) } [V0_FILE]typescriptreact:file="src/components/sponsor-section.tsx" isMerged="true" export function SponsorSection() { return (

Trusted by leading brands

{/* Replace with actual sponsor logos /}
Brand One

Brand Two

Brand Three

Brand Four

Brand Five

) } [V0_FILE]typescriptreact:file="src/components/how-it-works.tsx" isMerged="true" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { UserPlus, Palette, Link, BarChart3 } from "lucide-react" export function HowItWorks() { const steps = [ { badge: "Step 1", icon: , title: "Create Your Profile", description: "Sign up and claim your unique Lnkshop URL in seconds. No coding required - just pick your username and start building.", }, { badge: "Step 2", icon: , title: "Design Your Storefront", description: "Choose from our professionally designed layouts and customize colors to match your brand identity.", }, { badge: "Step 3", icon: , title: "Add Your Links", description: "Add your products, services, and content with our smart preview technology that automatically generates rich link previews.", }, { badge: "Step 4", icon: , title: "Track & Optimize", description: "Monitor your performance with detailed analytics and optimize your storefront for maximum conversions.", }, ] return (

How It Works
Start Selling in Minutes

Follow our simple step-by-step process to transform your social bio into a powerful sales channel.

{steps.map((step, index) => ( {step.badge}
{step.icon}

{step.title}

{step.description}

))}

) } [V0_FILE]css:file="src/app/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]javascript:file="tailwind.config.js" isEdit="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/.{ts,tsx}", ".{js,ts,jsx,tsx,mdx}", ], 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))", }, }, 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")], }