[V0_FILE]typescriptreact:file="app/tech-company/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { ArrowLeft, Code, Cloud, Shield, Database, Users, Star, CheckCircle, ArrowRight, Mail, Phone, MapPin, } from "lucide-react" export default function TechCompanyPage() { const [formData, setFormData] = useState({ name: "", email: "", company: "", message: "", }) const services = [ { icon: Cloud, title: "Cloud Solutions", description: "Scalable cloud infrastructure and migration services", features: ["AWS/Azure Setup", "Cloud Migration", "DevOps Automation", "24/7 Monitoring"], }, { icon: Code, title: "Custom Software", description: "Tailored software development for your business needs", features: ["Web Applications", "Mobile Apps", "API Development", "System Integration"], }, { icon: Shield, title: "Cybersecurity", description: "Comprehensive security solutions and consulting", features: ["Security Audits", "Penetration Testing", "Compliance", "Training"], }, { icon: Database, title: "Data Analytics", description: "Transform your data into actionable insights", features: ["Business Intelligence", "Data Visualization", "Machine Learning", "Reporting"], }, ] const team = [ { name: "Sarah Johnson", role: "CEO & Founder", experience: "15+ years" }, { name: "Mike Chen", role: "CTO", experience: "12+ years" }, { name: "Emily Davis", role: "Lead Developer", experience: "8+ years" }, { name: "David Wilson", role: "Security Expert", experience: "10+ years" }, ] const testimonials = [ { name: "John Smith", company: "TechCorp Inc.", rating: 5, text: "Outstanding service and technical expertise. They delivered our project on time and exceeded expectations.", }, { name: "Lisa Brown", company: "StartupXYZ", rating: 5, text: "Professional team with deep knowledge. Our cloud migration was seamless thanks to their expertise.", }, ] return (

{/* Navigation */}

Back to Examples


              TechSolutions Pro



      {/* Hero Section */}
      
        
          Technology Solutions
          
            Innovative Tech
            Solutions
          
          
            We help businesses transform through cutting-edge technology solutions. From cloud infrastructure to custom
            software development.
          
          
            
            
          
        
      

      {/* Services Section */}
      
        
          
            Our Services
            
              Comprehensive technology solutions tailored to your business needs
            
          
          
            {services.map((service, index) => {
              const IconComponent = service.icon
              return (
                
                  
                    
                      
                    
                    {service.title}
                    {service.description}
                  
                  
                    
                      {service.features.map((feature, idx) => (
                        
                          
                          {feature}
                        
                      ))}
                    
                  
                
              )
            })}
          
        
      

      {/* Team Section */}
      
        
          
            Our Expert Team
            Meet the professionals behind our success
          
          
            {team.map((member, index) => (
              
                
                  
                    
                  
                  {member.name}
                  {member.role}
                  
                    {member.experience}
                  
                
              
            ))}
          
        
      

      {/* Testimonials */}
      
        
          
            Client Testimonials
            What our clients say about our services
          
          
            {testimonials.map((testimonial, index) => (
              
                
                  
                    {[...Array(testimonial.rating)].map((_, i) => (
                      
                    ))}
                  
                  "{testimonial.text}"
                  
                    {testimonial.name}
                    {testimonial.company}
                  
                
              
            ))}
          
        
      

      {/* Contact Section */}
      
        
          
            
              Get In Touch
              
                Ready to transform your business with technology? Let's discuss your project.
              
              
                
                  
                  contact@techsolutionspro.com
                
                
                  
                  +1 (555) 123-4567
                
                
                  
                  123 Tech Street, Silicon Valley, CA
                
              
            
            
              
                Send us a message
                We'll get back to you within 24 hours
              
              
                 setFormData({ ...formData, name: e.target.value })}
                />
                 setFormData({ ...formData, email: e.target.value })}
                />
                 setFormData({ ...formData, company: e.target.value })}
                />
                 setFormData({ ...formData, message: e.target.value })}
                />
                <Button className="w-full bg-blue-600 hover:bg-blue-700">Send Message</Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/inventory-system/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  ArrowLeft,
  Package,
  Search,
  Plus,
  AlertTriangle,
  TrendingUp,
  TrendingDown,
  BarChart3,
  Filter,
  Download,
  Eye,
  Edit,
  Trash2,
} from "lucide-react"

export default function InventorySystemPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("all")

  const inventoryData = [
    {
      id: "INV001",
      name: "Wireless Headphones",
      category: "Electronics",
      stock: 45,
      minStock: 20,
      price: 99.99,
      supplier: "TechSupply Co.",
      status: "In Stock",
      lastUpdated: "2024-01-15",
    },
    {
      id: "INV002",
      name: "Office Chair",
      category: "Furniture",
      stock: 8,
      minStock: 15,
      price: 249.99,
      supplier: "FurniCorp",
      status: "Low Stock",
      lastUpdated: "2024-01-14",
    },
    {
      id: "INV003",
      name: "Laptop Stand",
      category: "Accessories",
      stock: 0,
      minStock: 10,
      price: 39.99,
      supplier: "AccessoryHub",
      status: "Out of Stock",
      lastUpdated: "2024-01-13",
    },
    {
      id: "INV004",
      name: "Bluetooth Speaker",
      category: "Electronics",
      stock: 32,
      minStock: 25,
      price: 79.99,
      supplier: "TechSupply Co.",
      status: "In Stock",
      lastUpdated: "2024-01-15",
    },
  ]

  const stats = [
    {
      title: "Total Items",
      value: "1,247",
      change: "+12%",
      trend: "up",
      icon: Package,
    },
    {
      title: "Low Stock Items",
      value: "23",
      change: "+5%",
      trend: "up",
      icon: AlertTriangle,
    },
    {
      title: "Total Value",
      value: "$45,678",
      change: "+8%",
      trend: "up",
      icon: TrendingUp,
    },
    {
      title: "Out of Stock",
      value: "7",
      change: "-2%",
      trend: "down",
      icon: TrendingDown,
    },
  ]

  const getStatusColor = (status: string) => {
    switch (status) {
      case "In Stock":
        return "bg-green-100 text-green-800"
      case "Low Stock":
        return "bg-yellow-100 text-yellow-800"
      case "Out of Stock":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

  const filteredData = inventoryData.filter((item) => {
    const matchesSearch =
      item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.id.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesCategory = selectedCategory === "all" || item.category === selectedCategory
    return matchesSearch && matchesCategory
  })

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Navigation */}
      <nav className="border-b bg-white sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <ArrowLeft className="h-5 w-5" />
              <span className="text-sm text-gray-600">Back to Examples</span>
            </Link>
            <div className="flex items-center gap-2">
              <Package className="h-8 w-8 text-green-600" />
              <span className="text-xl font-bold text-gray-900">StockMaster Pro</span>
            </div>
            <div className="hidden md:flex items-center gap-6">
              <a href="#dashboard" className="text-gray-600 hover:text-green-600">
                Dashboard
              </a>
              <a href="#inventory" className="text-gray-600 hover:text-green-600">
                Inventory
              </a>
              <a href="#reports" className="text-gray-600 hover:text-green-600">
                Reports
              </a>
            </div>
          </div>
        </div>
      </nav>

      {/* Header */}
      <section className="py-8 px-4 bg-white border-b">
        <div className="container mx-auto">
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
              <h1 className="text-3xl font-bold text-gray-900 mb-2">Inventory Management</h1>
              <p className="text-gray-600">Track and manage your stock levels in real-time</p>
            </div>
            <div className="flex gap-3">
              <Button variant="outline">
                <Download className="w-4 h-4 mr-2" />
                Export
              </Button>
              <Button className="bg-green-600 hover:bg-green-700">
                <Plus className="w-4 h-4 mr-2" />
                Add Item
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Stats Dashboard */}
      <section id="dashboard" className="py-8 px-4">
        <div className="container mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            {stats.map((stat, index) => {
              const IconComponent = stat.icon
              return (
                <Card key={index}>
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-sm font-medium text-gray-600">{stat.title}</p>
                        <p className="text-2xl font-bold text-gray-900">{stat.value}</p>
                        <p className={`text-sm ${stat.trend === "up" ? "text-green-600" : "text-red-600"}`}>
                          {stat.change} from last month
                        </p>
                      </div>
                      <div className="p-3 bg-gray-100 rounded-full">
                        <IconComponent className="w-6 h-6 text-gray-600" />
                      </div>
                    </div>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

      {/* Inventory Table */}
      <section id="inventory" className="py-8 px-4">
        <div className="container mx-auto">
          <Card>
            <CardHeader>
              <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div>
                  <CardTitle className="text-xl">Current Inventory</CardTitle>
                  <CardDescription>Manage your stock levels and product information</CardDescription>
                </div>
                <div className="flex gap-3">
                  <div className="relative">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                    <Input
                      placeholder="Search items..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      className="pl-10 w-64"
                    />
                  </div>
                  <Button variant="outline" size="sm">
                    <Filter className="w-4 h-4 mr-2" />
                    Filter
                  </Button>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Item ID</TableHead>
                      <TableHead>Product Name</TableHead>
                      <TableHead>Category</TableHead>
                      <TableHead>Stock</TableHead>
                      <TableHead>Min Stock</TableHead>
                      <TableHead>Price</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead>Actions</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredData.map((item) => (
                      <TableRow key={item.id}>
                        <TableCell className="font-medium">{item.id}</TableCell>
                        <TableCell>{item.name}</TableCell>
                        <TableCell>
                          <Badge variant="outline">{item.category}</Badge>
                        </TableCell>
                        <TableCell>
                          <span className={item.stock <= item.minStock ? "text-red-600 font-semibold" : ""}>
                            {item.stock}
                          </span>
                        </TableCell>
                        <TableCell>{item.minStock}</TableCell>
                        <TableCell>${item.price}</TableCell>
                        <TableCell>
                          <Badge className={getStatusColor(item.status)}>{item.status}</Badge>
                        </TableCell>
                        <TableCell>
                          <div className="flex gap-2">
                            <Button variant="ghost" size="sm">
                              <Eye className="w-4 h-4" />
                            </Button>
                            <Button variant="ghost" size="sm">
                              <Edit className="w-4 h-4" />
                            </Button>
                            <Button variant="ghost" size="sm" className="text-red-600 hover:text-red-700">
                              <Trash2 className="w-4 h-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Alerts Section */}
      <section className="py-8 px-4">
        <div className="container mx-auto">
          <Card className="border-yellow-200 bg-yellow-50">
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-yellow-800">
                <AlertTriangle className="w-5 h-5" />
                Stock Alerts
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <div className="flex items-center justify-between p-3 bg-white rounded-lg border">
                  <div>
                    <p className="font-medium">Office Chair (INV002)</p>
                    <p className="text-sm text-gray-600">Stock level below minimum threshold</p>
                  </div>
                  <Badge className="bg-yellow-100 text-yellow-800">Low Stock</Badge>
                </div>
                <div className="flex items-center justify-between p-3 bg-white rounded-lg border">
                  <div>
                    <p className="font-medium">Laptop Stand (INV003)</p>
                    <p className="text-sm text-gray-600">Item is completely out of stock</p>
                  </div>
                  <Badge className="bg-red-100 text-red-800">Out of Stock</Badge>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Reports Section */}
      <section id="reports" className="py-8 px-4 bg-white">
        <div className="container mx-auto">
          <div className="text-center mb-8">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Analytics & Reports</h2>
            <p className="text-gray-600">Get insights into your inventory performance</p>
          </div>
          <div className="grid md:grid-cols-3 gap-6">
            <Card className="text-center">
              <CardHeader>
                <BarChart3 className="w-12 h-12 text-green-600 mx-auto mb-4" />
                <CardTitle>Stock Movement</CardTitle>
                <CardDescription>Track inventory flow and trends</CardDescription>
              </CardHeader>
              <CardContent>
                <Button variant="outline" className="w-full">
                  View Report
                </Button>
              </CardContent>
            </Card>
            <Card className="text-center">
              <CardHeader>
                <TrendingUp className="w-12 h-12 text-blue-600 mx-auto mb-4" />
                <CardTitle>Sales Analysis</CardTitle>
                <CardDescription>Analyze product performance</CardDescription>
              </CardHeader>
              <CardContent>
                <Button variant="outline" className="w-full">
                  View Report
                </Button>
              </CardContent>
            </Card>
            <Card className="text-center">
              <CardHeader>
                <Package className="w-12 h-12 text-purple-600 mx-auto mb-4" />
                <CardTitle>Supplier Report</CardTitle>
                <CardDescription>Monitor supplier performance</CardDescription>
              </CardHeader>
              <CardContent>
                <Button variant="outline" className="w-full">
                  View Report
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/inventory-system/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/healthcare-clinic/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Calendar } from "@/components/ui/calendar"
import {
  ArrowLeft,
  Heart,
  CalendarIcon,
  Clock,
  User,
  Phone,
  Mail,
  MapPin,
  Stethoscope,
  Users,
  Activity,
  FileText,
  Shield,
  Award,
  Star,
} from "lucide-react"

export default function HealthcareClinicPage() {
  const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date())
  const [appointmentForm, setAppointmentForm] = useState({
    name: "",
    email: "",
    phone: "",
    service: "",
    message: "",
  })

  const services = [
    {
      icon: Stethoscope,
      title: "General Consultation",
      description: "Comprehensive health checkups and medical consultations",
      duration: "30 min",
      price: "$150",
    },
    {
      icon: Heart,
      title: "Cardiology",
      description: "Heart health assessments and cardiovascular care",
      duration: "45 min",
      price: "$250",
    },
    {
      icon: Activity,
      title: "Preventive Care",
      description: "Regular health screenings and preventive treatments",
      duration: "60 min",
      price: "$200",
    },
    {
      icon: FileText,
      title: "Health Records",
      description: "Digital health records management and consultation",
      duration: "15 min",
      price: "$75",
    },
  ]

  const doctors = [
    {
      name: "Dr. Sarah Wilson",
      specialty: "General Medicine",
      experience: "15+ years",
      rating: 4.9,
      patients: "2,500+",
    },
    {
      name: "Dr. Michael Chen",
      specialty: "Cardiology",
      experience: "12+ years",
      rating: 4.8,
      patients: "1,800+",
    },
    {
      name: "Dr. Emily Johnson",
      specialty: "Preventive Care",
      experience: "10+ years",
      rating: 4.9,
      patients: "2,200+",
    },
  ]

  const timeSlots = [
    "09:00 AM",
    "09:30 AM",
    "10:00 AM",
    "10:30 AM",
    "11:00 AM",
    "11:30 AM",
    "02:00 PM",
    "02:30 PM",
    "03:00 PM",
    "03:30 PM",
    "04:00 PM",
    "04:30 PM",
  ]

  const stats = [
    { label: "Patients Served", value: "10,000+", icon: Users },
    { label: "Years of Service", value: "25+", icon: Award },
    { label: "Success Rate", value: "98%", icon: Shield },
    { label: "Patient Rating", value: "4.9/5", icon: Star },
  ]

  return (
    <div className="min-h-screen bg-white">
      {/* Navigation */}
      <nav className="border-b bg-white/95 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <ArrowLeft className="h-5 w-5" />
              <span className="text-sm text-gray-600">Back to Examples</span>
            </Link>
            <div className="flex items-center gap-2">
              <Heart className="h-8 w-8 text-red-500" />
              <span className="text-xl font-bold text-gray-900">HealthCare Plus</span>
            </div>
            <div className="hidden md:flex items-center gap-6">
              <a href="#services" className="text-gray-600 hover:text-red-500">
                Services
              </a>
              <a href="#doctors" className="text-gray-600 hover:text-red-500">
                Doctors
              </a>
              <a href="#appointment" className="text-gray-600 hover:text-red-500">
                Book Appointment
              </a>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="py-20 px-4 bg-gradient-to-br from-red-50 to-pink-100">
        <div className="container mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <Badge className="mb-4 bg-red-100 text-red-800">Healthcare Excellence</Badge>
              <h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
                Your Health,
                <span className="block text-red-500">Our Priority</span>
              </h1>
              <p className="text-xl text-gray-600 mb-8">
                Providing comprehensive healthcare services with compassionate care and cutting-edge medical technology
                for over 25 years.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Button size="lg" className="bg-red-500 hover:bg-red-600">
                  Book Appointment
                </Button>
                <Button size="lg" variant="outline">
                  Emergency Care
                </Button>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              {stats.map((stat, index) => {
                const IconComponent = stat.icon
                return (
                  <Card key={index} className="text-center p-6">
                    <IconComponent className="w-8 h-8 text-red-500 mx-auto mb-3" />
                    <p className="text-2xl font-bold text-gray-900">{stat.value}</p>
                    <p className="text-sm text-gray-600">{stat.label}</p>
                  </Card>
                )
              })}
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-20 px-4">
        <div className="container mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">Our Medical Services</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Comprehensive healthcare services designed to meet all your medical needs
            </p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {services.map((service, index) => {
              const IconComponent = service.icon
              return (
                <Card key={index} className="group hover:shadow-xl transition-all duration-300">
                  <CardHeader className="text-center">
                    <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-red-500 transition-colors">
                      <IconComponent className="w-8 h-8 text-red-500 group-hover:text-white" />
                    </div>
                    <CardTitle className="text-xl">{service.title}</CardTitle>
                    <CardDescription>{service.description}</CardDescription>
                  </CardHeader>
                  <CardContent className="text-center">
                    <div className="flex justify-between items-center mb-4">
                      <div className="flex items-center gap-2 text-sm text-gray-600">
                        <Clock className="w-4 h-4" />
                        {service.duration}
                      </div>
                      <div className="text-lg font-semibold text-red-500">{service.price}</div>
                    </div>
                    <Button variant="outline" className="w-full">
                      Book Now
                    </Button>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

      {/* Doctors Section */}
      <section id="doctors" className="py-20 px-4 bg-gray-50">
        <div className="container mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">Meet Our Doctors</h2>
            <p className="text-xl text-gray-600">Experienced medical professionals dedicated to your health</p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {doctors.map((doctor, index) => (
              <Card key={index} className="text-center">
                <CardHeader>
                  <div className="w-24 h-24 bg-gradient-to-br from-red-400 to-red-600 rounded-full mx-auto mb-4 flex items-center justify-center">
                    <User className="w-12 h-12 text-white" />
                  </div>
                  <CardTitle className="text-xl">{doctor.name}</CardTitle>
                  <CardDescription className="text-red-600 font-medium">{doctor.specialty}</CardDescription>
                  <div className="flex items-center justify-center gap-4 text-sm text-gray-600 mt-2">
                    <span>{doctor.experience}</span>
                    <span>•</span>
                    <div className="flex items-center gap-1">
                      <Star className="w-4 h-4 text-yellow-400 fill-current" />
                      {doctor.rating}
                    </div>
                  </div>
                  <Badge variant="secondary" className="w-fit mx-auto mt-2">
                    {doctor.patients} patients
                  </Badge>
                </CardHeader>
                <CardContent>
                  <Button variant="outline" className="w-full">
                    Book Consultation
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Appointment Booking */}
      <section id="appointment" className="py-20 px-4">
        <div className="container mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">Book Your Appointment</h2>
            <p className="text-xl text-gray-600">Schedule your visit with our healthcare professionals</p>
          </div>
          <div className="grid lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <CalendarIcon className="w-5 h-5" />
                  Select Date & Time
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-6">
                  <Calendar
                    mode="single"
                    selected={selectedDate}
                    onSelect={setSelectedDate}
                    className="rounded-md border"
                  />
                  <div>
                    <h4 className="font-semibold mb-3">Available Time Slots</h4>
                    <div className="grid grid-cols-3 gap-2">
                      {timeSlots.map((time, index) => (
                        <Button key={index} variant="outline" size="sm" className="text-xs">
                          {time}
                        </Button>
                      ))}
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <User className="w-5 h-5" />
                  Patient Information
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <Input
                  placeholder="Full Name"
                  value={appointmentForm.name}
                  onChange={(e) => setAppointmentForm({ ...appointmentForm, name: e.target.value })}
                />
                <Input
                  type="email"
                  placeholder="Email Address"
                  value={appointmentForm.email}
                  onChange={(e) => setAppointmentForm({ ...appointmentForm, email: e.target.value })}
                />
                <Input
                  type="tel"
                  placeholder="Phone Number"
                  value={appointmentForm.phone}
                  onChange={(e) => setAppointmentForm({ ...appointmentForm, phone: e.target.value })}
                />
                <Input
                  placeholder="Service Required"
                  value={appointmentForm.service}
                  onChange={(e) => setAppointmentForm({ ...appointmentForm, service: e.target.value })}
                />
                <Textarea
                  placeholder="Additional notes or symptoms..."
                  rows={4}
                  value={appointmentForm.message}
                  onChange={(e) => setAppointmentForm({ ...appointmentForm, message: e.target.value })}
                />
                <Button className="w-full bg-red-500 hover:bg-red-600">Confirm Appointment</Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Contact Information */}
      <section className="py-20 px-4 bg-red-500 text-white">
        <div className="container mx-auto">
          <div className="grid lg:grid-cols-2 gap-12">
            <div>
              <h2 className="text-4xl font-bold mb-6">Contact Information</h2>
              <p className="text-xl text-red-100 mb-8">Get in touch with us for any medical emergencies or inquiries</p>
              <div className="space-y-6">
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-red-400 rounded-full flex items-center justify-center">
                    <Phone className="w-6 h-6" />
                  </div>
                  <div>
                    <p className="font-semibold">Emergency: (555) 911-HELP</p>
                    <p className="text-red-100">Appointments: (555) 123-CARE</p>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-red-400 rounded-full flex items-center justify-center">
                    <Mail className="w-6 h-6" />
                  </div>
                  <div>
                    <p className="font-semibold">info@healthcareplus.com</p>
                    <p className="text-red-100">appointments@healthcareplus.com</p>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-red-400 rounded-full flex items-center justify-center">
                    <MapPin className="w-6 h-6" />
                  </div>
                  <div>
                    <p className="font-semibold">123 Medical Center Drive</p>
                    <p className="text-red-100">Healthcare City, HC 12345</p>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-red-400 rounded-full flex items-center justify-center">
                    <Clock className="w-6 h-6" />
                  </div>
                  <div>
                    <p className="font-semibold">Mon-Fri: 8:00 AM - 8:00 PM</p>
                    <p className="text-red-100">Sat-Sun: 9:00 AM - 5:00 PM</p>
                  </div>
                </div>
              </div>
            </div>
            <div className="bg-white text-gray-900 rounded-lg p-8">
              <h3 className="text-2xl font-bold mb-6">Emergency Services</h3>
              <div className="space-y-4">
                <div className="p-4 bg-red-50 rounded-lg border-l-4 border-red-500">
                  <h4 className="font-semibold text-red-800">24/7 Emergency Care</h4>
                  <p className="text-sm text-red-700">Our emergency department is open 24 hours a day, 7 days a week</p>
                </div>
                <div className="p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500">
                  <h4 className="font-semibold text-blue-800">Ambulance Services</h4>
                  <p className="text-sm text-blue-700">
                    Fast response ambulance services available throughout the city
                  </p>
                </div>
                <div className="p-4 bg-green-50 rounded-lg border-l-4 border-green-500">
                  <h4 className="font-semibold text-green-800">Telemedicine</h4>
                  <p className="text-sm text-green-700">Virtual consultations available for non-emergency cases</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/loan-finance/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Slider } from "@/components/ui/slider"
import {
  ArrowLeft,
  DollarSign,
  Calculator,
  TrendingUp,
  Shield,
  Clock,
  CheckCircle,
  Star,
  Users,
  Award,
  FileText,
  CreditCard,
  Home,
  Car,
  GraduationCap,
  Building,
} from "lucide-react"

export default function LoanFinancePage() {
  const [loanAmount, setLoanAmount] = useState([50000])
  const [loanTerm, setLoanTerm] = useState([5])
  const [interestRate] = useState(4.5)
  const [applicationForm, setApplicationForm] = useState({
    name: "",
    email: "",
    phone: "",
    income: "",
    employment: "",
    loanType: "",
    purpose: "",
  })

  const loanTypes = [
    {
      icon: Home,
      title: "Home Loans",
      description: "Competitive rates for your dream home",
      rate: "3.25% - 4.75%",
      maxAmount: "$1,000,000",
      features: ["No prepayment penalty", "Flexible terms", "Quick approval"],
    },
    {
      icon: Car,
      title: "Auto Loans",
      description: "Finance your next vehicle with ease",
      rate: "2.99% - 6.99%",
      maxAmount: "$100,000",
      features: ["New & used cars", "Fast processing", "Competitive rates"],
    },
    {
      icon: GraduationCap,
      title: "Education Loans",
      description: "Invest in your future education",
      rate: "4.50% - 7.50%",
      maxAmount: "$200,000",
      features: ["Deferred payments", "Grace period", "Flexible repayment"],
    },
    {
      icon: Building,
      title: "Business Loans",
      description: "Grow your business with our funding",
      rate: "5.25% - 9.75%",
      maxAmount: "$5,000,000",
      features: ["Working capital", "Equipment financing", "Line of credit"],
    },
  ]

  const stats = [
    { label: "Loans Approved", value: "$2.5B+", icon: DollarSign },
    { label: "Happy Customers", value: "50,000+", icon: Users },
    { label: "Years Experience", value: "20+", icon: Award },
    { label: "Approval Rate", value: "95%", icon: CheckCircle },
  ]

  const testimonials = [
    {
      name: "Jennifer Smith",
      type: "Home Loan",
      rating: 5,
      text: "Excellent service! Got my home loan approved in just 3 days with a great interest rate.",
    },
    {
      name: "Michael Johnson",
      type: "Business Loan",
      rating: 5,
      text: "The team was incredibly helpful throughout the entire process. Highly recommended!",
    },
  ]

  // Calculate monthly payment
  const monthlyPayment = () => {
    const principal = loanAmount[0]
    const monthlyRate = interestRate / 100 / 12
    const numPayments = loanTerm[0] * 12

    const payment =
      (principal * monthlyRate * Math.pow(1 + monthlyRate, numPayments)) / (Math.pow(1 + monthlyRate, numPayments) - 1)

    return payment.toFixed(2)
  }

  const totalPayment = () => {
    return (Number.parseFloat(monthlyPayment()) * loanTerm[0] * 12).toFixed(2)
  }

  const totalInterest = () => {
    return (Number.parseFloat(totalPayment()) - loanAmount[0]).toFixed(2)
  }

  return (
    <div className="min-h-screen bg-white">
      {/* Navigation */}
      <nav className="border-b bg-white/95 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <ArrowLeft className="h-5 w-5" />
              <span className="text-sm text-gray-600">Back to Examples</span>
            </Link>
            <div className="flex items-center gap-2">
              <DollarSign className="h-8 w-8 text-green-600" />
              <span className="text-xl font-bold text-gray-900">FinanceFirst</span>
            </div>
            <div className="hidden md:flex items-center gap-6">
              <a href="#loans" className="text-gray-600 hover:text-green-600">
                Loans
              </a>
              <a href="#calculator" className="text-gray-600 hover:text-green-600">
                Calculator
              </a>
              <a href="#apply" className="text-gray-600 hover:text-green-600">
                Apply Now
              </a>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="py-20 px-4 bg-gradient-to-br from-green-50 to-emerald-100">
        <div className="container mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <Badge className="mb-4 bg-green-100 text-green-800">Financial Solutions</Badge>
              <h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
                Your Financial
                <span className="block text-green-600">Dreams Realized</span>
              </h1>
              <p className="text-xl text-gray-600 mb-8">
                Get the funding you need with competitive rates, flexible terms, and personalized service. From home
                loans to business financing.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Button size="lg" className="bg-green-600 hover:bg-green-700">
                  Apply for Loan
                </Button>
                <Button size="lg" variant="outline">
                  Calculate Payment
                </Button>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              {stats.map((stat, index) => {
                const IconComponent = stat.icon
                return (
                  <Card key={index} className="text-center p-6">
                    <IconComponent className="w-8 h-8 text-green-600 mx-auto mb-3" />
                    <p className="text-2xl font-bold text-gray-900">{stat.value}</p>
                    <p className="text-sm text-gray-600">{stat.label}</p>
                  </Card>
                )
              })}
            </div>
          </div>
        </div>
      </section>

      {/* Loan Types */}
      <section id="loans" className="py-20 px-4">
        <div className="container mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">Our Loan Products</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Choose from our comprehensive range of loan products designed to meet your specific needs
            </p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {loanTypes.map((loan, index) => {
              const IconComponent = loan.icon
              return (
                <Card key={index} className="group hover:shadow-xl transition-all duration-300">
                  <CardHeader className="text-center">
                    <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-green-600 transition-colors">
                      <IconComponent className="w-8 h-8 text-green-600 group-hover:text-white" />
                    </div>
                    <CardTitle className="text-xl">{loan.title}</CardTitle>
                    <CardDescription>{loan.description}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="flex justify-between items-center">
                        <span className="text-sm text-gray-600">Interest Rate</span>
                        <span className="font-semibold text-green-600">{loan.rate}</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-sm text-gray-600">Max Amount</span>
                        <span className="font-semibold">{loan.maxAmount}</span>
                      </div>
                      <div className="space-y-2">
                        {loan.features.map((feature, idx) => (
                          <div key={idx} className="flex items-center gap-2 text-sm text-gray-600">
                            <CheckCircle className="w-4 h-4 text-green-500" />
                            {feature}
                          </div>
                        ))}
                      </div>
                      <Button className="w-full bg-green-600 hover:bg-green-700">Learn More</Button>
                    </div>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

      {/* Loan Calculator */}
      <section id="calculator" className="py-20 px-4 bg-gray-50">
        <div className="container mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">Loan Calculator</h2>
            <p className="text-xl text-gray-600">Calculate your monthly payments and see how much you can afford</p>
          </div>
          <div className="grid lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Calculator className="w-5 h-5" />
                  Loan Details
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Loan Amount: ${loanAmount[0].toLocaleString()}
                  </label>
                  <Slider
                    value={loanAmount}
                    onValueChange={setLoanAmount}
                    max={1000000}
                    min={1000}
                    step={1000}
                    className="w-full"
                  />
                  <div className="flex justify-between text-xs text-gray-500 mt-1">
                    <span>$1,000</span>
                    <span>$1,000,000</span>
                  </div>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Loan Term: {loanTerm[0]} years</label>
                  <Slider value={loanTerm} onValueChange={setLoanTerm} max={30} min={1} step={1} className="w-full" />
                  <div className="flex justify-between text-xs text-gray-500 mt-1">
                    <span>1 year</span>
                    <span>30 years</span>
                  </div>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Interest Rate</label>
                  <div className="p-3 bg-gray-100 rounded-lg">
                    <span className="text-lg font-semibold text-green-600">{interestRate}% APR</span>
                    <p className="text-xs text-gray-600">Rate based on excellent credit</p>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <TrendingUp className="w-5 h-5" />
                  Payment Breakdown
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-2 gap-4">
                  <div className="p-4 bg-green-50 rounded-lg text-center">
                    <p className="text-sm text-gray-600">Monthly Payment</p>
                    <p className="text-2xl font-bold text-green-600">${monthlyPayment()}</p>
                  </div>
                  <div className="p-4 bg-blue-50 rounded-lg text-center">
                    <p className="text-sm text-gray-600">Total Payment</p>
                    <p className="text-2xl font-bold text-blue-600">
                      ${Number.parseFloat(totalPayment()).toLocaleString()}
                    </p>
                  </div>
                </div>
                <div className="p-4 bg-yellow-50 rounded-lg text-center">
                  <p className="text-sm text-gray-600">Total Interest</p>
                  <p className="text-2xl font-bold text-yellow-600">
                    ${Number.parseFloat(totalInterest()).toLocaleString()}
                  </p>
                </div>
                <div className="space-y-3">
                  <div className="flex justify-between text-sm">
                    <span>Principal</span>
                    <span>${loanAmount[0].toLocaleString()}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span>Interest</span>
                    <span>${Number.parseFloat(totalInterest()).toLocaleString()}</span>
                  </div>
                  <div className="border-t pt-2 flex justify-between font-semibold">
                    <span>Total</span>
                    <span>${Number.parseFloat(totalPayment()).toLocaleString()}</span>
                  </div>
                </div>
                <Button className="w-full bg-green-600 hover:bg-green-700">Apply for This Loan</Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Application Form */}
      <section id="apply" className="py-20 px-4">
        <div className="container mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">Apply for a Loan</h2>
            <p className="text-xl text-gray-600">Start your application process - it only takes a few minutes</p>
          </div>
          <Card className="max-w-2xl mx-auto">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <FileText className="w-5 h-5" />
                Loan Application
              </CardTitle>
              <CardDescription>Fill out the form below and we'll get back to you within 24 hours</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid md:grid-cols-2 gap-4">
                <Input
                  placeholder="Full Name"
                  value={applicationForm.name}
                  onChange={(e) => setApplicationForm({ ...applicationForm, name: e.target.value })}
                />
                <Input
                  type="email"
                  placeholder="Email Address"
                  value={applicationForm.email}
                  onChange={(e) => setApplicationForm({ ...applicationForm, email: e.target.value })}
                />
              </div>
              <div className="grid md:grid-cols-2 gap-4">
                <Input
                  type="tel"
                  placeholder="Phone Number"
                  value={applicationForm.phone}
                  onChange={(e) => setApplicationForm({ ...applicationForm, phone: e.target.value })}
                />
                <Input
                  placeholder="Annual Income"
                  value={applicationForm.income}
                  onChange={(e) => setApplicationForm({ ...applicationForm, income: e.target.value })}
                />
              </div>
              <div className="grid md:grid-cols-2 gap-4">
                <Input
                  placeholder="Employment Status"
                  value={applicationForm.employment}
                  onChange={(e) => setApplicationForm({ ...applicationForm, employment: e.target.value })}
                />
                <Input
                  placeholder="Loan Type"
                  value={applicationForm.loanType}
                  onChange={(e) => setApplicationForm({ ...applicationForm, loanType: e.target.value })}
                />
              </div>
              <Textarea
                placeholder="Purpose of loan and additional information..."
                rows={4}
                value={applicationForm.purpose}
                onChange={(e) => setApplicationForm({ ...applicationForm, purpose: e.target.value })}
              />
              <div className="flex items-center gap-4 p-4 bg-green-50 rounded-lg">
                <Shield className="w-8 h-8 text-green-600" />
                <div>
                  <p className="font-semibold text-green-800">Secure Application</p>
                  <p className="text-sm text-green-700">Your information is protected with bank-level security</p>
                </div>
              </div>
              <Button className="w-full bg-green-600 hover:bg-green-700 text-lg py-3">Submit Application</Button>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-20 px-4 bg-gray-50">
        <div className="container mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">What Our Customers Say</h2>
            <p className="text-xl text-gray-600">Real experiences from satisfied customers</p>
          </div>
          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            {testimonials.map((testimonial, index) => (
              <Card key={index} className="p-6">
                <CardContent className="pt-0">
                  <div className="flex mb-4">
                    {[...Array(testimonial.rating)].map((_, i) => (
                      <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
                    ))}
                  </div>
                  <p className="text-gray-600 mb-4 italic">"{testimonial.text}"</p>
                  <div className="flex justify-between items-center">
                    <div>
                      <p className="font-semibold">{testimonial.name}</p>
                      <p className="text-sm text-gray-500">{testimonial.type}</p>
                    </div>
                    <Badge variant="outline" className="text-green-600 border-green-600">
                      Verified Customer
                    </Badge>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="py-20 px-4">
        <div className="container mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">Why Choose FinanceFirst?</h2>
            <p className="text-xl text-gray-600">We make financing simple, fast, and transparent</p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            <Card className="text-center p-6">
              <Clock className="w-12 h-12 text-green-600 mx-auto mb-4" />
              <CardTitle className="mb-2">Quick Approval</CardTitle>
              <CardDescription>Get approved in as little as 24 hours with our streamlined process</CardDescription>
            </Card>
            <Card className="text-center p-6">
              <Shield className="w-12 h-12 text-blue-600 mx-auto mb-4" />
              <CardTitle className="mb-2">Secure & Safe</CardTitle>
              <CardDescription>Your personal information is protected with industry-leading security</CardDescription>
            </Card>
            <Card className="text-center p-6">
              <CreditCard className="w-12 h-12 text-purple-600 mx-auto mb-4" />
              <CardTitle className="mb-2">Flexible Terms</CardTitle>
              <CardDescription>Choose from various repayment options that fit your budget</CardDescription>
            </Card>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 px-4 bg-green-600 text-white">
        <div className="container mx-auto text-center">
          <h2 className="text-4xl font-bold mb-6">Ready to Get Started?</h2>
          <p className="text-xl text-green-100 mb-8 max-w-2xl mx-auto">
            Take the first step towards achieving your financial goals. Apply now and get a decision within 24 hours.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" className="bg-white text-green-600 hover:bg-gray-100">
              Apply Now
            </Button>
            <Button size="lg" variant="outline" className="border-white text-white hover:bg-white hover:text-green-600">
              Speak to an Expert
            </Button>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"

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

export const metadata: Metadata = {
  title: "Business Website Examples - Thesis Project",
  description: "Modern dynamic website examples for technology, inventory, healthcare, and finance businesses",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ArrowRight, Building2, Package, Heart, DollarSign, Code, Cloud, Shield, Users } from "lucide-react"

export default function HomePage() {
  const businessTypes = [
    {
      id: "tech",
      title: "Technology Solutions Company",
      description: "Modern tech company offering cloud services, software development, and IT consulting",
      icon: Code,
      color: "bg-blue-500",
      features: ["Service Portfolio", "Team Showcase", "Client Testimonials", "Contact Forms"],
      href: "/tech-landing",
    },
    {
      id: "inventory",
      title: "Stock Inventory Management",
      description: "Comprehensive inventory tracking system with real-time stock monitoring",
      icon: Package,
      color: "bg-green-500",
      features: ["Real-time Tracking", "Low Stock Alerts", "Supplier Management", "Reports & Analytics"],
      href: "/inventory-landing",
    },
    {
      id: "healthcare",
      title: "Clinic Healthcare System",
      description: "Patient management system with appointment scheduling and medical records",
      icon: Heart,
      color: "bg-red-500",
      features: ["Appointment Booking", "Patient Records", "Doctor Schedules", "Medical History"],
      href: "/healthcare-landing",
    },
    {
      id: "finance",
      title: "Loan Financial Services",
      description: "Loan application and management system with credit assessment tools",
      icon: DollarSign,
      color: "bg-yellow-500",
      features: ["Loan Calculator", "Application Forms", "Credit Assessment", "Payment Tracking"],
      href: "/finance-landing",
    },
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
      {/* Header */}
      <header className="border-b bg-white/80 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Building2 className="h-8 w-8 text-green-600" />
              <h1 className="text-2xl font-bold text-gray-900">Business Website Demos</h1>
            </div>
            <Badge variant="secondary" className="text-sm">
              Thesis Project Examples
            </Badge>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-16 px-4">
        <div className="container mx-auto text-center">
          <h2 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
            Modern Dynamic Website
            <span className="block text-green-600">Examples</span>
          </h2>
          <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
            Explore four different business website concepts designed for your thesis project. Each example showcases
            modern web development practices and industry-specific features.
          </p>
          <div className="flex flex-wrap gap-4 justify-center">
            <Badge variant="outline" className="text-sm px-4 py-2">
              <Code className="w-4 h-4 mr-2" />
              React & Next.js
            </Badge>
            <Badge variant="outline" className="text-sm px-4 py-2">
              <Cloud className="w-4 h-4 mr-2" />
              Modern UI/UX
            </Badge>
            <Badge variant="outline" className="text-sm px-4 py-2">
              <Shield className="w-4 h-4 mr-2" />
              Responsive Design
            </Badge>
            <Badge variant="outline" className="text-sm px-4 py-2">
              <Users className="w-4 h-4 mr-2" />
              User-Centered
            </Badge>
          </div>
        </div>
      </section>

      {/* Business Type Cards */}
      <section className="py-16 px-4">
        <div className="container mx-auto">
          <h3 className="text-3xl font-bold text-center mb-12 text-gray-900">Choose Your Business Type</h3>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {businessTypes.map((business) => {
              const IconComponent = business.icon
              return (
                <Card
                  key={business.id}
                  className="group hover:shadow-xl transition-all duration-300 cursor-pointer border-2 hover:border-green-200"
                >
                  <CardHeader className="text-center">
                    <div
                      className={`w-16 h-16 ${business.color} rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform`}
                    >
                      <IconComponent className="w-8 h-8 text-white" />
                    </div>
                    <CardTitle className="text-lg">{business.title}</CardTitle>
                    <CardDescription className="text-sm">{business.description}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-2">
                      <h4 className="font-semibold text-sm text-gray-700">Key Features:</h4>
                      <ul className="space-y-1">
                        {business.features.map((feature, index) => (
                          <li key={index} className="text-xs text-gray-600 flex items-center gap-2">
                            <div className="w-1.5 h-1.5 bg-blue-500 rounded-full" />
                            {feature}
                          </li>
                        ))}
                      </ul>
                    </div>
                    <Link href={business.href}>
                      <Button className="w-full mt-4 group-hover:bg-green-600" size="sm">
                        View Demo
                        <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
                      </Button>
                    </Link>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

      {/* Demo Selection Info */}
      <section className="py-16 px-4 bg-white">
        <div className="container mx-auto text-center">
          <div className="max-w-2xl mx-auto">
            <h3 className="text-2xl font-bold mb-4 text-gray-900">Ready to Explore Different Business Models?</h3>
            <p className="text-gray-600 mb-8">
              Each demo includes modern features, responsive design, and industry-specific functionality. Click on any
              card above to explore detailed examples.
            </p>
            <div className="flex flex-wrap gap-4 justify-center">
              <Link href="/tech-landing">
                <Button variant="outline">Technology Company</Button>
              </Link>
              <Link href="/inventory-landing">
                <Button variant="outline">Inventory System</Button>
              </Link>
              <Link href="/healthcare-landing">
                <Button variant="outline">Healthcare Clinic</Button>
              </Link>
              <Link href="/finance-landing">
                <Button variant="outline">Financial Services</Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12 px-4">
        <div className="container mx-auto text-center">
          <h4 className="text-xl font-bold mb-4">Thesis Project Guidelines</h4>
          <p className="text-gray-400 mb-6 max-w-2xl mx-auto">
            These examples demonstrate modern web development practices including responsive design, user experience
            optimization, and industry-specific functionality. Perfect for academic projects.
          </p>
          <div className="flex flex-wrap gap-4 justify-center text-sm text-gray-400">
            <span>• Modern React/Next.js Architecture</span>
            <span>• Responsive Mobile-First Design</span>
            <span>• Industry Best Practices</span>
            <span>• Scalable Component Structure</span>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tech-landing/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import {
  ArrowLeft,
  Code,
  Cloud,
  Shield,
  Database,
  Users,
  Star,
  CheckCircle,
  ArrowRight,
  Mail,
  Phone,
  MapPin,
  Zap,
  Globe,
  Lock,
  Rocket,
  Target,
  Award,
} from "lucide-react"

export default function TechLandingPage() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    company: "",
    message: "",
  })

  const heroFeatures = [
    { icon: Zap, text: "Lightning Fast" },
    { icon: Shield, text: "Enterprise Security" },
    { icon: Globe, text: "Global Scale" },
    { icon: Award, text: "Award Winning" },
  ]

  const services = [
    {
      icon: Cloud,
      title: "Cloud Infrastructure",
      description: "Scalable cloud solutions that grow with your business",
      features: ["AWS/Azure/GCP", "Auto-scaling", "99.9% Uptime", "24/7 Monitoring"],
      color: "from-green-500 to-emerald-500",
    },
    {
      icon: Code,
      title: "Custom Development",
      description: "Tailored software solutions for your unique needs",
      features: ["Web Applications", "Mobile Apps", "API Development", "System Integration"],
      color: "from-green-600 to-green-400",
    },
    {
      icon: Database,
      title: "Data Analytics",
      description: "Transform your data into actionable business insights",
      features: ["Business Intelligence", "Machine Learning", "Real-time Analytics", "Custom Dashboards"],
      color: "from-emerald-500 to-teal-500",
    },
    {
      icon: Lock,
      title: "Cybersecurity",
      description: "Comprehensive security solutions and consulting",
      features: ["Security Audits", "Penetration Testing", "Compliance", "Training Programs"],
      color: "from-green-700 to-green-500",
    },
  ]

  const technologies = [
    { name: "React", category: "Frontend" },
    { name: "Node.js", category: "Backend" },
    { name: "AWS", category: "Cloud" },
    { name: "Docker", category: "DevOps" },
    { name: "Kubernetes", category: "Orchestration" },
    { name: "MongoDB", category: "Database" },
    { name: "Python", category: "AI/ML" },
    { name: "TypeScript", category: "Language" },
  ]

  const stats = [
    { number: "500+", label: "Projects Delivered", icon: Rocket },
    { number: "98%", label: "Client Satisfaction", icon: Target },
    { number: "15+", label: "Years Experience", icon: Award },
    { number: "50+", label: "Team Members", icon: Users },
  ]

  const testimonials = [
    {
      name: "Sarah Johnson",
      company: "TechCorp Inc.",
      role: "CTO",
      rating: 5,
      text: "Their cloud migration expertise saved us 40% on infrastructure costs while improving performance.",
      avatar: "SJ",
    },
    {
      name: "Michael Chen",
      company: "StartupXYZ",
      role: "CEO",
      rating: 5,
      text: "The custom application they built became the cornerstone of our digital transformation.",
      avatar: "MC",
    },
    {
      name: "Emily Davis",
      company: "Enterprise Solutions",
      role: "IT Director",
      rating: 5,
      text: "Outstanding security implementation. Our compliance audit was flawless thanks to their work.",
      avatar: "ED",
    },
  ]

  return (
    <div className="min-h-screen bg-white">
      {/* Navigation */}
      <nav className="border-b border-gray-100 bg-white/95 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2 text-gray-600 hover:text-gray-900">
              <ArrowLeft className="h-5 w-5" />
              <span className="text-sm">Back to Examples</span>
            </Link>
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 bg-gradient-to-r from-green-500 to-emerald-500 rounded-lg flex items-center justify-center">
                <Code className="h-5 w-5 text-white" />
              </div>
              <span className="text-xl font-bold text-gray-900">TechNova Solutions</span>
            </div>
            <div className="hidden md:flex items-center gap-6">
              <a href="#services" className="text-gray-600 hover:text-green-600 transition-colors">
                Services
              </a>
              <a href="#about" className="text-gray-600 hover:text-green-600 transition-colors">
                About
              </a>
              <a href="#contact" className="text-gray-600 hover:text-green-600 transition-colors">
                Contact
              </a>
              <Button className="bg-green-600 hover:bg-green-700 text-white">Get Started</Button>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="py-20 px-4 relative overflow-hidden bg-gradient-to-br from-green-50 to-emerald-50">
        <div className="absolute inset-0">
          <div className="absolute top-20 left-20 w-72 h-72 bg-green-200/30 rounded-full blur-3xl" />
          <div className="absolute bottom-20 right-20 w-96 h-96 bg-emerald-200/30 rounded-full blur-3xl" />
        </div>
        <div className="container mx-auto relative z-10">
          <div className="text-center max-w-4xl mx-auto">
            <Badge className="mb-6 bg-green-100 text-green-800 border-green-200">
              <Zap className="w-4 h-4 mr-2" />
              Next-Generation Technology Solutions
            </Badge>
            <h1 className="text-5xl md:text-7xl font-bold mb-6 text-gray-900">
              Transform Your Business
              <span className="block text-green-600">With Innovation</span>
            </h1>
            <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto leading-relaxed">
              We architect cutting-edge technology solutions that propel businesses into the future. From cloud
              infrastructure to AI-powered applications.
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
              <Button size="lg" className="bg-green-600 hover:bg-green-700 text-white text-lg px-8">
                Start Your Project
                <ArrowRight className="w-5 h-5 ml-2" />
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="border-green-600 text-green-600 hover:bg-green-50 text-lg px-8 bg-transparent"
              >
                View Our Work
              </Button>
            </div>

            <div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-2xl mx-auto">
              {heroFeatures.map((feature, index) => {
                const IconComponent = feature.icon
                return (
                  <div key={index} className="flex flex-col items-center gap-2">
                    <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center border border-green-200">
                      <IconComponent className="w-6 h-6 text-green-600" />
                    </div>
                    <span className="text-sm text-gray-600">{feature.text}</span>
                  </div>
                )
              })}
            </div>
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-16 px-4 bg-white">
        <div className="container mx-auto">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {stats.map((stat, index) => {
              const IconComponent = stat.icon
              return (
                <div key={index} className="text-center">
                  <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <IconComponent className="w-8 h-8 text-green-600" />
                  </div>
                  <div className="text-3xl font-bold text-gray-900 mb-2">{stat.number}</div>
                  <div className="text-gray-600 text-sm">{stat.label}</div>
                </div>
              )
            })}
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-20 px-4 bg-gray-50">
        <div className="container mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">Our Expertise</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Comprehensive technology solutions designed to accelerate your digital transformation
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-8">
            {services.map((service, index) => {
              const IconComponent = service.icon
              return (
                <Card
                  key={index}
                  className="bg-white border-0 shadow-lg hover:shadow-xl transition-all duration-300 group"
                >
                  <CardHeader>
                    <div
                      className={`w-16 h-16 bg-gradient-to-r ${service.color} rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}
                    >
                      <IconComponent className="w-8 h-8 text-white" />
                    </div>
                    <CardTitle className="text-2xl text-gray-900">{service.title}</CardTitle>
                    <CardDescription className="text-gray-600 text-lg">{service.description}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-2 gap-3">
                      {service.features.map((feature, idx) => (
                        <div key={idx} className="flex items-center gap-2 text-gray-700">
                          <CheckCircle className="w-4 h-4 text-green-500" />
                          <span className="text-sm">{feature}</span>
                        </div>
                      ))}
                    </div>
                    <Button className="w-full mt-6 bg-green-600 hover:bg-green-700 text-white">Learn More</Button>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

      {/* Technologies Section */}
      <section className="py-20 px-4 bg-white">
        <div className="container mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">Technologies We Master</h2>
            <p className="text-xl text-gray-600">Cutting-edge tools and frameworks for modern solutions</p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {technologies.map((tech, index) => (
              <div
                key={index}
                className="bg-gray-50 border border-gray-200 rounded-lg p-4 text-center hover:bg-green-50 hover:border-green-200 transition-colors"
              >
                <div className="text-lg font-semibold text-gray-900 mb-1">{tech.name}</div>
                <div className="text-sm text-gray-600">{tech.category}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-20 px-4 bg-gray-50">
        <div className="container mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">Client Success Stories</h2>
            <p className="text-xl text-gray-600">What industry leaders say about our solutions</p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {testimonials.map((testimonial, index) => (
              <Card key={index} className="bg-white border-0 shadow-lg">
                <CardContent className="p-6">
                  <div className="flex mb-4">
                    {[...Array(testimonial.rating)].map((_, i) => (
                      <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
                    ))}
                  </div>
                  <p className="text-gray-700 mb-6 italic">"{testimonial.text}"</p>
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full flex items-center justify-center text-white font-bold">
                      {testimonial.avatar}
                    </div>
                    <div>
                      <p className="font-semibold text-gray-900">{testimonial.name}</p>
                      <p className="text-sm text-gray-600">
                        {testimonial.role}, {testimonial.company}
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20 px-4 bg-green-600 text-white">
        <div className="container mx-auto">
          <div className="grid lg:grid-cols-2 gap-12">
            <div>
              <h2 className="text-4xl font-bold mb-6">Let's Build Something Amazing</h2>
              <p className="text-xl text-green-100 mb-8">
                Ready to transform your business with cutting-edge technology? Let's discuss your vision.
              </p>
              <div className="space-y-6">
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center">
                    <Mail className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <p className="text-white font-semibold">hello@technova.com</p>
                    <p className="text-green-200">Get in touch for projects</p>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center">
                    <Phone className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <p className="text-white font-semibold">+1 (555) 123-TECH</p>
                    <p className="text-green-200">Mon-Fri 9AM-6PM PST</p>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center">
                    <MapPin className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <p className="text-white font-semibold">Silicon Valley, CA</p>
                    <p className="text-green-200">Global remote team</p>
                  </div>
                </div>
              </div>
            </div>
            <Card className="bg-white/10 backdrop-blur-sm border-green-400/30">
              <CardHeader>
                <CardTitle className="text-white">Start Your Project</CardTitle>
                <CardDescription className="text-green-200">
                  Tell us about your vision and we'll make it reality
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <Input
                  placeholder="Your Name"
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  className="bg-white/10 border-green-400/30 text-white placeholder:text-green-200"
                />
                <Input
                  type="email"
                  placeholder="Your Email"
                  value={formData.email}
                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  className="bg-white/10 border-green-400/30 text-white placeholder:text-green-200"
                />
                <Input
                  placeholder="Company Name"
                  value={formData.company}
                  onChange={(e) => setFormData({ ...formData, company: e.target.value })}
                  className="bg-white/10 border-green-400/30 text-white placeholder:text-green-200"
                />
                <Textarea
                  placeholder="Tell us about your project..."
                  rows={4}
                  value={formData.message}
                  onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                  className="bg-white/10 border-green-400/30 text-white placeholder:text-green-200"
                />
                <Button className="w-full bg-white text-green-600 hover:bg-gray-100">Send Message</Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 px-4 bg-gray-900 text-white">
        <div className="container mx-auto text-center">
          <div className="flex items-center justify-center gap-2 mb-4">
            <div className="w-8 h-8 bg-gradient-to-r from-green-500 to-emerald-500 rounded-lg flex items-center justify-center">
              <Code className="h-5 w-5 text-white" />
            </div>
            <span className="text-xl font-bold">TechNova Solutions</span>
          </div>
          <p className="text-gray-400 mb-4">Transforming businesses through innovative technology solutions</p>
          <div className="flex flex-wrap gap-6 justify-center text-sm text-gray-500">
            <span>• Enterprise-Grade Solutions</span>
            <span>• 24/7 Support</span>
            <span>• Global Delivery</span>
            <span>• Agile Methodology</span>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/inventory-landing/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import {
  ArrowLeft,
  Package,
  AlertTriangle,
  TrendingUp,
  Truck,
  Clock,
  CheckCircle,
  ArrowRight,
  Globe,
  Target,
  Boxes,
  Scan,
  Bell,
  PieChart,
  Activity,
  DollarSign,
} from "lucide-react"

export default function InventoryLandingPage() {
  const [demoData] = useState({
    totalItems: 12847,
    lowStock: 23,
    outOfStock: 7,
    totalValue: 2456789,
    monthlyGrowth: 12.5,
  })

  const features = [
    {
      icon: Scan,
      title: "Smart Scanning",
      description: "Barcode and QR code scanning for instant inventory updates",
      color: "from-green-500 to-emerald-500",
    },
    {
      icon: Bell,
      title: "Real-time Alerts",
      description: "Automated notifications for low stock and reorder points",
      color: "from-yellow-500 to-orange-500",
    },
    {
      icon: PieChart,
      title: "Advanced Analytics",
      description: "Comprehensive reports and insights for better decision making",
      color: "from-blue-500 to-cyan-500",
    },
    {
      icon: Truck,
      title: "Supplier Management",
      description: "Streamlined supplier relationships and purchase orders",
      color: "from-purple-500 to-pink-500",
    },
    {
      icon: Activity,
      title: "Movement Tracking",
      description: "Track every item movement with detailed audit trails",
      color: "from-red-500 to-rose-500",
    },
    {
      icon: Globe,
      title: "Multi-location",
      description: "Manage inventory across multiple warehouses and locations",
      color: "from-indigo-500 to-blue-500",
    },
  ]

  const benefits = [
    { icon: DollarSign, title: "Reduce Costs", value: "30%", description: "Average cost reduction" },
    { icon: Clock, title: "Save Time", value: "5hrs", description: "Daily time savings" },
    { icon: TrendingUp, title: "Increase Accuracy", value: "99.8%", description: "Inventory accuracy" },
    { icon: Target, title: "Optimize Stock", value: "25%", description: "Reduction in overstock" },
  ]

  const testimonials = [
    {
      name: "Jennifer Martinez",
      company: "RetailCorp",
      role: "Operations Manager",
      text: "StockMaster transformed our inventory management. We reduced stockouts by 80% and improved efficiency dramatically.",
      avatar: "JM",
      savings: "$50K",
    },
    {
      name: "David Kim",
      company: "Manufacturing Plus",
      role: "Supply Chain Director",
      text: "The real-time tracking and analytics have given us unprecedented visibility into our operations.",
      avatar: "DK",
      savings: "$120K",
    },
  ]

  const pricingPlans = [
    {
      name: "Starter",
      price: "$29",
      description: "Perfect for small businesses",
      features: ["Up to 1,000 items", "Basic reporting", "Email support", "Mobile app"],
      popular: false,
    },
    {
      name: "Professional",
      price: "$79",
      description: "For growing businesses",
      features: ["Up to 10,000 items", "Advanced analytics", "Priority support", "Multi-location", "API access"],
      popular: true,
    },
    {
      name: "Enterprise",
      price: "Custom",
      description: "For large organizations",
      features: ["Unlimited items", "Custom integrations", "Dedicated support", "Advanced security", "Custom training"],
      popular: false,
    },
  ]

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Navigation */}
      <nav className="border-b bg-white/80 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2 text-gray-500 hover:text-gray-700">
              <ArrowLeft className="h-4 w-4" />
              <span className="text-sm">Back to Examples</span>
            </Link>
            <div className="flex items-center gap-2">
              <div className="w-7 h-7 bg-green-500 rounded-md flex items-center justify-center">
                <Package className="h-4 w-4 text-white" />
              </div>
              <span className="text-lg font-semibold text-gray-800">StockMaster Pro</span>
            </div>
            <div className="hidden md:flex items-center gap-4">
              <a href="#features" className="text-gray-500 hover:text-green-500 transition-colors">
                Features
              </a>
              <a href="#pricing" className="text-gray-500 hover:text-green-500 transition-colors">
                Pricing
              </a>
              <a href="#demo" className="text-gray-500 hover:text-green-500 transition-colors">
                Demo
              </a>
              <Button className="bg-green-500 hover:bg-green-600 text-sm">Start Free Trial</Button>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="py-16 px-4 relative overflow-hidden">
        <div className="absolute inset-0">
          <div className="absolute top-1/4 left-1/4 w-48 h-48 bg-green-100 rounded-full blur-2xl opacity-50" />
          <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-emerald-100 rounded-full blur-2xl opacity-50" />
        </div>
        <div className="container mx-auto relative z-10">
          <div className="grid lg:grid-cols-2 gap-8 items-center">
            <div>
              <Badge className="mb-4 bg-green-50 text-green-700 border-green-100">
                <Boxes className="w-3 h-3 mr-1" />
                Smart Inventory Management
              </Badge>
              <h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
                Master Your
                <span className="block text-green-500">Inventory Control</span>
              </h1>
              <p className="text-lg text-gray-500 mb-6 leading-relaxed">
                Streamline your inventory operations with real-time tracking, automated alerts, and powerful analytics.
                Reduce costs, prevent stockouts, and optimize your supply chain.
              </p>

              <div className="flex flex-col sm:flex-row gap-3 mb-8">
                <Button size="lg" className="bg-green-500 hover:bg-green-600 text-sm px-6">
                  Start 14-Day Free Trial
                  <ArrowRight className="w-4 h-4 ml-1" />
                </Button>
                <Button
                  size="lg"
                  variant="outline"
                  className="border-green-500 text-green-500 hover:bg-green-50 text-sm px-6 bg-transparent"
                >
                  Watch Demo
                </Button>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="flex items-center gap-2">
                  <CheckCircle className="w-5 h-5 text-green-500" />
                  <span className="text-gray-600 text-sm">No setup fees</span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle className="w-5 h-5 text-green-500" />
                  <span className="text-gray-600 text-sm">Cancel anytime</span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle className="w-5 h-5 text-green-500" />
                  <span className="text-gray-600 text-sm">24/7 support</span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle className="w-5 h-5 text-green-500" />
                  <span className="text-gray-600 text-sm">Data migration</span>
                </div>
              </div>
            </div>

            {/* Live Dashboard Preview */}
            <div className="relative">
              <Card className="bg-white/90 backdrop-blur-sm shadow-md border-0">
                <CardHeader className="pb-3">
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-md text-gray-800">Live Dashboard</CardTitle>
                    <Badge className="bg-green-50 text-green-700">Real-time</Badge>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-2 gap-3">
                    <div className="bg-green-500 rounded-md p-3 text-white">
                      <div className="text-xl font-bold">{demoData.totalItems.toLocaleString()}</div>
                      <div className="text-xs opacity-90">Total Items</div>
                    </div>
                    <div className="bg-blue-500 rounded-md p-3 text-white">
                      <div className="text-xl font-bold">${(demoData.totalValue / 1000000).toFixed(1)}M</div>
                      <div className="text-xs opacity-90">Total Value</div>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="text-xs text-gray-500">Stock Levels</span>
                      <span className="text-xs font-medium text-green-500">Healthy</span>
                    </div>
                    <Progress value={85} className="h-1" />
                  </div>

                  <div className="space-y-1">
                    <div className="flex items-center justify-between p-2 bg-yellow-50 rounded-md">
                      <div className="flex items-center gap-1">
                        <AlertTriangle className="w-3 h-3 text-yellow-600" />
                        <span className="text-xs">Low Stock Items</span>
                      </div>
                      <Badge variant="outline" className="text-yellow-600 border-yellow-600 text-[0.6rem]">
                        {demoData.lowStock}
                      </Badge>
                    </div>
                    <div className="flex items-center justify-between p-2 bg-red-50 rounded-md">
                      <div className="flex items-center gap-1">
                        <Package className="w-3 h-3 text-red-600" />
                        <span className="text-xs">Out of Stock</span>
                      </div>
                      <Badge variant="outline" className="text-red-600 border-red-600 text-[0.6rem]">
                        {demoData.outOfStock}
                      </Badge>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section className="py-12 px-4 bg-white">
        <div className="container mx-auto">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {benefits.map((benefit, index) => {
              const IconComponent = benefit.icon
              return (
                <div key={index} className="text-center">
                  <div className="w-12 h-12 bg-green-500 rounded-md flex items-center justify-center mx-auto mb-3">
                    <IconComponent className="w-6 h-6 text-white" />
                  </div>
                  <div className="text-2xl font-bold text-gray-800 mb-1">{benefit.value}</div>
                  <div className="font-semibold text-gray-700 mb-0.5">{benefit.title}</div>
                  <div className="text-sm text-gray-500">{benefit.description}</div>
                </div>
              )
            })}
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-16 px-4">
        <div className="container mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-800 mb-3">Powerful Features</h2>
            <p className="text-lg text-gray-500 max-w-2xl mx-auto">
              Everything you need to manage your inventory efficiently and effectively
            </p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {features.map((feature, index) => {
              const IconComponent = feature.icon
              return (
                <Card key={index} className="group hover:shadow-lg transition-all duration-200 border-0 bg-white">
                  <CardHeader>
                    <div
                      className={`w-12 h-12 bg-gradient-to-r ${feature.color} rounded-md flex items-center justify-center mb-3 group-hover:scale-110 transition-transform`}
                    >
                      <IconComponent className="w-6 h-6 text-white" />
                    </div>
                    <CardTitle className="text-lg text-gray-800">{feature.title}</CardTitle>
                    <CardDescription className="text-gray-500">{feature.description}</CardDescription>
                  </CardHeader>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-16 px-4 bg-green-50">
        <div className="container mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-800 mb-3">Success Stories</h2>
            <p className="text-lg text-gray-500">See how businesses transformed their operations</p>
          </div>
          <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
            {testimonials.map((testimonial, index) => (
              <Card key={index} className="bg-white border-0 shadow-sm">
                <CardContent className="p-6">
                  <div className="flex items-center gap-3 mb-4">
                    <div className="w-12 h-12 bg-green-500 rounded-md flex items-center justify-center text-white font-bold text-sm">
                      {testimonial.avatar}
                    </div>
                    <div>
                      <p className="font-semibold text-gray-800 text-sm">{testimonial.name}</p>
                      <p className="text-xs text-gray-500">{testimonial.role}</p>
                      <p className="text-xs text-green-500 font-medium">{testimonial.company}</p>
                    </div>
                    <div className="ml-auto">
                      <Badge className="bg-green-50 text-green-700 text-[0.6rem]">Saved {testimonial.savings}</Badge>
                    </div>
                  </div>
                  <p className="text-gray-600 italic text-sm">"{testimonial.text}"</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section id="pricing" className="py-16 px-4 bg-white">
        <div className="container mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-800 mb-3">Simple, Transparent Pricing</h2>
            <p className="text-lg text-gray-500">Choose the plan that fits your business needs</p>
          </div>
          <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
            {pricingPlans.map((plan, index) => (
              <Card
                key={index}
                className={`relative ${plan.popular ? "border-green-500 border-2 shadow-md" : "border-gray-100"}`}
              >
                {plan.popular && (
                  <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                    <Badge className="bg-green-500 text-white px-3 py-0.5 text-[0.7rem]">Most Popular</Badge>
                  </div>
                )}
                <CardHeader className="text-center pb-6">
                  <CardTitle className="text-xl text-gray-800">{plan.name}</CardTitle>
                  <div className="mt-3">
                    <span className="text-3xl font-bold text-gray-800">{plan.price}</span>
                    {plan.price !== "Custom" && <span className="text-gray-500">/month</span>}
                  </div>
                  <CardDescription className="mt-1 text-sm">{plan.description}</CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2 mb-6">
                    {plan.features.map((feature, idx) => (
                      <li key={idx} className="flex items-center gap-2">
                        <CheckCircle className="w-4 h-4 text-green-500" />
                        <span className="text-gray-600 text-sm">{feature}</span>
                      </li>
                    ))}
                  </ul>
                  <Button
                    className={`w-full text-sm ${
                      plan.popular ? "bg-green-500 hover:bg-green-600" : "bg-gray-800 hover:bg-gray-700"
                    }`}
                  >
                    {plan.price === "Custom" ? "Contact Sales" : "Start Free Trial"}
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 px-4 bg-green-500 text-white">
        <div className="container mx-auto text-center">
          <h2 className="text-3xl font-bold mb-4">Ready to Transform Your Inventory?</h2>
          <p className="text-lg text-green-100 mb-6 max-w-2xl mx-auto">
            Join thousands of businesses that have streamlined their operations with StockMaster Pro
          </p>
          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Button size="lg" className="bg-white text-green-500 hover:bg-gray-50 text-sm px-6">
              Start Free Trial
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-green-50 hover:text-green-500 text-sm px-6 bg-transparent"
            >
              Schedule Demo
            </Button>
          </div>
          <p className="text-sm text-green-200 mt-3">No credit card required • 14-day free trial</p>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-8 px-4 bg-gray-800 text-white">
        <div className="container mx-auto text-center">
          <div className="flex items-center justify-center gap-2 mb-3">
            <div className="w-7 h-7 bg-green-500 rounded-md flex items-center justify-center">
              <Package className="h-4 w-4 text-white" />
            </div>
            <span className="text-lg font-bold">StockMaster Pro</span>
          </div>
          <p className="text-gray-400 mb-3 text-sm">Intelligent inventory management for modern businesses</p>
          <div className="flex flex-wrap gap-4 justify-center text-xs text-gray-500">
            <span>• Real-time Tracking</span>
            <span>• Automated Alerts</span>
            <span>• Advanced Analytics</span>
            <span>• Multi-location Support</span>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/healthcare-landing/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Calendar } from "@/components/ui/calendar"
import {
  ArrowLeft,
  Heart,
  CalendarIcon,
  Clock,
  Phone,
  Mail,
  MapPin,
  Stethoscope,
  Users,
  FileText,
  Shield,
  Star,
  CheckCircle,
  ArrowRight,
  Zap,
  UserCheck,
  Ambulance,
  Building2,
  HeartHandshake,
  Brain,
  Eye,
  Bone,
  DollarSign,
} from "lucide-react"

export default function HealthcareLandingPage() {
  const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date())

  const specialties = [
    {
      icon: Heart,
      title: "Cardiology",
      description: "Heart and cardiovascular care",
      doctors: 8,
      color: "from-green-500 to-emerald-500",
    },
    {
      icon: Brain,
      title: "Neurology",
      description: "Brain and nervous system",
      doctors: 6,
      color: "from-purple-500 to-indigo-500",
    },
    {
      icon: Bone,
      title: "Orthopedics",
      description: "Bone and joint specialists",
      doctors: 12,
      color: "from-blue-500 to-cyan-500",
    },
    {
      icon: Eye,
      title: "Ophthalmology",
      description: "Eye care and vision",
      doctors: 4,
      color: "from-green-500 to-emerald-500",
    },
    {
      icon: Stethoscope,
      title: "General Medicine",
      description: "Primary healthcare services",
      doctors: 15,
      color: "from-orange-500 to-red-500",
    },
    {
      icon: HeartHandshake,
      title: "Pediatrics",
      description: "Children's healthcare",
      doctors: 10,
      color: "from-pink-500 to-rose-500",
    },
  ]

  const services = [
    {
      icon: CalendarIcon,
      title: "Online Appointments",
      description: "Book appointments 24/7 through our platform",
    },
    {
      icon: FileText,
      title: "Digital Records",
      description: "Secure access to your medical history",
    },
    {
      icon: Ambulance,
      title: "Emergency Care",
      description: "24/7 emergency services available",
    },
    {
      icon: UserCheck,
      title: "Telemedicine",
      description: "Virtual consultations from home",
    },
  ]

  const stats = [
    { number: "25,000+", label: "Patients Served", icon: Users },
    { number: "50+", label: "Medical Experts", icon: UserCheck },
    { number: "98%", label: "Patient Satisfaction", icon: Star },
    { number: "24/7", label: "Emergency Care", icon: Clock },
  ]

  const testimonials = [
    {
      name: "Sarah Johnson",
      condition: "Cardiology Patient",
      rating: 5,
      text: "The care I received was exceptional. Dr. Smith and the entire team made me feel comfortable throughout my treatment.",
      avatar: "SJ",
      treatment: "Heart Surgery",
    },
    {
      name: "Michael Chen",
      condition: "Orthopedic Patient",
      rating: 5,
      text: "After my knee replacement, the rehabilitation program helped me get back to my active lifestyle faster than expected.",
      avatar: "MC",
      treatment: "Knee Replacement",
    },
    {
      name: "Emily Davis",
      condition: "Pediatric Patient",
      rating: 5,
      text: "The pediatric team was amazing with my daughter. They made her feel safe and comfortable during her treatment.",
      avatar: "ED",
      treatment: "Pediatric Care",
    },
  ]

  const timeSlots = [
    "09:00 AM",
    "09:30 AM",
    "10:00 AM",
    "10:30 AM",
    "11:00 AM",
    "11:30 AM",
    "02:00 PM",
    "02:30 PM",
    "03:00 PM",
    "03:30 PM",
    "04:00 PM",
    "04:30 PM",
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-emerald-50">
      {/* Navigation */}
      <nav className="border-b bg-white/90 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2 text-gray-600 hover:text-gray-900">
              <ArrowLeft className="h-5 w-5" />
              <span className="text-sm">Back to Examples</span>
            </Link>
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 bg-gradient-to-r from-green-500 to-emerald-500 rounded-lg flex items-center justify-center">
                <Heart className="h-5 w-5 text-white" />
              </div>
              <span className="text-xl font-bold text-gray-900">MediCare Plus</span>
            </div>
            <div className="hidden md:flex items-center gap-6">
              <a href="#services" className="text-gray-600 hover:text-green-600 transition-colors">
                Services
              </a>
              <a href="#doctors" className="text-gray-600 hover:text-green-600 transition-colors">
                Doctors
              </a>
              <a href="#appointment" className="text-gray-600 hover:text-green-600 transition-colors">
                Book Now
              </a>
              <Button className="bg-green-600 hover:bg-green-700">Emergency</Button>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="py-20 px-4 relative overflow-hidden">
        <div className="absolute inset-0">
          <div className="absolute top-20 left-20 w-72 h-72 bg-green-200/30 rounded-full blur-3xl" />
          <div className="absolute bottom-20 right-20 w-96 h-96 bg-emerald-200/30 rounded-full blur-3xl" />
        </div>
        <div className="container mx-auto relative z-10">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <Badge className="mb-6 bg-green-100 text-green-800 border-green-200">
                <Heart className="w-4 h-4 mr-2" />
                Compassionate Healthcare
              </Badge>
              <h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
                Your Health,
                <span className="block text-green-600">Our Mission</span>
              </h1>
              <p className="text-xl text-gray-600 mb-8 leading-relaxed">
                Experience world-class healthcare with our team of expert physicians, state-of-the-art facilities, and
                patient-centered approach to medical care.
              </p>

              <div className="flex flex-col sm:flex-row gap-4 mb-12">
                <Button size="lg" className="bg-green-600 hover:bg-green-700 text-lg px-8">
                  Book Appointment
                  <ArrowRight className="w-5 h-5 ml-2" />
                </Button>
                <Button
                  size="lg"
                  variant="outline"
                  className="border-green-600 text-green-600 hover:bg-green-50 text-lg px-8 bg-transparent"
                >
                  Emergency Care
                </Button>
              </div>

              <div className="grid grid-cols-2 gap-6">
                <div className="flex items-center gap-3">
                  <CheckCircle className="w-6 h-6 text-green-600" />
                  <span className="text-gray-700">24/7 Emergency</span>
                </div>
                <div className="flex items-center gap-3">
                  <CheckCircle className="w-6 h-6 text-green-600" />
                  <span className="text-gray-700">Expert Doctors</span>
                </div>
                <div className="flex items-center gap-3">
                  <CheckCircle className="w-6 h-6 text-green-600" />
                  <span className="text-gray-700">Modern Equipment</span>
                </div>
                <div className="flex items-center gap-3">
                  <CheckCircle className="w-6 h-6 text-green-600" />
                  <span className="text-gray-700">Insurance Accepted</span>
                </div>
              </div>
            </div>

            {/* Appointment Booking Widget */}
            <div className="relative">
              <Card className="bg-white/95 backdrop-blur-sm shadow-2xl border-0">
                <CardHeader className="pb-4">
                  <CardTitle className="text-xl text-gray-900 flex items-center gap-2">
                    <CalendarIcon className="w-5 h-5 text-green-600" />
                    Quick Appointment
                  </CardTitle>
                  <CardDescription>Book your appointment in seconds</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-2 gap-3">
                    <Input placeholder="Full Name" className="border-gray-200" />
                    <Input placeholder="Phone" className="border-gray-200" />
                  </div>
                  <Input placeholder="Email Address" className="border-gray-200" />

                  <div className="space-y-3">
                    <label className="text-sm font-medium text-gray-700">Select Date</label>
                    <Calendar
                      mode="single"
                      selected={selectedDate}
                      onSelect={setSelectedDate}
                      className="rounded-md border border-gray-200 bg-white"
                    />
                  </div>

                  <div className="space-y-3">
                    <label className="text-sm font-medium text-gray-700">Available Times</label>
                    <div className="grid grid-cols-3 gap-2">
                      {timeSlots.slice(0, 6).map((time, index) => (
                        <Button
                          key={index}
                          variant="outline"
                          size="sm"
                          className="text-xs border-gray-200 hover:bg-green-50 hover:border-green-200 bg-transparent"
                        >
                          {time}
                        </Button>
                      ))}
                    </div>
                  </div>

                  <Button className="w-full bg-green-600 hover:bg-green-700">Book Appointment</Button>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-16 px-4 bg-white">
        <div className="container mx-auto">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {stats.map((stat, index) => {
              const IconComponent = stat.icon
              return (
                <div key={index} className="text-center">
                  <div
                    className={`w-16 h-16 bg-gradient-to-r ${stat.color} rounded-full flex items-center justify-center mx-auto mb-4`}
                  >
                    <IconComponent className="w-8 h-8 text-white" />
                  </div>
                  <div className="text-3xl font-bold text-gray-900 mb-2">{stat.number}</div>
                  <div className="text-sm text-gray-600">{stat.label}</div>
                </div>
              )
            })}
          </div>
        </div>
      </section>

      {/* Medical Specialties */}
      <section id="services" className="py-20 px-4">
        <div className="container mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">Medical Specialties</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Comprehensive healthcare services with specialized departments and expert medical professionals
            </p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {specialties.map((specialty, index) => {
              const IconComponent = specialty.icon
              return (
                <Card key={index} className="group hover:shadow-xl transition-all duration-300 border-0 bg-white">
                  <CardHeader className="text-center">
                    <div
                      className={`w-16 h-16 bg-gradient-to-r ${specialty.color} rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform`}
                    >
                      <IconComponent className="w-8 h-8 text-white" />
                    </div>
                    <CardTitle className="text-xl text-gray-900">{specialty.title}</CardTitle>
                    <CardDescription className="text-gray-600">{specialty.description}</CardDescription>
                  </CardHeader>
                  <CardContent className="text-center">
                    <div className="flex items-center justify-center gap-2 mb-4">
                      <Users className="w-4 h-4 text-gray-500" />
                      <span className="text-sm text-gray-600">{specialty.doctors} specialists</span>
                    </div>
                    <Button
                      variant="outline"
                      className="w-full border-gray-200 hover:bg-green-50 hover:border-green-200 bg-transparent"
                    >
                      Book Consultation
                    </Button>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section className="py-20 px-4 bg-green-50">
        <div className="container mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">Healthcare Services</h2>
            <p className="text-xl text-gray-600">Modern healthcare solutions designed for your convenience</p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {services.map((service, index) => {
              const IconComponent = service.icon
              return (
                <Card key={index} className="text-center bg-white border-0 shadow-lg hover:shadow-xl transition-shadow">
                  <CardHeader>
                    <div className="w-16 h-16 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-4">
                      <IconComponent className="w-8 h-8 text-white" />
                    </div>
                    <CardTitle className="text-lg text-gray-900">{service.title}</CardTitle>
                    <CardDescription className="text-gray-600">{service.description}</CardDescription>
                  </CardHeader>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-20 px-4 bg-white">
        <div className="container mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">Patient Stories</h2>
            <p className="text-xl text-gray-600">Real experiences from our patients and their families</p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {testimonials.map((testimonial, index) => (
              <Card key={index} className="bg-white border-0 shadow-lg">
                <CardContent className="p-6">
                  <div className="flex mb-4">
                    {[...Array(testimonial.rating)].map((_, i) => (
                      <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
                    ))}
                  </div>
                  <p className="text-gray-700 mb-6 italic">"{testimonial.text}"</p>
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full flex items-center justify-center text-white font-bold">
                      {testimonial.avatar}
                    </div>
                    <div>
                      <p className="font-semibold text-gray-900">{testimonial.name}</p>
                      <p className="text-sm text-gray-600">{testimonial.condition}</p>
                      <Badge variant="outline" className="text-green-600 border-green-600 mt-1">
                        {testimonial.treatment}
                      </Badge>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Emergency Section */}
      <section className="py-20 px-4 bg-green-600 text-white">
        <div className="container mx-auto text-center">
          <div className="max-w-3xl mx-auto">
            <Ambulance className="w-16 h-16 mx-auto mb-6" />
            <h2 className="text-4xl font-bold mb-6">24/7 Emergency Care</h2>
            <p className="text-xl text-green-100 mb-8">
              Our emergency department is always ready to provide immediate medical attention when you need it most.
            </p>
            <div className="grid md:grid-cols-3 gap-6 mb-8">
              <div className="bg-green-500/30 rounded-lg p-6">
                <Clock className="w-8 h-8 mx-auto mb-3" />
                <h3 className="font-semibold mb-2">Always Open</h3>
                <p className="text-sm text-green-100">24 hours a day, 365 days a year</p>
              </div>
              <div className="bg-green-500/30 rounded-lg p-6">
                <Zap className="w-8 h-8 mx-auto mb-3" />
                <h3 className="font-semibold mb-2">Fast Response</h3>
                <p className="text-sm text-green-100">Average wait time under 15 minutes</p>
              </div>
              <div className="bg-green-500/30 rounded-lg p-6">
                <Shield className="w-8 h-8 mx-auto mb-3" />
                <h3 className="font-semibold mb-2">Expert Care</h3>
                <p className="text-sm text-green-100">Board-certified emergency physicians</p>
              </div>
            </div>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" className="bg-white text-green-600 hover:bg-gray-100 text-lg px-8">
                Call Emergency: 911
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="border-white text-white hover:bg-white hover:text-green-600 text-lg px-8 bg-transparent"
              >
                Non-Emergency: (555) 123-CARE
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Information */}
      <section className="py-20 px-4 bg-gray-50">
        <div className="container mx-auto">
          <div className="grid lg:grid-cols-2 gap-12">
            <div>
              <h2 className="text-4xl font-bold text-gray-900 mb-6">Visit Our Clinic</h2>
              <p className="text-xl text-gray-600 mb-8">
                Conveniently located with ample parking and easy access to public transportation
              </p>
              <div className="space-y-6">
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                    <MapPin className="w-6 h-6 text-green-600" />
                  </div>
                  <div>
                    <p className="font-semibold text-gray-900">123 Medical Center Drive</p>
                    <p className="text-gray-600">Healthcare City, HC 12345</p>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                    <Phone className="w-6 h-6 text-green-600" />
                  </div>
                  <div>
                    <p className="font-semibold text-gray-900">Main: (555) 123-CARE</p>
                    <p className="text-gray-600">Emergency: (555) 911-HELP</p>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                    <Clock className="w-6 h-6 text-green-600" />
                  </div>
                  <div>
                    <p className="font-semibold text-gray-900">Mon-Fri: 8:00 AM - 8:00 PM</p>
                    <p className="text-gray-600">Sat-Sun: 9:00 AM - 5:00 PM</p>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                    <Mail className="w-6 h-6 text-green-600" />
                  </div>
                  <div>
                    <p className="font-semibold text-gray-900">info@medicareplus.com</p>
                    <p className="text-gray-600">appointments@medicareplus.com</p>
                  </div>
                </div>
              </div>
            </div>
            <Card className="bg-white shadow-xl border-0">
              <CardHeader>
                <CardTitle className="text-xl text-gray-900">Insurance & Billing</CardTitle>
                <CardDescription>We accept most major insurance plans</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="p-3 bg-gray-50 rounded-lg text-center">
                    <Shield className="w-6 h-6 mx-auto mb-2 text-blue-600" />
                    <p className="text-sm font-medium">Medicare</p>
                  </div>
                  <div className="p-3 bg-gray-50 rounded-lg text-center">
                    <Building2 className="w-6 h-6 mx-auto mb-2 text-green-600" />
                    <p className="text-sm font-medium">Medicaid</p>
                  </div>
                  <div className="p-3 bg-gray-50 rounded-lg text-center">
                    <FileText className="w-6 h-6 mx-auto mb-2 text-purple-600" />
                    <p className="text-sm font-medium">Private Insurance</p>
                  </div>
                  <div className="p-3 bg-gray-50 rounded-lg text-center">
                    <DollarSign className="w-6 h-6 mx-auto mb-2 text-orange-600" />
                    <p className="text-sm font-medium">Self-Pay</p>
                  </div>
                </div>
                <div className="p-4 bg-green-50 rounded-lg">
                  <h4 className="font-semibold text-green-800 mb-2">Financial Assistance</h4>
                  <p className="text-sm text-green-700">
                    We offer payment plans and financial assistance programs for qualifying patients.
                  </p>
                </div>
                <Button className="w-full bg-green-600 hover:bg-green-700">Verify Insurance Coverage</Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 px-4 bg-gray-900 text-white">
        <div className="container mx-auto text-center">
          <div className="flex items-center justify-center gap-2 mb-4">
            <div className="w-8 h-8 bg-gradient-to-r from-green-500 to-emerald-500 rounded-lg flex items-center justify-center">
              <Heart className="h-5 w-5 text-white" />
            </div>
            <span className="text-xl font-bold">MediCare Plus</span>
          </div>
          <p className="text-gray-400 mb-4">Compassionate healthcare for you and your family</p>
          <div className="flex flex-wrap gap-6 justify-center text-sm text-gray-500">
            <span>• 24/7 Emergency Care</span>
            <span>• Expert Medical Team</span>
            <span>• Modern Facilities</span>
            <span>• Patient-Centered Care</span>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/finance-landing/page.tsx" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Slider } from "@/components/ui/slider"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  ArrowLeft,
  DollarSign,
  Calculator,
  Shield,
  Clock,
  CheckCircle,
  Star,
  Users,
  Award,
  Home,
  Car,
  GraduationCap,
  Building,
  ArrowRight,
  PiggyBank,
  Percent,
  TrendingUp,
  Info,
} from "lucide-react"

export default function FinanceLandingPage() {
  const [loanAmount, setLoanAmount] = useState([250000])
  const [loanTerm, setLoanTerm] = useState([15])
  const [loanType, setLoanType] = useState("home")
  const [creditScore, setCreditScore] = useState("excellent")
  const [downPayment, setDownPayment] = useState([50000])
  const [calculations, setCalculations] = useState({
    monthlyPayment: 0,
    totalPayment: 0,
    totalInterest: 0,
    interestRate: 0,
  })

  // Interest rates based on loan type and credit score
  const getInterestRate = (type: string, credit: string) => {
    const rates = {
      home: {
        excellent: 3.25,
        good: 3.75,
        fair: 4.25,
        poor: 5.25,
      },
      auto: {
        excellent: 2.99,
        good: 3.49,
        fair: 4.99,
        poor: 6.99,
      },
      education: {
        excellent: 4.5,
        good: 5.0,
        fair: 5.5,
        poor: 6.5,
      },
      business: {
        excellent: 5.25,
        good: 6.25,
        fair: 7.25,
        poor: 9.75,
      },
    }
    return rates[type as keyof typeof rates]?.[credit as keyof typeof rates.home] || 5.0
  }

  // Calculate loan payments
  useEffect(() => {
    const principal = loanType === "home" ? loanAmount[0] - downPayment[0] : loanAmount[0]
    const rate = getInterestRate(loanType, creditScore)
    const monthlyRate = rate / 100 / 12
    const numPayments = loanTerm[0] * 12

    if (principal <= 0 || rate <= 0 || numPayments <= 0) {
      setCalculations({
        monthlyPayment: 0,
        totalPayment: 0,
        totalInterest: 0,
        interestRate: rate,
      })
      return
    }

    const monthlyPayment =
      (principal * monthlyRate * Math.pow(1 + monthlyRate, numPayments)) / (Math.pow(1 + monthlyRate, numPayments) - 1)

    const totalPayment = monthlyPayment * numPayments
    const totalInterest = totalPayment - principal

    setCalculations({
      monthlyPayment: isNaN(monthlyPayment) ? 0 : monthlyPayment,
      totalPayment: isNaN(totalPayment) ? 0 : totalPayment,
      totalInterest: isNaN(totalInterest) ? 0 : totalInterest,
      interestRate: rate,
    })
  }, [loanAmount, loanTerm, loanType, creditScore, downPayment])

  const loanTypes = [
    {
      icon: Home,
      title: "Home Loans",
      description: "Make your dream home a reality",
      rate: "3.25%",
      maxAmount: "$1M",
      color: "from-blue-500 to-cyan-500",
      features: ["No prepayment penalty", "Flexible terms", "Quick approval"],
    },
    {
      icon: Car,
      title: "Auto Loans",
      description: "Drive away with confidence",
      rate: "2.99%",
      maxAmount: "$100K",
      color: "from-green-500 to-emerald-500",
      features: ["New & used cars", "Fast processing", "Competitive rates"],
    },
    {
      icon: GraduationCap,
      title: "Education Loans",
      description: "Invest in your future",
      rate: "4.50%",
      maxAmount: "$200K",
      color: "from-purple-500 to-pink-500",
      features: ["Deferred payments", "Grace period", "Flexible repayment"],
    },
    {
      icon: Building,
      title: "Business Loans",
      description: "Fuel your business growth",
      rate: "5.25%",
      maxAmount: "$5M",
      color: "from-orange-500 to-red-500",
      features: ["Working capital", "Equipment financing", "Line of credit"],
    },
  ]

  const benefits = [
    { icon: Clock, title: "Quick Approval", value: "24hrs", description: "Average approval time" },
    { icon: Percent, title: "Low Rates", value: "2.99%", description: "Starting interest rate" },
    { icon: Shield, title: "Secure Process", value: "100%", description: "Bank-level security" },
    { icon: Users, title: "Happy Customers", value: "50K+", description: "Satisfied borrowers" },
  ]

  const stats = [
    { number: "$2.5B+", label: "Loans Funded", icon: DollarSign },
    { number: "50,000+", label: "Happy Customers", icon: Users },
    { number: "20+", label: "Years Experience", icon: Award },
    { number: "95%", label: "Approval Rate", icon: CheckCircle },
  ]

  const testimonials = [
    {
      name: "Jennifer Smith",
      loanType: "Home Loan",
      rating: 5,
      text: "The entire process was smooth and transparent. Got my dream home with an amazing rate!",
      avatar: "JS",
      amount: "$350K",
    },
    {
      name: "Michael Johnson",
      loanType: "Business Loan",
      rating: 5,
      text: "FinanceFirst helped me expand my business. The team was professional and supportive throughout.",
      avatar: "MJ",
      amount: "$150K",
    },
    {
      name: "Sarah Davis",
      loanType: "Auto Loan",
      rating: 5,
      text: "Quick approval and great rates. I was driving my new car within a week of applying!",
      avatar: "SD",
      amount: "$35K",
    },
  ]

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 0,
      maximumFractionDigits: 0,
    }).format(amount)
  }

  const formatCurrencyDetailed = (amount: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    }).format(amount)
  }

  const getLoanAmountRange = () => {
    switch (loanType) {
      case "home":
        return { min: 50000, max: 1000000, step: 5000 }
      case "auto":
        return { min: 5000, max: 100000, step: 1000 }
      case "education":
        return { min: 1000, max: 200000, step: 1000 }
      case "business":
        return { min: 10000, max: 5000000, step: 10000 }
      default:
        return { min: 1000, max: 1000000, step: 1000 }
    }
  }

  const range = getLoanAmountRange()

  return (
    <div className="min-h-screen bg-green-50">
      {/* Navigation */}
      <nav className="border-b bg-white/90 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2 text-gray-600 hover:text-gray-900">
              <ArrowLeft className="h-5 w-5" />
              <span className="text-sm">Back to Examples</span>
            </Link>
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center">
                <DollarSign className="h-5 w-5 text-white" />
              </div>
              <span className="text-xl font-bold text-gray-900">FinanceFirst</span>
            </div>
            <div className="hidden md:flex items-center gap-6">
              <a href="#loans" className="text-gray-600 hover:text-green-600 transition-colors">
                Loans
              </a>
              <a href="#calculator" className="text-gray-600 hover:text-green-600 transition-colors">
                Calculator
              </a>
              <a href="#about" className="text-gray-600 hover:text-green-600 transition-colors">
                About
              </a>
              <Button className="bg-green-600 hover:bg-green-700">Apply Now</Button>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="py-24 px-4 relative overflow-hidden">
        <div className="absolute inset-0">
          <div className="absolute top-1/4 left-1/4 w-48 h-48 bg-green-100 rounded-full blur-3xl opacity-50" />
          <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-green-100 rounded-full blur-3xl opacity-50" />
        </div>
        <div className="container mx-auto relative z-10">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <Badge className="mb-6 bg-green-50 text-green-700 border-green-200">
                <PiggyBank className="w-4 h-4 mr-2" />
                Smart Financial Solutions
              </Badge>
              <h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
                Your Financial
                <span className="block text-green-600">Dreams Realized</span>
              </h1>
              <p className="text-xl text-gray-600 mb-8 leading-relaxed">
                Get the funding you need with competitive rates, flexible terms, and personalized service. From home
                loans to business financing, we make your goals achievable.
              </p>

              <div className="flex flex-col sm:flex-row gap-4 mb-12">
                <Button size="lg" className="bg-green-600 hover:bg-green-700 text-lg px-8">
                  Apply for Loan
                  <ArrowRight className="w-5 h-5 ml-2" />
                </Button>
                <Button
                  size="lg"
                  variant="outline"
                  className="border-green-600 text-green-600 hover:bg-green-50 text-lg px-8 bg-transparent"
                >
                  Calculate Payment
                </Button>
              </div>

              <div className="grid grid-cols-2 gap-6">
                <div className="flex items-center gap-3">
                  <CheckCircle className="w-5 h-5 text-green-500" />
                  <span className="text-gray-700">No hidden fees</span>
                </div>
                <div className="flex items-center gap-3">
                  <CheckCircle className="w-5 h-5 text-green-500" />
                  <span className="text-gray-700">Quick approval</span>
                </div>
                <div className="flex items-center gap-3">
                  <CheckCircle className="w-5 h-5 text-green-500" />
                  <span className="text-gray-700">Flexible terms</span>
                </div>
                <div className="flex items-center gap-3">
                  <CheckCircle className="w-5 h-5 text-green-500" />
                  <span className="text-gray-700">Expert guidance</span>
                </div>
              </div>
            </div>

            {/* Enhanced Loan Calculator Widget */}
            <div className="relative">
              <Card className="shadow-lg border-0">
                <CardHeader className="pb-4">
                  <CardTitle className="text-xl text-gray-900 flex items-center gap-2">
                    <Calculator className="w-5 h-5 text-green-600" />
                    Smart Loan Calculator
                  </CardTitle>
                  <CardDescription className="text-gray-500">
                    Get accurate payment estimates with real-time calculations
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  {/* Loan Type Selection */}
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Loan Type</label>
                    <Select value={loanType} onValueChange={setLoanType}>
                      <SelectTrigger className="w-full">
                        <SelectValue placeholder="Select loan type" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="home">Home Loan</SelectItem>
                        <SelectItem value="auto">Auto Loan</SelectItem>
                        <SelectItem value="education">Education Loan</SelectItem>
                        <SelectItem value="business">Business Loan</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  {/* Credit Score Selection */}
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Credit Score Range</label>
                    <Select value={creditScore} onValueChange={setCreditScore}>
                      <SelectTrigger className="w-full">
                        <SelectValue placeholder="Select credit score" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="excellent">Excellent (750+)</SelectItem>
                        <SelectItem value="good">Good (700-749)</SelectItem>
                        <SelectItem value="fair">Fair (650-699)</SelectItem>
                        <SelectItem value="poor">Poor (Below 650)</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  {/* Loan Amount */}
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Loan Amount: {formatCurrency(loanAmount[0])}
                    </label>
                    <Slider
                      value={loanAmount}
                      onValueChange={setLoanAmount}
                      max={range.max}
                      min={range.min}
                      step={range.step}
                      className="w-full"
                    />
                    <div className="flex justify-between text-xs text-gray-500 mt-1">
                      <span>{formatCurrency(range.min)}</span>
                      <span>{formatCurrency(range.max)}</span>
                    </div>
                  </div>

                  {/* Down Payment (for home loans) */}
                  {loanType === "home" && (
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        Down Payment: {formatCurrency(downPayment[0])} (
                        {((downPayment[0] / loanAmount[0]) * 100).toFixed(1)}%)
                      </label>
                      <Slider
                        value={downPayment}
                        onValueChange={setDownPayment}
                        max={loanAmount[0] * 0.5}
                        min={loanAmount[0] * 0.05}
                        step={1000}
                        className="w-full"
                      />
                      <div className="flex justify-between text-xs text-gray-500 mt-1">
                        <span>5% min</span>
                        <span>50% max</span>
                      </div>
                    </div>
                  )}

                  {/* Loan Term */}
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Loan Term: {loanTerm[0]} years
                    </label>
                    <Slider
                      value={loanTerm}
                      onValueChange={setLoanTerm}
                      max={loanType === "auto" ? 7 : 30}
                      min={1}
                      step={1}
                      className="w-full"
                    />
                    <div className="flex justify-between text-xs text-gray-500 mt-1">
                      <span>1 year</span>
                      <span>{loanType === "auto" ? "7" : "30"} years</span>
                    </div>
                  </div>

                  {/* Results */}
                  <div className="space-y-4 pt-4 border-t">
                    <div className="grid grid-cols-2 gap-4">
                      <div className="p-4 bg-green-50 rounded-lg text-center">
                        <p className="text-sm text-gray-600">Monthly Payment</p>
                        <p className="text-2xl font-bold text-green-600">
                          {formatCurrencyDetailed(calculations.monthlyPayment)}
                        </p>
                      </div>
                      <div className="p-4 bg-blue-50 rounded-lg text-center">
                        <p className="text-sm text-gray-600">Interest Rate</p>
                        <p className="text-2xl font-bold text-blue-600">{calculations.interestRate.toFixed(2)}%</p>
                      </div>
                    </div>

                    <div className="space-y-3 p-4 bg-gray-50 rounded-lg">
                      <div className="flex justify-between text-sm">
                        <span className="text-gray-600">Principal Amount:</span>
                        <span className="font-medium">
                          {formatCurrency(loanType === "home" ? loanAmount[0] - downPayment[0] : loanAmount[0])}
                        </span>
                      </div>
                      <div className="flex justify-between text-sm">
                        <span className="text-gray-600">Total Interest:</span>
                        <span className="font-medium">{formatCurrency(calculations.totalInterest)}</span>
                      </div>
                      <div className="flex justify-between text-sm border-t pt-2">
                        <span className="text-gray-600 font-medium">Total Payment:</span>
                        <span className="font-bold">{formatCurrency(calculations.totalPayment)}</span>
                      </div>
                    </div>

                    <div className="flex items-center gap-2 p-3 bg-blue-50 rounded-lg">
                      <Info className="w-4 h-4 text-blue-600" />
                      <p className="text-xs text-blue-700">
                        Rates shown are estimates. Actual rates may vary based on creditworthiness and other factors.
                      </p>
                    </div>
                  </div>

                  <Button className="w-full bg-green-600 hover:bg-green-700">
                    Apply for This Loan
                    <TrendingUp className="w-4 h-4 ml-2" />
                  </Button>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section className="py-16 px-4 bg-gray-50">
        <div className="container mx-auto">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {benefits.map((benefit, index) => {
              const IconComponent = benefit.icon
              return (
                <div key={index} className="text-center">
                  <div className="w-16 h-16 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
                    <IconComponent className="w-8 h-8" />
                  </div>
                  <div className="text-3xl font-bold text-gray-900 mb-2">{benefit.value}</div>
                  <div className="font-semibold text-gray-900 mb-1">{benefit.title}</div>
                  <div className="text-sm text-gray-600">{benefit.description}</div>
                </div>
              )
            })}
          </div>
        </div>
      </section>

      {/* Loan Types */}
      <section id="loans" className="py-20 px-4">
        <div className="container mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">Loan Solutions</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Choose from our comprehensive range of loan products designed to meet your specific financial needs
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-8">
            {loanTypes.map((loan, index) => {
              const IconComponent = loan.icon
              return (
                <Card key={index} className="group hover:shadow-xl transition-all duration-300 border-0">
                  <CardHeader>
                    <div
                      className={`w-16 h-16 bg-green-100 text-green-600 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}
                    >
                      <IconComponent className="w-8 h-8" />
                    </div>
                    <div className="flex items-center justify-between mb-2">
                      <CardTitle className="text-2xl text-gray-900">{loan.title}</CardTitle>
                      <Badge className="bg-green-50 text-green-700 border-green-200">From {loan.rate}</Badge>
                    </div>
                    <CardDescription className="text-lg text-gray-600">{loan.description}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                        <span className="text-sm font-medium text-gray-700">Max Amount</span>
                        <span className="font-bold text-gray-900">{loan.maxAmount}</span>
                      </div>
                      <div className="space-y-2">
                        {loan.features.map((feature, idx) => (
                          <div key={idx} className="flex items-center gap-2 text-gray-700">
                            <CheckCircle className="w-4 h-4 text-green-500" />
                            <span className="text-sm">{feature}</span>
                          </div>
                        ))}
                      </div>
                      <Button className="w-full bg-green-600 hover:bg-green-700">Apply Now</Button>
                    </div>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-16 px-4 bg-green-600 text-white">
        <div className="container mx-auto">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {stats.map((stat, index) => {
              const IconComponent = stat.icon
              return (
                <div key={index} className="text-center">
                  <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
                    <IconComponent className="w-8 h-8 text-white" />
                  </div>
                  <div className="text-3xl font-bold mb-2">{stat.number}</div>
                  <div className="text-green-100">{stat.label}</div>
                </div>
              )
            })}
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-20 px-4 bg-gray-50">
        <div className="container mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">Success Stories</h2>
            <p className="text-xl text-gray-600">Real customers, real results</p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {testimonials.map((testimonial, index) => (
              <Card key={index} className="border-0 shadow-md">
                <CardContent className="p-6">
                  <div className="flex mb-4">
                    {[...Array(testimonial.rating)].map((_, i) => (
                      <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
                    ))}
                  </div>
                  <p className="text-gray-700 mb-6 italic">"{testimonial.text}"</p>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="w-12 h-12 bg-green-100 text-green-600 rounded-full flex items-center justify-center font-bold">
                        {testimonial.avatar}
                      </div>
                      <div>
                        <p className="font-semibold text-gray-900">{testimonial.name}</p>
                        <p className="text-sm text-gray-600">{testimonial.loanType}</p>
                      </div>
                    </div>
                    <Badge className="bg-green-50 text-green-700 border-green-200">{testimonial.amount}</Badge>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 px-4 bg-green-600 text-white">
        <div className="container mx-auto text-center">
          <h2 className="text-4xl font-bold mb-6">Ready to Achieve Your Financial Goals?</h2>
          <p className="text-xl text-green-100 mb-8 max-w-2xl mx-auto">
            Take the first step towards your dreams. Apply now and get a decision within 24 hours.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" className="bg-white text-green-600 hover:bg-gray-100 text-lg px-8">
              Apply for Loan
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-white hover:text-green-600 text-lg px-8 bg-transparent"
            >
              Speak to Expert
            </Button>
          </div>
          <p className="text-sm text-green-200 mt-4">No application fees • Quick approval • Flexible terms</p>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 px-4 bg-gray-900 text-white">
        <div className="container mx-auto text-center">
          <div className="flex items-center justify-center gap-2 mb-4">
            <div className="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center">
              <DollarSign className="h-5 w-5 text-white" />
            </div>
            <span className="text-xl font-bold">FinanceFirst</span>
          </div>
          <p className="text-gray-400 mb-4">Your trusted partner in achieving financial success</p>
          <div className="flex flex-wrap gap-6 justify-center text-sm text-gray-500">
            <span>• Competitive Rates</span>
            <span>• Quick Approval</span>
            <span>• Flexible Terms</span>
            <span>• Expert Support</span>
          </div>
        </div>
      </footer>
    </div>
  )
}</article></body></html>

Innovative Tech Solutions

Our Services

Our Expert Team

Client Testimonials

Get In Touch