e1:"ExplicitChatIdProvider" e2:I[903690,["$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$64","$65","$66","$67","$68"],"$e1"] e3:I[838238,["$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$64","$65","$66","$67","$68"],"SWRDataProvider"] e4:T1850b,[V0_FILE]json:file=".eslintrc.json" isMerged="true" { "extends": "next" } [V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. .next/ # Dependencies /node_modules /.pnp .pnp.js # Testing /coverage # Production build dist # Misc .DS_Store *.pem # Debug npm-debug.log* yarn-debug.log* yarn-error.log* # Local ENV files .env.local .env.development.local .env.test.local .env.production.local # Vercel .vercel # Turborepo .turbo # typescript *.tsbuildinfo .env*.local [V0_FILE]markdown:file="README.md" isMerged="true" # Simple Online Store with Stripe A responsive online store built with Next.js and Stripe for selling a single product. Features a clean design with product showcase, secure checkout, and payment processing. ## Tech Stack - **Framework**: Next.js 14 with App Router - **Styling**: Tailwind CSS v4 - **UI Components**: shadcn/ui - **Payments**: Stripe - **TypeScript**: Full type safety - **Deployment**: Vercel (recommended) ## Getting Started Click the "Deploy" button to clone this repo, create a new Vercel project, setup the Stripe integration, and provision a new Stripe sandbox: [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextjs-stripe-template&project-name=nextjs-stripe-template&repository-name=nextjs-stripe-template&demo-title=Stripe+%26+Next.js+Starter+Template&demo-description=A+template+for+building+full-stack+Stripe+applications+using+Next.js+and+Vercel&demo-url=https%3A%2F%2Fnextjs-stripe-template.vercel.sh%2F&demo-image=https%3A%2F%2Fimages.stripeassets.com%2Ffzn2n1nzq965%2F4vVgZi0ZMoEzOhkcv7EVwK%2F74a13565998b4c56003c5ddc5aae43ce%2Ffavicon.png%3Fw%3D180%26h%3D180&products=%5B%7B%22integrationSlug%22%3A%22stripe%22%2C%22productSlug%22%3A%22stripe%22%2C%22protocol%22%3A%22other%22%2C%22type%22%3A%22integration%22%7D%5D) ### Prerequisites - Node.js 20+ - A Stripe account (Vercel integration recommended) - Vercel account (optional, for deployment) ### Installation 1. **Install dependencies**: \`\`\`bash pnpm install \`\`\` 2. **Set up Stripe**: ### Option 1: Use Vercel Stripe integration Use "Create Sandbox" or "Link Existing Account" for the Vercel Stripe integration. ### Option 2: Setup Stripe manually - Create a Stripe account at [stripe.com](https://stripe.com) - Get your API keys from the Stripe Dashboard - Add the following environment variables to your Vercel project: - `STRIPE_SECRET_KEY` - Your Stripe secret key - `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` - Your Stripe publishable key - Call `vercel env pull` or update `.env.local` file manually 3. **Run the development server**: \`\`\`bash pnpm dev \`\`\` 4. **Open** [http://localhost:3000](http://localhost:3000) in your browser ## Deployment ### Deploy to Vercel 1. **Push to GitHub** 2. **Connect to Vercel**: - Go to [vercel.com](https://vercel.com) - Import your GitHub repository - Add your Stripe environment variables - Deploy! ### Environment Variables Make sure to add these environment variables in your Vercel project settings either using Vercel Stripe integration or manually: - `STRIPE_SECRET_KEY` - `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` ## License This project is open source and available under the [MIT License](LICENSE). --- Built with ❤️ using v0 by Vercel [V0_FILE]typescriptreact:file="app/checkout/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { ArrowLeft, Shield, CreditCard } from "lucide-react"; import { PRODUCTS } from "@/lib/products"; import Link from "next/link"; import Image from "next/image"; import Checkout from "@/components/checkout"; export default function CheckoutPage() { const product = PRODUCTS[0]; return (

{/* Header */}

Back to store

Secure Checkout

{/* Order Summary */}

Order Summary Review your purchase details

{product.name}

Quantity: 1

${(product.priceInCents / 100).toFixed(2)} 20% OFF

Subtotal ${(product.priceInCents / 100).toFixed(2)}

Shipping Free

Tax Calculated at checkout

Total ${(product.priceInCents / 100).toFixed(2)}

{/* Trust Indicators */}

Secure Payment

SSL Encrypted

{/* Checkout Form */}

Payment Details Complete your purchase securely with Stripe

); } [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --radius: 0.625rem; } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type { Metadata } from "next"; import { GeistSans } from "geist/font/sans"; import { GeistMono } from "geist/font/mono"; import { Analytics } from "@vercel/analytics/next"; import "./globals.css"; export const metadata: Metadata = { title: "v0 App", description: "Created with v0", generator: "v0.app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } [V0_FILE]typescriptreact:file="app/success/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { CheckCircle, Package, Mail } from "lucide-react"; import Link from "next/link"; export default function SuccessPage() { return (

Payment Successful! Thank you for your purchase. Your order has been confirmed.

Order Processing

We'll prepare your order for shipping

Confirmation Email

Check your inbox for order details

Questions? Contact us at support@audiostore.com

); } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/checkout.tsx" isMerged="true" "use client"; import { useCallback } from "react"; import { EmbeddedCheckout, EmbeddedCheckoutProvider, } from "@stripe/react-stripe-js"; import { loadStripe } from "@stripe/stripe-js"; import { startCheckoutSession } from "../app/actions/stripe"; const stripePromise = loadStripe( process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY! ); export default function Checkout({ productId }: { productId: string }) { const startCheckoutSessionForProduct = useCallback( () => startCheckoutSession(productId), [productId] ); return (

); } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/badge.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 badgeVariants = cva( 'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', { variants: { variant: { default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90', secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90', destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground', }, }, defaultVariants: { variant: 'default', }, }, ) function Badge({ className, variant, asChild = false, ...props }: React.ComponentProps<'span'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'span' return ( ) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx" isMerged="true" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { ChevronRight, MoreHorizontal } from 'lucide-react' import { cn } from '@/lib/utils' function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) { return

} function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) { return (

) } function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<'a'> & { asChild?: boolean }) { const Comp = asChild ? Slot : 'a' return ( ) } function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) { return ( ) } function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) { return (
svg]:size-3.5', className)} {...props} > {children ?? }

& { asChild?: boolean }) { const Comp = asChild ? Slot : 'button' return ( ) } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true" import * as React from 'react' import { cn } from '@/lib/utils' function Card({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardTitle({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardDescription({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardAction({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardContent({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

) } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } [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 { CheckIcon } from 'lucide-react' import { cn } from '@/lib/utils' function Checkbox({ className, ...props }: React.ComponentProps) { return ( ) } export { Checkbox } [V0_FILE]typescriptreact:file="components/ui/collapsible.tsx" isMerged="true" 'use client' import * as CollapsiblePrimitive from '@radix-ui/react-collapsible' function Collapsible({ ...props }: React.ComponentProps) { return } function CollapsibleTrigger({ ...props }: React.ComponentProps) { return ( ) } function CollapsibleContent({ ...props }: React.ComponentProps) { return ( ) } export { Collapsible, CollapsibleTrigger, CollapsibleContent } [V0_FILE]typescriptreact:file="components/ui/form.tsx" isMerged="true" 'use client' import * as React from 'react' import * as LabelPrimitive from '@radix-ui/react-label' import { Slot } from '@radix-ui/react-slot' import { Controller, FormProvider, useFormContext, useFormState, type ControllerProps, type FieldPath, type FieldValues, } from 'react-hook-form' import { cn } from '@/lib/utils' import { Label } from '@/components/ui/label' const Form = FormProvider type FormFieldContextValue< TFieldValues extends FieldValues = FieldValues, TName extends FieldPath = FieldPath, > = { name: TName } const FormFieldContext = React.createContext( {} as FormFieldContextValue, ) const FormField = < TFieldValues extends FieldValues = FieldValues, TName extends FieldPath = FieldPath, >({ ...props }: ControllerProps) => { return ( ) } const useFormField = () => { const fieldContext = React.useContext(FormFieldContext) const itemContext = React.useContext(FormItemContext) const { getFieldState } = useFormContext() const formState = useFormState({ name: fieldContext.name }) const fieldState = getFieldState(fieldContext.name, formState) if (!fieldContext) { throw new Error('useFormField should be used within ') } const { id } = itemContext return { id, name: fieldContext.name, formItemId: `${id}-form-item`, formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message`, ...fieldState, } } type FormItemContextValue = { id: string } const FormItemContext = React.createContext( {} as FormItemContextValue, ) function FormItem({ className, ...props }: React.ComponentProps<'div'>) { const id = React.useId() return (

) } function FormLabel({ className, ...props }: React.ComponentProps) { const { error, formItemId } = useFormField() return ( ) } function FormControl({ ...props }: React.ComponentProps) { const { error, formItemId, formDescriptionId, formMessageId } = useFormField() return ( ) } function FormDescription({ className, ...props }: React.ComponentProps<'p'>) { const { formDescriptionId } = useFormField() return (

) } function FormMessage({ className, ...props }: React.ComponentProps<'p'>) { const { error, formMessageId } = useFormField() const body = error ? String(error?.message ?? '') : props.children if (!body) { return null } return (

{body}

) } export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from 'react' import { cn } from '@/lib/utils' function Input({ className, type, ...props }: React.ComponentProps<'input'>) { return ( ) } export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" 'use client' import * as React from 'react' import * as LabelPrimitive from '@radix-ui/react-label' import { cn } from '@/lib/utils' function Label({ className, ...props }: React.ComponentProps) { return ( ) } export { Label } [V0_FILE]typescriptreact:file="components/ui/popover.tsx" isMerged="true" 'use client' import * as React from 'react' import * as PopoverPrimitive from '@radix-ui/react-popover' import { cn } from '@/lib/utils' function Popover({ ...props }: React.ComponentProps) { return } function PopoverTrigger({ ...props }: React.ComponentProps) { return } function PopoverContent({ className, align = 'center', sideOffset = 4, ...props }: React.ComponentProps) { return ( ) } function PopoverAnchor({ ...props }: React.ComponentProps) { return } export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } [V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isMerged="true" 'use client' import * as React from 'react' import * as RadioGroupPrimitive from '@radix-ui/react-radio-group' import { CircleIcon } from 'lucide-react' import { cn } from '@/lib/utils' function RadioGroup({ className, ...props }: React.ComponentProps) { return ( ) } function RadioGroupItem({ className, ...props }: React.ComponentProps) { return ( ) } export { RadioGroup, RadioGroupItem } [V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true" 'use client' import * as React from 'react' import * as SelectPrimitive from '@radix-ui/react-select' import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react' import { cn } from '@/lib/utils' function Select({ ...props }: React.ComponentProps) { return } function SelectGroup({ ...props }: React.ComponentProps) { return } function SelectValue({ ...props }: React.ComponentProps) { return } function SelectTrigger({ className, size = 'default', children, ...props }: React.ComponentProps & { size?: 'sm' | 'default' }) { return ( {children} ) } function SelectContent({ className, children, position = 'popper', ...props }: React.ComponentProps) { return ( {children} ) } function SelectLabel({ className, ...props }: React.ComponentProps) { return ( ) } function SelectItem({ className, children, ...props }: React.ComponentProps) { return ( {children} ) } function SelectSeparator({ className, ...props }: React.ComponentProps) { return ( ) } function SelectScrollUpButton({ className, ...props }: React.ComponentProps) { return ( ) } function SelectScrollDownButton({ className, ...props }: React.ComponentProps) { return ( ) } export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } [V0_FILE]typescriptreact:file="components/ui/separator.tsx" isMerged="true" 'use client' import * as React from 'react' import * as SeparatorPrimitive from '@radix-ui/react-separator' import { cn } from '@/lib/utils' function Separator({ className, orientation = 'horizontal', decorative = true, ...props }: React.ComponentProps) { return ( ) } export { Separator } [V0_FILE]typescriptreact:file="components/ui/skeleton.tsx" isMerged="true" import { cn } from '@/lib/utils' function Skeleton({ className, ...props }: React.ComponentProps<'div'>) { return (

) } export { Skeleton } [V0_FILE]typescriptreact:file="components/ui/sonner.tsx" isMerged="true" 'use client' import { useTheme } from 'next-themes' import { Toaster as Sonner, ToasterProps } from 'sonner' const Toaster = ({ ...props }: ToasterProps) => { const { theme = 'system' } = useTheme() return ( ) } export { Toaster } [V0_FILE]typescriptreact:file="components/ui/switch.tsx" isMerged="true" 'use client' import * as React from 'react' import * as SwitchPrimitive from '@radix-ui/react-switch' import { cn } from '@/lib/utils' function Switch({ className, ...props }: React.ComponentProps) { return ( ) } export { Switch } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true" import * as React from 'react' import { cn } from '@/lib/utils' function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) { return (

)
}

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as ToastPrimitives from '@radix-ui/react-toast'
import { cva, type VariantProps } from 'class-variance-authority'
import { X } from 'lucide-react'

import { cn } from '@/lib/utils'

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
      className,
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
  {
    variants: {
      variant: {
        default: 'border bg-background text-foreground',
        destructive:
          'destructive group border-destructive bg-destructive text-destructive-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
    VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return (
    <ToastPrimitives.Root
      ref={ref}
      className={cn(toastVariants({ variant }), className)}
      {...props}
    />
  )
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
      className,
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
      className,
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title
    ref={ref}
    className={cn('text-sm font-semibold', className)}
    {...props}
  />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description
    ref={ref}
    className={cn('text-sm opacity-90', className)}
    {...props}
  />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true"
'use client'

import { useToast } from '@/hooks/use-toast'
import {
  Toast,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from '@/components/ui/toast'

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(function ({ id, title, description, action, ...props }) {
        return (
          <Toast key={id} {...props}>
            <div className="grid gap-1">
              {title && <ToastTitle>{title}</ToastTitle>}
              {description && (
                <ToastDescription>{description}</ToastDescription>
              )}
            </div>
            {action}
            <ToastClose />
          </Toast>
        )
      })}
      <ToastViewport />
    </ToastProvider>
  )
}
[V0_FILE]typescriptreact:file="components/ui/toggle.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as TogglePrimitive from '@radix-ui/react-toggle'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const toggleVariants = cva(
  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        outline:
          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
      },
      size: {
        default: 'h-9 px-2 min-w-9',
        sm: 'h-8 px-1.5 min-w-8',
        lg: 'h-10 px-2.5 min-w-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Toggle({
  className,
  variant,
  size,
  ...props
}: React.ComponentProps<typeof TogglePrimitive.Root> &
  VariantProps<typeof toggleVariants>) {
  return (
    <TogglePrimitive.Root
      data-slot="toggle"
      className={cn(toggleVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Toggle, toggleVariants }
[V0_FILE]typescriptreact:file="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'

function TooltipProvider({
  delayDuration = 0,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
  return (
    <TooltipPrimitive.Provider
      data-slot="tooltip-provider"
      delayDuration={delayDuration}
      {...props}
    />
  )
}

function Tooltip({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
  return (
    <TooltipProvider>
      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
    </TooltipProvider>
  )
}

function TooltipTrigger({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}

function TooltipContent({
  className,
  sideOffset = 0,
  children,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
  return (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Content
        data-slot="tooltip-content"
        sideOffset={sideOffset}
        className={cn(
          'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
          className,
        )}
        {...props}
      >
        {children}
        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
      </TooltipPrimitive.Content>
    </TooltipPrimitive.Portal>
  )
}

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
[V0_FILE]typescriptreact:file="components/ui/use-mobile.tsx" isMerged="true"
import * as React from 'react'

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener('change', onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener('change', onChange)
  }, [])

return !!isMobile
}
[V0_FILE]typescript:file="components/ui/use-toast.ts" isMerged="true"
'use client'

// Inspired by react-hot-toast library
import * as React from 'react'

import type { ToastActionElement, ToastProps } from '@/components/ui/toast'

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: 'ADD_TOAST',
  UPDATE_TOAST: 'UPDATE_TOAST',
  DISMISS_TOAST: 'DISMISS_TOAST',
  REMOVE_TOAST: 'REMOVE_TOAST',
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType['ADD_TOAST']
      toast: ToasterToast
    }
  | {
      type: ActionType['UPDATE_TOAST']
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType['DISMISS_TOAST']
      toastId?: ToasterToast['id']
    }
  | {
      type: ActionType['REMOVE_TOAST']
      toastId?: ToasterToast['id']
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: 'REMOVE_TOAST',
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'ADD_TOAST':
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case 'UPDATE_TOAST':
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t,
        ),
      }

case 'DISMISS_TOAST': {
      const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      }
    }
    case 'REMOVE_TOAST':
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, 'id'>

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: 'UPDATE_TOAST',
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })

dispatch({
    type: 'ADD_TOAST',
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescript:file="hooks/use-mobile.ts" isMerged="true"
import * as React from 'react'

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

return !!isMobile
}
[V0_FILE]typescript:file="hooks/use-toast.ts" isMerged="true"
'use client'

// Inspired by react-hot-toast library
import * as React from 'react'

import type { ToastActionElement, ToastProps } from '@/components/ui/toast'

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: 'ADD_TOAST',
  UPDATE_TOAST: 'UPDATE_TOAST',
  DISMISS_TOAST: 'DISMISS_TOAST',
  REMOVE_TOAST: 'REMOVE_TOAST',
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: 'REMOVE_TOAST',
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

case 'UPDATE_TOAST':
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t,
        ),
      }

case 'DISMISS_TOAST': {
      const { toastId } = action

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, 'id'>

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: 'UPDATE_TOAST',
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })

dispatch({
    type: 'ADD_TOAST',
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescript:file="lib/products.ts" isMerged="true"
export interface Product {
  id: string
  name: string
  description: string
  priceInCents: number
  images?: string[]
  features?: string[]
}

export const PRODUCTS: Product[] = [
  {
    id: "premium-headphones",
    name: "Premium Wireless Headphones",
    description: "High-quality wireless headphones with noise cancellation and premium sound quality.",
    priceInCents: 19999, // $199.99
    images: ["/premium-wireless-headphones.png"],
    features: [
      "Active Noise Cancellation",
      "30-hour battery life",
      "Premium leather comfort",
      "Hi-Res Audio certified",
      "Quick charge: 5 min = 3 hours",
    ],
  },
]
[V0_FILE]typescript:file="lib/stripe.ts" isMerged="true"
import "server-only";

import Stripe from "stripe";

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]typescript:file="next-env.d.ts" isMerged="true"
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@stripe/react-stripe-js": "latest",
    "@stripe/stripe-js": "latest",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "15.2.4",
    "next-themes": "^0.4.6",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.60.0",
    "server-only": "latest",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "stripe": "latest",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.67"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs" isMerged="true"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

export default config
[V0_FILE]css:file="styles/globals.css" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --radius: 0.625rem;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]json:file="tsconfig.json" isMerged="true"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_evoXA37DScriOm15TondTH9XBiWC/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" isMerged="true"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_evoXA37DScriOm15TondTH9XBiWC/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_evoXA37DScriOm15TondTH9XBiWC/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_evoXA37DScriOm15TondTH9XBiWC/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isMerged="true"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_evoXA37DScriOm15TondTH9XBiWC/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true"
[V0_FILE]png:file="public/premium-wireless-headphones.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_evoXA37DScriOm15TondTH9XBiWC/VlyuBGKTRmu_vKgzI0Q3mH/public/premium-wireless-headphones.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Check, Star, ShoppingCart, Gift, Coins } from "lucide-react"
import { PRODUCTS } from "@/lib/products"
import Link from "next/link"
import Image from "next/image"

export default function HomePage() {
  const product = PRODUCTS[0] // Get our single product

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <h1 className="text-2xl font-bold">AudioStore</h1>
            <Badge variant="secondary" className="text-sm">
              Free Shipping
            </Badge>
          </div>
        </div>
      </header>

{/* Hero Section */}
      <section className="py-12 lg:py-20">
        <div className="container mx-auto px-4">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            {/* Product Image */}
            <div className="relative">
              <div className="aspect-square rounded-2xl overflow-hidden bg-muted">
                <Image
                  src={
                    product.images?.[0] ||
                    "/placeholder.svg?height=500&width=500&query=premium headphones" ||
                    "/placeholder.svg"
                  }
                  alt={product.name}
                  width={500}
                  height={500}
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="absolute top-4 left-4">
                <Badge className="bg-primary text-primary-foreground">Best Seller</Badge>
              </div>
            </div>

{/* Product Details */}
            <div className="space-y-6">
              <div>
                <div className="flex items-center gap-2 mb-2">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="w-5 h-5 fill-yellow-400 text-yellow-400" />
                  ))}
                  <span className="text-sm text-muted-foreground">(4.9/5 from 2,847 reviews)</span>
                </div>
                <h2 className="text-3xl lg:text-4xl font-bold text-balance mb-4">{product.name}</h2>
                <p className="text-lg text-muted-foreground text-pretty">{product.description}</p>
              </div>

{/* Features */}
              <div className="space-y-3">
                <h3 className="font-semibold">Key Features:</h3>
                <ul className="space-y-2">
                  {product.features?.map((feature, index) => (
                    <li key={index} className="flex items-center gap-3">
                      <Check className="w-5 h-5 text-green-600 flex-shrink-0" />
                      <span>{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>

{/* Price and CTA */}
              <div className="space-y-4">
                <div className="flex items-baseline gap-2">
                  <span className="text-3xl font-bold">${(product.priceInCents / 100).toFixed(2)}</span>
                  <span className="text-lg text-muted-foreground line-through">$249.99</span>
                  <Badge variant="destructive">20% OFF</Badge>
                </div>

<Link href="/checkout">
                  <Button size="lg" className="cursor-pointer w-full lg:w-auto text-lg px-8 py-6">
                    <ShoppingCart className="w-5 h-5 mr-2" />
                    Buy Now - Free Shipping
                  </Button>
                </Link>

<p className="text-sm text-muted-foreground">
                  ✓ 30-day money-back guarantee • ✓ 2-year warranty • ✓ Free returns
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

<section className="py-12 bg-gradient-to-br from-primary/5 to-primary/10">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-8">
              <h2 className="text-3xl font-bold mb-3">Store Credit & Gift Cards</h2>
              <p className="text-muted-foreground text-lg">Purchase store credit for yourself or send as a gift</p>
            </div>

<div className="grid md:grid-cols-2 gap-6">
              {/* Store Credit Card */}
              <div className="bg-card rounded-xl p-6 border-2 border-border hover:border-primary transition-colors">
                <div className="flex items-center gap-3 mb-4">
                  <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center">
                    <Coins className="w-6 h-6 text-primary" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-lg">Store Credit</h3>
                    <p className="text-sm text-muted-foreground">Choose your amount</p>
                  </div>
                </div>
                <p className="text-sm text-muted-foreground mb-4">
                  Add credit to your account for future purchases. Choose any amount from $10 to $1,000.
                </p>
                <Link href="/credits">
                  <Button className="w-full" variant="default">
                    <Coins className="w-4 h-4 mr-2" />
                    Buy Store Credit
                  </Button>
                </Link>
              </div>

{/* Gift Card */}
              <div className="bg-card rounded-xl p-6 border-2 border-border hover:border-primary transition-colors">
                <div className="flex items-center gap-3 mb-4">
                  <div className="w-12 h-12 bg-green-500/10 rounded-full flex items-center justify-center">
                    <Gift className="w-6 h-6 text-green-600" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-lg">Gift Card</h3>
                    <p className="text-sm text-muted-foreground">Perfect for gifting</p>
                  </div>
                </div>
                <p className="text-sm text-muted-foreground mb-4">
                  Send a gift card to someone special. They can use it for any purchase in our store.
                </p>
                <Link href="/credits?type=gift">
                  <Button className="w-full bg-transparent" variant="outline">
                    <Gift className="w-4 h-4 mr-2" />
                    Buy Gift Card
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Trust Indicators */}
      <section className="py-12 bg-muted/50">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-3 gap-8 text-center">
            <div className="space-y-2">
              <div className="w-12 h-12 bg-primary rounded-full flex items-center justify-center mx-auto">
                <ShoppingCart className="w-6 h-6 text-primary-foreground" />
              </div>
              <h3 className="font-semibold">Free Shipping</h3>
              <p className="text-sm text-muted-foreground">On all orders over $100</p>
            </div>
            <div className="space-y-2">
              <div className="w-12 h-12 bg-primary rounded-full flex items-center justify-center mx-auto">
                <Check className="w-6 h-6 text-primary-foreground" />
              </div>
              <h3 className="font-semibold">Quality Guarantee</h3>
              <p className="text-sm text-muted-foreground">30-day money-back guarantee</p>
            </div>
            <div className="space-y-2">
              <div className="w-12 h-12 bg-primary rounded-full flex items-center justify-center mx-auto">
                <Star className="w-6 h-6 text-primary-foreground" />
              </div>
              <h3 className="font-semibold">Top Rated</h3>
              <p className="text-sm text-muted-foreground">4.9/5 stars from customers</p>
            </div>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="border-t py-8">
        <div className="container mx-auto px-4 text-center text-muted-foreground">
          <p>© 2025 AudioStore. All rights reserved.</p>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/credits/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/credit-checkout.tsx" isMerged="true"
"use client"

import { useCallback } from "react"
import { EmbeddedCheckout, EmbeddedCheckoutProvider } from "@stripe/react-stripe-js"
import { loadStripe } from "@stripe/stripe-js"

import { startCreditCheckoutSession } from "../app/actions/stripe"

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!)

export default function CreditCheckout({
  amountInCents,
  isGift,
}: {
  amountInCents: number
  isGift: boolean
}) {
  const startCheckoutSessionForCredit = useCallback(
    () => startCreditCheckoutSession(amountInCents, isGift),
    [amountInCents, isGift],
  )

return (
    <div id="credit-checkout">
      <EmbeddedCheckoutProvider stripe={stripePromise} options={{ fetchClientSecret: startCheckoutSessionForCredit }}>
        <EmbeddedCheckout />
      </EmbeddedCheckoutProvider>
    </div>
  )
}
[V0_FILE]typescript:file="app/actions/stripe.ts" isEdit="true" isMerged="true"
"use server"

import { stripe } from "../../lib/stripe"
import { PRODUCTS } from "../../lib/products"

export async function startCheckoutSession(productId: string) {
  const product = PRODUCTS.find((p) => p.id === productId)
  if (!product) {
    throw new Error(`Product with id "${productId}" not found`)
  }

// Create Checkout Sessions from body params.
  const session = await stripe.checkout.sessions.create({
    ui_mode: "embedded",
    redirect_on_completion: "never",
    line_items: [
      {
        price_data: {
          currency: "usd",
          product_data: {
            name: product.name,
            description: product.description,
          },
          unit_amount: product.priceInCents,
        },
        quantity: 1,
      },
    ],
    mode: "payment",
  })

return session.client_secret!
}

export async function startCreditCheckoutSession(amountInCents: number, isGift = false) {
  // Validate amount (min $10, max $1000)
  if (amountInCents < 1000 || amountInCents > 100000) {
    throw new Error("Amount must be between $10 and $1,000")
  }

const productName = isGift ? "Gift Card" : "Store Credit"
  const description = isGift
    ? `Gift card worth $${(amountInCents / 100).toFixed(2)}`
    : `Store credit worth $${(amountInCents / 100).toFixed(2)}`

// Create Checkout Session for custom amount
  const session = await stripe.checkout.sessions.create({
    ui_mode: "embedded",
    redirect_on_completion: "never",
    line_items: [
      {
        price_data: {
          currency: "usd",
          product_data: {
            name: productName,
            description: description,
            metadata: {
              type: isGift ? "gift_card" : "store_credit",
            },
          },
          unit_amount: amountInCents,
        },
        quantity: 1,
      },
    ],
    mode: "payment",
    metadata: {
      type: isGift ? "gift_card" : "store_credit",
      amount: amountInCents.toString(),
    },
  })

return session.client_secret!
}
[V0_FILE]typescriptreact:file="app/credits/page.tsx" isEdit="true"
"use client"

import { useState, Suspense } from "react"
import { useSearchParams } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Gift, Coins, DollarSign, Shield, CreditCard } from "lucide-react"
import Link from "next/link"
import CreditCheckout from "@/components/credit-checkout"

function CreditsPageContent() {
  const searchParams = useSearchParams()
  const isGift = searchParams.get("type") === "gift"

const [amount, setAmount] = useState<string>("50")
  const [customAmount, setCustomAmount] = useState<string>("")
  const [showCheckout, setShowCheckout] = useState(false)

const presetAmounts = [10, 25, 50, 100, 250, 500]

const handleAmountSelect = (value: number) => {
    setAmount(value.toString())
    setCustomAmount("")
  }

const handleCustomAmountChange = (value: string) => {
    const numericValue = value.replace(/[^0-9]/g, "")
    setCustomAmount(numericValue)
    if (numericValue) {
      setAmount(numericValue)
    }
  }

const finalAmount = customAmount || amount
  const amountInCents = Number.parseInt(finalAmount) * 100

const handleProceedToCheckout = () => {
    if (amountInCents >= 1000 && amountInCents <= 100000) {
      setShowCheckout(true)
    }
  }

return (
    <div className="min-h-screen bg-background">
      <header className="border-b">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center gap-4">
            <Link href="/" className="flex items-center gap-2 text-muted-foreground hover:text-foreground">
              <ArrowLeft className="w-4 h-4" />
              Back to store
            </Link>
            <h1 className="text-xl font-semibold">
              {showCheckout ? "Secure Checkout" : isGift ? "Buy Gift Card" : "Buy Store Credit"}
            </h1>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        <div className="max-w-6xl mx-auto">
          {!showCheckout ? (
            <div className="grid lg:grid-cols-2 gap-8">
              {/* Amount Selection */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    {isGift ? <Gift className="w-5 h-5 text-green-600" /> : <Coins className="w-5 h-5 text-primary" />}
                    {isGift ? "Gift Card Amount" : "Credit Amount"}
                  </CardTitle>
                  <CardDescription>
                    {isGift ? "Choose how much you'd like to gift" : "Select or enter the amount you want to add"}
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  {/* Preset Amounts */}
                  <div>
                    <Label className="mb-3 block">Popular Amounts</Label>
                    <div className="grid grid-cols-3 gap-3">
                      {presetAmounts.map((preset) => (
                        <Button
                          key={preset}
                          variant={amount === preset.toString() && !customAmount ? "default" : "outline"}
                          className="h-16 text-lg font-semibold"
                          onClick={() => handleAmountSelect(preset)}
                        >
                          ${preset}
                        </Button>
                      ))}
                    </div>
                  </div>

{/* Custom Amount */}
                  <div>
                    <Label htmlFor="custom-amount" className="mb-2 block">
                      Or Enter Custom Amount
                    </Label>
                    <div className="relative">
                      <DollarSign className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
                      <Input
                        id="custom-amount"
                        type="text"
                        placeholder="Enter amount"
                        value={customAmount}
                        onChange={(e) => handleCustomAmountChange(e.target.value)}
                        className="pl-10 h-12 text-lg"
                      />
                    </div>
                    <p className="text-xs text-muted-foreground mt-2">Minimum: $10 • Maximum: $1,000</p>
                  </div>

<div className="border-t pt-4 space-y-2">
                    <div className="flex justify-between text-sm">
                      <span>{isGift ? "Gift Card Value" : "Credit Amount"}</span>
                      <span>${finalAmount || "0"}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span>Processing Fee</span>
                      <span className="text-green-600">Free</span>
                    </div>
                    <div className="border-t pt-2 flex justify-between font-semibold">
                      <span>Total</span>
                      <span>${finalAmount || "0"}</span>
                    </div>
                  </div>

<Button
                    size="lg"
                    className="w-full"
                    onClick={handleProceedToCheckout}
                    disabled={!finalAmount || amountInCents < 1000 || amountInCents > 100000}
                  >
                    {isGift ? (
                      <>
                        <Gift className="w-5 h-5 mr-2" />
                        Continue to Checkout
                      </>
                    ) : (
                      <>
                        <Coins className="w-5 h-5 mr-2" />
                        Continue to Checkout
                      </>
                    )}
                  </Button>
                </CardContent>
              </Card>

{/* Info Card */}
              <div className="space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle>{isGift ? "How Gift Cards Work" : "How Store Credit Works"}</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="space-y-3">
                      <div className="flex gap-3">
                        <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5">
                          <span className="text-xs font-semibold text-primary">1</span>
                        </div>
                        <div>
                          <p className="font-medium">Choose Your Amount</p>
                          <p className="text-sm text-muted-foreground">
                            Select from preset amounts or enter a custom value
                          </p>
                        </div>
                      </div>
                      <div className="flex gap-3">
                        <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5">
                          <span className="text-xs font-semibold text-primary">2</span>
                        </div>
                        <div>
                          <p className="font-medium">Complete Payment</p>
                          <p className="text-sm text-muted-foreground">Securely pay with Stripe checkout</p>
                        </div>
                      </div>
                      <div className="flex gap-3">
                        <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5">
                          <span className="text-xs font-semibold text-primary">3</span>
                        </div>
                        <div>
                          <p className="font-medium">{isGift ? "Send or Use" : "Start Shopping"}</p>
                          <p className="text-sm text-muted-foreground">
                            {isGift
                              ? "Gift card code will be emailed to you"
                              : "Credit is instantly added to your account"}
                          </p>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle>Benefits</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2 text-sm">
                      <li className="flex items-center gap-2">
                        <Badge variant="secondary" className="w-5 h-5 p-0 flex items-center justify-center">
                          ✓
                        </Badge>
                        <span>Never expires</span>
                      </li>
                      <li className="flex items-center gap-2">
                        <Badge variant="secondary" className="w-5 h-5 p-0 flex items-center justify-center">
                          ✓
                        </Badge>
                        <span>Use on any product</span>
                      </li>
                      <li className="flex items-center gap-2">
                        <Badge variant="secondary" className="w-5 h-5 p-0 flex items-center justify-center">
                          ✓
                        </Badge>
                        <span>Instant delivery</span>
                      </li>
                      <li className="flex items-center gap-2">
                        <Badge variant="secondary" className="w-5 h-5 p-0 flex items-center justify-center">
                          ✓
                        </Badge>
                        <span>Secure payment processing</span>
                      </li>
                    </ul>
                  </CardContent>
                </Card>

<div className="grid grid-cols-2 gap-4">
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <Shield className="w-4 h-4 text-green-600" />
                    <span>Secure Payment</span>
                  </div>
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <CreditCard className="w-4 h-4 text-blue-600" />
                    <span>SSL Encrypted</span>
                  </div>
                </div>
              </div>
            </div>
          ) : (
            <div className="grid lg:grid-cols-2 gap-8">
              <div className="space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Shield className="w-5 h-5 text-green-600" />
                      Order Summary
                    </CardTitle>
                    <CardDescription>Review your purchase details</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="flex gap-4">
                      <div className="w-20 h-20 rounded-lg overflow-hidden bg-muted flex-shrink-0 flex items-center justify-center">
                        {isGift ? (
                          <Gift className="w-10 h-10 text-green-600" />
                        ) : (
                          <Coins className="w-10 h-10 text-primary" />
                        )}
                      </div>
                      <div className="flex-1">
                        <h3 className="font-semibold">{isGift ? "Gift Card" : "Store Credit"}</h3>
                        <p className="text-sm text-muted-foreground">Digital delivery</p>
                        <div className="flex items-center gap-2 mt-1">
                          <span className="font-semibold">${(amountInCents / 100).toFixed(2)}</span>
                          <Badge variant="secondary" className="text-xs">
                            Instant
                          </Badge>
                        </div>
                      </div>
                    </div>

<div className="border-t pt-4 space-y-2">
                      <div className="flex justify-between text-sm">
                        <span>Subtotal</span>
                        <span>${(amountInCents / 100).toFixed(2)}</span>
                      </div>
                      <div className="flex justify-between text-sm">
                        <span>Processing Fee</span>
                        <span className="text-green-600">Free</span>
                      </div>
                      <div className="flex justify-between text-sm">
                        <span>Tax</span>
                        <span>Calculated at checkout</span>
                      </div>
                      <div className="border-t pt-2 flex justify-between font-semibold">
                        <span>Total</span>
                        <span>${(amountInCents / 100).toFixed(2)}</span>
                      </div>
                    </div>

<Button variant="outline" className="w-full bg-transparent" onClick={() => setShowCheckout(false)}>
                      <ArrowLeft className="w-4 h-4 mr-2" />
                      Change Amount
                    </Button>
                  </CardContent>
                </Card>

<div>
                <Card>
                  <CardHeader>
                    <CardTitle>Payment Details</CardTitle>
                    <CardDescription>Complete your purchase securely with Stripe</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <CreditCheckout amountInCents={amountInCents} isGift={isGift} />
                  </CardContent>
                </Card>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default function CreditsPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <CreditsPageContent />
    </Suspense>
  )
}db:["$","$Le2",null,{"chatId":"nGIAPc7BR0o","children":["$","$Le3",null,{"data":{"@\"active-block\",\"nGIAPc7BR0o\",":{"id":"b_IgUyDNWxF6r","messageId":"3erIevYoXdf6nSlZGX8bPXrLaU3I7TkJ","source":"$e4","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"stripe-marketplace-landing","type":"code-project","project":"stripe-marketplace-landing","taskNameActive":"Matching credit design","taskNameComplete":"Matched credit design"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"nGIAPc7BR0o\",":false},"children":"$Le5"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from ussaaron

More Templates Like This

More from ussaaron

More Templates Like This