[V0_FILE]png:file="public/images/dashboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-06-19%20194302-kNNXrHB5CzHY67b0ZZHXk8eLHTcaTf.png" isMerged="true" [V0_FILE]png:file="public/images/quick-actions.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-06-19%20194346-ILyg8Uvtnb84JggpGeiB09IgiZTU3x.png" isMerged="true" [V0_FILE]png:file="public/images/management-access.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-06-19%20194916-KBJM3lD3GKGxN1tWAfJd5lJggzo889.png" isMerged="true" [V0_FILE]png:file="public/images/estate-map.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-06-19%20194511-C0Qc6GDrpXl9Dj4FixsXgWyjVU2WTe.png" isMerged="true" [V0_FILE]typescriptreact:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96%; --secondary-foreground: 222.2 84% 4.9%; --muted: 210 40% 96%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96%; --accent-foreground: 222.2 84% 4.9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 84% 4.9%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 94.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .edas-navy { background-color: #2c3e50; } .edas-coral { background-color: #e74c3c; } .edas-gradient-blue { background: linear-gradient(135deg, #3498db, #9b59b6); } .edas-gradient-purple { background: linear-gradient(135deg, #9b59b6, #e91e63); } .edas-gradient-red { background: linear-gradient(135deg, #e91e63, #f39c12); } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, coral: { 50: "#fef2f2", 100: "#fee2e2", 200: "#fecaca", 300: "#fca5a5", 400: "#f87171", 500: "#ef4444", 600: "#dc2626", 700: "#b91c1c", 800: "#991b1b", 900: "#7f1d1d", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]plaintext:file="public/images/edas-logo.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/DALL%C2%B7E%202025-01-25%2012.25.06%20-%20A%20professional%20and%20modern%20logo%20for%20a%20visitor%20access%20code%20generator%20app%20named%20%27EDAS%27.%20The%20logo%20features%20the%20text%20%27EDAS%27%20in%20bold%2C%20futuristic%2C%20sans-serif-pZdUapTpnQYv7JIWDUdMv8iDjGTRZi.webp" isMerged="true" [V0_FILE]typescriptreact:file="app/register/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/register/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { Badge } from "@/components/ui/badge" import { Search, MapPin, Home, User, CheckCircle, ArrowLeft, ArrowRight } from "lucide-react" import Link from "next/link" // Mock estates data const mockEstates = [ { id: 1, name: "Victoria Garden City", location: "Lagos, Nigeria", units: 450 }, { id: 2, name: "Banana Island Estate", location: "Lagos, Nigeria", units: 200 }, { id: 3, name: "Lekki Phase 1", location: "Lagos, Nigeria", units: 800 }, { id: 4, name: "Ikoyi Heights", location: "Lagos, Nigeria", units: 120 }, { id: 5, name: "Accra Heights", location: "Accra, Ghana", units: 300 }, { id: 6, name: "East Legon Estate", location: "Accra, Ghana", units: 250 }, { id: 7, name: "Plateau Estate", location: "Praia, Cape Verde", units: 180 }, { id: 8, name: "Kingston Gardens", location: "Kingston, Jamaica", units: 220 }, { id: 9, name: "Port of Spain Towers", location: "Port of Spain, Trinidad", units: 160 }, { id: 10, name: "Bridgetown Bay", location: "Bridgetown, Barbados", units: 140 }, ] type RegistrationStep = "estate-search" | "estate-details" | "user-details" | "property-details" | "confirmation" interface EstateData { id?: number name: string location: string units?: number isCustom?: boolean } interface UserData { firstName: string lastName: string email: string phone: string password: string confirmPassword: string } interface PropertyData { propertyType: string blockNumber: string unitNumber: string additionalInfo: string } export default function RegisterPage() { const [currentStep, setCurrentStep] = useState("estate-search") const [searchTerm, setSearchTerm] = useState("") const [selectedEstate, setSelectedEstate] = useState(null) const [customEstate, setCustomEstate] = useState({ name: "", location: "" }) const [userData, setUserData] = useState({ firstName: "", lastName: "", email: "", phone: "", password: "", confirmPassword: "", }) const [propertyData, setPropertyData] = useState({ propertyType: "", blockNumber: "", unitNumber: "", additionalInfo: "", }) const [uniqueId, setUniqueId] = useState("") const filteredEstates = mockEstates.filter( (estate) => estate.name.toLowerCase().includes(searchTerm.toLowerCase()) || estate.location.toLowerCase().includes(searchTerm.toLowerCase()), ) const generateUniqueId = () => { const timestamp = Date.now().toString().slice(-6) const random = Math.floor(Math.random() * 1000) .toString() .padStart(3, "0") return `EDAS${timestamp}${random}` } const handleEstateSelect = (estate: EstateData) => { setSelectedEstate(estate) setCurrentStep("user-details") } const handleCustomEstateSubmit = () => { if (customEstate.name && customEstate.location) { const customEstateData = { ...customEstate, isCustom: true } setSelectedEstate(customEstateData) setCurrentStep("user-details") } } const handleUserDetailsSubmit = () => { if ( userData.firstName && userData.lastName && userData.email && userData.phone && userData.password && userData.password === userData.confirmPassword ) { setCurrentStep("property-details") } } const handlePropertyDetailsSubmit = () => { if (propertyData.propertyType && propertyData.unitNumber) { const id = generateUniqueId() setUniqueId(id) setCurrentStep("confirmation") } } const renderEstateSearch = () => ( Find Your Estate

Search for your estate or add it manually if not listed

Search Estates setSearchTerm(e.target.value)} className="text-lg" />

{searchTerm && (

Search Results

{filteredEstates.length > 0 ? ( filteredEstates.map((estate) => ( handleEstateSelect(estate)} >

{estate.name}

{estate.location}

{estate.units} units

)) ) : (

No estates found matching your search.

)}

Estate Not Listed?

Estate Name setCustomEstate({ ...customEstate, name: e.target.value })} />

Location setCustomEstate({ ...customEstate, location: e.target.value })} />

) const renderUserDetails = () => ( Create Your Account

Selected Estate: {selectedEstate?.name}

First Name setUserData({ ...userData, firstName: e.target.value })} placeholder="Enter your first name" />

Last Name setUserData({ ...userData, lastName: e.target.value })} placeholder="Enter your last name" />

Email Address setUserData({ ...userData, email: e.target.value })} placeholder="your.email@example.com" />

Phone Number setUserData({ ...userData, phone: e.target.value })} placeholder="+234 XXX XXX XXXX" />

Password setUserData({ ...userData, password: e.target.value })} placeholder="Create a strong password" />

Confirm Password setUserData({ ...userData, confirmPassword: e.target.value })} placeholder="Confirm your password" />

{userData.password && userData.confirmPassword && userData.password !== userData.confirmPassword && (

Passwords do not match

)}

) const renderPropertyDetails = () => ( Property Details

Specify your property information

Property Type

Block/Building Number setPropertyData({ ...propertyData, blockNumber: e.target.value })} placeholder="e.g., Block A, Building 5" />

Unit/Apartment Number setPropertyData({ ...propertyData, unitNumber: e.target.value })} placeholder="e.g., Unit 12, Apt 304" required />

Additional Information (Optional)

setPropertyData({ ...propertyData, additionalInfo: e.target.value })}
            placeholder="Any additional details about your property location..."
            rows={3}
          />
        </div>

<div className="flex gap-4 pt-4">
          <Button variant="outline" onClick={() => setCurrentStep("user-details")}>
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back
          </Button>
          <Button
            onClick={handlePropertyDetailsSubmit}
            className="flex-1 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700"
            disabled={!propertyData.propertyType || !propertyData.unitNumber}
          >
            Complete Registration
            <ArrowRight className="h-4 w-4 ml-2" />
          </Button>
        </div>
      </CardContent>
    </Card>
  )

const renderConfirmation = () => (
    <Card className="w-full max-w-2xl mx-auto">
      <CardHeader className="text-center">
        <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <CheckCircle className="h-10 w-10 text-green-600" />
        </div>
        <CardTitle className="text-2xl text-green-800">Registration Complete!</CardTitle>
        <p className="text-slate-600">Your eDAS Access account has been successfully created</p>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="bg-gradient-to-r from-blue-50 to-purple-50 p-6 rounded-lg border">
          <h3 className="font-semibold text-slate-800 mb-4">Your Account Details</h3>
          <div className="space-y-3">
            <div className="flex justify-between">
              <span className="text-slate-600">Unique ID:</span>
              <span className="font-mono font-bold text-blue-600">{uniqueId}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-slate-600">Name:</span>
              <span className="font-semibold">
                {userData.firstName} {userData.lastName}
              </span>
            </div>
            <div className="flex justify-between">
              <span className="text-slate-600">Estate:</span>
              <span className="font-semibold">{selectedEstate?.name}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-slate-600">Property:</span>
              <span className="font-semibold">
                {propertyData.blockNumber && `${propertyData.blockNumber}, `}
                {propertyData.unitNumber}
              </span>
            </div>
          </div>
        </div>

<div className="bg-yellow-50 border border-yellow-200 p-4 rounded-lg">
          <h4 className="font-semibold text-yellow-800 mb-2">Important:</h4>
          <ul className="text-sm text-yellow-700 space-y-1">
            <li>
              • Save your Unique ID: <strong>{uniqueId}</strong>
            </li>
            <li>• You'll need this ID to access your account</li>
            <li>• Check your email for login instructions</li>
            <li>• Download the eDAS Access app to get started</li>
          </ul>
        </div>

<div className="flex flex-col gap-3">
          <Button
            asChild
            className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700"
          >
            <Link href="/download">Download eDAS App</Link>
          </Button>
          <Button variant="outline" onClick={() => (window.location.href = "/")}>
            Return to Home
          </Button>
        </div>
      </CardContent>
    </Card>
  )

return (
    <div className="min-h-screen bg-gray-50 py-8 px-4">
      <div className="container mx-auto max-w-6xl">
        {/* Progress Indicator */}
        <div className="mb-8">
          <div className="flex items-center justify-center space-x-4 mb-4">
            {[
              { step: "estate-search", label: "Find Estate", icon: Search },
              { step: "user-details", label: "Account Details", icon: User },
              { step: "property-details", label: "Property Info", icon: Home },
              { step: "confirmation", label: "Complete", icon: CheckCircle },
            ].map(({ step, label, icon: Icon }, index) => (
              <div key={step} className="flex items-center">
                <div
                  className={`w-10 h-10 rounded-full flex items-center justify-center ${
                    currentStep === step
                      ? "bg-blue-600 text-white"
                      : index <
                          ["estate-search", "user-details", "property-details", "confirmation"].indexOf(currentStep)
                        ? "bg-green-600 text-white"
                        : "bg-gray-300 text-gray-600"
                  }`}
                >
                  <Icon className="h-5 w-5" />
                </div>
                <span className="ml-2 text-sm font-medium text-slate-700 hidden md:block">{label}</span>
                {index < 3 && <div className="w-8 h-0.5 bg-gray-300 mx-4 hidden md:block" />}
              </div>
            ))}
          </div>
        </div>

{/* Step Content */}
        {currentStep === "estate-search" && renderEstateSearch()}
        {currentStep === "user-details" && renderUserDetails()}
        {currentStep === "property-details" && renderPropertyDetails()}
        {currentStep === "confirmation" && renderConfirmation()}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/about/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Shield, Eye, Users, Car, MessageSquare, QrCode } from "lucide-react"

export default function AboutPage() {
  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero Section */}
      <section className="bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900 text-white py-20 px-4">
        <div className="container mx-auto max-w-4xl text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-6">About eDAS Access</h1>
          <p className="text-xl text-slate-300 leading-relaxed">
            Modernizing estate security and facility management through innovative software solutions
          </p>
        </div>
      </section>

{/* Who We Are */}
      <section className="py-16 px-4">
        <div className="container mx-auto max-w-6xl">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl font-bold text-slate-800 mb-6">Who We Are</h2>
              <div className="space-y-4 text-lg text-slate-600">
                <p>
                  eDAS Access is a UK and Cape Verde-registered company founded by BT Oduntan in 2024 and launched in
                  January 2025.
                </p>
                <p>
                  Our mission is to modernize estate security, visitor access, and facility management through
                  innovative software solutions that make life easier for residents and property managers alike.
                </p>
              </div>
            </div>
            <Card className="p-8 bg-gradient-to-br from-blue-50 to-purple-50 border-0">
              <CardContent className="p-0">
                <div className="text-center">
                  <div className="w-20 h-20 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
                    <Shield className="h-10 w-10 text-white" />
                  </div>
                  <h3 className="text-xl font-semibold text-slate-800 mb-2">Our Mission</h3>
                  <p className="text-slate-600">
                    To make secure, digital estate living the new standard across Africa and the West Indies.
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Our Vision */}
      <section className="py-16 px-4 bg-white">
        <div className="container mx-auto max-w-4xl text-center">
          <h2 className="text-3xl font-bold text-slate-800 mb-6">Our Vision</h2>
          <p className="text-xl text-slate-600 leading-relaxed">
            To make secure, digital estate living the new standard across Africa and the West Indies, empowering
            communities with technology that enhances safety, convenience, and quality of life.
          </p>
        </div>
      </section>

{/* Our Focus */}
      <section className="py-16 px-4 bg-gray-50">
        <div className="container mx-auto max-w-6xl">
          <h2 className="text-3xl font-bold text-slate-800 text-center mb-12">Our Focus Areas</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              {
                icon: QrCode,
                title: "Digital Access Pass Generation",
                description: "Secure QR code generation for visitor management",
              },
              {
                icon: Users,
                title: "Visitor Management",
                description: "Comprehensive visitor tracking and approval systems",
              },
              {
                icon: Shield,
                title: "Estate Security Monitoring",
                description: "Real-time security alerts and incident reporting",
              },
              {
                icon: Car,
                title: "Car Registration & Scanner Integration",
                description: "Vehicle management and automated scanning systems",
              },
              {
                icon: MessageSquare,
                title: "Community Communications",
                description: "Announcements, messages, and community updates",
              },
              {
                icon: Eye,
                title: "Facility Management",
                description: "Maintenance tracking and amenity booking systems",
              },
            ].map((focus, index) => (
              <Card key={index} className="p-6 hover:shadow-lg transition-shadow">
                <CardContent className="p-0">
                  <div className="text-center">
                    <div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
                      <focus.icon className="h-8 w-8 text-white" />
                    </div>
                    <h3 className="text-lg font-semibold text-slate-800 mb-2">{focus.title}</h3>
                    <p className="text-slate-600 text-sm">{focus.description}</p>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Where We Operate */}
      <section className="py-16 px-4 bg-slate-800 text-white">
        <div className="container mx-auto max-w-6xl">
          <h2 className="text-3xl font-bold text-center mb-12">Where We Operate</h2>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8">
            {[
              { flag: "🇳🇬", country: "Nigeria", region: "West Africa" },
              { flag: "🇬🇭", country: "Ghana", region: "West Africa" },
              { flag: "🇨🇻", country: "Cape Verde", region: "Atlantic" },
              { flag: "🇯🇲", country: "Jamaica", region: "Caribbean" },
              { flag: "🇹🇹", country: "Trinidad & Tobago", region: "Caribbean" },
              { flag: "🇧🇧", country: "Barbados", region: "Caribbean" },
            ].map((location) => (
              <Card key={location.country} className="p-4 bg-slate-700 border-slate-600 text-center">
                <CardContent className="p-0">
                  <div className="text-4xl mb-3">{location.flag}</div>
                  <h3 className="font-semibold text-white mb-1">{location.country}</h3>
                  <Badge variant="secondary" className="text-xs">
                    {location.region}
                  </Badge>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Mail } from "lucide-react"
import Link from "next/link"

export default function ContactPage() {
  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero Section */}
      <section className="bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900 text-white py-20 px-4">
        <div className="container mx-auto max-w-4xl text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-6">Let's Talk</h1>
          <p className="text-xl text-slate-300 leading-relaxed">
            Want to deploy eDAS Access in your estate or gated community? Send us an email today.
          </p>
        </div>
      </section>

{/* Contact Information */}
      <section className="py-16 px-4">
        <div className="container mx-auto max-w-6xl">
          <div className="grid lg:grid-cols-2 gap-12">
            {/* Contact Details */}
            <div className="space-y-8">
              <div>
                <h2 className="text-3xl font-bold text-slate-800 mb-8">Get in Touch</h2>

<div className="space-y-6">
                  <Card className="p-6">
                    <CardContent className="flex items-center gap-4 p-0">
                      <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                        <Mail className="h-6 w-6 text-blue-600" />
                      </div>
                      <div>
                        <h3 className="font-semibold text-slate-800">Email</h3>
                        <p className="text-slate-600">info@edasaccess.com</p>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </div>

{/* Offices */}
              <div>
                <h3 className="text-2xl font-bold text-slate-800 mb-6">📍 Our Offices</h3>
                <div className="space-y-4">
                  {[
                    { city: "London", country: "UK", flag: "🇬🇧" },
                    { city: "Praia", country: "Cape Verde", flag: "🇨🇻" },
                    { city: "Lagos", country: "Nigeria", flag: "🇳🇬" },
                  ].map((office) => (
                    <Card key={office.city} className="p-4">
                      <CardContent className="flex items-center gap-4 p-0">
                        <div className="text-2xl">{office.flag}</div>
                        <div>
                          <h4 className="font-semibold text-slate-800">{office.city}</h4>
                          <p className="text-slate-600">{office.country}</p>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </div>
            </div>

{/* Contact Form */}
            <Card className="p-8">
              <CardHeader className="p-0 mb-6">
                <CardTitle className="text-2xl text-slate-800">Send us a Message</CardTitle>
              </CardHeader>
              <CardContent className="p-0">
                <form className="space-y-6">
                  <div className="space-y-2">
                    <Label htmlFor="name">Name</Label>
                    <Input id="name" placeholder="Your full name" />
                  </div>

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

<div className="space-y-2">
                    <Label htmlFor="company">Company/Estate (Optional)</Label>
                    <Input id="company" placeholder="Your estate or company name" />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="message">Message</Label>
                    <Textarea id="message" placeholder="Tell us about your estate management needs..." rows={5} />
                  </div>

<Button className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white py-3">
                    Send Message
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-16 px-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white">
        <div className="container mx-auto max-w-4xl text-center">
          <h2 className="text-3xl font-bold mb-4">Ready to Get Started?</h2>
          <p className="text-xl mb-8 text-blue-100">
            Join the growing community of estates using eDAS Access for smarter, safer living.
          </p>
          <Link href="/register">
            <Button size="lg" className="bg-white text-purple-600 hover:bg-gray-100 px-8 py-3">
              Schedule a Demo
            </Button>
          </Link>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true"
import Link from "next/link"
import Image from "next/image"
import { Mail, MapPin } from "lucide-react"

export function Footer() {
  return (
    <footer className="bg-slate-900 text-white">
      <div className="container mx-auto px-4 py-12">
        <div className="grid md:grid-cols-4 gap-8">
          {/* Company Info */}
          <div className="space-y-4">
            <Link href="/" className="flex items-center gap-3">
              <Image
                src="/images/edas-logo.webp"
                alt="eDAS Access Logo"
                width={40}
                height={40}
                className="rounded-lg"
              />
              <span className="font-semibold text-lg">eDAS Access</span>
            </Link>
            <p className="text-slate-300 text-sm">
              Smart Living. Secure Access. Your all-in-one residential access management solution.
            </p>
          </div>

{/* Quick Links */}
          <div className="space-y-4">
            <h3 className="font-semibold text-lg">Quick Links</h3>
            <div className="space-y-2">
              <Link href="/" className="block text-slate-300 hover:text-white transition-colors">
                Home
              </Link>
              <Link href="/about" className="block text-slate-300 hover:text-white transition-colors">
                About Us
              </Link>
              <Link href="/download" className="block text-slate-300 hover:text-white transition-colors">
                Download
              </Link>
              <Link href="/contact" className="block text-slate-300 hover:text-white transition-colors">
                Contact
              </Link>
            </div>
          </div>

{/* Services */}
          <div className="space-y-4">
            <h3 className="font-semibold text-lg">Services</h3>
            <div className="space-y-2">
              <Link href="/register" className="block text-slate-300 hover:text-white transition-colors">
                Get Started
              </Link>
              <Link href="/portal" className="block text-slate-300 hover:text-white transition-colors">
                Web Portal
              </Link>
              <Link href="/pricing" className="block text-slate-300 hover:text-white transition-colors">
                Pricing
              </Link>
            </div>
          </div>

{/* Contact Info */}
          <div className="space-y-4">
            <h3 className="font-semibold text-lg">Contact</h3>
            <div className="space-y-2">
              <div className="flex items-center gap-2 text-slate-300">
                <Mail className="h-4 w-4" />
                <span className="text-sm">info@edasaccess.com</span>
              </div>
              <div className="flex items-start gap-2 text-slate-300">
                <MapPin className="h-4 w-4 mt-0.5" />
                <div className="text-sm">
                  <p>Caixa Postal X</p>
                  <p>Praia, Santiago</p>
                  <p>Cabo Verde</p>
                </div>
              </div>
            </div>
          </div>
        </div>

{/* Divider */}
        <div className="border-t border-slate-700 mt-8 pt-8">
          <div className="text-center space-y-2">
            <p className="text-slate-300 text-sm">© 2025 eDAS Access is part of Box17 LLC. All rights reserved.</p>
            <p className="text-slate-400 text-xs">
              Box17 is a company registered in Cape Verde. Caixa Postal X, Praia, Santiago, Cabo Verde
            </p>
          </div>
        </div>

{/* Supported Countries */}
        <div className="mt-6 pt-6 border-t border-slate-700">
          <div className="text-center">
            <p className="text-slate-400 text-xs mb-3">Serving estates across:</p>
            <div className="flex justify-center items-center gap-4 flex-wrap">
              {[
                { flag: "🇳🇬", country: "Nigeria" },
                { flag: "🇬🇭", country: "Ghana" },
                { flag: "🇨🇻", country: "Cape Verde" },
                { flag: "🇯🇲", country: "Jamaica" },
                { flag: "🇹🇹", country: "Trinidad & Tobago" },
                { flag: "🇧🇧", country: "Barbados" },
              ].map((location) => (
                <div key={location.country} className="flex items-center gap-1">
                  <span className="text-lg">{location.flag}</span>
                  <span className="text-xs text-slate-400">{location.country}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Download, Users, Shield, Car, QrCode, Calendar, MessageSquare, LogOut, Clock } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useRouter } from "next/navigation"

interface UserData {
  uniqueId: string
  isAuthenticated: boolean
  loginTime: string
}

export default function DashboardPage() {
  const router = useRouter()
  const [user, setUser] = useState<UserData | null>(null)
  const [currentTime, setCurrentTime] = useState(new Date())

useEffect(() => {
    // Check if user is authenticated
    const userData = localStorage.getItem("edasUser")
    if (!userData) {
      router.push("/portal")
      return
    }

try {
      const parsedUser = JSON.parse(userData)
      if (!parsedUser.isAuthenticated) {
        router.push("/portal")
        return
      }
      setUser(parsedUser)
    } catch (error) {
      router.push("/portal")
    }

// Update time every second
    const timer = setInterval(() => {
      setCurrentTime(new Date())
    }, 1000)

return () => clearInterval(timer)
  }, [router])

const handleLogout = () => {
    localStorage.removeItem("edasUser")
    router.push("/")
  }

if (!user) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900 flex items-center justify-center">
        <div className="text-white text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto mb-4"></div>
          <p>Loading dashboard...</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50 flex flex-col">
      {/* Header */}
      <header className="bg-slate-800 text-white shadow-lg">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-3">
              <Image
                src="/images/edas-logo.webp"
                alt="eDAS Access Logo"
                width={40}
                height={40}
                className="rounded-lg"
              />
              <span className="font-semibold text-lg">eDAS Access Dashboard</span>
            </Link>

<div className="flex items-center gap-4">
              <div className="text-right">
                <p className="text-sm text-slate-300">Welcome back</p>
                <p className="font-semibold">{user.uniqueId}</p>
              </div>
              <Button
                onClick={handleLogout}
                variant="outline"
                size="sm"
                className="border-slate-600 text-slate-300 hover:text-white hover:bg-slate-700 bg-transparent"
              >
                <LogOut className="h-4 w-4 mr-2" />
                Logout
              </Button>
            </div>
          </div>
        </div>
      </header>

{/* Main Content */}
      <main className="flex-1 container mx-auto px-4 py-8">
        {/* Welcome Section */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-slate-800 mb-2">
            Good {currentTime.getHours() < 12 ? "Morning" : currentTime.getHours() < 18 ? "Afternoon" : "Evening"}!
          </h1>
          <p className="text-slate-600">Welcome to your eDAS Access control center</p>
        </div>

{/* Stats Cards */}
        <div className="grid md:grid-cols-4 gap-6 mb-8">
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-slate-600">Current Time</p>
                  <p className="text-2xl font-bold text-slate-800">
                    {currentTime.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                  </p>
                </div>
                <Clock className="h-8 w-8 text-blue-600" />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-slate-600">Active Visitors</p>
                  <p className="text-2xl font-bold text-slate-800">3</p>
                </div>
                <Users className="h-8 w-8 text-green-600" />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-slate-600">Security Status</p>
                  <Badge className="bg-green-600">All Clear</Badge>
                </div>
                <Shield className="h-8 w-8 text-green-600" />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-slate-600">Registered Cars</p>
                  <p className="text-2xl font-bold text-slate-800">2</p>
                </div>
                <Car className="h-8 w-8 text-purple-600" />
              </div>
            </CardContent>
          </Card>
        </div>

{/* Quick Actions */}
        <div className="grid lg:grid-cols-2 gap-8 mb-8">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <QrCode className="h-5 w-5 text-blue-600" />
                Quick Actions
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <Button className="w-full justify-start bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700">
                <QrCode className="mr-2 h-4 w-4" />
                Generate Visitor Pass
              </Button>
              <Button className="w-full justify-start bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700">
                <Shield className="mr-2 h-4 w-4" />
                Report Security Issue
              </Button>
              <Button className="w-full justify-start bg-gradient-to-r from-pink-600 to-red-500 hover:from-pink-700 hover:to-red-600">
                <Calendar className="mr-2 h-4 w-4" />
                Book Amenity
              </Button>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Download className="h-5 w-5 text-green-600" />
                Download eDAS App
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-slate-600 mb-4">Get the full eDAS experience on your mobile device</p>

<div className="space-y-3">
                <Button className="w-full bg-green-600 hover:bg-green-700" disabled>
                  <Download className="mr-2 h-4 w-4" />
                  Download for Android
                  <Badge variant="secondary" className="ml-2">
                    Coming Soon
                  </Badge>
                </Button>

<Button className="w-full bg-blue-600 hover:bg-blue-700" disabled>
                  <Download className="mr-2 h-4 w-4" />
                  Download for iOS
                  <Badge variant="secondary" className="ml-2">
                    Coming Soon
                  </Badge>
                </Button>

<Link href="/download">
                  <Button className="w-full bg-purple-600 hover:bg-purple-700">
                    <Download className="mr-2 h-4 w-4" />
                    View All Download Options
                  </Button>
                </Link>
              </div>
            </CardContent>
          </Card>
        </div>

{/* Recent Activity */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <MessageSquare className="h-5 w-5 text-slate-600" />
              Recent Activity
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center gap-3 p-3 bg-blue-50 rounded-lg">
                <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
                <div className="flex-1">
                  <p className="font-medium text-slate-800">Visitor pass generated</p>
                  <p className="text-sm text-slate-600">John Doe - Valid until 6:00 PM today</p>
                </div>
                <span className="text-xs text-slate-500">2 hours ago</span>
              </div>

<div className="flex items-center gap-3 p-3 bg-green-50 rounded-lg">
                <div className="w-2 h-2 bg-green-600 rounded-full"></div>
                <div className="flex-1">
                  <p className="font-medium text-slate-800">Security scan completed</p>
                  <p className="text-sm text-slate-600">Main gate - All clear</p>
                </div>
                <span className="text-xs text-slate-500">4 hours ago</span>
              </div>

<div className="flex items-center gap-3 p-3 bg-purple-50 rounded-lg">
                <div className="w-2 h-2 bg-purple-600 rounded-full"></div>
                <div className="flex-1">
                  <p className="font-medium text-slate-800">Amenity booking confirmed</p>
                  <p className="text-sm text-slate-600">Swimming pool - Tomorrow 3:00 PM</p>
                </div>
                <span className="text-xs text-slate-500">Yesterday</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </main>

{/* Dashboard Footer */}
      <footer className="bg-slate-800 text-white py-4 mt-8">
        <div className="container mx-auto px-4 text-center">
          <p className="text-slate-300 text-sm">© 2025 eDAS Access is part of Box17 LLC. All rights reserved.</p>
          <p className="text-slate-400 text-xs mt-1">
            Box17 is a company registered in Cape Verde. Caixa Postal X, Praia, Santiago, Cabo Verde
          </p>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/sitemap.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import type { MetadataRoute } from "next"

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = "https://edasaccess.com"

return [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 1,
    },
    {
      url: `${baseUrl}/about`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.8,
    },
    {
      url: `${baseUrl}/download`,
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 0.9,
    },
    {
      url: `${baseUrl}/contact`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.7,
    },
    {
      url: `${baseUrl}/register`,
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 0.9,
    },
    {
      url: `${baseUrl}/portal`,
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 0.8,
    },
    {
      url: `${baseUrl}/pricing`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.6,
    },
  ]
}
[V0_FILE]typescriptreact:file="app/robots.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import type { MetadataRoute } from "next"

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: ["/dashboard/", "/api/"],
    },
    sitemap: "https://edasaccess.com/sitemap.xml",
  }
}
[V0_FILE]typescriptreact:file="components/navigation.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 { Menu, X } from "lucide-react"
import Image from "next/image"

export function Navigation() {
  const [isOpen, setIsOpen] = useState(false)

const navItems = [
    { href: "/", label: "Home" },
    { href: "/about", label: "About Us" },
    { href: "/download", label: "Download" },
    { href: "/contact", label: "Contact" },
  ]

return (
    <nav className="bg-slate-800 text-white sticky top-0 z-50">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-3">
            <Image src="/images/edas-logo.webp" alt="eDAS Access Logo" width={40} height={40} className="rounded-lg" />
            <span className="font-semibold text-lg text-slate-200">Smart Living. Secure Access.</span>
          </Link>

{/* Desktop Navigation */}
          <div className="hidden md:flex items-center gap-8">
            {navItems.map((item) => (
              <Link key={item.href} href={item.href} className="hover:text-coral-400 transition-colors">
                {item.label}
              </Link>
            ))}
            <Button
              asChild
              className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700"
            >
              <Link href="/register">Get Started</Link>
            </Button>
          </div>

{/* Mobile Menu Button */}
          <button className="md:hidden" onClick={() => setIsOpen(!isOpen)}>
            {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
          </button>
        </div>

{/* Mobile Navigation */}
        {isOpen && (
          <div className="md:hidden py-4 border-t border-slate-700">
            <div className="flex flex-col gap-4">
              {navItems.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  className="hover:text-coral-400 transition-colors py-2"
                  onClick={() => setIsOpen(false)}
                >
                  {item.label}
                </Link>
              ))}
              <Button
                asChild
                className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 mt-2"
              >
                <Link href="/register">Get Started</Link>
              </Button>
            </div>
          </div>
        )}
      </div>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="app/pricing/page.tsx" isEdit="true" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

interface PricingCardProps {
  title: string
  price: number
  period?: string
  features: string[]
  popular?: boolean
  className?: string
}

function PricingCard({ title, price, period = "month", features, popular, className }: PricingCardProps) {
  return (
    <Card className={`relative ${popular ? "ring-2 ring-blue-500" : ""} ${className}`}>
      {popular && (
        <Badge className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-blue-600">Most Popular</Badge>
      )}
      <CardHeader className="text-center">
        <CardTitle className="text-xl">{title}</CardTitle>
        <div className="mt-4">
          <span className="text-3xl font-bold">${price.toFixed(2)}</span>
          <span className="text-slate-600">/{period}</span>
        </div>
        <p className="text-sm text-slate-500">USD pricing</p>
      </CardHeader>
      <CardContent>
        <ul className="space-y-3">
          {features.map((feature, index) => (
            <li key={index} className="flex items-center gap-2">
              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
              <span className="text-sm">{feature}</span>
            </li>
          ))}
        </ul>
      </CardContent>
    </Card>
  )
}

export default function PricingPage() {
  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero Section */}
      <section className="bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900 text-white py-20 px-4">
        <div className="container mx-auto max-w-4xl text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-6">Choose Your Plan</h1>
          <p className="text-xl text-slate-300 leading-relaxed">
            Flexible pricing for estates of all sizes. Contact us for regional pricing options.
          </p>
        </div>
      </section>

{/* Pricing Cards */}
      <section className="py-16 px-4">
        <div className="container mx-auto max-w-6xl">
          <div className="grid md:grid-cols-3 gap-8">
            <PricingCard
              title="Basic"
              price={29.99}
              features={["Up to 50 residents", "Basic visitor management", "Email notifications", "Mobile app access"]}
            />
            <PricingCard
              title="Professional"
              price={59.99}
              popular
              features={[
                "Up to 200 residents",
                "Advanced visitor management",
                "SMS & email notifications",
                "Security scanner integration",
                "Amenity booking system",
              ]}
            />
            <PricingCard
              title="Enterprise"
              price={99.99}
              features={[
                "Unlimited residents",
                "Full feature access",
                "Priority support",
                "Custom integrations",
                "Advanced analytics",
                "Multi-estate management",
              ]}
            />
          </div>

<div className="text-center mt-12">
            <p className="text-slate-600 mb-4">
              Pricing may vary by region. Contact us for local pricing in your currency.
            </p>
            <p className="text-sm text-slate-500">
              We serve Nigeria, Ghana, Cape Verde, Jamaica, Trinidad & Tobago, and Barbados
            </p>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/error-boundary.tsx" isEdit="true" isMerged="true"
"use client"

import React from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { AlertTriangle, RefreshCw } from "lucide-react"

interface ErrorBoundaryState {
  hasError: boolean
  error?: Error
}

export class ErrorBoundary extends React.Component<{ children: React.ReactNode }, ErrorBoundaryState> {
  constructor(props: { children: React.ReactNode }) {
    super(props)
    this.state = { hasError: false }
  }

static getDerivedStateFromError(error: Error): ErrorBoundaryState {
    return { hasError: true, error }
  }

componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error("Error caught by boundary:", error, errorInfo)
  }

render() {
    if (this.state.hasError) {
      return (
        <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
          <Card className="w-full max-w-md">
            <CardHeader className="text-center">
              <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <AlertTriangle className="h-8 w-8 text-red-600" />
              </div>
              <CardTitle className="text-xl text-red-800">Something went wrong</CardTitle>
            </CardHeader>
            <CardContent className="text-center space-y-4">
              <p className="text-slate-600">
                We're sorry, but something unexpected happened. Please try refreshing the page.
              </p>
              <Button onClick={() => window.location.reload()} className="bg-blue-600 hover:bg-blue-700">
                <RefreshCw className="h-4 w-4 mr-2" />
                Refresh Page
              </Button>
            </CardContent>
          </Card>
        </div>
      )
    }

return this.props.children
  }
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.35",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1",
    "@anthropic-ai/sdk": "0.71.2",
    "resend": "6.6.0"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "5.7.3"
  }
}
[V0_FILE]typescript:file="public/sw.js" isMerged="true"
const CACHE_NAME = "edas-access-v1"
const urlsToCache = [
  "/",
  "/about",
  "/download",
  "/contact",
  "/register",
  "/portal",
  "/pricing",
  "/images/edas-logo.webp",
  "/images/dashboard.png",
  "/images/quick-actions.png",
  "/images/management-access.png",
  "/images/estate-map.png",
]

// Install event - cache resources
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches
      .open(CACHE_NAME)
      .then((cache) => {
        console.log("Opened cache")
        return cache.addAll(urlsToCache)
      })
      .catch((error) => {
        console.error("Cache installation failed:", error)
      }),
  )
  self.skipWaiting()
})

// Fetch event - serve from cache, fallback to network
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      // Cache hit - return response
      if (response) {
        return response
      }

// Clone the request
      const fetchRequest = event.request.clone()

return fetch(fetchRequest)
        .then((response) => {
          // Check if valid response
          if (!response || response.status !== 200 || response.type !== "basic") {
            return response
          }

// Clone the response
          const responseToCache = response.clone()

caches.open(CACHE_NAME).then((cache) => {
            cache.put(event.request, responseToCache)
          })

return response
        })
        .catch(() => {
          // Return offline page or fallback
          return new Response("Offline - Please check your connection", {
            status: 503,
            statusText: "Service Unavailable",
            headers: new Headers({
              "Content-Type": "text/plain",
            }),
          })
        })
    }),
  )
})

// Activate event - clean up old caches
self.addEventListener("activate", (event) => {
  const cacheWhitelist = [CACHE_NAME]
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName)
          }
        }),
      )
    }),
  )
  self.clients.claim()
})
[V0_FILE]json:file="public/manifest.json" isEdit="true" isMerged="true"
{
  "name": "eDAS Access - Smart Estate Management",
  "short_name": "eDAS Access",
  "description": "Your all-in-one residential access management solution for gated communities and estates",
  "start_url": "https://edasaccess.vercel.app",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1e293b",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/images/edas-logo.webp",
      "sizes": "192x192",
      "type": "image/webp",
      "purpose": "any maskable"
    },
    {
      "src": "/images/edas-logo.webp",
      "sizes": "512x512",
      "type": "image/webp",
      "purpose": "any maskable"
    }
  ],
  "categories": ["business", "productivity", "utilities"],
  "screenshots": [
    {
      "src": "/images/dashboard.png",
      "sizes": "1280x720",
      "type": "image/png",
      "form_factor": "wide"
    },
    {
      "src": "/images/quick-actions.png",
      "sizes": "1280x720",
      "type": "image/png",
      "form_factor": "wide"
    }
  ]
}
[V0_FILE]typescriptreact:file="components/pwa-install-button.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Download, Smartphone, CheckCircle, Info, ExternalLink } from "lucide-react"

interface BeforeInstallPromptEvent extends Event {
  prompt: () => Promise<void>
  userChoice: Promise<{ outcome: "accepted" | "dismissed" }>
}

export function PWAInstallButton() {
  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null)
  const [isInstalled, setIsInstalled] = useState(false)
  const [isIOSStandalone, setIsIOSStandalone] = useState(false)
  const [showIOSInstructions, setShowIOSInstructions] = useState(false)
  const [installStatus, setInstallStatus] = useState<"idle" | "installing" | "success" | "error">("idle")
  const [browserInfo, setBrowserInfo] = useState<string>("")
  const [canInstall, setCanInstall] = useState(false)

const APP_URL = "https://edasaccess.vercel.app"

useEffect(() => {
    // Detect browser
    const userAgent = navigator.userAgent.toLowerCase()
    let browser = "Unknown"

if (userAgent.includes("chrome") && !userAgent.includes("edge")) {
      browser = "Chrome"
    } else if (userAgent.includes("edge")) {
      browser = "Edge"
    } else if (userAgent.includes("safari") && !userAgent.includes("chrome")) {
      browser = "Safari"
    } else if (userAgent.includes("firefox")) {
      browser = "Firefox"
    }

setBrowserInfo(browser)

// Check if app is already installed
    if (window.matchMedia("(display-mode: standalone)").matches) {
      setIsInstalled(true)
      return
    }

// Check if it's iOS and running as standalone
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
    const isStandalone = (window.navigator as any).standalone === true
    setIsIOSStandalone(isIOS && isStandalone)

if (isIOS && !isStandalone) {
      // iOS doesn't support beforeinstallprompt, but we can still provide instructions
      setCanInstall(true)
      return
    }

// Listen for the beforeinstallprompt event
    const handleBeforeInstallPrompt = (e: Event) => {
      console.log("beforeinstallprompt event fired")
      e.preventDefault()
      setDeferredPrompt(e as BeforeInstallPromptEvent)
      setCanInstall(true)
    }

window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt)

// Listen for successful installation
    window.addEventListener("appinstalled", () => {
      console.log("PWA was installed")
      setIsInstalled(true)
      setInstallStatus("success")
      setDeferredPrompt(null)
      // Redirect to app after installation
      setTimeout(() => {
        window.location.href = APP_URL
      }, 2000)
    })

// Check if service worker is registered
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker.getRegistration().then((registration) => {
        if (registration) {
          console.log("Service Worker is registered")
        } else {
          console.log("Service Worker is NOT registered")
        }
      })
    }

return () => {
      window.removeEventListener("beforeinstallprompt", handleBeforeInstallPrompt)
    }
  }, [])

const handleInstallClick = async () => {
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)

// If iOS, show manual installation instructions
    if (isIOS) {
      setShowIOSInstructions(true)
      return
    }

// If no install prompt is available
    if (!deferredPrompt) {
      console.log("No deferred prompt available")
      setInstallStatus("error")
      return
    }

setInstallStatus("installing")

try {
      console.log("Showing install prompt")
      // Show the install prompt
      await deferredPrompt.prompt()

// Wait for the user's response
      const { outcome } = await deferredPrompt.userChoice
      console.log(`User response: ${outcome}`)

if (outcome === "accepted") {
        setInstallStatus("success")
        setIsInstalled(true)
      } else {
        setInstallStatus("idle")
      }

setDeferredPrompt(null)
    } catch (error) {
      console.error("Installation error:", error)
      setInstallStatus("error")
    }
  }

const handleDirectAccess = () => {
    window.open(APP_URL, "_blank")
  }

// If already installed
  if (isInstalled || isIOSStandalone) {
    return (
      <div className="space-y-4">
        <Alert className="bg-green-50 border-green-200">
          <CheckCircle className="h-4 w-4 text-green-600" />
          <AlertDescription className="text-green-800">✅ eDAS Access is installed! Opening app...</AlertDescription>
        </Alert>
        <Button onClick={handleDirectAccess} className="w-full bg-blue-600 hover:bg-blue-700">
          <ExternalLink className="h-4 w-4 mr-2" />
          Open eDAS Access App
        </Button>
      </div>
    )
  }

// If installation was successful
  if (installStatus === "success") {
    return (
      <div className="space-y-4">
        <Alert className="bg-green-50 border-green-200">
          <CheckCircle className="h-4 w-4 text-green-600" />
          <AlertDescription className="text-green-800">
            ✅ Installation successful! Redirecting to app...
          </AlertDescription>
        </Alert>
        <Button onClick={handleDirectAccess} className="w-full bg-blue-600 hover:bg-blue-700">
          <ExternalLink className="h-4 w-4 mr-2" />
          Open eDAS Access Now
        </Button>
      </div>
    )
  }

// iOS manual installation instructions
  if (showIOSInstructions) {
    return (
      <div className="space-y-4">
        <Alert className="bg-blue-50 border-blue-200">
          <Smartphone className="h-4 w-4 text-blue-600" />
          <AlertDescription className="text-blue-800">
            <p className="font-semibold mb-2">📱 To install on iOS Safari:</p>
            <ol className="list-decimal list-inside space-y-1 text-sm mb-3">
              <li>Open {APP_URL} in Safari</li>
              <li>
                Tap the Share button <span className="inline-block">⎙</span> at the bottom
              </li>
              <li>Scroll down and tap "Add to Home Screen"</li>
              <li>Tap "Add" in the top right corner</li>
            </ol>
            <p className="text-xs">After installation, the app will open automatically.</p>
          </AlertDescription>
        </Alert>
        <Button onClick={() => setShowIOSInstructions(false)} variant="outline" className="w-full">
          Back
        </Button>
        <Button onClick={handleDirectAccess} className="w-full bg-blue-600 hover:bg-blue-700">
          <ExternalLink className="h-4 w-4 mr-2" />
          Open in Browser Instead
        </Button>
      </div>
    )
  }

// Installation error with browser info
  if (installStatus === "error") {
    return (
      <div className="space-y-4">
        <Alert className="bg-yellow-50 border-yellow-200">
          <Info className="h-4 w-4 text-yellow-600" />
          <AlertDescription className="text-yellow-800">
            <p className="font-semibold mb-2">Installation not available</p>
            <p className="text-sm mb-2">
              Current Browser: <strong>{browserInfo}</strong>
            </p>
            <p className="text-sm">You can still access all features through your web browser!</p>
          </AlertDescription>
        </Alert>
        <Button onClick={() => setInstallStatus("idle")} variant="outline" className="w-full">
          Try Install Again
        </Button>
        <Button onClick={handleDirectAccess} className="w-full bg-blue-600 hover:bg-blue-700">
          <ExternalLink className="h-4 w-4 mr-2" />
          Open eDAS Access in Browser
        </Button>
      </div>
    )
  }

// Main install button
  return (
    <div className="space-y-4">
      <Button
        onClick={handleInstallClick}
        disabled={installStatus === "installing"}
        className="w-full bg-gradient-to-r from-teal-600 to-blue-600 hover:from-teal-700 hover:to-blue-700 text-white px-7 py-6 text-lg font-semibold"
      >
        {installStatus === "installing" ? (
          <>
            <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2" />
            Installing...
          </>
        ) : (
          <>
            <Download className="h-5 w-5 mr-2" />📱 Install eDAS Access App
          </>
        )}
      </Button>

<Button onClick={handleDirectAccess} variant="outline" className="w-full bg-transparent">
        <ExternalLink className="h-4 w-4 mr-2" />
        Or Open in Browser
      </Button>

{!canInstall && installStatus === "idle" && (
        <Alert className="bg-blue-50 border-blue-200">
          <Info className="h-4 w-4 text-blue-600" />
          <AlertDescription className="text-blue-800 text-sm">
            <p className="mb-2">
              <strong>Browser:</strong> {browserInfo}
            </p>
            <p>
              {browserInfo === "Chrome" || browserInfo === "Edge"
                ? "Look for the install icon in your browser's address bar, or use the button above to access the app directly."
                : browserInfo === "Safari"
                  ? "Use the button above to open the app, then follow iOS installation instructions."
                  : "Use the button above to access all features in your browser."}
            </p>
          </AlertDescription>
        </Alert>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/portal/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Monitor, ExternalLink, Loader2 } from "lucide-react"
import Image from "next/image"

export default function PortalPage() {
  const APP_URL = "https://edasaccess.vercel.app"

useEffect(() => {
    // Redirect to the full app after a brief moment
    const timer = setTimeout(() => {
      window.location.href = APP_URL
    }, 2000)

return () => clearTimeout(timer)
  }, [])

return (
    <div className="min-h-screen bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900">
      {/* Header */}
      <div className="bg-slate-800/50 backdrop-blur-sm border-b border-slate-700">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center gap-3">
            <Image src="/images/edas-logo.webp" alt="eDAS Access Logo" width={40} height={40} className="rounded-lg" />
            <span className="font-semibold text-lg text-slate-200">Smart Living. Secure Access.</span>
          </div>
        </div>
      </div>

{/* Main Content */}
      <div className="flex items-center justify-center min-h-[calc(100vh-80px)] p-4">
        <div className="w-full max-w-md">
          {/* Redirect Notice */}
          <Card className="bg-white/10 backdrop-blur-sm border-slate-600">
            <CardHeader className="text-center">
              <div className="w-20 h-20 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
                <Monitor className="h-10 w-10 text-white" />
              </div>
              <CardTitle className="text-2xl text-white mb-2">Redirecting to eDAS Access</CardTitle>
              <p className="text-slate-300">Taking you to the full app experience...</p>
            </CardHeader>
            <CardContent className="text-center space-y-6">
              <div className="flex justify-center">
                <Loader2 className="h-12 w-12 text-blue-400 animate-spin" />
              </div>

<div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
                <p className="text-blue-200 text-sm mb-3">You're being redirected to explore all features including:</p>
                <ul className="text-blue-100 text-xs space-y-1 text-left">
                  <li>✓ Visitor Access Management</li>
                  <li>✓ Security Monitoring</li>
                  <li>✓ Amenity Booking</li>
                  <li>✓ Estate Communication</li>
                  <li>✓ And much more!</li>
                </ul>
              </div>

<p className="text-xs text-slate-400">
                  If you're not redirected automatically,{" "}
                  <a href={APP_URL} className="text-blue-400 hover:text-blue-300 underline">
                    click here
                  </a>
                </p>
              </div>
            </CardContent>
          </Card>

{/* Features Preview */}
          <div className="mt-8 grid grid-cols-3 gap-4 text-center">
            <div className="text-slate-300">
              <div className="w-8 h-8 bg-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-2">
                <span className="text-lg">🔐</span>
              </div>
              <p className="text-xs">Secure Access</p>
            </div>
            <div className="text-slate-300">
              <div className="w-8 h-8 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-2">
                <span className="text-lg">📱</span>
              </div>
              <p className="text-xs">Mobile Ready</p>
            </div>
            <div className="text-slate-300">
              <div className="w-8 h-8 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-2">
                <span className="text-lg">⚡</span>
              </div>
              <p className="text-xs">Fast & Easy</p>
            </div>
          </div>
        </div>
      </div>

{/* Footer */}
      <div className="bg-slate-900/50 backdrop-blur-sm border-t border-slate-700 py-4">
        <div className="container mx-auto px-4 text-center">
          <p className="text-slate-300 text-sm">© 2025 eDAS Access is part of Box17 LLC. All rights reserved.</p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/download/page.tsx" isEdit="true" isMerged="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Smartphone, Monitor, Lock, MessageSquare, Car, Camera, Wrench, Calendar, ExternalLink } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { PWAInstallButton } from "@/components/pwa-install-button"

export default function DownloadPage() {
  const APP_URL = "https://edasaccess.vercel.app"

return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero Section */}
      <section className="bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900 text-white py-20 px-4">
        <div className="container mx-auto max-w-4xl text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-6">Get the App</h1>
          <p className="text-xl text-slate-300 leading-relaxed mb-4">
            Simplify your estate life. Whether you're a resident or a facility manager, the eDAS Access app gives you
            full control at your fingertips.
          </p>
          <p className="text-lg text-blue-300">Explore all features first, then register when you're ready!</p>
        </div>
      </section>

{/* PWA Download Section */}
      <section className="py-16 px-4 bg-gradient-to-r from-teal-600 to-blue-600 text-white">
        <div className="container mx-auto max-w-4xl">
          <div className="grid md:grid-cols-2 gap-8 items-center">
            <div className="text-center md:text-left">
              <h2 className="text-3xl font-bold mb-4">📱 Access eDAS Now</h2>
              <p className="text-xl mb-4 text-teal-100">
                Install the app or access it directly in your browser. See all features before you register!
              </p>
              <div className="bg-blue-700/30 rounded-lg p-4 mb-6">
                <p className="text-sm text-blue-100 mb-2">
                  <strong>New Users:</strong> Browse the app to see:
                </p>
                <ul className="text-sm text-blue-100 space-y-1 text-left">
                  <li>✓ Dashboard overview</li>
                  <li>✓ All available features</li>
                  <li>✓ How everything works</li>
                  <li>✓ Then click Register to sign up!</li>
                </ul>
              </div>
              <PWAInstallButton />
            </div>

<div className="text-center bg-white p-6 rounded-lg shadow-xl">
              <img
                src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(APP_URL)}`}
                alt="Scan to access eDAS"
                className="mx-auto mb-4 rounded-lg"
              />
              <p className="font-bold text-slate-800 text-lg mb-2">📱 Scan to Access eDAS</p>
              <p className="text-slate-600">Estate Management System</p>
              <p className="text-sm text-slate-500 mt-2">Opens directly in your browser</p>
            </div>
          </div>
        </div>
      </section>

{/* Direct Access Button */}
      <section className="py-8 px-4 bg-blue-50">
        <div className="container mx-auto max-w-4xl text-center">
          <h3 className="text-2xl font-bold text-slate-800 mb-4">Want to Try Before Installing?</h3>
          <p className="text-slate-600 mb-6">
            Open the app in your browser to explore all features. No installation required!
          </p>
          <Button asChild size="lg" className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-6 text-lg">
            <a href={APP_URL} target="_blank" rel="noopener noreferrer">
              <ExternalLink className="h-5 w-5 mr-2" />
              Open eDAS Access in Browser
            </a>
          </Button>
        </div>
      </section>

{/* Download Options */}
      <section className="py-16 px-4">
        <div className="container mx-auto max-w-4xl">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-slate-800 mb-4">📲 Also Coming Soon:</h2>
          </div>

<div className="grid md:grid-cols-3 gap-8 mb-16">
            <Card className="p-6 text-center">
              <CardContent className="p-0">
                <Smartphone className="h-16 w-16 mx-auto mb-4 text-green-600" />
                <h3 className="text-xl font-semibold mb-2">Android</h3>
                <Badge variant="secondary" className="mb-4">
                  Coming Soon
                </Badge>
                <Button className="w-full bg-green-600 hover:bg-green-700" disabled>
                  Play Store
                </Button>
              </CardContent>
            </Card>

<Card className="p-6 text-center">
              <CardContent className="p-0">
                <Smartphone className="h-16 w-16 mx-auto mb-4 text-blue-600" />
                <h3 className="text-xl font-semibold mb-2">iOS</h3>
                <Badge variant="secondary" className="mb-4">
                  Coming Soon
                </Badge>
                <Button className="w-full bg-blue-600 hover:bg-blue-700" disabled>
                  App Store
                </Button>
              </CardContent>
            </Card>

<Card className="p-6 text-center">
              <CardContent className="p-0">
                <Monitor className="h-16 w-16 mx-auto mb-4 text-purple-600" />
                <h3 className="text-xl font-semibold mb-2">Web Portal</h3>
                <Badge variant="default" className="mb-4 bg-green-600">
                  Available Now
                </Badge>
                <Button asChild className="w-full bg-purple-600 hover:bg-purple-700">
                  <Link href="/portal">Access Web Portal</Link>
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Preview eDAS */}
      <section className="py-16 px-4 bg-white">
        <div className="container mx-auto max-w-6xl">
          <h2 className="text-3xl font-bold text-slate-800 text-center mb-12">Preview eDAS Features</h2>
          <div className="grid md:grid-cols-2 gap-8">
            <div className="text-center">
              <Image
                src="/images/dashboard.png"
                alt="eDAS Access Dashboard"
                width={400}
                height={300}
                className="rounded-lg shadow-lg mx-auto mb-4"
              />
              <h3 className="text-lg font-semibold text-slate-800">Main Dashboard</h3>
              <p className="text-slate-600">Complete overview of your estate management tools</p>
            </div>
            <div className="text-center">
              <Image
                src="/images/quick-actions.png"
                alt="Quick Actions Interface"
                width={400}
                height={300}
                className="rounded-lg shadow-lg mx-auto mb-4"
              />
              <h3 className="text-lg font-semibold text-slate-800">Quick Actions</h3>
              <p className="text-slate-600">Fast access to essential features</p>
            </div>
          </div>
        </div>
      </section>

{/* Key Tools */}
      <section className="py-16 px-4 bg-gray-50">
        <div className="container mx-auto max-w-6xl">
          <h2 className="text-3xl font-bold text-slate-800 text-center mb-12">Key Tools in the App</h2>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            {[
              {
                icon: Lock,
                title: "4-digit Security Access",
                description: "Management security code access",
              },
              {
                icon: MessageSquare,
                title: "Resident Messaging",
                description: "Announcements and communications",
              },
              {
                icon: Car,
                title: "Car Registration",
                description: "Vehicle and guest tracking",
              },
              {
                icon: Camera,
                title: "Security Scanner",
                description: "Integrated scanning systems",
              },
              {
                icon: Wrench,
                title: "Maintenance",
                description: "Service request management",
              },
              {
                icon: Calendar,
                title: "Events Calendar",
                description: "Community events and bookings",
              },
            ].map((tool, index) => (
              <Card key={index} className="p-4 hover:shadow-lg transition-shadow">
                <CardContent className="p-0 text-center">
                  <div className="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-3">
                    <tool.icon className="h-6 w-6 text-white" />
                  </div>
                  <h3 className="font-semibold text-slate-800 mb-2">{tool.title}</h3>
                  <p className="text-sm text-slate-600">{tool.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>

<div className="text-center">
            <Image
              src="/images/management-access.png"
              alt="Management Access Interface"
              width={400}
              height={300}
              className="rounded-lg shadow-lg mx-auto mb-4"
            />
            <h3 className="text-lg font-semibold text-slate-800 mb-2">🔒 Secure Management Access</h3>
            <p className="text-slate-600">4-digit security code protection for management functions</p>
          </div>
        </div>
      </section>

{/* Installation Instructions */}
      <section className="py-16 px-4 bg-slate-800 text-white">
        <div className="container mx-auto max-w-4xl text-center">
          <h2 className="text-3xl font-bold mb-8">How to Get Started</h2>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="text-center">
              <div className="w-16 h-16 bg-teal-600 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
                1
              </div>
              <h3 className="text-xl font-semibold mb-2">Access the App</h3>
              <p className="text-slate-300">Click any button above to open eDAS Access</p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
                2
              </div>
              <h3 className="text-xl font-semibold mb-2">Explore Features</h3>
              <p className="text-slate-300">Browse the dashboard and see all available tools</p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
                3
              </div>
              <h3 className="text-xl font-semibold mb-2">Register & Start</h3>
              <p className="text-slate-300">When ready, click Register to create your account</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]plaintext:file="public/assets/boxseventeen-hero.mp4" query="flowing blue and green light streaks moving across dark background, digital network animation, data waves pulsing in electric blue and neon green, smooth looping motion video" isMerged="true"
[V0_FILE]typescriptreact:file="app/boxseventeen/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "BOXSEVENTEEN | Digital Innovation Studio",
  description: "BOXSEVENTEEN - A Websoft Technologies Company. Digital innovation and software development studio.",
}

export default function BoxseventeenLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body style={{ margin: 0, padding: 0, overflow: "hidden" }}>{children}</body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/boxseventeen/page.tsx" isMerged="true"
"use client"

import { useState } from "react"

export default function BoxseventeenPage() {
  const [isLoading, setIsLoading] = useState(true)

return (
    <div className="relative w-screen h-screen">
      {/* Loading state */}
      {isLoading && (
        <div className="absolute inset-0 flex items-center justify-center bg-white z-10">
          <div className="flex flex-col items-center gap-4">
            <div className="w-10 h-10 border-4 border-[#007BFF] border-t-transparent rounded-full animate-spin" />
            <span className="text-gray-600 text-sm">Loading BOXSEVENTEEN...</span>
          </div>
        </div>
      )}

{/* Fullscreen iframe */}
      <iframe
        src="https://v0-boxseventeen-website.vercel.app/"
        className="w-full h-full border-0"
        onLoad={() => setIsLoading(false)}
        title="BOXSEVENTEEN"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tiana-chatbot.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { MessageCircle, X, Send, AlertCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

interface Message {
  id: string
  text: string
  sender: "user" | "tiana"
  timestamp: Date
}

interface EscalationData {
  name: string
  email: string
  phone: string
  issue: string
}

export function TianaChatbot() {
  const [isOpen, setIsOpen] = useState(false)
  const [messages, setMessages] = useState<Message[]>([
    {
      id: "1",
      text: "Hi! I'm Tiana, your eDAS Access assistant. How can I help you today?",
      sender: "tiana",
      timestamp: new Date(),
    },
  ])
  const [input, setInput] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [showEscalation, setShowEscalation] = useState(false)
  const [escalationData, setEscalationData] = useState<EscalationData>({
    name: "",
    email: "",
    phone: "",
    issue: "",
  })
  const messagesEndRef = useRef<HTMLDivElement>(null)

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

useEffect(() => {
    scrollToBottom()
  }, [messages])

const handleSendMessage = async () => {
    if (!input.trim()) return

const userMessage: Message = {
      id: Date.now().toString(),
      text: input,
      sender: "user",
      timestamp: new Date(),
    }

setMessages((prev) => [...prev, userMessage])
    setInput("")
    setIsLoading(true)

try {
      const response = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          message: input,
          conversationHistory: messages,
        }),
      })

const data = await response.json()

if (data.needsEscalation) {
        setShowEscalation(true)
        setMessages((prev) => [
          ...prev,
          {
            id: Date.now().toString(),
            text:
              data.response ||
              "I think this question needs attention from our sales team. Let me connect you with them.",
            sender: "tiana",
            timestamp: new Date(),
          },
        ])
      } else {
        setMessages((prev) => [
          ...prev,
          {
            id: Date.now().toString(),
            text: data.response,
            sender: "tiana",
            timestamp: new Date(),
          },
        ])
      }
    } catch (error) {
      console.error("Chat error:", error)
      setMessages((prev) => [
        ...prev,
        {
          id: Date.now().toString(),
          text: "Sorry, I encountered an error. Please try again or contact our support team.",
          sender: "tiana",
          timestamp: new Date(),
        },
      ])
    } finally {
      setIsLoading(false)
    }
  }

const handleEscalation = async () => {
    try {
      const response = await fetch("/api/escalate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          ...escalationData,
          context: messages,
        }),
      })

if (response.ok) {
        setMessages((prev) => [
          ...prev,
          {
            id: Date.now().toString(),
            text: `Thanks ${escalationData.name}! Our sales team will contact you at ${escalationData.email} shortly. We appreciate your inquiry!`,
            sender: "tiana",
            timestamp: new Date(),
          },
        ])
        setShowEscalation(false)
        setEscalationData({ name: "", email: "", phone: "", issue: "" })
      }
    } catch (error) {
      console.error("Escalation error:", error)
      alert("Failed to submit. Please try again.")
    }
  }

return (
    <>
      <Button
        onClick={() => setIsOpen(!isOpen)}
        className="fixed bottom-6 right-6 z-50 rounded-full shadow-lg hover:shadow-xl transition-shadow bg-blue-500 hover:bg-blue-600 w-14 h-14 flex items-center justify-center"
        title="Chat with Tiana"
      >
        {isOpen ? <X className="h-6 w-6" /> : <MessageCircle className="h-6 w-6" />}
      </Button>

{isOpen && (
        <div className="fixed bottom-24 right-6 z-50 w-96 max-w-[calc(100vw-2rem)] bg-white rounded-lg shadow-2xl flex flex-col h-[500px]">
          {/* Header */}
          <div className="bg-blue-500 text-white p-4 rounded-t-lg">
            <h3 className="font-semibold text-lg">Tiana - eDAS Assistant</h3>
            <p className="text-sm text-blue-100">Always here to help</p>
          </div>

{/* Messages */}
          <div className="flex-1 overflow-y-auto p-4 space-y-4">
            {messages.map((message) => (
              <div key={message.id} className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}>
                <div
                  className={`max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${
                    message.sender === "user"
                      ? "bg-blue-500 text-white rounded-br-none"
                      : "bg-slate-100 text-slate-800 rounded-bl-none"
                  }`}
                >
                  <p className="text-sm">{message.text}</p>
                </div>
              </div>
            ))}

{showEscalation && (
              <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
                <div className="flex gap-2 mb-3">
                  <AlertCircle className="h-5 w-5 text-amber-600 flex-shrink-0" />
                  <p className="text-sm text-amber-800 font-medium">Let's connect you with our sales team</p>
                </div>

<div className="space-y-3">
                  <Input
                    placeholder="Your name"
                    value={escalationData.name}
                    onChange={(e) => setEscalationData((prev) => ({ ...prev, name: e.target.value }))}
                    className="text-sm"
                  />
                  <Input
                    placeholder="Your email"
                    type="email"
                    value={escalationData.email}
                    onChange={(e) => setEscalationData((prev) => ({ ...prev, email: e.target.value }))}
                    className="text-sm"
                  />
                  <Input
                    placeholder="Your phone"
                    value={escalationData.phone}
                    onChange={(e) => setEscalationData((prev) => ({ ...prev, phone: e.target.value }))}
                    className="text-sm"
                  />
                  <textarea
                    placeholder="Brief description of your inquiry"
                    value={escalationData.issue}
                    onChange={(e) => setEscalationData((prev) => ({ ...prev, issue: e.target.value }))}
                    className="w-full p-2 border border-slate-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                    rows={3}
                  />
                  <Button
                    onClick={handleEscalation}
                    className="w-full bg-blue-500 hover:bg-blue-600 text-sm"
                    disabled={!escalationData.name || !escalationData.email || !escalationData.issue}
                  >
                    Connect with Sales
                  </Button>
                </div>
              </div>
            )}

{isLoading && (
              <div className="flex justify-start">
                <div className="bg-slate-100 px-4 py-2 rounded-lg rounded-bl-none">
                  <div className="flex gap-2">
                    <div className="w-2 h-2 bg-slate-400 rounded-full animate-bounce"></div>
                    <div className="w-2 h-2 bg-slate-400 rounded-full animate-bounce delay-100"></div>
                    <div className="w-2 h-2 bg-slate-400 rounded-full animate-bounce delay-200"></div>
                  </div>
                </div>
              </div>
            )}

{/* Input */}
          <div className="border-t p-4 bg-slate-50 rounded-b-lg">
            <div className="flex gap-2">
              <Input
                placeholder="Ask me anything..."
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onKeyPress={(e) => {
                  if (e.key === "Enter" && !isLoading) {
                    handleSendMessage()
                  }
                }}
                disabled={isLoading}
                className="text-sm"
              />
              <Button
                onClick={handleSendMessage}
                disabled={isLoading || !input.trim()}
                size="sm"
                className="bg-blue-500 hover:bg-blue-600"
              >
                <Send className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </div>
      )}
    </>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { TianaChatbot } from "@/components/tiana-chatbot"
import { SocialShare } from "@/components/social-share"

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

export const metadata: Metadata = {
  title: "eDAS Access - Smart Estate Management",
  description: "Your all-in-one residential access management solution for gated communities and estates.",
  keywords: "estate management, visitor access, security, gated community, property management",
  authors: [{ name: "eDAS Access" }],
  creator: "eDAS Access",
  publisher: "Box17 LLC",
  manifest: "/manifest.json",
  appleWebApp: {
    capable: true,
    statusBarStyle: "default",
    title: "eDAS Access",
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
    },
  },
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://edasaccess.com",
    title: "eDAS Access - Smart Estate Management",
    description: "Your all-in-one residential access management solution for gated communities and estates.",
    siteName: "eDAS Access",
  },
  twitter: {
    card: "summary_large_image",
    title: "eDAS Access - Smart Estate Management",
    description: "Your all-in-one residential access management solution for gated communities and estates.",
  },
  themeColor: "#1e293b",
  viewport: {
    width: "device-width",
    initialScale: 1,
    maximumScale: 5,
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <link rel="icon" href="/images/edas-logo.webp" />
        <link rel="apple-touch-icon" href="/images/edas-logo.webp" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <meta name="apple-mobile-web-app-title" content="eDAS Access" />
      </head>
      <body className={inter.className}>
        <Navigation />
        {children}
        <Footer />
        <TianaChatbot />
        <SocialShare />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/social-share.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Share2, X } from "lucide-react"
import { Button } from "@/components/ui/button"

export function SocialShare() {
  const [isOpen, setIsOpen] = useState(false)

const shareUrl = typeof window !== "undefined" ? window.location.href : "https://edasaccess.com"
  const shareTitle = "eDAS Access - Smart Estate Management Solution"
  const shareDescription = "Your all-in-one residential access management solution for gated communities and estates."

const shareLinks = [
    {
      name: "Facebook",
      icon: "👍",
      url: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`,
    },
    {
      name: "Twitter",
      icon: "𝕏",
      url: `https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(shareTitle)}`,
    },
    {
      name: "LinkedIn",
      icon: "💼",
      url: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`,
    },
    {
      name: "WhatsApp",
      icon: "💬",
      url: `https://wa.me/?text=${encodeURIComponent(shareTitle + " " + shareUrl)}`,
    },
    {
      name: "Email",
      icon: "✉️",
      url: `mailto:?subject=${encodeURIComponent(shareTitle)}&body=${encodeURIComponent(shareDescription + "\n\n" + shareUrl)}`,
    },
    {
      name: "Copy Link",
      icon: "📋",
      onClick: () => {
        navigator.clipboard.writeText(shareUrl)
        alert("Link copied to clipboard!")
        setIsOpen(false)
      },
    },
  ]

return (
    <>
      <Button
        onClick={() => setIsOpen(!isOpen)}
        variant="outline"
        size="icon"
        className="fixed bottom-6 right-6 z-30 rounded-full shadow-lg hover:shadow-xl transition-shadow bg-white border-slate-200 hover:bg-slate-50"
        title="Share this page"
      >
        <Share2 className="h-5 w-5 text-slate-700" />
      </Button>

{isOpen && (
        <div className="fixed bottom-20 right-6 z-30 bg-white rounded-lg shadow-xl p-4 w-48 border border-slate-200">
          <div className="flex justify-between items-center mb-4">
            <h3 className="font-semibold text-slate-800">Share</h3>
            <button onClick={() => setIsOpen(false)} className="text-slate-500 hover:text-slate-700">
              <X className="h-4 w-4" />
            </button>
          </div>

<div className="space-y-2">
            {shareLinks.map((link) => (
              <button
                key={link.name}
                onClick={() => {
                  if (link.onClick) {
                    link.onClick()
                  } else {
                    window.open(link.url, "_blank", "width=600,height=400")
                    setIsOpen(false)
                  }
                }}
                className="w-full flex items-center gap-3 px-4 py-2 rounded-lg hover:bg-slate-100 transition-colors text-slate-700 hover:text-slate-900"
              >
                <span className="text-xl">{link.icon}</span>
                <span className="text-sm font-medium">{link.name}</span>
              </button>
            ))}
          </div>
        </div>
      )}
    </>
  )
}
[V0_FILE]typescript:file="app/api/chat/route.ts" isMerged="true"
import { Anthropic } from "@anthropic-ai/sdk"

const client = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
})

const EDAS_KNOWLEDGE = `You are Tiana, the knowledgeable customer service assistant for eDAS Access - a smart estate and residential access management solution.

About eDAS Access:
- All-in-one residential access management for gated communities and estates
- Generate visitor access codes and QR passes
- Estate security features and incident reporting
- Book amenities and event spaces
- Available as mobile app (iOS/Android)
- Trusted across Africa, West Indies, Jamaica, Trinidad & Tobago, Barbados, and more
- 24/7 customer support

Key Features:
1. Visitor Access Code Generation - Create secure codes for visitors instantly
2. Security Reporting - Quick incident reporting system for safety issues
3. Amenity Booking - Reserve facilities and event spaces seamlessly
4. Estate Management - Dashboard for property managers
5. Mobile App Interface - iOS and Android applications
6. Real-time Notifications - Stay updated on estate activities

Help customers with:
- How to generate visitor codes
- Security features and reporting
- Booking amenities
- App installation and features
- Account management
- General platform questions

When you encounter questions about:
- Custom enterprise solutions
- Bulk estate licensing
- Complex integrations
- Partnership opportunities
- Pricing for large properties
- Technical support beyond basic troubleshooting
Reply that this needs attention from our sales team and trigger an escalation.

Always be friendly, helpful, and clear. If unsure, suggest escalation to the sales team.`

export async function POST(request: Request) {
  try {
    if (!process.env.ANTHROPIC_API_KEY) {
      return Response.json(
        { error: "Anthropic API key not configured" },
        { status: 500 }
      )
    }

const { message, conversationHistory = [] } = await request.json()

const messages = conversationHistory.map((msg: any) => ({
      role: msg.sender === "user" ? "user" : "assistant",
      content: msg.text,
    }))

messages.push({
      role: "user",
      content: message,
    })

const response = await client.messages.create({
      model: "claude-3-5-sonnet-20241022",
      max_tokens: 500,
      system: EDAS_KNOWLEDGE,
      messages: messages,
    })

const assistantMessage = response.content[0].type === "text" ? response.content[0].text : ""

const needsEscalation =
      assistantMessage.toLowerCase().includes("sales team") ||
      assistantMessage.toLowerCase().includes("escalat") ||
      assistantMessage.toLowerCase().includes("connect with")

return Response.json({
      response: assistantMessage,
      needsEscalation,
    })
  } catch (error) {
    console.error("Chat API error:", error)
    return Response.json({ error: "Failed to process message" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/escalate/route.ts" isMerged="true"
import { Resend } from "resend"

const resend = new Resend(process.env.RESEND_API_KEY)

export async function POST(request: Request) {
  try {
    if (!process.env.RESEND_API_KEY) {
      return Response.json(
        { error: "Email service not configured" },
        { status: 500 }
      )
    }

const { name, email, phone, issue, context } = await request.json()

const conversationSummary = context
      .slice(-5)
      .map((msg: any) => `${msg.sender}: ${msg.text}`)
      .join("\n")

const salesEmail = process.env.SALES_EMAIL || "sales@edasaccess.com"

await resend.emails.send({
      from: "support@edasaccess.com",
      to: salesEmail,
      subject: `New Inquiry from ${name} - eDAS Access`,
      html: `
        <h2>New Customer Inquiry</h2>
        <p><strong>Name:</strong> ${name}</p>
        <p><strong>Email:</strong> ${email}</p>
        <p><strong>Phone:</strong> ${phone}</p>
        <p><strong>Issue:</strong> ${issue}</p>
        
        <h3>Conversation Context:</h3>
        <pre>${conversationSummary}</pre>
        
        <p>Please follow up with this customer as soon as possible.</p>
      `,
    })

return Response.json({ success: true })
  } catch (error) {
    console.error("Escalation error:", error)
    return Response.json({ error: "Failed to submit inquiry" }, { status: 500 })
  }
}
[V0_FILE]plaintext:file=".env.local" isMerged="true"
# Anthropic API Key for Tiana AI Chatbot
ANTHROPIC_API_KEY=your_anthropic_api_key_here

# Resend API Key for Email Escalations
RESEND_API_KEY=your_resend_api_key_here

# Sales Email for Escalations
SALES_EMAIL=sales@edasaccess.com

# Optional: eDAS Access Configuration
NEXT_PUBLIC_APP_URL=https://edasaccess.com
[V0_FILE]png:file="public/images/access-granted-demo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1772640855020-iLS5QLRQTWar8hzlZNIsJDJgtoJEIQ.png" isMerged="true"
[V0_FILE]png:file="public/images/security-management-demo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Home%20Page%20Feature%20-%20Security%20Management.png-cIhpQIF4zaLUHYK7Bj6fLID4CHC5oF.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="app/page.tsx"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { QrCode, Calendar, Download, AlertTriangle } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import Script from "next/script"

export default function HomePage() {
  return (
    <>
      <Script id="register-sw" strategy="afterInteractive">
        {`
          if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
              navigator.serviceWorker.register('/sw.js')
                .then((registration) => {
                  console.log('Service Worker registered:', registration.scope);
                })
                .catch((error) => {
                  console.error('Service Worker registration failed:', error);
                });
            });
          }
        `}
      </Script>
      <div className="min-h-screen">
        {/* Hero Section */}
        <section className="relative bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900 text-white py-20 px-4">
          <div className="container mx-auto max-w-7xl">
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              <div className="space-y-8">
                <div className="space-y-4">
                  <h1 className="text-4xl md:text-6xl font-bold leading-tight">
                    Smart Estate Access at Your Fingertips
                  </h1>
                  <p className="text-xl text-slate-300 leading-relaxed">
                    eDAS Access is your all-in-one residential access management solution for gated communities and
                    estates.
                  </p>
                </div>

<div className="space-y-4">
                  <div className="flex items-center gap-3">
                    <div className="w-4 h-4 bg-blue-500 rounded-sm"></div>
                    <span className="text-lg">Generate Visitor Access Codes</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <div className="w-4 h-4 bg-purple-500 rounded-sm"></div>
                    <span className="text-lg">Secure Your Estate</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <div className="w-4 h-4 bg-red-500 rounded-sm"></div>
                    <span className="text-lg">Book Amenities Seamlessly</span>
                  </div>
                </div>

<div className="flex flex-col sm:flex-row gap-4">
                  <Link href="/download">
                    <Button
                      size="lg"
                      className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-8 py-3"
                    >
                      <Download className="mr-2 h-5 w-5" />
                      Download App
                    </Button>
                  </Link>
                  <Link href="/contact">
                    <Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3">
                      Get in Touch
                    </Button>
                  </Link>
                </div>
              </div>

{/* Quick Features Section */}
        <section className="py-16 px-4 bg-gray-50">
          <div className="container mx-auto max-w-6xl">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-bold text-slate-800 mb-4">Quick Features Highlights</h2>
            </div>

<div className="grid md:grid-cols-2 gap-8 items-center">
              <div className="space-y-6">
                <Card className="p-6 bg-gradient-to-r from-blue-500 to-purple-600 text-white border-0">
                  <CardContent className="flex items-center gap-4 p-0">
                    <QrCode className="h-8 w-8" />
                    <div>
                      <h3 className="text-xl font-semibold">Generate QR Access Pass</h3>
                      <p className="text-blue-100">Create secure visitor passes instantly</p>
                    </div>
                  </CardContent>
                </Card>

<Card className="p-6 bg-gradient-to-r from-purple-600 to-pink-600 text-white border-0">
                  <CardContent className="flex items-center gap-4 p-0">
                    <AlertTriangle className="h-8 w-8" />
                    <div>
                      <h3 className="text-xl font-semibold">Report Security Issues</h3>
                      <p className="text-purple-100">Quick incident reporting system</p>
                    </div>
                  </CardContent>
                </Card>

<Card className="p-6 bg-gradient-to-r from-pink-600 to-red-500 text-white border-0">
                  <CardContent className="flex items-center gap-4 p-0">
                    <Calendar className="h-8 w-8" />
                    <div>
                      <h3 className="text-xl font-semibold">Book Amenities & Events</h3>
                      <p className="text-pink-100">Reserve facilities with ease</p>
                    </div>
                  </CardContent>
                </Card>
              </div>

{/* Trusted Across Section */}
        <section className="py-16 px-4 bg-slate-800 text-white">
          <div className="container mx-auto max-w-6xl text-center">
            <h2 className="text-3xl md:text-4xl font-bold mb-6">Trusted Across Africa & the West Indies</h2>
            <p className="text-xl text-slate-300 mb-12 max-w-3xl mx-auto">
              eDAS Access is empowering modern estates and facilities management teams with smart tools across the
              African continent and the Caribbean region.
            </p>

<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
              {[
                { flag: "🇳🇬", country: "Nigeria" },
                { flag: "🇬🇭", country: "Ghana" },
                { flag: "🇨🇻", country: "Cape Verde" },
                { flag: "🇯🇲", country: "Jamaica" },
                { flag: "🇹🇹", country: "Trinidad & Tobago" },
                { flag: "🇧🇧", country: "Barbados" },
              ].map((location) => (
                <div key={location.country} className="text-center">
                  <div className="text-4xl mb-2">{location.flag}</div>
                  <p className="text-sm text-slate-300">{location.country}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

</section>

{/* Real-World Use Cases Section */}
        <section className="py-20 px-4 bg-white">
          <div className="container mx-auto max-w-6xl">
            <div className="text-center mb-16">
              <h2 className="text-4xl font-bold text-slate-800 mb-4">See eDAS Access in Action</h2>
              <p className="text-xl text-slate-600">Real-world implementation across estates and gated communities</p>
            </div>

<div className="grid md:grid-cols-2 gap-12 items-center">
              <div className="space-y-6">
                <div className="rounded-lg overflow-hidden shadow-xl">
                  <Image
                    src="/images/access-granted-demo.png"
                    alt="eDAS Access QR Code - Access Granted"
                    width={500}
                    height={600}
                    className="w-full h-auto"
                  />
                </div>
                <div className="bg-blue-50 p-6 rounded-lg border-l-4 border-blue-500">
                  <h3 className="text-xl font-bold text-slate-800 mb-2">Visitor Access Management</h3>
                  <p className="text-slate-600">Generate secure QR codes for visitors. Estate residents can instantly grant access without manual verification. Perfect for Riverside Estates and similar gated communities.</p>
                </div>
              </div>

<div className="space-y-6">
                <div className="rounded-lg overflow-hidden shadow-xl">
                  <Image
                    src="/images/security-management-demo.png"
                    alt="eDAS Access Security Management App"
                    width={500}
                    height={600}
                    className="w-full h-auto"
                  />
                </div>
                <div className="bg-slate-50 p-6 rounded-lg border-l-4 border-slate-600">
                  <h3 className="text-xl font-bold text-slate-800 mb-2">Integrated Security Features</h3>
                  <p className="text-slate-600">Report incidents instantly, access CCTV feeds, coordinate security patrols, and maintain real-time communication with your security team. All in one unified platform.</p>
                </div>
              </div>
            </div>
          </div>

{/* CTA Section */}
        <section className="py-16 px-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white">
          <div className="container mx-auto max-w-4xl text-center">
            <h2 className="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Estate Management?</h2>
            <p className="text-xl mb-8 text-blue-100">
              Join thousands of residents and facility managers who trust eDAS Access for their security and convenience
              needs.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link href="/download">
                <Button size="lg" className="bg-white text-purple-600 hover:bg-gray-100 px-8 py-3">
                  <Download className="mr-2 h-5 w-5" />
                  Download App
                </Button>
              </Link>
              <Link href="/contact">
                <Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3">
                  Get in Touch
                </Button>
              </Link>
            </div>
          </div>
        </section>
      </div>
    </>
  )
}</article></body></html>