[V0_FILE]typescriptreact:file="pet-store-ecommerce.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import Link from "next/link" import { ShoppingCart, Heart, Search, ChevronDown, Globe, User, Menu, X, Star, TruckIcon, ShieldCheck, Clock, CreditCard, } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" export default function PetStore() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const featuredProducts = [ { id: 1, name: "Premium Dog Food", image: "/placeholder.svg?height=300&width=300", price: 49.99, offerPrice: 39.99, category: "Food", }, { id: 2, name: "Comfortable Dog Bed", image: "/placeholder.svg?height=300&width=300", price: 89.99, offerPrice: 69.99, category: "Accessories", }, { id: 3, name: "Interactive Dog Toy", image: "/placeholder.svg?height=300&width=300", price: 24.99, offerPrice: 19.99, category: "Toys", }, { id: 4, name: "Dog Grooming Kit", image: "/placeholder.svg?height=300&width=300", price: 34.99, offerPrice: 29.99, category: "Grooming", }, ] const testimonials = [ { id: 1, name: "Sarah Johnson", image: "/placeholder.svg?height=80&width=80", rating: 5, text: "My dog absolutely loves the premium food I purchased from PetDo. The quality is exceptional and delivery was super fast!", }, { id: 2, name: "Michael Brown", image: "/placeholder.svg?height=80&width=80", rating: 5, text: "The dog bed I bought is amazing quality. My furry friend hasn't left it since it arrived. Great customer service too!", }, { id: 3, name: "Emily Davis", image: "/placeholder.svg?height=80&width=80", rating: 4, text: "The interactive toys keep my puppy entertained for hours. Definitely coming back for more products!", }, ] return (

{/* Header */}

PetDo

Home Shop Categories Food Accessories Toys Grooming About Contact

English Spanish French

{/* Mobile Menu */} {mobileMenuOpen && (

Home Shop

Everything Your Dog Needs in One Place

Premium quality products for your furry friends. From nutritious food to comfortable accessories.

{/* Product Categories */}

Shop by Category

{["Food", "Accessories", "Toys", "Grooming"].map((category) => (

{category}

))}

{/* Featured Products */}

Why Choose PetDo

Free Shipping

On orders over $50. Get your pet supplies delivered to your doorstep.

Quality Guarantee

All our products are carefully selected for quality and safety.

24/7 Support

Our customer service team is available around the clock to help you.

Secure Payment

Multiple secure payment options for your convenience and safety.

{/* Testimonials */}

What Our Customers Say

{testimonials.map((testimonial) => (

{testimonial.name}

{Array.from({ length: 5 }).map((_, i) => ( ))}

{testimonial.text}

))}

{/* Newsletter */}

Join Our Newsletter

Subscribe to get special offers, free giveaways, and pet care tips.

By subscribing, you agree to our Terms of Service and Privacy Policy.

{/* Footer */}

) } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @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))", }, // Red branding colors brand: { 50: "#FFF5F5", 100: "#FFE3E3", 200: "#FFC9C9", 300: "#FFA8A8", 400: "#FF8787", 500: "#FF6B6B", // Primary brand color 600: "#FA5252", 700: "#F03E3E", 800: "#E03131", 900: "#C92A2A", }, }, 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")], } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 85% 60%; /* Red color */ --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 85% 60%; --radius: 0.5rem; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 85% 60%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 85% 60%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/header.tsx" "use client" import { useState } from "react" import Image from "next/image" import Link from "next/link" import { ShoppingCart, Search, ChevronDown, Globe, User, Menu, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Badge } from "@/components/ui/badge" export default function Header() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false) return (

PetDo

Home Shop Categories Food Accessories Toys Grooming About Contact

English Spanish French

{/* Mobile Menu */} {mobileMenuOpen && (

Home Shop

Filters

{(selectedFilters.categories.length > 0 || selectedFilters.brands.length > 0 || selectedFilters.ratings.length > 0 || priceRange[0] > 0 || priceRange[1] < 100) && ( )}

Shop All Products

Home / Shop

{/* Filters - Desktop */}

{/* Filters - Mobile */} Filters Narrow down your product search {/* Product Grid */}

{/* Active filters */}

{selectedFilters.categories.map((category) => ( {category} toggleFilter("categories", category)} /> ))} {selectedFilters.brands.map((brand) => ( {brand} toggleFilter("brands", brand)} /> ))} {(priceRange[0] > 0 || priceRange[1] < 100) && ( ${priceRange[0]} - ${priceRange[1]} setPriceRange([0, 100])} /> )}

{filteredProducts.length} products

{filteredProducts.length === 0 ? (

No products found

Try adjusting your filters to find what you're looking for.

) : (

{filteredProducts.map((product) => (

{product.category}

{product.name}

${product.price.toFixed(2)} ${product.offerPrice.toFixed(2)}

{Array.from({ length: 5 }).map((_, i) => ( ))}

))}

)} {/* Pagination */}

) } [V0_FILE]typescriptreact:file="app/shop/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/cart/page.tsx" "use client" import { useState } from "react" import Image from "next/image" import Link from "next/link" import { Minus, Plus, Trash2, ArrowRight } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { Card, CardContent } from "@/components/ui/card" export default function CartPage() { const [cartItems, setCartItems] = useState([ { id: 1, name: "Premium Dog Food", image: "/placeholder.svg?height=100&width=100", price: 39.99, quantity: 2, }, { id: 2, name: "Comfortable Dog Bed", image: "/placeholder.svg?height=100&width=100", price: 69.99, quantity: 1, }, { id: 3, name: "Interactive Dog Toy", image: "/placeholder.svg?height=100&width=100", price: 19.99, quantity: 3, }, ]) const updateQuantity = (id, newQuantity) => { if (newQuantity < 1) return setCartItems((prev) => prev.map((item) => (item.id === id ? { ...item, quantity: newQuantity } : item))) } const removeItem = (id) => { setCartItems((prev) => prev.filter((item) => item.id !== id)) } const subtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0) const shipping = 5.99 const tax = subtotal * 0.08 const total = subtotal + shipping + tax return (

Shopping Cart

Home / Cart

{cartItems.length === 0 ? (

Your cart is empty

Looks like you haven't added any products to your cart yet.

) : (

Product

Price

Quantity

Subtotal

{cartItems.map((item) => (

{item.name}

${item.price.toFixed(2)}

{item.quantity}

${(item.price * item.quantity).toFixed(2)}

{cartItems.indexOf(item) < cartItems.length - 1 && }

))}

Order Summary

Subtotal ${subtotal.toFixed(2)}

Shipping ${shipping.toFixed(2)}

Tax ${tax.toFixed(2)}

Total ${total.toFixed(2)}

)}

) } [V0_FILE]typescriptreact:file="app/checkout/page.tsx" "use client" import { useState } from "react" import Image from "next/image" import Link from "next/link" import { CreditCard } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Separator } from "@/components/ui/separator" import { Checkbox } from "@/components/ui/checkbox" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { Card, CardContent } from "@/components/ui/card" export default function CheckoutPage() { const [sameAsShipping, setSameAsShipping] = useState(true) const cartItems = [ { id: 1, name: "Premium Dog Food", image: "/placeholder.svg?height=100&width=100", price: 39.99, quantity: 2, }, { id: 2, name: "Comfortable Dog Bed", image: "/placeholder.svg?height=100&width=100", price: 69.99, quantity: 1, }, { id: 3, name: "Interactive Dog Toy", image: "/placeholder.svg?height=100&width=100", price: 19.99, quantity: 3, }, ] const subtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0) const shipping = 5.99 const tax = subtotal * 0.08 const total = subtotal + shipping + tax return (

Checkout

Home / Cart / Checkout

{/* Shipping Information */}

Shipping Information

First Name

Last Name

Phone

Address

Apartment, suite, etc. (optional)

City

State

ZIP Code

Country

{/* Billing Information */}

Billing Information

Same as shipping address

{!sameAsShipping && (

First Name

Last Name

Address

Apartment, suite, etc. (optional)

City

State

ZIP Code

Country

)}

{/* Payment Method */}

Payment Method

Credit Card

Card Number

Expiration Date

CVV

Name on Card

PayPal

{/* Order Notes */}

Order Notes (Optional)

Notes

</div>
          </div>
        </div>

{/* Order Summary */}
        <div>
          <div className="sticky top-20">
            <Card>
              <CardContent className="p-6">
                <h2 className="text-xl font-semibold mb-4">Order Summary</h2>

<Accordion type="single" collapsible defaultValue="items">
                  <AccordionItem value="items" className="border-none">
                    <AccordionTrigger className="py-2">{cartItems.length} items</AccordionTrigger>
                    <AccordionContent>
                      <div className="space-y-4">
                        {cartItems.map((item) => (
                          <div key={item.id} className="flex gap-4">
                            <div className="relative h-16 w-16 rounded-md overflow-hidden flex-shrink-0">
                              <Image
                                src={item.image || "/placeholder.svg"}
                                alt={item.name}
                                fill
                                className="object-cover"
                              />
                              <div className="absolute top-0 right-0 bg-primary text-primary-foreground text-xs w-5 h-5 flex items-center justify-center rounded-full">
                                {item.quantity}
                              </div>
                            </div>
                            <div className="flex-1">
                              <h4 className="text-sm font-medium">{item.name}</h4>
                              <p className="text-sm text-muted-foreground">
                                ${item.price.toFixed(2)} x {item.quantity}
                              </p>
                            </div>
                            <div className="text-sm font-medium">${(item.price * item.quantity).toFixed(2)}</div>
                          </div>
                        ))}
                      </div>
                    </AccordionContent>
                  </AccordionItem>
                </Accordion>

<div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Subtotal</span>
                    <span>${subtotal.toFixed(2)}</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Shipping</span>
                    <span>${shipping.toFixed(2)}</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-muted-foreground">Tax</span>
                    <span>${tax.toFixed(2)}</span>
                  </div>
                  <Separator />
                  <div className="flex items-center justify-between font-medium text-lg">
                    <span>Total</span>
                    <span>${total.toFixed(2)}</span>
                  </div>

<div className="pt-4">
                    <Button className="w-full" size="lg" asChild>
                      <Link href="/checkout/review">Review Order</Link>
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/checkout/review/page.tsx"
"use client"
import Image from "next/image"
import Link from "next/link"
import { CreditCard, Edit2 } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { Card, CardContent } from "@/components/ui/card"

export default function ReviewOrderPage() {
  const cartItems = [
    {
      id: 1,
      name: "Premium Dog Food",
      image: "/placeholder.svg?height=100&width=100",
      price: 39.99,
      quantity: 2,
    },
    {
      id: 2,
      name: "Comfortable Dog Bed",
      image: "/placeholder.svg?height=100&width=100",
      price: 69.99,
      quantity: 1,
    },
    {
      id: 3,
      name: "Interactive Dog Toy",
      image: "/placeholder.svg?height=100&width=100",
      price: 19.99,
      quantity: 3,
    },
  ]

const subtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0)
  const shipping = 5.99
  const tax = subtotal * 0.08
  const total = subtotal + shipping + tax

const shippingInfo = {
    name: "John Doe",
    address: "123 Main St, Apt 4B",
    city: "New York",
    state: "NY",
    zip: "10001",
    country: "United States",
    email: "john.doe@example.com",
    phone: "(123) 456-7890",
  }

const paymentInfo = {
    method: "Credit Card",
    cardNumber: "**** **** **** 4242",
    expiry: "12/25",
    nameOnCard: "John Doe",
  }

return (
    <div className="container px-4 py-8 md:px-6 md:py-12">
      <div className="mb-8">
        <h1 className="text-3xl font-bold mb-2">Review Your Order</h1>
        <div className="flex items-center text-sm text-muted-foreground">
          <Link href="/" className="hover:text-primary">
            Home
          </Link>
          <span className="mx-2">/</span>
          <Link href="/cart" className="hover:text-primary">
            Cart
          </Link>
          <span className="mx-2">/</span>
          <Link href="/checkout" className="hover:text-primary">
            Checkout
          </Link>
          <span className="mx-2">/</span>
          <span>Review</span>
        </div>
      </div>

<div className="grid md:grid-cols-3 gap-8">
        <div className="md:col-span-2 space-y-8">
          {/* Shipping Information */}
          <div className="bg-card rounded-lg border p-6">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-xl font-semibold">Shipping Information</h2>
              <Button variant="ghost" size="sm" asChild>
                <Link href="/checkout" className="flex items-center gap-1 text-primary">
                  <Edit2 className="h-4 w-4" />
                  Edit
                </Link>
              </Button>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <h3 className="font-medium mb-2">Contact Information</h3>
                <p className="text-sm">{shippingInfo.email}</p>
                <p className="text-sm">{shippingInfo.phone}</p>
              </div>
              <div>
                <h3 className="font-medium mb-2">Shipping Address</h3>
                <p className="text-sm">{shippingInfo.name}</p>
                <p className="text-sm">{shippingInfo.address}</p>
                <p className="text-sm">
                  {shippingInfo.city}, {shippingInfo.state} {shippingInfo.zip}
                </p>
                <p className="text-sm">{shippingInfo.country}</p>
              </div>
            </div>
          </div>

{/* Payment Method */}
          <div className="bg-card rounded-lg border p-6">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-xl font-semibold">Payment Method</h2>
              <Button variant="ghost" size="sm" asChild>
                <Link href="/checkout" className="flex items-center gap-1 text-primary">
                  <Edit2 className="h-4 w-4" />
                  Edit
                </Link>
              </Button>
            </div>
            <div className="flex items-center gap-3">
              <CreditCard className="h-5 w-5" />
              <div>
                <p className="font-medium">{paymentInfo.method}</p>
                <p className="text-sm text-muted-foreground">
                  {paymentInfo.cardNumber} | Expires: {paymentInfo.expiry}
                </p>
              </div>
            </div>
          </div>

{/* Order Items */}
          <div className="bg-card rounded-lg border p-6">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-xl font-semibold">Order Items</h2>
              <Button variant="ghost" size="sm" asChild>
                <Link href="/cart" className="flex items-center gap-1 text-primary">
                  <Edit2 className="h-4 w-4" />
                  Edit
                </Link>
              </Button>
            </div>
            <div className="space-y-4">
              {cartItems.map((item) => (
                <div key={item.id} className="flex gap-4">
                  <div className="relative h-20 w-20 rounded-md overflow-hidden flex-shrink-0">
                    <Image src={item.image || "/placeholder.svg"} alt={item.name} fill className="object-cover" />
                  </div>
                  <div className="flex-1">
                    <h4 className="font-medium">{item.name}</h4>
                    <p className="text-sm text-muted-foreground">Quantity: {item.quantity}</p>
                  </div>
                  <div className="text-right">
                    <p className="font-medium">${(item.price * item.quantity).toFixed(2)}</p>
                    <p className="text-sm text-muted-foreground">${item.price.toFixed(2)} each</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

<div className="pt-4">
                    <Button className="w-full" size="lg" asChild>
                      <Link href="/checkout/success">Place Order</Link>
                    </Button>
                  </div>

<p className="text-xs text-center text-muted-foreground pt-4">
                    By placing your order, you agree to our{" "}
                    <Link href="#" className="underline hover:text-primary">
                      Terms of Service
                    </Link>{" "}
                    and{" "}
                    <Link href="#" className="underline hover:text-primary">
                      Privacy Policy
                    </Link>
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/checkout/success/page.tsx"
import Link from "next/link"
import { Check, Package, Truck, Calendar } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { Card, CardContent } from "@/components/ui/card"

export default function OrderSuccessPage() {
  const orderNumber = "PD-12345678"
  const orderDate = new Date().toLocaleDateString()
  const estimatedDelivery = new Date(Date.now() + 5 * 24 * 60 * 60 * 1000).toLocaleDateString()

return (
    <div className="container px-4 py-8 md:px-6 md:py-12 max-w-3xl mx-auto">
      <div className="text-center mb-8">
        <div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-primary/10 text-primary mb-4">
          <Check className="h-8 w-8" />
        </div>
        <h1 className="text-3xl font-bold mb-2">Order Confirmed!</h1>
        <p className="text-muted-foreground">
          Thank you for your purchase. Your order has been received and is being processed.
        </p>
      </div>

<Card className="mb-8">
        <CardContent className="p-6">
          <div className="grid gap-4">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
              <div>
                <h2 className="font-semibold">Order #{orderNumber}</h2>
                <p className="text-sm text-muted-foreground">Placed on {orderDate}</p>
              </div>
              <Button asChild>
                <Link href="/account/orders">View Order Details</Link>
              </Button>
            </div>

<div className="grid gap-6 sm:grid-cols-3">
              <div className="flex flex-col items-center text-center gap-2">
                <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                  <Package className="h-5 w-5" />
                </div>
                <h3 className="font-medium">Processing</h3>
                <p className="text-xs text-muted-foreground">Your order is being prepared</p>
              </div>

<div className="flex flex-col items-center text-center gap-2">
                <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                  <Truck className="h-5 w-5" />
                </div>
                <h3 className="font-medium">Shipping</h3>
                <p className="text-xs text-muted-foreground">You'll receive tracking info soon</p>
              </div>

<div className="flex flex-col items-center text-center gap-2">
                <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                  <Calendar className="h-5 w-5" />
                </div>
                <h3 className="font-medium">Estimated Delivery</h3>
                <p className="text-xs text-muted-foreground">{estimatedDelivery}</p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

<div className="text-center space-y-4">
        <h2 className="text-xl font-semibold">What's Next?</h2>
        <p className="text-muted-foreground">
          You will receive an email confirmation with your order details and tracking information once your order ships.
        </p>
        <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
          <Button asChild>
            <Link href="/shop">Continue Shopping</Link>
          </Button>
          <Button variant="outline" asChild>
            <Link href="/contact">Need Help?</Link>
          </Button>
        </div>
      </div>
    </div>
  )
}

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

import { useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { Eye, EyeOff } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

export default function LoginPage() {
  const [showPassword, setShowPassword] = useState(false)

return (
    <div className="container px-4 py-8 md:px-6 md:py-12 max-w-md mx-auto">
      <Card>
        <CardHeader className="space-y-1">
          <div className="flex justify-center mb-4">
            <Image
              src="/placeholder.svg?height=40&width=40"
              alt="PetDo Logo"
              width={40}
              height={40}
              className="rounded-full bg-primary"
            />
          </div>
          <CardTitle className="text-2xl text-center">Sign in to your account</CardTitle>
          <CardDescription className="text-center">
            Enter your email and password to access your account
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="email">Email</Label>
            <Input id="email" type="email" placeholder="name@example.com" />
          </div>
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <Label htmlFor="password">Password</Label>
              <Link href="/forgot-password" className="text-xs text-primary hover:underline">
                Forgot password?
              </Link>
            </div>
            <div className="relative">
              <Input id="password" type={showPassword ? "text" : "password"} placeholder="••••••••" />
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                onClick={() => setShowPassword(!showPassword)}
              >
                {showPassword ? (
                  <EyeOff className="h-4 w-4 text-muted-foreground" />
                ) : (
                  <Eye className="h-4 w-4 text-muted-foreground" />
                )}
                <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
              </Button>
            </div>
          </div>
          <div className="flex items-center space-x-2">
            <Checkbox id="remember" />
            <Label htmlFor="remember" className="text-sm font-normal">
              Remember me
            </Label>
          </div>
          <Button className="w-full" size="lg">
            Sign In
          </Button>

<div className="relative">
            <div className="absolute inset-0 flex items-center">
              <span className="w-full border-t" />
            </div>
            <div className="relative flex justify-center text-xs uppercase">
              <span className="bg-card px-2 text-muted-foreground">Or continue with</span>
            </div>
          </div>

<div className="grid grid-cols-2 gap-4">
            <Button variant="outline">
              <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
                <path
                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                  fill="#4285F4"
                />
                <path
                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                  fill="#34A853"
                />
                <path
                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                  fill="#FBBC05"
                />
                <path
                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                  fill="#EA4335"
                />
              </svg>
              Google
            </Button>
            <Button variant="outline">
              <svg className="mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" />
              </svg>
              Facebook
            </Button>
          </div>
        </CardContent>
        <CardFooter className="flex flex-col">
          <p className="text-center text-sm text-muted-foreground">
            Don't have an account?{" "}
            <Link href="/register" className="text-primary hover:underline">
              Sign up
            </Link>
          </p>
        </CardFooter>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/register/page.tsx"
"use client"

import { useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { Eye, EyeOff } from "lucide-react"

export default function RegisterPage() {
  const [showPassword, setShowPassword] = useState(false)

return (
    <div className="container px-4 py-8 md:px-6 md:py-12 max-w-md mx-auto">
      <Card>
        <CardHeader className="space-y-1">
          <div className="flex justify-center mb-4">
            <Image
              src="/placeholder.svg?height=40&width=40"
              alt="PetDo Logo"
              width={40}
              height={40}
              className="rounded-full bg-primary"
            />
          </div>
          <CardTitle className="text-2xl text-center">Create an account</CardTitle>
          <CardDescription className="text-center">Enter your information to create an account</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="first-name">First Name</Label>
              <Input id="first-name" placeholder="John" />
            </div>
            <div className="space-y-2">
              <Label htmlFor="last-name">Last Name</Label>
              <Input id="last-name" placeholder="Doe" />
            </div>
          </div>
          <div className="space-y-2">
            <Label htmlFor="email">Email</Label>
            <Input id="email" type="email" placeholder="name@example.com" />
          </div>
          <div className="space-y-2">
            <Label htmlFor="password">Password</Label>
            <div className="relative">
              <Input id="password" type={showPassword ? "text" : "password"} placeholder="••••••••" />
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                onClick={() => setShowPassword(!showPassword)}
              >
                {showPassword ? (
                  <EyeOff className="h-4 w-4 text-muted-foreground" />
                ) : (
                  <Eye className="h-4 w-4 text-muted-foreground" />
                )}
                <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
              </Button>
            </div>
            <p className="text-xs text-muted-foreground">
              Password must be at least 8 characters long and include a number and a special character.
            </p>
          </div>
          <div className="flex items-center space-x-2">
            <Checkbox id="terms" />
            <Label htmlFor="terms" className="text-sm font-normal">
              I agree to the{" "}
              <Link href="#" className="text-primary hover:underline">
                Terms of Service
              </Link>{" "}
              and{" "}
              <Link href="#" className="text-primary hover:underline">
                Privacy Policy
              </Link>
            </Label>
          </div>
          <Button className="w-full" size="lg">
            Create Account
          </Button>

<div className="grid grid-cols-2 gap-4">
            <Button variant="outline">
              <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
                <path
                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                  fill="#4285F4"
                />
                <path
                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                  fill="#34A853"
                />
                <path
                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                  fill="#FBBC05"
                />
                <path
                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                  fill="#EA4335"
                />
              </svg>
              Google
            </Button>
            <Button variant="outline">
              <svg className="mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" />
              </svg>
              Facebook
            </Button>
          </div>
        </CardContent>
        <CardFooter className="flex flex-col">
          <p className="text-center text-sm text-muted-foreground">
            Already have an account?{" "}
            <Link href="/login" className="text-primary hover:underline">
              Sign in
            </Link>
          </p>
        </CardFooter>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/forgot-password/page.tsx"
import Link from "next/link"
import Image from "next/image"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

export default function ForgotPasswordPage() {
  return (
    <div className="container px-4 py-8 md:px-6 md:py-12 max-w-md mx-auto">
      <Card>
        <CardHeader className="space-y-1">
          <div className="flex justify-center mb-4">
            <Image
              src="/placeholder.svg?height=40&width=40"
              alt="PetDo Logo"
              width={40}
              height={40}
              className="rounded-full bg-primary"
            />
          </div>
          <CardTitle className="text-2xl text-center">Forgot Password</CardTitle>
          <CardDescription className="text-center">
            Enter your email address and we'll send you a link to reset your password
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="email">Email</Label>
            <Input id="email" type="email" placeholder="name@example.com" />
          </div>
          <Button className="w-full" size="lg">
            Send Reset Link
          </Button>
        </CardContent>
        <CardFooter className="flex flex-col">
          <p className="text-center text-sm text-muted-foreground">
            Remember your password?{" "}
            <Link href="/login" className="text-primary hover:underline">
              Back to login
            </Link>
          </p>
        </CardFooter>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/about/page.tsx"
import Image from "next/image"
import Link from "next/link"
import { Heart, Award, Users, Truck } from "lucide-react"

import { Button } from "@/components/ui/button"

export default function AboutPage() {
  return (
    <div className="container px-4 py-8 md:px-6 md:py-12">
      <div className="mb-8">
        <h1 className="text-3xl font-bold mb-2">About PetDo</h1>
        <div className="flex items-center text-sm text-muted-foreground">
          <Link href="/" className="hover:text-primary">
            Home
          </Link>
          <span className="mx-2">/</span>
          <span>About</span>
        </div>
      </div>

{/* Hero Section */}
      <div className="grid md:grid-cols-2 gap-8 items-center mb-16">
        <div>
          <h2 className="text-3xl font-bold mb-4">Our Story</h2>
          <p className="text-muted-foreground mb-4">
            Founded in 2015, PetDo started with a simple mission: to provide high-quality products for pets and make pet
            parenting easier and more enjoyable.
          </p>
          <p className="text-muted-foreground mb-4">
            What began as a small local shop has grown into a trusted online destination for pet lovers across the
            country. Our founder, Sarah Johnson, a passionate dog owner, recognized the need for premium pet products
            that prioritize both quality and affordability.
          </p>
          <p className="text-muted-foreground">
            Today, we continue to be guided by our love for animals and commitment to exceptional customer service.
            Every product in our catalog is carefully selected to ensure it meets our high standards for quality,
            safety, and value.
          </p>
        </div>
        <div className="relative h-[300px] md:h-[400px] rounded-lg overflow-hidden">
          <Image src="/placeholder.svg?height=400&width=600" alt="PetDo team with dogs" fill className="object-cover" />
        </div>
      </div>

{/* Values Section */}
      <div className="mb-16">
        <div className="text-center mb-10">
          <h2 className="text-3xl font-bold mb-4">Our Values</h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            At PetDo, our core values guide everything we do, from product selection to customer service.
          </p>
        </div>

<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
          <div className="bg-card rounded-lg border p-6 text-center">
            <div className="h-12 w-12 bg-primary/10 rounded-full flex items-center justify-center text-primary mx-auto mb-4">
              <Heart className="h-6 w-6" />
            </div>
            <h3 className="font-semibold text-lg mb-2">Pet Wellbeing</h3>
            <p className="text-muted-foreground">
              We prioritize products that contribute to the health, happiness, and wellbeing of your pets.
            </p>
          </div>

<div className="bg-card rounded-lg border p-6 text-center">
            <div className="h-12 w-12 bg-primary/10 rounded-full flex items-center justify-center text-primary mx-auto mb-4">
              <Award className="h-6 w-6" />
            </div>
            <h3 className="font-semibold text-lg mb-2">Quality Assurance</h3>
            <p className="text-muted-foreground">
              We rigorously test and verify all products to ensure they meet our high standards for quality and safety.
            </p>
          </div>

<div className="bg-card rounded-lg border p-6 text-center">
            <div className="h-12 w-12 bg-primary/10 rounded-full flex items-center justify-center text-primary mx-auto mb-4">
              <Users className="h-6 w-6" />
            </div>
            <h3 className="font-semibold text-lg mb-2">Customer Focus</h3>
            <p className="text-muted-foreground">
              We're dedicated to providing exceptional service and building lasting relationships with our customers.
            </p>
          </div>

<div className="bg-card rounded-lg border p-6 text-center">
            <div className="h-12 w-12 bg-primary/10 rounded-full flex items-center justify-center text-primary mx-auto mb-4">
              <Truck className="h-6 w-6" />
            </div>
            <h3 className="font-semibold text-lg mb-2">Reliability</h3>
            <p className="text-muted-foreground">
              We deliver on our promises with fast shipping, accurate orders, and responsive customer support.
            </p>
          </div>
        </div>
      </div>

{/* Team Section */}
      <div className="mb-16">
        <div className="text-center mb-10">
          <h2 className="text-3xl font-bold mb-4">Meet Our Team</h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            The passionate people behind PetDo who work tirelessly to bring the best products to you and your pets.
          </p>
        </div>

<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {[
            { name: "Sarah Johnson", role: "Founder & CEO", image: "/placeholder.svg?height=300&width=300" },
            { name: "Michael Chen", role: "Head of Product", image: "/placeholder.svg?height=300&width=300" },
            { name: "Emily Rodriguez", role: "Customer Experience", image: "/placeholder.svg?height=300&width=300" },
            { name: "David Kim", role: "Logistics Manager", image: "/placeholder.svg?height=300&width=300" },
          ].map((member, index) => (
            <div key={index} className="bg-card rounded-lg border overflow-hidden">
              <div className="relative h-64 w-full">
                <Image src={member.image || "/placeholder.svg"} alt={member.name} fill className="object-cover" />
              </div>
              <div className="p-4 text-center">
                <h3 className="font-semibold text-lg">{member.name}</h3>
                <p className="text-muted-foreground">{member.role}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

{/* CTA Section */}
      <div className="bg-primary text-primary-foreground rounded-lg p-8 md:p-12 text-center">
        <h2 className="text-2xl md:text-3xl font-bold mb-4">Join the PetDo Family</h2>
        <p className="max-w-2xl mx-auto mb-6">
          Discover premium products for your furry friends and join thousands of satisfied pet parents who trust PetDo.
        </p>
        <Button size="lg" variant="secondary" asChild>
          <Link href="/shop">Shop Now</Link>
        </Button>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/contact/page.tsx"
"use client"

import { useState } from "react"
import Link from "next/link"
import { MapPin, Phone, Mail, Clock } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent } from "@/components/ui/card"

export default function ContactPage() {
  const [formSubmitted, setFormSubmitted] = useState(false)

const handleSubmit = (e) => {
    e.preventDefault()
    // In a real application, you would handle form submission here
    setFormSubmitted(true)
  }

return (
    <div className="container px-4 py-8 md:px-6 md:py-12">
      <div className="mb-8">
        <h1 className="text-3xl font-bold mb-2">Contact Us</h1>
        <div className="flex items-center text-sm text-muted-foreground">
          <Link href="/" className="hover:text-primary">
            Home
          </Link>
          <span className="mx-2">/</span>
          <span>Contact</span>
        </div>
      </div>

<div className="grid md:grid-cols-3 gap-8">
        <div className="md:col-span-2">
          <Card>
            <CardContent className="p-6">
              <h2 className="text-2xl font-semibold mb-6">Get in Touch</h2>

{formSubmitted ? (
                <div className="bg-primary/10 text-primary p-4 rounded-lg mb-6">
                  <h3 className="font-semibold text-lg mb-2">Thank You!</h3>
                  <p>Your message has been sent successfully. We'll get back to you as soon as possible.</p>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="first-name">First Name</Label>
                      <Input id="first-name" placeholder="John" required />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="last-name">Last Name</Label>
                      <Input id="last-name" placeholder="Doe" required />
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="email">Email</Label>
                    <Input id="email" type="email" placeholder="john.doe@example.com" required />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="phone">Phone (Optional)</Label>
                    <Input id="phone" type="tel" placeholder="(123) 456-7890" />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="subject">Subject</Label>
                    <Select>
                      <SelectTrigger id="subject">
                        <SelectValue placeholder="Select a subject" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="general">General Inquiry</SelectItem>
                        <SelectItem value="order">Order Status</SelectItem>
                        <SelectItem value="return">Returns & Refunds</SelectItem>
                        <SelectItem value="product">Product Information</SelectItem>
                        <SelectItem value="other">Other</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="message">Message</Label>
                    <Textarea id="message" placeholder="How can we help you?" className="min-h-[150px]" required />
                  </div>

<Button type="submit" className="w-full sm:w-auto">
                    Send Message
                  </Button>
                </form>
              )}
            </CardContent>
          </Card>
        </div>

<div>
          <Card>
            <CardContent className="p-6">
              <h2 className="text-xl font-semibold mb-6">Contact Information</h2>

<div className="space-y-6">
                <div className="flex items-start gap-3">
                  <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
                    <MapPin className="h-5 w-5" />
                  </div>
                  <div>
                    <h3 className="font-medium">Address</h3>
                    <address className="not-italic text-muted-foreground">
                      123 Pet Street
                      <br />
                      Dogville, NY 10001
                      <br />
                      United States
                    </address>
                  </div>
                </div>

<div className="flex items-start gap-3">
                  <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
                    <Phone className="h-5 w-5" />
                  </div>
                  <div>
                    <h3 className="font-medium">Phone</h3>
                    <p className="text-muted-foreground">
                      <a href="tel:+11234567890" className="hover:text-primary">
                        +1 (123) 456-7890
                      </a>
                    </p>
                    <p className="text-muted-foreground">
                      <a href="tel:+18005551234" className="hover:text-primary">
                        +1 (800) 555-1234
                      </a>
                    </p>
                  </div>
                </div>

<div className="flex items-start gap-3">
                  <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
                    <Mail className="h-5 w-5" />
                  </div>
                  <div>
                    <h3 className="font-medium">Email</h3>
                    <p className="text-muted-foreground">
                      <a href="mailto:info@petdo.com" className="hover:text-primary">
                        info@petdo.com
                      </a>
                    </p>
                    <p className="text-muted-foreground">
                      <a href="mailto:support@petdo.com" className="hover:text-primary">
                        support@petdo.com
                      </a>
                    </p>
                  </div>
                </div>

<div className="flex items-start gap-3">
                  <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
                    <Clock className="h-5 w-5" />
                  </div>
                  <div>
                    <h3 className="font-medium">Business Hours</h3>
                    <p className="text-muted-foreground">Monday - Friday: 9am - 6pm</p>
                    <p className="text-muted-foreground">Saturday: 10am - 4pm</p>
                    <p className="text-muted-foreground">Sunday: Closed</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<div className="mt-6">
            <Card>
              <CardContent className="p-6">
                <h2 className="text-xl font-semibold mb-4">Follow Us</h2>
                <div className="flex gap-4">
                  <a
                    href="#"
                    className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-primary-foreground transition-colors"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="h-5 w-5"
                    >
                      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                    </svg>
                    <span className="sr-only">Facebook</span>
                  </a>
                  <a
                    href="#"
                    className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-primary-foreground transition-colors"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="h-5 w-5"
                    >
                      <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                    </svg>
                    <span className="sr-only">Instagram</span>
                  </a>
                  <a
                    href="#"
                    className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-primary-foreground transition-colors"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="h-5 w-5"
                    >
                      <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
                    </svg>
                    <span className="sr-only">Twitter</span>
                  </a>
                  <a
                    href="#"
                    className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-primary-foreground transition-colors"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="h-5 w-5"
                    >
                      <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
                      <rect x="2" y="9" width="4" height="12"></rect>
                      <circle cx="4" cy="4" r="2"></circle>
                    </svg>
                    <span className="sr-only">LinkedIn</span>
                  </a>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>

{/* Map Section */}
      <div className="mt-12">
        <h2 className="text-2xl font-semibold mb-6">Find Us</h2>
        <div className="h-[400px] bg-muted rounded-lg overflow-hidden relative">
          <div className="absolute inset-0 flex items-center justify-center">
            <p className="text-muted-foreground">Map would be displayed here</p>
          </div>
        </div>
      </div>
    </div>
  )
}
</article></body></html>