[V0_FILE]typescriptreact:file="app/compatibility/loading.tsx" isFixed="true" isMerged="true" isEdit="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/api/contact/route.ts" isMerged="true" isEdit="true" import { NextResponse } from "next/server" export async function POST(request: Request) { try { const data = await request.json() // In a real application, you would: // 1. Validate the data // 2. Store it in a database or send it via email // 3. Possibly integrate with a service like SendGrid, Mailchimp, etc. console.log("Contact form submission:", data) // Simulate processing time await new Promise((resolve) => setTimeout(resolve, 1000)) return NextResponse.json({ success: true, message: "Message received" }) } catch (error) { console.error("Error processing contact form:", error) return NextResponse.json({ success: false, message: "Failed to process your message" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/step-card.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import type { ReactNode } from "react" interface StepCardProps { number: number title: string description: string icon: ReactNode delay?: number } export default function StepCard({ number, title, description, icon, delay = 0 }: StepCardProps) { return (

{number}

{icon}

{title}

{description}

) } [V0_FILE]typescriptreact:file="app/faq/loading.tsx" isFixed="true" isEdit="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/privacy-policy/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/terms-of-service/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/how-it-works/page.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import AnimatedSection from "@/components/animated-section" import StepCard from "@/components/step-card" import { Smartphone, QrCode, Check, ArrowRight } from "lucide-react" export default function HowItWorksPage() { const steps = [ { number: 1, title: "Choose Carrier", description: "Select your preferred mobile carrier that supports eSIM technology in Myanmar.", icon: , }, { number: 2, title: "Get LPA Code", description: "Receive a QR code or activation code from your carrier to set up your eSIM.", icon: , }, { number: 3, title: "Scan with Phone", description: "Scan the QR code with your phone's camera or enter the activation code manually.", icon: , }, ] return (

How eSIM Works Setting up an eSIM is quick and easy. Follow these simple steps to get started with your digital SIM card.

{/* Connecting line between steps */}

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

{index < steps.length - 1 && (

)}

))}

Detailed Activation Process

For iPhone Users

Go to Settings
Navigate to Settings > Cellular/Mobile Data
Add Cellular Plan
Tap "Add Cellular/Mobile Plan"
Scan QR Code
Scan the QR code provided by your carrier
Follow Instructions
Follow the on-screen instructions to complete setup
Set Preferences
Select your default line for calls, messages, and data

For Android Users

Access SIM Settings
Go to Settings > Connections > SIM Manager
Add eSIM
Tap "Add mobile plan" or "+ Add eSIM"
Scan QR Code
Select "Scan carrier QR code"
Scan and Confirm
Scan the QR code provided by your carrier
Complete Setup
Follow the on-screen instructions to complete setup
Set Preferences
Set your preferences for calls, messages, and data

Important Notes

Make sure your device is connected to Wi-Fi or has mobile data enabled during the activation process.
If you encounter any issues, contact your carrier's customer support for assistance.
Some older devices may require a restart after eSIM activation.
You can store multiple eSIM profiles but can only use one at a time unless your device supports Dual SIM Dual Standby (DSDS).

) } [V0_FILE]typescriptreact:file="app/compatibility/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { Input } from "@/components/ui/input" import AnimatedSection from "@/components/animated-section" import DeviceChecker from "@/components/device-checker" import { Search, Smartphone } from "lucide-react" export default function CompatibilityPage() { const [searchTerm, setSearchTerm] = useState("") const deviceBrands = [ { name: "Apple", devices: [ "iPhone 15 Pro Max", "iPhone 15 Pro", "iPhone 15 Plus", "iPhone 15", "iPhone 14 Pro Max", "iPhone 14 Pro", "iPhone 14 Plus", "iPhone 14", "iPhone 13 Pro Max", "iPhone 13 Pro", "iPhone 13", "iPhone 13 mini", "iPhone 12 Pro Max", "iPhone 12 Pro", "iPhone 12", "iPhone 12 mini", "iPhone SE (2nd generation)", "iPhone 11 Pro Max", "iPhone 11 Pro", "iPhone 11", "iPhone XS Max", "iPhone XS", "iPhone XR", "iPad Pro (11-inch) (3rd generation)", "iPad Pro (12.9-inch) (5th generation)", "iPad Air (4th generation)", "iPad (9th generation)", ], }, { name: "Samsung", devices: [ "Galaxy S23 Ultra", "Galaxy S23+", "Galaxy S23", "Galaxy S22 Ultra", "Galaxy S22+", "Galaxy S22", "Galaxy S21 Ultra 5G", "Galaxy S21+ 5G", "Galaxy S21 5G", "Galaxy S20 Ultra 5G", "Galaxy S20+ 5G", "Galaxy S20 5G", "Galaxy Note 20 Ultra 5G", "Galaxy Note 20 5G", "Galaxy Z Fold4", "Galaxy Z Fold3 5G", "Galaxy Z Flip4", "Galaxy Z Flip3 5G", "Galaxy A53 5G", "Galaxy A33 5G", ], }, { name: "Google", devices: [ "Pixel 7 Pro", "Pixel 7", "Pixel 6 Pro", "Pixel 6", "Pixel 5", "Pixel 4a (5G)", "Pixel 4a", "Pixel 4 XL", "Pixel 4", ], }, { name: "Huawei", devices: ["P40 Pro+", "P40 Pro", "P40", "Mate 40 Pro", "Mate 30 Pro", "Mate 30", "P30 Pro"], }, ] const filteredBrands = deviceBrands .map((brand) => ({ ...brand, devices: brand.devices.filter((device) => device.toLowerCase().includes(searchTerm.toLowerCase())), })) .filter((brand) => brand.devices.length > 0) return (

Device Compatibility Check if your device supports eSIM technology. Most modern smartphones and tablets are compatible.

setSearchTerm(e.target.value)} />

{filteredBrands.map((brand) => (

{brand.name}

{brand.devices.map((device) => ( {device} ))}

))} {filteredBrands.length === 0 && (

No devices found

No devices found matching "{searchTerm}". Try a different search term or check our compatibility checker above.

)}

eSIM Requirements

Device Requirements

• Compatible smartphone or tablet with eSIM support
• Device must be unlocked or carrier-free
• Latest operating system recommended (iOS 12.1+ or Android 10+)
• Internet connection for initial setup

Carrier Requirements

• Subscription with an eSIM-supporting carrier
• QR code or activation code from your carrier
• Valid identification for registration (as per carrier requirements)
• May require in-person activation at carrier store (varies by carrier)

) } [V0_FILE]typescriptreact:file="components/testimonial-section.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { useLanguage } from "@/contexts/language-context" import { LocalizedText } from "@/components/ui/localized-text" import { Star } from "lucide-react" export default function TestimonialSection() { const { t } = useLanguage() const testimonials = [ { name: t("Aung Kyaw", "အောင်ကျော်"), role: t("Business Traveler", "စီးပွားရေးခရီးသည်"), content: t( "eSIM has completely changed how I stay connected during my international business trips. No more hunting for local SIM cards at every destination!", "eSIM သည် နိုင်ငံတကာ စီးပွားရေးခရီးစဉ်များအတွင်း ကျွန်ုပ် ဆက်သွယ်နေပုံကို လုံးဝပြောင်းလဲပစ်လိုက်ပါပြီ။ ခရီးစဉ်တိုင်းတွင် ပြည်တွင်း SIM ကဒ်များကို ရှာဖွေနေစရာ မလိုတော့ပါ။", ), rating: 5, image: "/placeholder.svg?height=80&width=80", }, { name: t("Su Myat", "စုမြတ်"), role: t("Tech Enthusiast", "နည်းပညာဝါသနာရှင်"), content: t( "I love how easy it is to switch between different carriers on my phone. The activation process was simple and took less than 5 minutes!", "ကျွန်မဖုန်းပေါ်တွင် မတူညီသော ဝန်ဆောင်မှုပေးသူများကြား ပြောင်းလဲရန် မည်မျှလွယ်ကူသည်ကို ကျွန်မ နှစ်သက်ပါသည်။ အသုံးပြုခွင့်ရရှိရန် လုပ်ငန်းစဉ်သည် ရိုးရှင်းပြီး ၅ မိနစ်ထက် မကြာပါ။", ), rating: 5, image: "/placeholder.svg?height=80&width=80", }, { name: t("Tun Lin Aung", "ထွန်းလင်းအောင်"), role: t("Digital Nomad", "ဒီဂျစ်တယ်လှည့်လည်သူ"), content: t( "As someone who works remotely while traveling, having an eSIM has been a game-changer. I can get connected immediately upon landing in a new country.", "ခရီးသွားရင်း အဝေးမှ အလုပ်လုပ်သူတစ်ဦးအနေဖြင့် eSIM ရှိခြင်းသည် ဂိမ်းပြောင်းလဲစေသူတစ်ဦး ဖြစ်ခဲ့ပါသည်။ နိုင်ငံအသစ်တစ်ခုသို့ ဆင်းသက်သည်နှင့် ချက်ချင်း ချိတ်ဆက်နိုင်ပါသည်။", ), rating: 4, image: "/placeholder.svg?height=80&width=80", }, ] return (

What Our Users Say } mm={ <> ကျွန်ုပ်တို့၏ အသုံးပြုသူများ ပြောကြားချက် } />

{testimonials.map((testimonial, index) => ( {/* Quote mark decoration */}

{testimonial.name}

{testimonial.role}

{[...Array(5)].map((_, i) => ( ))}

{testimonial.content}

{/* Decorative element */}

))}

) } [V0_FILE]typescriptreact:file="components/language-toggle.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Globe } from "lucide-react" import { useLanguage } from "@/contexts/language-context" export default function LanguageToggle() { const { language, setLanguage } = useLanguage() const toggleLanguage = () => { setLanguage(language === "en" ? "mm" : "en") } return ( ) } [V0_FILE]typescriptreact:file="components/feature-section.tsx" isEdit="true" isMerged="true" "use client" import { motion, useInView } from "framer-motion" import { Smartphone, Zap, Shield, Globe, RefreshCw, Wifi } from "lucide-react" import { useLanguage } from "@/contexts/language-context" import { LocalizedText } from "@/components/ui/localized-text" import { useRef } from "react" export default function FeatureSection() { const { t } = useLanguage() const sectionRef = useRef(null) const isInView = useInView(sectionRef, { once: true, margin: "-100px 0px" }) const features = [ { icon: , title: t("Multiple Profiles", "ပရိုဖိုင်အများအပြား"), description: t( "Store and switch between multiple carrier profiles on a single device.", "စက်တစ်ခုတည်းတွင် ဝန်ဆောင်မှုပေးသူ ပရိုဖိုင်အများအပြားကို သိမ်းဆည်းပြီး ပြောင်းလဲအသုံးပြုနိုင်သည်။", ), }, { icon: , title: t("Instant Activation", "ချက်ချင်းအသုံးပြုနိုင်"), description: t( "Activate your mobile plan instantly by scanning a QR code.", "QR ကုဒ်ကို စကင်ဖတ်ခြင်းဖြင့် သင့်မိုဘိုင်းအစီအစဉ်ကို ချက်ချင်းအသုံးပြုနိုင်သည်။", ), }, { icon: , title: t("Enhanced Security", "လုံခြုံမှုပိုမိုကောင်းမွန်"), description: t( "eSIMs cannot be physically removed or stolen, providing better security.", "eSIM များကို ရုပ်ပိုင်းဆိုင်ရာအရ ဖယ်ရှားခြင်း သို့မဟုတ် ခိုးယူခြင်း မပြုလုပ်နိုင်သဖြင့် ပိုမိုလုံခြုံမှုရှိသည်။", ), }, { icon: , title: t("Global Compatibility", "ကမ္ဘာလုံးဆိုင်ရာ သဟဇာတဖြစ်မှု"), description: t( "Use your eSIM with carriers worldwide for seamless international connectivity.", "ချောမွေ့သော နိုင်ငံတကာ ချိတ်ဆက်မှုအတွက် သင့် eSIM ကို ကမ္ဘာတစ်ဝှမ်းရှိ ဝန်ဆောင်မှုပေးသူများနှင့် အသုံးပြုပါ။", ), }, { icon: , title: t("Easy Switching", "လွယ်ကူစွာ ပြောင်းလဲနိုင်"), description: t( "Switch between different mobile plans without changing physical SIM cards.", "ရုပ်ပိုင်းဆိုင်ရာ SIM ကဒ်များ ပြောင်းလဲစရာမလိုဘဲ မတူညီသော မိုဘိုင်းအစီအစဉ်များကြား ပြောင်းလဲနိုင်သည်။", ), }, { icon: , title: t("Remote Provisioning", "အဝေးမှ ပေးအပ်ခြင်း"), description: t( "Update your mobile plan remotely without visiting a physical store.", "ရုပ်ပိုင်းဆိုင်ရာ ဆိုင်သို့ သွားရောက်စရာမလိုဘဲ သင့်မိုဘိုင်းအစီအစဉ်ကို အဝေးမှ အပ်ဒိတ်လုပ်နိုင်သည်။", ), }, ] return (

{/* Background elements */}

{/* Animated grid pattern */}

{Array.from({ length: 12 }).map((_, colIndex) => (

))}

{Array.from({ length: 12 }).map((_, rowIndex) => (

))}

{/* Decorative elements */}

Why Choose eSIM Technology? } mm={ <> ဘာကြောင့် eSIM နည်းပညာကို ရွေးချယ်သင့်သလဲ? } />

{features.map((feature, index) => ( {/* Card content */}

{feature.icon} {/* Animated pulse */}

{feature.title}

{feature.description}

{/* Bottom glow effect */}

{/* Background pattern */}

{Array.from({ length: 4 }).map((_, colIndex) => (

))}

{Array.from({ length: 4 }).map((_, rowIndex) => (

))}

) } [V0_FILE]typescriptreact:file="components/device-checker.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { Button } from "@/components/ui/button" import { CheckCircle, XCircle, Smartphone, Search, Loader2 } from "lucide-react" import { useLanguage } from "@/contexts/language-context" import { LocalizedText } from "@/components/ui/localized-text" export default function DeviceChecker() { const [isCompatible, setIsCompatible] = useState(null) const [deviceInfo, setDeviceInfo] = useState("") const [isChecking, setIsChecking] = useState(false) const { t } = useLanguage() useEffect(() => { // Get basic device info const userAgent = navigator.userAgent let deviceName = "your device" if (/iPhone/.test(userAgent)) { deviceName = "iPhone" } else if (/iPad/.test(userAgent)) { deviceName = "iPad" } else if (/Android/.test(userAgent)) { deviceName = "Android device" } else if (/Windows/.test(userAgent)) { deviceName = "Windows device" } else if (/Mac/.test(userAgent)) { deviceName = "Mac" } setDeviceInfo(deviceName) }, []) const checkCompatibility = () => { setIsChecking(true) // Simulate checking process setTimeout(() => { // This is a simplified check - in a real app, you'd have a more comprehensive database const userAgent = navigator.userAgent.toLowerCase() // Most iPhones from XR/XS and newer support eSIM const isNeweriPhone = /iphone/.test(userAgent) && (/iphone1[1-9]/.test(userAgent) || /iphone2[0-9]/.test(userAgent)) // Most flagship Android phones from 2019 and newer support eSIM const isNewerAndroid = /android/.test(userAgent) && (/android 9/.test(userAgent) || /android 1[0-9]/.test(userAgent)) setIsCompatible(isNeweriPhone || isNewerAndroid) setIsChecking(false) }, 2000) } return (

{/* Background elements */}

{/* Grid pattern */}

{Array.from({ length: 12 }).map((_, colIndex) => (

))}

{Array.from({ length: 12 }).map((_, rowIndex) => (

))}

{/* Decorative elements */}

{/* Animated pulse */}

{isCompatible === null ? ( {/* Decorative dots */}

{[0, 1, 2].map((i) => ( ))}

) : ( {/* Background pattern */}

{Array.from({ length: 8 }).map((_, colIndex) => (

))}

{Array.from({ length: 8 }).map((_, rowIndex) => (

))}

{isCompatible ? (

{/* Success particles */} {Array.from({ length: 8 }).map((_, i) => ( ))}

) : (

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

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import LoadingScreen from "@/components/loading-screen" import HeroSection from "@/components/hero-section" import FeatureSection from "@/components/feature-section" import TestimonialSection from "@/components/testimonial-section" import CTASection from "@/components/cta-section" import AnimatedSection from "@/components/animated-section" import { motion } from "framer-motion" import { LocalizedText } from "@/components/ui/localized-text" import { useLanguage } from "@/contexts/language-context" import { Smartphone, Zap, Shield, Globe } from "lucide-react" export default function Home() { const [loading, setLoading] = useState(true) const { t } = useLanguage() useEffect(() => { // Simulate loading time const timer = setTimeout(() => { setLoading(false) }, 3000) return () => clearTimeout(timer) }, []) const carriers = [ { name: "MPT", logo: "/placeholder.svg?height=80&width=80" }, { name: "ATOM", logo: "/placeholder.svg?height=80&width=80" }, { name: "Ooredoo", logo: "/placeholder.svg?height=80&width=80" }, { name: "Mytel", logo: "/placeholder.svg?height=80&width=80" }, ] if (loading) { return setLoading(false)} /> } return ( <> {/* Skip to content link for accessibility */}

What is an eSIM? } mm={ <> eSIM ဆိုတာ ဘာလဲ? } />

{[ { number: "01", title: t("Digital SIM Card", "ဒီဂျစ်တယ် SIM ကဒ်"), description: t( "An eSIM is a digital SIM that allows you to activate a cellular plan without using a physical SIM card.", "eSIM သည် ဒီဂျစ်တယ် SIM ဖြစ်ပြီး ရုပ်ပိုင်းဆိုင်ရာ SIM ကဒ် မသုံးဘဲ မိုဘိုင်းဝန်ဆောင်မှုကို အသုံးပြုနိုင်စေသည်။", ), icon: , }, { number: "02", title: t("Built Into Device", "စက်ထဲတွင် ထည့်သွင်းထားသည်"), description: t( "eSIMs are built directly into your device, saving space and allowing for multiple profiles.", "eSIM များကို သင့်စက်ထဲတွင် တိုက်ရိုက်ထည့်သွင်းထားသဖြင့် နေရာကို ချွေတာပြီး ပရိုဖိုင်အများအပြားကို ခွင့်ပြုပါသည်။", ), icon: , }, { number: "03", title: t("Quick Activation", "အမြန်အသုံးပြုနိုင်"), description: t( "Activate your eSIM instantly by scanning a QR code - no physical SIM card needed.", "QR ကုဒ်ကို စကင်ဖတ်ခြင်းဖြင့် သင့် eSIM ကို ချက်ချင်းအသုံးပြုနိုင်သည် - ရုပ်ပိုင်းဆိုင်ရာ SIM ကဒ် မလိုအပ်ပါ။", ), icon: , }, ].map((item, index) => (

{item.icon}

{item.number}

{item.title}

{item.description}

))}

Supported by Local Carriers } mm={ <> ပြည်တွင်းဝန်ဆောင်မှုပေးသူများမှ ထောက်ပံ့ထားသည် } />

{carriers.map((carrier, index) => (

{carrier.name}

))}

) } [V0_FILE]typescriptreact:file="app/about/page.tsx" isEdit="true" isMerged="true" "use client" import AnimatedSection from "@/components/animated-section" import { motion } from "framer-motion" import { CheckCircle, Users, Target, Award, TrendingUp, Globe } from "lucide-react" import { LocalizedText } from "@/components/ui/localized-text" import { useLanguage } from "@/contexts/language-context" export default function AboutPage() { const { t } = useLanguage() const benefits = [ { title: t("Space Saving", "နေရာချွေတာခြင်း"), traditional: t("Physical card takes up space", "ရုပ်ပိုင်းဆိုင်ရာကဒ်သည် နေရာယူသည်"), esim: t("Built into your device's hardware", "သင့်စက်ပစ္စည်း၏ ဟာ့ဒ်ဝဲထဲတွင် ထည့်သွင်းထားသည်"), }, { title: t("Activation", "အသုံးပြုခွင့်ရရှိခြင်း"), traditional: t("Visit store, wait for physical card", "ဆိုင်သို့သွားရောက်ပြီး ရုပ်ပိုင်းဆိုင်ရာကဒ်ကို စောင့်ဆိုင်းရသည်"), esim: t("Instant activation via QR code", "QR ကုဒ်မှတဆင့် ချက်ချင်းအသုံးပြုနိုင်"), }, { title: t("Multiple Profiles", "ပရိုဖိုင်အများအပြား"), traditional: t("Need to swap physical cards", "ရုပ်ပိုင်းဆိုင်ရာကဒ်များကို လဲလှယ်ရန် လိုအပ်သည်"), esim: t("Store multiple profiles on one device", "စက်တစ်ခုတည်းတွင် ပရိုဖိုင်အများအပြား သိမ်းဆည်းနိုင်"), }, { title: t("Durability", "ခံနိုင်ရည်ရှိမှု"), traditional: t("Can be damaged or lost", "ပျက်စီးနိုင် သို့မဟုတ် ပျောက်ဆုံးနိုင်"), esim: t("Cannot be physically damaged", "ရုပ်ပိုင်းဆိုင်ရာအရ ပျက်စီးနိုင်ခြင်း မရှိပါ"), }, { title: t("Eco-friendly", "သဘာဝပတ်ဝန်းကျင်နှင့် သဟဇာတဖြစ်မှု"), traditional: t("Plastic waste", "ပလတ်စတစ်စွန့်ပစ်ပစ္စည်း"), esim: t("No physical materials needed", "ရုပ်ပိုင်းဆိုင်ရာပစ္စည်းများ မလိုအပ်ပါ"), }, ] return ( <>

About eSIM Myanmar } mm={ <> eSIM Myanmar အကြောင်း } />

Our Vision & Mission } mm={ <> ကျွန်ုပ်တို့၏ မျှော်မှန်းချက်နှင့် ရည်မှန်းချက် } />

eSIM vs Traditional SIM } mm={ <> eSIM နှင့် ရိုးရိုး SIM နှိုင်းယှဉ်ချက် } />

eSIM

{benefits.map((benefit, index) => (

{benefit.title}

{benefit.traditional}

{benefit.esim}

))}

{/* Background decoration */}

Why Choose eSIM Myanmar? } mm={ <> ဘာကြောင့် eSIM Myanmar ကို ရွေးချယ်သင့်သလဲ? } />

{[ { icon: , title: t("Expert Knowledge", "ကျွမ်းကျင်သော အသိပညာ"), description: t( "Our team specializes in eSIM technology and stays current with the latest developments.", "ကျွန်ုပ်တို့အဖွဲ့သည် eSIM နည်းပညာတွင် အထူးပြုပြီး နောက်ဆုံးပေါ် ဖွံ့ဖြိုးတိုးတက်မှုများနှင့် အမြဲအညီဖြစ်အောင် ထားရှိပါသည်။", ), }, { icon: , title: t("Local Support", "ပြည်တွင်းအထောက်အပံ့"), description: t( "We provide information specific to the Myanmar market and local carriers.", "ကျွန်ုပ်တို့သည် မြန်မာဈေးကွက်နှင့် ပြည်တွင်းဝန်ဆောင်မှုပေးသူများအတွက် သီးသန့်အချက်အလက်များ ပေးအပ်ပါသည်။", ), }, { icon: , title: t("Comprehensive Resources", "ပြည့်စုံသော အရင်းအမြစ်များ"), description: t( "Access detailed guides, compatibility information, and troubleshooting tips.", "အသေးစိတ်လမ်းညွှန်ချက်များ၊ သဟဇာတဖြစ်မှုအချက်အလက်များနှင့် ပြဿနာဖြေရှင်းရေးအကြံပြုချက်များကို လက်လှမ်းမီပါ။", ), }, ].map((item, index) => (

{item.icon}

{item.title}

{item.description}

))}

) } [V0_FILE]typescriptreact:file="app/faq/page.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import AnimatedSection from "@/components/animated-section" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { Search, HelpCircle, Filter } from "lucide-react" import { useState } from "react" import { Input } from "@/components/ui/input" import { LocalizedText } from "@/components/ui/localized-text" import { useLanguage } from "@/contexts/language-context" import { Button } from "@/components/ui/button" export default function FAQPage() { const [searchTerm, setSearchTerm] = useState("") const [activeCategory, setActiveCategory] = useState("all") const { language } = useLanguage() const categories = [ { id: "all", name: language === "en" ? "All Questions" : "မေးခွန်းအားလုံး" }, { id: "basics", name: language === "en" ? "eSIM Basics" : "eSIM အခြေခံ" }, { id: "compatibility", name: language === "en" ? "Compatibility" : "သဟဇာတဖြစ်မှု" }, { id: "usage", name: language === "en" ? "Usage & Setup" : "အသုံးပြုမှုနှင့် ပြင်ဆင်မှု" }, { id: "carriers", name: language === "en" ? "Carriers" : "ဝန်ဆောင်မှုပေးသူများ" }, ] const faqs = [ { category: "basics", question: "What is an eSIM?", questionMM: "eSIM ဆိုတာ ဘာလဲ?", answer: "An eSIM (embedded SIM) is a digital SIM that allows you to activate a cellular plan from your carrier without having to use a physical SIM card.", answerMM: "eSIM (embedded SIM) ဆိုသည်မှာ ဖုန်းထဲတွင် ထည့်သွင်းထားသော digital SIM ဖြစ်ပြီး physical SIM ကဒ် မလိုဘဲ mobile ဝန်ဆောင်မှုကို အသုံးပြုနိုင်ပါသည်။", }, { category: "compatibility", question: "How do I know if my device supports eSIM?", questionMM: "ကျွန်တော့်/ကျွန်မ ဖုန်းက eSIM ကို ထောက်ပံ့ပါသလား?", answer: "Most modern smartphones and tablets support eSIM. You can check our compatibility page or your device's settings to see if eSIM is supported.", answerMM: "ခေတ်မီ smartphone နှင့် tablet အများစုသည် eSIM ကို ထောက်ပံ့ပါသည်။ သင့်စက်၏ settings တွင် စစ်ဆေးနိုင်ပါသည် သို့မဟုတ် ကျွန်ုပ်တို့၏ compatibility စာမျက်နှာတွင် ကြည့်ရှုနိုင်ပါသည်။", }, { category: "usage", question: "Can I use both physical SIM and eSIM at the same time?", questionMM: "Physical SIM နှင့် eSIM ကို တစ်ပြိုင်နက် သုံးလို့ရပါသလား?", answer: "Yes, most eSIM-compatible devices support Dual SIM Dual Standby (DSDS), allowing you to use both a physical SIM and an eSIM simultaneously.", answerMM: "ရပါသည်။ eSIM ထောက်ပံ့သော စက်အများစုသည် Dual SIM Dual Standby (DSDS) ကို ထောက်ပံ့သဖြင့် physical SIM နှင့် eSIM နှစ်ခုလုံးကို တစ်ပြိုင်နက် အသုံးပြုနိုင်ပါသည်။", }, { category: "carriers", question: "Which carriers in Myanmar support eSIM?", questionMM: "မြန်မာနိုင်ငံမှာ ဘယ် carriers တွေက eSIM ကို ထောက်ပံ့ပါသလဲ?", answer: "Currently, MPT, ATOM, Ooredoo, and Mytel support eSIM technology in Myanmar. Each carrier has different plans and activation processes.", answerMM: "လက်ရှိတွင် MPT, ATOM, Ooredoo နှင့် Mytel တို့သည် မြန်မာနိုင်ငံတွင် eSIM နည်းပညာကို ထောက်ပံ့ပါသည်။ ဝန်ဆောင်မှုပေးသူတစ်ခုချင်းစီတွင် မတူညီသော အစီအစဉ်များနှင့် activation လုပ်ငန်းစဉ်များ ရှိပါသည်။", }, { category: "usage", question: "Can I switch back to a physical SIM after using an eSIM?", questionMM: "eSIM သုံးပြီးနောက် physical SIM ကို ပြန်သုံးလို့ရပါသလား?", answer: "Yes, you can switch back to a physical SIM at any time. Your carrier can help transfer your service back to a physical SIM if needed.", answerMM: "ရပါသည်။ သင်သည် မည်သည့်အချိန်တွင်မဆို physical SIM သို့ ပြန်လည်ပြောင်းလဲနိုင်ပါသည်။ လိုအပ်ပါက သင့် carrier သည် သင့်ဝန်ဆောင်မှုကို physical SIM သို့ ပြန်လည်ပြောင်းရွှေ့ရန် ကူညီပေးနိုင်ပါသည်။", }, { category: "basics", question: "Is eSIM more secure than a physical SIM?", questionMM: "eSIM က physical SIM ထက် ပိုလုံခြုံပါသလား?", answer: "Yes, eSIMs are generally considered more secure than physical SIMs as they cannot be physically removed or stolen. They also use advanced encryption methods for data protection.", answerMM: "ဟုတ်ပါသည်။ eSIM များသည် ရုပ်ပိုင်းဆိုင်ရာအရ ဖယ်ရှားခြင်း သို့မဟုတ် ခိုးယူခြင်း မပြုလုပ်နိုင်သောကြောင့် physical SIM များထက် ပိုမိုလုံခြုံသည်ဟု ယူဆကြပါသည်။ ၎င်းတို့သည် ဒေတာကာကွယ်ရေးအတွက် အဆင့်မြင့် encryption နည်းလမ်းများကိုလည်း အသုံးပြုပါသည်။", }, { category: "usage", question: "How do I activate an eSIM?", questionMM: "eSIM ကို ဘယ်လိုအသုံးပြုရမလဲ?", answer: "To activate an eSIM, you'll need to scan a QR code provided by your carrier or enter an activation code manually. The exact steps vary by device, but generally involve going to your device's cellular or mobile data settings.", answerMM: "eSIM ကို အသုံးပြုရန်၊ သင့်ဝန်ဆောင်မှုပေးသူမှ ပေးထားသော QR ကုဒ်ကို စကင်ဖတ်ရန် သို့မဟုတ် activation ကုဒ်ကို လက်ဖြင့်ရိုက်ထည့်ရန် လိုအပ်ပါသည်။ တိကျသော အဆင့်များသည် စက်ပစ္စည်းအလိုက် ကွဲပြားသော်လည်း၊ ယေဘုယျအားဖြင့် သင့်စက်၏ cellular သို့မဟုတ် mobile data ဆက်တင်များသို့ သွားရောက်ခြင်း ပါဝင်ပါသည်။", }, { category: "carriers", question: "Are there any additional fees for using an eSIM?", questionMM: "eSIM သုံးရင် အပိုကုန်ကျစရိတ်တွေ ရှိပါသလား?", answer: "This depends on your carrier. Some carriers charge a one-time activation fee for eSIMs, while others provide them at no additional cost. The service plans themselves are typically the same price as those for physical SIMs.", answerMM: "ဤသည်မှာ သင့်ဝန်ဆောင်မှုပေးသူအပေါ် မူတည်ပါသည်။ အချို့ဝန်ဆောင်မှုပေးသူများသည် eSIM များအတွက် တစ်ကြိမ်တည်း activation ကြေးကို ကောက်ခံပြီး အခြားသူများသည် အပိုကုန်ကျစရိတ်မရှိဘဲ ပေးအပ်ပါသည်။ ဝန်ဆောင်မှုအစီအစဉ်များကိုယ်တိုင်သည် ယေဘုယျအားဖြင့် physical SIM များအတွက် ဈေးနှုန်းတူညီပါသည်။", }, ] const filteredFaqs = faqs.filter( (faq) => (activeCategory === "all" || faq.category === activeCategory) && (faq.question.toLowerCase().includes(searchTerm.toLowerCase()) || faq.questionMM.includes(searchTerm) || faq.answer.toLowerCase().includes(searchTerm.toLowerCase()) || faq.answerMM.includes(searchTerm)), ) return (

Frequently Asked Questions } mm={ <> မေးလေ့ရှိသော မေးခွန်းများ } />

{categories.map((category) => ( ))}

{filteredFaqs.length === 0 ? (

) : (

{filteredFaqs.map((faq, index) => (

{faq.question}

{faq.questionMM}

{faq.answer}

{faq.answerMM}

))}

)}

) } [V0_FILE]typescriptreact:file="components/cta-section.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { ArrowRight, Check } from "lucide-react" import Link from "next/link" import { LocalizedText } from "@/components/ui/localized-text" import { useLanguage } from "@/contexts/language-context" export default function CTASection() { const { t } = useLanguage() const benefits = [ t("No physical SIM card needed", "ရုပ်ပိုင်းဆိုင်ရာ SIM ကဒ် မလိုအပ်ပါ"), t("Instant activation via QR code", "QR ကုဒ်မှတဆင့် ချက်ချင်းအသုံးပြုနိုင်"), t("Store multiple profiles on one device", "စက်တစ်ခုတည်းတွင် ပရိုဖိုင်အများအပြား သိမ်းဆည်းနိုင်"), t("Enhanced security features", "အဆင့်မြှင့်တင်ထားသော လုံခြုံရေးအင်္ဂါရပ်များ"), ] return (

{/* Background decoration */}

Ready to Experience eSIM Technology? } mm={ <> eSIM နည်းပညာကို အသုံးပြုရန် အဆင်သင့်ဖြစ်ပြီလား? } /> {benefits.map((benefit, index) => ( ))}

{/* Decorative element */}

) } [V0_FILE]typescriptreact:file="components/animated-section.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useRef } from "react" import { motion, useInView } from "framer-motion" interface AnimatedSectionProps { children: React.ReactNode delay?: number className?: string } export default function AnimatedSection({ children, delay = 0, className = "" }: AnimatedSectionProps) { const ref = useRef(null) const isInView = useInView(ref, { once: true, margin: "-100px 0px" }) return ( {children} ) } [V0_FILE]typescriptreact:file="components/ui/localized-text.tsx" isEdit="true" isMerged="true" "use client" import type { ReactNode } from "react" import { useLanguage } from "@/contexts/language-context" interface LocalizedTextProps { en: ReactNode mm: ReactNode className?: string } export function LocalizedText({ en, mm, className = "" }: LocalizedTextProps) { const { language } = useLanguage() return {language === "en" ? en : {mm}} } [V0_FILE]typescriptreact:file="contexts/language-context.tsx" isEdit="true" isMerged="true" "use client" import { createContext, useContext, useState, useEffect, type ReactNode } from "react" type Language = "en" | "mm" interface LanguageContextType { language: Language setLanguage: (language: Language) => void t: (en: string, mm: string) => string } const LanguageContext = createContext(undefined) export function LanguageProvider({ children }: { children: ReactNode }) { const [language, setLanguage] = useState("en") // Load saved language preference from localStorage on client side useEffect(() => { try { const savedLanguage = localStorage.getItem("language") as Language if (savedLanguage && (savedLanguage === "en" || savedLanguage === "mm")) { setLanguage(savedLanguage) } } catch (error) { console.error("Error accessing localStorage:", error) } }, []) // Save language preference to localStorage when it changes useEffect(() => { try { localStorage.setItem("language", language) // Add language class to body for global styling document.body.classList.remove("lang-en", "lang-mm") document.body.classList.add(`lang-${language}`) // Set HTML lang attribute for accessibility document.documentElement.lang = language } catch (error) { console.error("Error setting localStorage:", error) } }, [language]) // Translation helper function const t = (en: string, mm: string) => { return language === "en" ? en : mm } return {children} } export function useLanguage() { const context = useContext(LanguageContext) if (context === undefined) { throw new Error("useLanguage must be used within a LanguageProvider") } return context } [V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import Link from "next/link" import { Facebook, Twitter, Instagram, Smartphone, Mail, MapPin, ExternalLink, ChevronRight } from "lucide-react" import { useLanguage } from "@/contexts/language-context" import { LocalizedText } from "@/components/ui/localized-text" import { useRef } from "react" import { useInView } from "framer-motion" export default function Footer() { const currentYear = new Date().getFullYear() const { t } = useLanguage() const footerRef = useRef(null) const isInView = useInView(footerRef, { once: true, margin: "-100px 0px" }) return ( ) } [V0_FILE]typescriptreact:file="components/loading-screen.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { useState, useEffect } from "react" import { useLanguage } from "@/contexts/language-context" interface LoadingScreenProps { onComplete?: () => void } export default function LoadingScreen({ onComplete }: LoadingScreenProps) { const [progress, setProgress] = useState(0) const { language } = useLanguage() const messages = { en: [ { main: "Initializing eSIM environment...", sub: "Loading digital profiles and network configurations", }, { main: "Processing carrier data...", sub: "Analyzing compatibility and connection settings", }, { main: "Establishing secure channels...", sub: "Setting up encrypted communication protocols", }, { main: "Almost ready...", sub: "Preparing your eSIM experience", }, ], mm: [ { main: "eSIM ပတ်ဝန်းကျင်ကို စတင်နေသည်...", sub: "ဒီဂျစ်တယ်ပရိုဖိုင်များနှင့် ကွန်ရက်ပြင်ဆင်မှုများကို ဖွင့်နေသည်", }, { main: "ဝန်ဆောင်မှုပေးသူ ဒေတာကို ဆောင်ရွက်နေသည်...", sub: "သဟဇာတဖြစ်မှုနှင့် ချိတ်ဆက်မှုဆက်တင်များကို စိစစ်နေသည်", }, { main: "လုံခြုံသော လမ်းကြောင်းများ တည်ဆောက်နေသည်...", sub: "လျှို့ဝှက်စာဖြင့် ဆက်သွယ်ရေးပရိုတိုကောများ ပြင်ဆင်နေသည်", }, { main: "လက်စသတ်ခါနီးပြီ...", sub: "သင့် eSIM အတွေ့အကြုံကို ပြင်ဆင်နေသည်", }, ], } const [messageIndex, setMessageIndex] = useState(0) useEffect(() => { const interval = setInterval(() => { setProgress((prev) => { if (prev >= 100) { clearInterval(interval) onComplete && onComplete() return 100 } // Update messages based on progress if (prev === 25) { setMessageIndex(1) } else if (prev === 50) { setMessageIndex(2) } else if (prev === 75) { setMessageIndex(3) } return prev + 1 }) }, 30) // Faster loading return () => clearInterval(interval) }, [onComplete]) const currentMessage = language === "en" ? messages.en[messageIndex] : messages.mm[messageIndex] return (

{/* Background animation */}

{/* Grid pattern */}

{Array.from({ length: 12 }).map((_, colIndex) => (

))}

{Array.from({ length: 12 }).map((_, rowIndex) => (

))}

{/* Floating particles */} {Array.from({ length: 20 }).map((_, i) => ( ))}

e SIM Myanmar

eSIM {/* Animated pulse rings */} {[1, 2, 3].map((i) => ( ))} {/* Digital particles */} {Array.from({ length: 8 }).map((_, i) => ( ))}

{currentMessage.main}

{currentMessage.sub}

{/* Progress bar */}

{progress}% {language === "en" ? "Complete" : "ပြီးစီး"} {language === "en" ? "Please wait..." : "ခဏစောင့်ပါ..."}

{/* Animated dots */}

{[0, 1, 2].map((i) => ( ))}

) } [V0_FILE]typescriptreact:file="app/privacy-policy/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import AnimatedSection from "@/components/animated-section" import { LocalizedText } from "@/components/ui/localized-text" import { useLanguage } from "@/contexts/language-context" import { Shield, Lock, FileText, Eye, Users, Clock, AlertTriangle } from "lucide-react" export default function PrivacyPolicyPage() { const { t } = useLanguage() const sections = [ { icon: , title: t("Information We Collect", "ကျွန်ုပ်တို့ စုဆောင်းသော အချက်အလက်များ"), content: t( "We collect personal information that you voluntarily provide to us when you use our services, such as your name, phone number, email address, and device information. We also collect information about how you use our services, including your browsing history, IP address, and device identifiers.", "သင် ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို အသုံးပြုသောအခါ သင်၏အမည်၊ ဖုန်းနံပါတ်၊ အီးမေးလ်လိပ်စာနှင့် စက်ပစ္စည်းအချက်အလက်များကဲ့သို့ သင်မိမိဆန္ဒအလျောက် ပေးအပ်သော ကိုယ်ရေးအချက်အလက်များကို ကျွန်ုပ်တို့ စုဆောင်းပါသည်။ သင်၏ ရှာဖွေမှုမှတ်တမ်း၊ IP လိပ်စာနှင့် စက်ပစ္စည်း အိုင်ဒီများအပါအဝင် သင် ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို မည်သို့အသုံးပြုသည်ဆိုသည့် အချက်အလက်များကိုလည်း ကျွန်ုပ်တို့ စုဆောင်းပါသည်။", ), }, { icon: , title: t("How We Use Your Information", "သင့်အချက်အလက်များကို ကျွန်ုပ်တို့ မည်သို့အသုံးပြုသည်"), content: t( "We use your information to provide, maintain, and improve our services, to communicate with you, to process your transactions, and to comply with legal obligations. We may also use your information to personalize your experience, to develop new features, and to protect our rights and interests.", "ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို ပေးအပ်ရန်၊ ထိန်းသိမ်းရန်နှင့် တိုးတက်စေရန်၊ သင်နှင့် ဆက်သွယ်ရန်၊ သင်၏ငွေပေးချေမှုများကို ဆောင်ရွက်ရန်နှင့် ဥပဒေဆိုင်ရာ တာဝန်ဝတ္တရားများကို လိုက်နာရန် သင့်အချက်အလက်များကို ကျွန်ုပ်တို့ အသုံးပြုပါသည်။ သင်၏အတွေ့အကြုံကို ကိုယ်ပိုင်ပြုလုပ်ရန်၊ အင်္ဂါရပ်အသစ်များ ဖွံ့ဖြိုးစေရန်နှင့် ကျွန်ုပ်တို့၏ အခွင့်အရေးများနှင့် အကျိုးစီးပွားများကို ကာကွယ်ရန်အတွက်လည်း သင့်အချက်အလက်များကို ကျွန်ုပ်တို့ အသုံးပြုနိုင်ပါသည်။", ), }, { icon: , title: t("Information Sharing", "အချက်အလက်မျှဝေခြင်း"), content: t( "We may share your information with third-party service providers who perform services on our behalf, such as payment processing, data analysis, and customer service. We may also share your information with our business partners, with your consent, or as required by law. We do not sell your personal information to third parties.", "ငွေပေးချေမှုဆောင်ရွက်ခြင်း၊ ဒေတာခွဲခြမ်းစိတ်ဖြာခြင်းနှင့် ဖောက်သည်ဝန်ဆောင်မှုကဲ့သို့ ကျွန်ုပ်တို့ကိုယ်စား ဝန်ဆောင်မှုများ ဆောင်ရွက်ပေးသော တတိယပါတီ ဝန်ဆောင်မှုပေးသူများနှင့် သင့်အချက်အလက်များကို ကျွန်ုပ်တို့ မျှဝေနိုင်ပါသည်။ သင်၏သဘောတူညီချက်ဖြင့် သို့မဟုတ် ဥပဒေအရ လိုအပ်သည့်အတိုင်း ကျွန်ုပ်တို့၏ စီးပွားရေးမိတ်ဖက်များနှင့်လည်း သင့်အချက်အလက်များကို ကျွန်ုပ်တို့ မျှဝေနိုင်ပါသည်။ သင်၏ကိုယ်ရေးအချက်အလက်များကို တတိယပါတီများထံ ကျွန်ုပ်တို့ ရောင်းချခြင်း မရှိပါ။", ), }, { icon: , title: t("Cookies and Tracking Technologies", "ကွတ်ကီးများနှင့် ခြေရာခံနည်းပညာများ"), content: t( "We use cookies and similar tracking technologies to collect information about your browsing activities and to remember your preferences. You can control cookies through your browser settings, but disabling cookies may limit your ability to use some features of our services.", "သင်၏ရှာဖွေမှုလုပ်ဆောင်ချက်များအကြောင်း အချက်အလက်များကို စုဆောင်းရန်နှင့် သင်၏ဦးစားပေးမှုများကို မှတ်ထားရန် ကျွန်ုပ်တို့သည် ကွတ်ကီးများနှင့် အလားတူ ခြေရာခံနည်းပညာများကို အသုံးပြုပါသည်။ သင်၏ဘရောက်ဇာဆက်တင်များမှတဆင့် ကွတ်ကီးများကို ထိန်းချုပ်နိုင်သော်လည်း ကွတ်ကီးများကို ပိတ်ခြင်းသည် ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများ၏ အင်္ဂါရပ်အချို့ကို အသုံးပြုနိုင်မှုကို ကန့်သတ်နိုင်ပါသည်။", ), }, { icon: , title: t("Children's Privacy", "ကလေးများ၏ ကိုယ်ရေးလုံခြုံမှု"), content: t( "Our services are not intended for children under the age of 13, and we do not knowingly collect personal information from children under 13. If we learn that we have collected personal information from a child under 13, we will take steps to delete that information as soon as possible.", "ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများသည် အသက် ၁၃ နှစ်အောက် ကလေးများအတွက် ရည်ရွယ်ထားခြင်း မဟုတ်ပါ၊ ထို့ပြင် အသက် ၁၃ နှစ်အောက် ကလေးများထံမှ ကိုယ်ရေးအချက်အလက်များကို သိလျက်နှင့် ကျွန်ုပ်တို့ စုဆောင်းခြင်း မရှိပါ။ အသက် ၁၃ နှစ်အောက် ကလေးတစ်ဦးထံမှ ကိုယ်ရေးအချက်အလက်များကို ကျွန်ုပ်တို့ စုဆောင်းထားကြောင်း သိရှိပါက ထိုအချက်အလက်များကို တတ်နိုင်သမျှ မြန်မြန် ဖျက်ပစ်ရန် ကျွန်ုပ်တို့ အဆင့်များ လုပ်ဆောင်ပါမည်။", ), }, { icon: , title: t("Data Retention", "ဒေတာထိန်းသိမ်းခြင်း"), content: t( "We retain your personal information for as long as necessary to fulfill the purposes for which we collected it, including to satisfy legal, accounting, or reporting requirements. When we no longer need your personal information, we will securely delete or anonymize it.", "ဥပဒေရေးရာ၊ စာရင်းကိုင် သို့မဟုတ် အစီရင်ခံခြင်းဆိုင်ရာ လိုအပ်ချက်များကို ပြည့်မီစေရန်အပါအဝင် ကျွန်ုပ်တို့ စုဆောင်းခဲ့သည့် ရည်ရွယ်ချက်များကို ဖြည့်ဆည်းရန် လိုအပ်သမျှကာလပတ်လုံး သင်၏ကိုယ်ရေးအချက်အလက်များကို ကျွန်ုပ်တို့ ထိန်းသိမ်းထားပါသည်။ သင်၏ကိုယ်ရေးအချက်အလက်များ မလိုအပ်တော့သောအခါ ၎င်းတို့ကို လုံခြုံစွာ ဖျက်ပစ်ပါမည် သို့မဟုတ် အမည်မဖော်ဘဲ ထားရှိပါမည်။", ), }, { icon: , title: t("Changes to This Privacy Policy", "ဤကိုယ်ရေးအချက်အလက်မူဝါဒအပေါ် ပြောင်းလဲမှုများ"), content: t( "We may update this Privacy Policy from time to time to reflect changes in our practices or for other operational, legal, or regulatory reasons. We will notify you of any material changes by posting the new Privacy Policy on this page and updating the 'Last Updated' date.", "ကျွန်ုပ်တို့၏ လုပ်ထုံးလုပ်နည်းများတွင် ပြောင်းလဲမှုများကို ထင်ဟပ်စေရန် သို့မဟုတ် အခြားလုပ်ငန်းလည်ပတ်မှု၊ ဥပဒေရေးရာ သို့မဟုတ် စည်းမျဉ်းစည်းကမ်းဆိုင်ရာ အကြောင်းပြချက်များအတွက် ဤကိုယ်ရေးအချက်အလက်မူဝါဒကို အခါအားလျော်စွာ ကျွန်ုပ်တို့ အပ်ဒိတ်လုပ်နိုင်ပါသည်။ ဤစာမျက်နှာပေါ်တွင် ကိုယ်ရေးအချက်အလက်မူဝါဒအသစ်ကို တင်ခြင်းနှင့် 'နောက်ဆုံးအပ်ဒိတ်' ရက်စွဲကို မွမ်းမံခြင်းဖြင့် အရေးပါသော ပြောင်းလဲမှုများကို ကျွန်ုပ်တို့ အသိပေးပါမည်။", ), }, ] return (

{sections.map((section, index) => (

{section.icon}

{section.title}

{section.content}

))}

) } [V0_FILE]typescriptreact:file="app/terms-of-service/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import AnimatedSection from "@/components/animated-section" import { LocalizedText } from "@/components/ui/localized-text" import { useLanguage } from "@/contexts/language-context" import { FileText, Scale, ShieldCheck, AlertCircle, Zap, Bookmark, HelpCircle } from "lucide-react" export default function TermsOfServicePage() { const { t } = useLanguage() const sections = [ { icon: , title: t("Acceptance of Terms", "စည်းကမ်းချက်များကို လက်ခံခြင်း"), content: t( "By accessing or using our Services, you agree to be bound by these Terms of Service and all applicable laws and regulations. If you do not agree with any of these terms, you are prohibited from using or accessing our Services.", "ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို ဝင်ရောက်အသုံးပြုခြင်းဖြင့် ဤဝန်ဆောင်မှုစည်းကမ်းချက်များနှင့် သက်ဆိုင်ရာ ဥပဒေများနှင့် စည်းမျဉ်းများအားလုံးကို လိုက်နာရန် သင် သဘောတူပါသည်။ ဤစည်းကမ်းချက်များထဲမှ တစ်ခုခုကို သင် သဘောမတူပါက ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို အသုံးပြုခြင်း သို့မဟုတ် ဝင်ရောက်ခြင်းမှ တားမြစ်ထားပါသည်။", ), }, { icon: , title: t("Use License", "အသုံးပြုခွင့်လိုင်စင်"), content: t( "We grant you a limited, non-exclusive, non-transferable, revocable license to use our Services for your personal, non-commercial use. You may not copy, modify, distribute, sell, or lease any part of our Services or included software, nor may you reverse engineer or attempt to extract the source code of that software, unless laws prohibit those restrictions or you have our written permission.", "ကျွန်ုပ်တို့သည် သင့်အား ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို သင်၏ကိုယ်ပိုင်၊ စီးပွားဖြစ်မဟုတ်သော အသုံးပြုမှုအတွက် ကန့်သတ်ထားသော၊ တစ်ဦးတည်းမဟုတ်သော၊ လွှဲပြောင်း၍မရသော၊ ပြန်လည်ရုပ်သိမ်းနိုင်သော လိုင်စင်တစ်ခု ပေးအပ်ပါသည်။ ဥပဒေများက ထိုကန့်သတ်ချက်များကို တားမြစ်ထားခြင်း သို့မဟုတ် သင့်တွင် ကျွန်ုပ်တို့၏ စာဖြင့်ရေးသားထားသော ခွင့်ပြုချက်ရှိခြင်း မရှိပါက ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများ သို့မဟုတ် ပါဝင်သော ဆော့ဖ်ဝဲလ်၏ မည်သည့်အစိတ်အပိုင်းကိုမျှ ကူးယူခြင်း၊ ပြင်ဆင်ခြင်း၊ ဖြန့်ဖြူးခြင်း၊ ရောင်းချခြင်း သို့မဟုတ် ငှားရမ်းခြင်း မပြုလုပ်ရ၊ ထို့အပြင် ထိုဆော့ဖ်ဝဲလ်၏ ရင်းမြစ်ကုဒ်ကို ပြန်ပြောင်းအင်ဂျင်နီယာလုပ်ခြင်း သို့မဟုတ် ထုတ်ယူရန် ကြိုးစားခြင်း မပြုလုပ်ရပါ။", ), }, { icon: , title: t("User Accounts", "အသုံးပြုသူအကောင့်များ"), content: t( "When you create an account with us, you must provide accurate, complete, and current information. You are responsible for safeguarding the password that you use to access our Services and for any activities or actions under your password. You agree not to disclose your password to any third party. You must notify us immediately upon becoming aware of any breach of security or unauthorized use of your account.", "သင် ကျွန်ုပ်တို့နှင့်အတူ အကောင့်တစ်ခု ဖန်တီးသောအခါ တိကျ၊ ပြည့်စုံပြီး လက်ရှိအချက်အလက်များကို ပေးအပ်ရမည်။ ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို ဝင်ရောက်ရန် သင်အသုံးပြုသော စကားဝှက်နှင့် သင့်စကားဝှက်အောက်ရှိ မည်သည့်လုပ်ဆောင်ချက်များ သို့မဟုတ် လုပ်ဆောင်ချက်များအတွက်မဆို သင်တာဝန်ရှိသည်။ သင့်စကားဝှက်ကို မည်သည့်တတိယပါတီကိုမျှ ထုတ်ဖော်ခြင်းမပြုရန် သင် သဘောတူပါသည်။ လုံခြုံရေးချိုးဖောက်မှု သို့မဟုတ် သင့်အကောင့်၏ ခွင့်ပြုချက်မရှိသော အသုံးပြုမှုကို သိရှိလာပါက ချက်ချင်း ကျွန်ုပ်တို့ကို အကြောင်းကြားရမည်။", ), }, { icon: , title: t("Prohibited Uses", "တားမြစ်ထားသော အသုံးပြုမှုများ"), content: t( "You may use our Services only for lawful purposes and in accordance with these Terms of Service. You agree not to use our Services to engage in any illegal or unauthorized activity, to infringe upon any third party's intellectual property rights, to transmit harmful code or malware, or to interfere with the operation of our Services.", "ဤဝန်ဆောင်မှုစည်းကမ်းချက်များနှင့်အညီ တရားဝင်ရည်ရွယ်ချက်များအတွက်သာ ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို သင် အသုံးပြုနိုင်ပါသည်။ မည်သည့်တရားမဝင် သို့မဟုတ် ခွင့်ပြုချက်မရှိသော လုပ်ဆောင်ချက်တွင်မဆို ပါဝင်ရန်၊ မည်သည့်တတိယပါတီ၏ ဉာဏပစ္စည်းဆိုင်ရာ အခွင့်အရေးများကိုမဆို ချိုးဖောက်ရန်၊ အန္တရာယ်ရှိသော ကုဒ် သို့မဟုတ် မော်လ်ဝဲလ်ကို ထုတ်လွှင့်ရန် သို့မဟုတ် ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများ၏ လုပ်ဆောင်မှုကို ဝင်ရောက်စွက်ဖက်ရန် ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို အသုံးမပြုရန် သင် သဘောတူပါသည်။", ), }, { icon: , title: t("Service Modifications", "ဝန်ဆောင်မှုပြင်ဆင်မှုများ"), content: t( "We reserve the right to modify or discontinue, temporarily or permanently, our Services (or any part thereof) with or without notice. We shall not be liable to you or to any third party for any modification, suspension, or discontinuance of our Services.", "အသိပေးချက်ဖြင့်ဖြစ်စေ၊ အသိပေးချက်မရှိဘဲဖြစ်စေ ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများ (သို့မဟုတ် ၎င်း၏မည်သည့်အစိတ်အပိုင်းကိုမဆို) ကို ယာယီဖြစ်စေ၊ အမြဲတမ်းဖြစ်စေ ပြင်ဆင်ရန် သို့မဟုတ် ရပ်ဆိုင်းရန် အခွင့်အရေးကို ကျွန်ုပ်တို့ ထိန်းသိမ်းထားပါသည်။ ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို ပြင်ဆင်ခြင်း၊ ဆိုင်းငံ့ခြင်း သို့မဟုတ် ရပ်ဆိုင်းခြင်းအတွက် သင့်အပေါ် သို့မဟုတ် မည်သည့်တတိယပါတီအပေါ်မဆို ကျွန်ုပ်တို့တွင် တာဝန်မရှိပါ။", ), }, { icon: , title: t("Intellectual Property", "ဉာဏပစ္စည်းဆိုင်ရာ"), content: t( "Our Services and their entire contents, features, and functionality (including but not limited to all information, software, text, displays, images, video, and audio, and the design, selection, and arrangement thereof) are owned by us, our licensors, or other providers of such material and are protected by copyright, trademark, patent, trade secret, and other intellectual property or proprietary rights laws.", "ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများနှင့် ၎င်းတို့၏ အကြောင်းအရာ၊ အင်္ဂါရပ်များနှင့် လုပ်ဆောင်နိုင်စွမ်းအားလုံး (အချက်အလက်၊ ဆော့ဖ်ဝဲလ်၊ စာသား၊ ပြသမှုများ၊ ပုံရိပ်များ၊ ဗီဒီယိုနှင့် အသံ၊ ထို့အပြင် ၎င်းတို့၏ ဒီဇိုင်း၊ ရွေးချယ်မှုနှင့် စီစဉ်မှုအားလုံး အပါအဝင်သော်လည်း ကန့်သတ်မထားပါ) သည် ကျွန်ုပ်တို့၊ ကျွန်ုပ်တို့၏ လိုင်စင်ပေးသူများ သို့မဟုတ် ထိုကဲ့သို့သော အရာဝတ္ထုများ၏ အခြားပေးသွင်းသူများပိုင်ဆိုင်ပြီး မူပိုင်ခွင့်၊ ကုန်အမှတ်တံဆိပ်၊ ပိုင်ဆိုင်မှုမှတ်ပုံတင်၊ ကုန်သွယ်မှုလျှို့ဝှက်ချက်နှင့် အခြားဉာဏပစ္စည်းဆိုင်ရာ သို့မဟုတ် ပိုင်ဆိုင်မှုအခွင့်အရေးဥပဒေများဖြင့် ကာကွယ်ထားပါသည်။", ), }, { icon: , title: t("Disclaimer of Warranties", "အာမခံချက်များကို ငြင်းဆိုခြင်း"), content: t( "Our Services are provided 'as is' and 'as available' without any representations or warranties, express or implied. We make no representations or warranties of any kind, express or implied, about the completeness, accuracy, reliability, suitability, or availability of our Services or the information, products, services, or related graphics contained on our Services for any purpose.", "ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို မည်သည့်ကိုယ်စားပြုမှုများ သို့မဟုတ် အာမခံချက်များမျှမရှိဘဲ 'ရှိသည့်အတိုင်း' နှင့် 'ရရှိနိုင်သည့်အတိုင်း' ပေးအပ်ထားပါသည်။ မည်သည့်ရည်ရွယ်ချက်အတွက်မဆို ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများ သို့မဟုတ် ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများပေါ်တွင် ပါဝင်သော အချက်အလက်၊ ထုတ်ကုန်များ၊ ဝန်ဆောင်မှုများ သို့မဟုတ် ဆက်စပ်ဂရပ်ဖစ်များ၏ ပြည့်စုံမှု၊ တိကျမှု၊ ယုံကြည်စိတ်ချရမှု၊ သင့်လျော်မှု သို့မဟုတ် ရရှိနိုင်မှုနှင့်ပတ်သက်၍ မည်သည့်ကိုယ်စားပြုမှုများ သို့မဟုတ် အာမခံချက်များကိုမျှ ကျွန်ုပ်တို့ မပြုလုပ်ပါ။", ), }, ] return (

{sections.map((section, index) => (

{section.icon}

{section.title}

{section.content}

))}

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { ArrowRight, Smartphone, Zap } from "lucide-react" import Link from "next/link" import { LocalizedText } from "@/components/ui/localized-text" import { useLanguage } from "@/contexts/language-context" export default function HeroSection() { const { t } = useLanguage() // Animation variants const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.2, delayChildren: 0.3, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }, } return (

{/* Background elements */}

{/* Animated grid pattern */}

{Array.from({ length: 12 }).map((_, colIndex) => (

))}

{Array.from({ length: 12 }).map((_, rowIndex) => (

))}

{/* Animated background circles */} {/* Floating particles */} {Array.from({ length: 20 }).map((_, i) => ( ))}

The Future of{" "} Mobile Connectivity } mm={ <> မိုဘိုင်းချိတ်ဆက်မှု၏{" "} အနာဂတ် } />

{/* Feature highlights */} {[ { text: t("Instant Activation", "ချက်ချင်းအသုံးပြုနိုင်") }, { text: t("Multiple Profiles", "ပရိုဖိုင်အများအပြား") }, { text: t("Enhanced Security", "လုံခြုံမှုပိုမိုကောင်းမွန်") }, { text: t("No Physical Card", "ရုပ်ပိုင်းဆိုင်ရာကဒ်မလို") }, ].map((feature, index) => (

{feature.text} ))} {/* 3D Phone Illustration */}

{/* Phone screen */}

eSIM Myanmar

{/* Animated signal waves */} {[1, 2, 3].map((i) => ( ))} {/* Digital particles */} {Array.from({ length: 10 }).map((_, i) => ( ))}

{/* Phone notch */}

{/* Reflection overlay */}

) } [V0_FILE]typescriptreact:file="app/api/vercel-integration/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function GET() { return NextResponse.json({ status: "success", message: "eSIM Myanmar API is ready for Vercel integration", timestamp: new Date().toISOString(), }) } export async function POST(request: Request) { try { const data = await request.json() // Process Vercel API integration data console.log("Received Vercel integration data:", data) // Here you would typically handle the integration with Vercel products // such as Analytics, Blob Storage, etc. return NextResponse.json({ success: true, message: "Vercel integration data received successfully", }) } catch (error) { console.error("Error processing Vercel integration:", error) return NextResponse.json({ success: false, message: "Failed to process Vercel integration data" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="lib/vercel-blob.ts" isMerged="true" import { put, list, del } from "@vercel/blob" export async function uploadToBlob(file: File, folder = "uploads") { try { const filename = `${folder}/${Date.now()}-${file.name}` const { url } = await put(filename, file, { access: "public" }) return { success: true, url, filename } } catch (error) { console.error("Error uploading to Vercel Blob:", error) return { success: false, error } } } export async function listBlobFiles(prefix?: string) { try { const { blobs } = await list({ prefix }) return { success: true, blobs } } catch (error) { console.error("Error listing Vercel Blob files:", error) return { success: false, error } } } export async function deleteBlobFile(url: string) { try { await del(url) return { success: true } } catch (error) { console.error("Error deleting Vercel Blob file:", error) return { success: false, error } } } [V0_FILE]typescriptreact:file="components/file-uploader.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { uploadToBlob } from "@/lib/vercel-blob" import { Upload, Check, X, Loader2 } from "lucide-react" import { useLanguage } from "@/contexts/language-context" import { LocalizedText } from "@/components/ui/localized-text" interface FileUploaderProps { onUploadComplete?: (url: string) => void acceptedFileTypes?: string maxSizeMB?: number } export default function FileUploader({ onUploadComplete, acceptedFileTypes = "image/*", maxSizeMB = 5, }: FileUploaderProps) { const [file, setFile] = useState(null) const [isUploading, setIsUploading] = useState(false) const [uploadStatus, setUploadStatus] = useState<"idle" | "success" | "error">("idle") const [errorMessage, setErrorMessage] = useState("") const { t } = useLanguage() const maxSizeBytes = maxSizeMB * 1024 * 1024 const handleFileChange = (e: React.ChangeEvent) => { const selectedFile = e.target.files?.[0] if (!selectedFile) return // Validate file size if (selectedFile.size > maxSizeBytes) { setErrorMessage( t( `File size exceeds the maximum limit of ${maxSizeMB}MB`, `ဖိုင်အရွယ်အစားသည် အများဆုံး ကန့်သတ်ချက် ${maxSizeMB}MB ထက် ကျော်လွန်နေပါသည်`, ), ) setUploadStatus("error") return } setFile(selectedFile) setUploadStatus("idle") setErrorMessage("") } const handleUpload = async () => { if (!file) return setIsUploading(true) setUploadStatus("idle") try { const result = await uploadToBlob(file) if (result.success && result.url) { setUploadStatus("success") if (onUploadComplete) { onUploadComplete(result.url) } } else { setUploadStatus("error") setErrorMessage(t("Failed to upload file. Please try again.", "ဖိုင်တင်ရန် မအောင်မြင်ပါ။ ထပ်မံကြိုးစားပါ။")) } } catch (error) { setUploadStatus("error") setErrorMessage( t("An error occurred during upload. Please try again.", "အပ်လုဒ်လုပ်နေစဉ် အမှားတစ်ခု ဖြစ်ပွားခဲ့သည်။ ထပ်မံကြိုးစားပါ။"), ) } finally { setIsUploading(false) } } return (

{file && (

{file.name}

{(file.size / 1024 / 1024).toFixed(2)} MB

)} {uploadStatus === "error" && (

{errorMessage}

)} {uploadStatus === "success" && (

)}

) } [V0_FILE]typescriptreact:file="lib/analytics.ts" isMerged="true" import { inject } from "@vercel/analytics" export function initAnalytics() { // Initialize Vercel Analytics inject() } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter, Noto_Sans_Myanmar } from "next/font/google" import "./globals.css" import ClientLayout from "./client-layout" const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap", }) const notoSansMyanmar = Noto_Sans_Myanmar({ subsets: ["myanmar"], weight: ["400", "500", "600", "700"], variable: "--font-noto-sans-myanmar", display: "swap", }) export const metadata: Metadata = { title: "eSIM Myanmar | Digital SIM Technology", description: "Experience the convenience of digital SIM technology in Myanmar with instant activation and seamless connectivity.", keywords: "eSIM, digital SIM, Myanmar, mobile connectivity, SIM card, telecommunications", authors: [{ name: "eSIM Myanmar" }], viewport: "width=device-width, initial-scale=1", themeColor: "#00FFFF", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return {children} } [V0_FILE]typescriptreact:file="app/client-layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { Inter, Noto_Sans_Myanmar } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { LanguageProvider } from "@/contexts/language-context" import Header from "@/components/header" import Footer from "@/components/footer" import { useEffect } from "react" // Import the analytics initialization function import { initAnalytics } from "@/lib/analytics" const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap", }) const notoSansMyanmar = Noto_Sans_Myanmar({ subsets: ["myanmar"], weight: ["400", "500", "600", "700"], variable: "--font-noto-sans-myanmar", display: "swap", }) // Add useEffect to initialize analytics export default function ClientLayout({ children, }: { children: React.ReactNode }) { // Initialize analytics on the client side useEffect(() => { initAnalytics() }, []) return (

{children}

) } [V0_FILE]typescriptreact:file="lib/vercel-kv.ts" isMerged="true" import { kv } from "@vercel/kv" export async function setKVData(key: string, value: any, expirationSeconds?: number) { try { if (expirationSeconds) { await kv.set(key, value, { ex: expirationSeconds }) } else { await kv.set(key, value) } return { success: true } } catch (error) { console.error("Error setting KV data:", error) return { success: false, error } } } export async function getKVData(key: string) { try { const data = await kv.get(key) return { success: true, data } } catch (error) { console.error("Error getting KV data:", error) return { success: false, error } } } export async function deleteKVData(key: string) { try { await kv.del(key) return { success: true } } catch (error) { console.error("Error deleting KV data:", error) return { success: false, error } } } [V0_FILE]typescriptreact:file="app/actions/contact-form.ts" isMerged="true" "use server" import { setKVData } from "@/lib/vercel-kv" interface ContactFormData { name: string phone: string email?: string message: string } export async function submitContactForm(formData: ContactFormData) { try { // Validate the form data if (!formData.name || !formData.phone || !formData.message) { return { success: false, message: "Please fill in all required fields", } } // Generate a unique ID for this submission const submissionId = `contact_${Date.now()}_${Math.random().toString(36).substring(2, 9)}` // Add timestamp const submission = { ...formData, timestamp: new Date().toISOString(), id: submissionId, } // Store in Vercel KV const result = await setKVData(`contact:${submissionId}`, submission) if (!result.success) { throw new Error("Failed to store contact form data") } // Also store in a list of all submissions for easy retrieval const listKey = "contact:submissions:list" const existingList = await setKVData(listKey, [submissionId], 60 * 60 * 24 * 30) // 30 days expiration return { success: true, message: "Your message has been received. We will contact you soon.", submissionId, } } catch (error) { console.error("Error submitting contact form:", error) return { success: false, message: "An error occurred while submitting your message. Please try again.", } } } [V0_FILE]typescriptreact:file="app/contact/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import AnimatedSection from "@/components/animated-section" import { Send, Phone, Mail, MapPin, Check, Clock, Calendar, ArrowRight, X } from "lucide-react" import { LocalizedText } from "@/components/ui/localized-text" import { useLanguage } from "@/contexts/language-context" // Import the server action import { submitContactForm } from "@/app/actions/contact-form" export default function ContactPage() { const [formState, setFormState] = useState({ name: "", phone: "", email: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitted, setIsSubmitted] = useState(false) const { t } = useLanguage() // Add state for error message const [errorMessage, setErrorMessage] = useState("") const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormState((prev) => ({ ...prev, [name]: value })) } // Update the handleSubmit function to use the server action const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) try { const result = await submitContactForm(formState) setIsSubmitting(false) if (result.success) { setIsSubmitted(true) setFormState({ name: "", phone: "", email: "", message: "" }) } else { // Handle error setErrorMessage(result.message || "Failed to submit form. Please try again.") } } catch (error) { setIsSubmitting(false) setErrorMessage("An unexpected error occurred. Please try again.") } } return (

Send us a Message } mm={ <> ကျွန်ုပ်တို့ထံ မက်ဆေ့ခ်ျ ပို့ပါ } />

{/* Background decoration */}

{isSubmitted ? (

) : ( {errorMessage && (

{errorMessage}

)}

</div>

<Button
                      type="submit"
                      className="w-full bg-gradient-to-r from-[#00FFFF] to-[#00CCFF] text-[#1E2F3C] hover:opacity-90 py-6 rounded-lg shadow-lg shadow-[#00FFFF]/20"
                      disabled={isSubmitting}
                      aria-busy={isSubmitting}
                    >
                      {isSubmitting ? (
                        <span className="flex items-center justify-center">
                          <motion.span
                            className="mr-2"
                            animate={{ rotate: 360 }}
                            transition={{ duration: 1, repeat: Number.POSITIVE_INFINITY, ease: "linear" }}
                          >
                            <svg
                              className="animate-spin h-5 w-5 text-[#1E2F3C]"
                              xmlns="http://www.w3.org/2000/svg"
                              fill="none"
                              viewBox="0 0 24 24"
                              aria-hidden="true"
                            >
                              <circle
                                className="opacity-25"
                                cx="12"
                                cy="12"
                                r="10"
                                stroke="currentColor"
                                strokeWidth="4"
                              ></circle>
                              <path
                                className="opacity-75"
                                fill="currentColor"
                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                              ></path>
                            </svg>
                          </motion.span>
                          <LocalizedText en="Sending..." mm="ပို့နေသည်..." />
                        </span>
                      ) : (
                        <span className="flex items-center justify-center">
                          <Send className="mr-2 h-5 w-5" aria-hidden="true" />
                          <LocalizedText en="Send Message" mm="မက်ဆေ့ခ်ျ ပို့ရန်" />
                        </span>
                      )}
                    </Button>
                  </form>
                </motion.div>
              )}
            </motion.div>

<motion.div initial={{ opacity: 0, x: 50 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.5 }}>
              <h2 className="text-2xl font-bold mb-6">
                <LocalizedText
                  en={
                    <>
                      Contact <span className="text-[#00FFFF]">Information</span>
                    </>
                  }
                  mm={
                    <>
                      ဆက်သွယ်ရန် <span className="text-[#00FFFF]">အချက်အလက်</span>
                    </>
                  }
                />
              </h2>

<div className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-8 rounded-xl border border-[#00FFFF]/10 shadow-lg">
                <div className="space-y-6">
                  {[
                    { icon: Phone, text: "09650000172", label: t("Phone", "ဖုန်း") },
                    { icon: Mail, text: "info@esim.com.mm", label: t("Email", "အီးမေးလ်") },
                    { icon: MapPin, text: "esim.com.mm", label: t("Website", "ဝဘ်ဆိုဒ်") },
                  ].map((item, index) => (
                    <motion.div
                      key={index}
                      className="flex items-start"
                      whileHover={{ x: 5 }}
                      transition={{ type: "spring", stiffness: 400, damping: 10 }}
                    >
                      <div className="flex-shrink-0 mt-1">
                        <div className="w-12 h-12 rounded-full bg-[#00FFFF]/10 flex items-center justify-center">
                          <item.icon className="h-5 w-5 text-[#00FFFF]" aria-hidden="true" />
                        </div>
                      </div>
                      <div className="ml-4">
                        <h3 className="font-medium text-white">{item.label}</h3>
                        <p className="text-[#B0BEC5]">{item.text}</p>
                      </div>
                    </motion.div>
                  ))}
                </div>

<div className="mt-8 bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-6 rounded-xl border border-[#00FFFF]/10 shadow-lg">
                <h3 className="font-medium mb-4 text-white">
                  <LocalizedText en="Follow Us" mm="ကျွန်ုပ်တို့ကို လိုက်ပါ" />
                </h3>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  {[
                    { name: "Facebook", url: "https://facebook.com/esimmyanmar" },
                    { name: "Twitter", url: "https://twitter.com/esimmyanmar" },
                    { name: "Instagram", url: "https://instagram.com/esimmyanmar" },
                    { name: "LinkedIn", url: "https://linkedin.com/company/esimmyanmar" },
                  ].map((platform, index) => (
                    <motion.a
                      key={index}
                      href={platform.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="py-3 rounded-lg bg-[#1E2F3C] flex items-center justify-center text-[#00FFFF] hover:bg-[#00FFFF] hover:text-[#1E2F3C] transition-colors border border-[#00FFFF]/20"
                      whileHover={{ y: -5 }}
                      transition={{ type: "spring", stiffness: 400, damping: 10 }}
                      aria-label={`Follow us on ${platform.name}`}
                    >
                      {platform.name}
                    </motion.a>
                  ))}
                </div>
              </div>

<motion.div
                className="mt-8 bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-6 rounded-xl border border-[#00FFFF]/10 shadow-lg"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.3 }}
              >
                <h3 className="font-medium mb-4 text-white flex items-center">
                  <LocalizedText en="Need Help?" mm="အကူအညီလိုပါသလား?" />
                </h3>
                <p className="text-[#B0BEC5] mb-4">
                  <LocalizedText
                    en="Check our comprehensive FAQ section for quick answers to common questions."
                    mm="အမေးများသော မေးခွန်းများအတွက် အမြန်အဖြေများအတွက် ကျွန်ုပ်တို့၏ ပြည့်စုံသော FAQ အပိုင်းကို စစ်ဆေးပါ။"
                  />
                </p>
                <a href="/faq" className="inline-flex items-center text-[#00FFFF] hover:underline">
                  <LocalizedText en="View FAQ" mm="FAQ ကို ကြည့်ရန်" />
                  <ArrowRight className="ml-2 h-4 w-4" aria-hidden="true" />
                </a>
              </motion.div>
            </motion.div>
          </div>
        </div>
      </AnimatedSection>
    </div>
  )
}

[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Core colors */
    --primary: 180 100% 50%;
    --primary-foreground: 200 30% 18%;
    --primary-light: 180 100% 90%;
    --primary-dark: 180 100% 40%;

/* UI colors */
    --background: 200 30% 18%;
    --foreground: 210 40% 98%;
    --card: 200 30% 22%;
    --card-foreground: 210 40% 98%;
    --popover: 200 30% 18%;
    --popover-foreground: 210 40% 98%;
    --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: 180 100% 50%;

/* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 255, 255, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 255, 255, 0.07), 0 1px 3px rgba(0, 255, 255, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 255, 255, 0.1), 0 4px 6px rgba(0, 255, 255, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 255, 255, 0.15), 0 10px 10px rgba(0, 255, 255, 0.05);

/* Radius */
    --radius: 0.75rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;
  }

.dark {
    --background: 200 30% 18%;
    --foreground: 210 40% 98%;
    --card: 200 30% 22%;
    --card-foreground: 210 40% 98%;
    --popover: 200 30% 18%;
    --popover-foreground: 210 40% 98%;
    --primary: 180 100% 50%;
    --primary-foreground: 200 30% 18%;
    --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: 180 100% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground font-sans;
  }
}

:root {
  font-family: var(--font-inter), var(--font-noto-sans-myanmar), system-ui, sans-serif;
  scroll-behavior: smooth;
}

.mm {
  font-family: var(--font-noto-sans-myanmar), system-ui, sans-serif;
  line-height: 1.8;
}

/* Language-specific styles */
.lang-mm .text-lg {
  line-height: 2;
}

.lang-mm .text-xl {
  line-height: 1.9;
}

.lang-mm .text-2xl {
  line-height: 1.8;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #1e2f3c;
}

::-webkit-scrollbar-thumb {
  background: #263a49;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #00ffff;
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(90deg, #00ffff, #00ccff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* Glow effect */
.glow {
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

.glow-text {
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.glow-sm {
  box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
}

.glow-lg {
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.7);
}

/* Animated background */
.animated-bg {
  background: linear-gradient(-45deg, #1e2f3c, #162430, #263a49, #1a2530);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Focus styles for accessibility */
:focus-visible {
  outline: 2px solid #00ffff;
  outline-offset: 2px;
}

/* Animation utilities */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Responsive typography */
@media (max-width: 640px) {
  h1 {
    font-size: clamp(2rem, 8vw, 3.5rem);
  }
  h2 {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
  }
}

/* Skip to content link for accessibility */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-to-content:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background: #00ffff;
  color: #1e2f3c;
  font-weight: bold;
  z-index: 9999;
}

/* UI Kit Components */
@layer components {
  /* Buttons */
  .btn-primary {
    @apply bg-gradient-to-r from-[#00FFFF] to-[#00CCFF] text-[#1E2F3C] hover:opacity-90 px-6 py-3 rounded-lg shadow-lg shadow-[#00FFFF]/20 transition-all duration-300 font-medium;
  }

.btn-secondary {
    @apply border border-[#00FFFF] text-[#00FFFF] hover:bg-[#00FFFF]/10 px-6 py-3 rounded-lg transition-all duration-300 font-medium;
  }

.btn-tertiary {
    @apply text-[#00FFFF] hover:text-[#00CCFF] transition-colors duration-300 font-medium;
  }

.btn-icon {
    @apply w-10 h-10 rounded-full flex items-center justify-center bg-[#263A49] text-[#00FFFF] hover:bg-[#00FFFF]/20 transition-colors duration-300;
  }

/* Cards */
  .card-primary {
    @apply bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-6 rounded-xl border border-[#00FFFF]/10 shadow-lg;
  }

.card-secondary {
    @apply bg-[#1E2F3C] p-6 rounded-xl border border-[#00FFFF]/10;
  }

.card-hover {
    @apply transition-all duration-300 hover:border-[#00FFFF]/30 hover:shadow-lg hover:shadow-[#00FFFF]/10;
  }

/* Inputs */
  .input-primary {
    @apply bg-[#1E2F3C] border-[#00FFFF]/30 focus:border-[#00FFFF] focus:ring-[#00FFFF] rounded-lg px-4 py-2 text-white placeholder:text-[#B0BEC5]/70;
  }

/* Badges */
  .badge-primary {
    @apply inline-block px-3 py-1 rounded-full bg-[#00FFFF]/10 border border-[#00FFFF]/20 text-[#00FFFF] text-sm font-medium;
  }

.badge-secondary {
    @apply inline-block px-3 py-1 rounded-full bg-[#263A49] text-[#B0BEC5] text-sm font-medium;
  }

/* Dividers */
  .divider {
    @apply w-full h-px bg-gradient-to-r from-transparent via-[#00FFFF]/30 to-transparent my-6;
  }

/* Containers */
  .container-narrow {
    @apply max-w-4xl mx-auto px-4;
  }

/* Sections */
  .section-padding {
    @apply py-16 md:py-24;
  }

/* Typography */
  .heading-1 {
    @apply text-4xl md:text-6xl font-bold gradient-text glow-text;
  }

.heading-2 {
    @apply text-3xl md:text-4xl font-bold;
  }

.heading-3 {
    @apply text-2xl font-bold;
  }

.text-body {
    @apply text-[#B0BEC5];
  }

.text-highlight {
    @apply text-[#00FFFF];
  }
}

/* Animations */
@keyframes pulse-glow {
  0%,
  100% {
    opacity: 0.5;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes slide-in-bottom {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-in-bottom {
  animation: slide-in-bottom 0.5s ease-out forwards;
}

/* Glassmorphism */
.glass {
  background: rgba(30, 47, 60, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 255, 0.1);
}

.glass-dark {
  background: rgba(22, 36, 48, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 255, 0.05);
}

[V0_FILE]typescriptreact:file="components/ui-kit.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"
import { LocalizedText } from "@/components/ui/localized-text"
import { ArrowRight, Settings, Search, Heart, Star, Smartphone, Zap, Shield, Globe, RefreshCw } from "lucide-react"

export default function UIKit() {
  const [switchValue, setSwitchValue] = useState(false)
  const [sliderValue, setSliderValue] = useState([50])

return (
    <div className="container mx-auto px-4 py-12">
      <h1 className="heading-1 mb-8">eSIM Myanmar UI Kit</h1>

<Tabs defaultValue="colors" className="w-full">
        <TabsList className="mb-8">
          <TabsTrigger value="colors">Colors</TabsTrigger>
          <TabsTrigger value="typography">Typography</TabsTrigger>
          <TabsTrigger value="buttons">Buttons</TabsTrigger>
          <TabsTrigger value="inputs">Inputs</TabsTrigger>
          <TabsTrigger value="cards">Cards</TabsTrigger>
          <TabsTrigger value="components">Components</TabsTrigger>
        </TabsList>

{/* Colors */}
        <TabsContent value="colors" className="space-y-8">
          <Card>
            <CardHeader>
              <CardTitle>Primary Colors</CardTitle>
              <CardDescription>The main brand colors for eSIM Myanmar</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-[#00FFFF]"></div>
                  <p className="font-medium">Primary</p>
                  <p className="text-sm text-[#B0BEC5]">#00FFFF</p>
                </div>
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-[#00CCFF]"></div>
                  <p className="font-medium">Primary Variant</p>
                  <p className="text-sm text-[#B0BEC5]">#00CCFF</p>
                </div>
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-[#1E2F3C]"></div>
                  <p className="font-medium">Background</p>
                  <p className="text-sm text-[#B0BEC5]">#1E2F3C</p>
                </div>
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-[#263A49]"></div>
                  <p className="font-medium">Surface</p>
                  <p className="text-sm text-[#B0BEC5]">#263A49</p>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Text Colors</CardTitle>
              <CardDescription>Colors used for text and content</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-white flex items-center justify-center">
                    <span className="text-[#1E2F3C] font-bold">Aa</span>
                  </div>
                  <p className="font-medium">White</p>
                  <p className="text-sm text-[#B0BEC5]">#FFFFFF</p>
                </div>
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-[#B0BEC5] flex items-center justify-center">
                    <span className="text-[#1E2F3C] font-bold">Aa</span>
                  </div>
                  <p className="font-medium">Muted</p>
                  <p className="text-sm text-[#B0BEC5]">#B0BEC5</p>
                </div>
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-[#00FFFF] flex items-center justify-center">
                    <span className="text-[#1E2F3C] font-bold">Aa</span>
                  </div>
                  <p className="font-medium">Accent</p>
                  <p className="text-sm text-[#B0BEC5]">#00FFFF</p>
                </div>
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-[#FF3B30] flex items-center justify-center">
                    <span className="text-white font-bold">Aa</span>
                  </div>
                  <p className="font-medium">Error</p>
                  <p className="text-sm text-[#B0BEC5]">#FF3B30</p>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Gradients</CardTitle>
              <CardDescription>Gradient combinations for backgrounds and elements</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-gradient-to-r from-[#00FFFF] to-[#00CCFF]"></div>
                  <p className="font-medium">Primary Gradient</p>
                  <p className="text-sm text-[#B0BEC5]">from-#00FFFF to-#00CCFF</p>
                </div>
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-gradient-to-br from-[#263A49] to-[#1E2F3C]"></div>
                  <p className="font-medium">Background Gradient</p>
                  <p className="text-sm text-[#B0BEC5]">from-#263A49 to-#1E2F3C</p>
                </div>
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-gradient-to-r from-transparent via-[#00FFFF]/30 to-transparent"></div>
                  <p className="font-medium">Divider Gradient</p>
                  <p className="text-sm text-[#B0BEC5]">from-transparent via-#00FFFF/30 to-transparent</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* Typography */}
        <TabsContent value="typography" className="space-y-8">
          <Card>
            <CardHeader>
              <CardTitle>Headings</CardTitle>
              <CardDescription>Typography styles for headings</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div>
                <h1 className="heading-1">Heading 1</h1>
                <p className="text-sm text-[#B0BEC5] mt-2">text-4xl md:text-6xl font-bold gradient-text glow-text</p>
              </div>
              <div>
                <h2 className="heading-2">Heading 2</h2>
                <p className="text-sm text-[#B0BEC5] mt-2">text-3xl md:text-4xl font-bold</p>
              </div>
              <div>
                <h3 className="heading-3">Heading 3</h3>
                <p className="text-sm text-[#B0BEC5] mt-2">text-2xl font-bold</p>
              </div>
              <div>
                <h4 className="text-xl font-semibold">Heading 4</h4>
                <p className="text-sm text-[#B0BEC5] mt-2">text-xl font-semibold</p>
              </div>
              <div>
                <h5 className="text-lg font-medium">Heading 5</h5>
                <p className="text-sm text-[#B0BEC5] mt-2">text-lg font-medium</p>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Body Text</CardTitle>
              <CardDescription>Typography styles for body content</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div>
                <p className="text-xl text-[#B0BEC5]">Large Body Text</p>
                <p className="text-sm text-[#B0BEC5] mt-2">text-xl text-[#B0BEC5]</p>
              </div>
              <div>
                <p className="text-body">Regular Body Text</p>
                <p className="text-sm text-[#B0BEC5] mt-2">text-body (text-[#B0BEC5])</p>
              </div>
              <div>
                <p className="text-sm text-[#B0BEC5]">Small Body Text</p>
                <p className="text-sm text-[#B0BEC5] mt-2">text-sm text-[#B0BEC5]</p>
              </div>
              <div>
                <p className="text-highlight">Highlighted Text</p>
                <p className="text-sm text-[#B0BEC5] mt-2">text-highlight (text-[#00FFFF])</p>
              </div>
              <div>
                <p className="gradient-text">Gradient Text</p>
                <p className="text-sm text-[#B0BEC5] mt-2">gradient-text</p>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Localized Text</CardTitle>
              <CardDescription>Examples of text in both English and Myanmar</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-2">
                <p className="font-medium">English:</p>
                <p>Experience the convenience of digital SIM technology in Myanmar.</p>
              </div>
              <div className="space-y-2">
                <p className="font-medium">Myanmar:</p>
                <p className="mm">မြန်မာနိုင်ငံတွင် ဒီဂျစ်တယ် SIM နည်းပညာ၏ အဆင်ပြေလွယ်ကူမှုကို ခံစားပါ။</p>
              </div>
              <div className="space-y-2">
                <p className="font-medium">LocalizedText Component:</p>
                <p>
                  <LocalizedText
                    en="Check if your device supports eSIM technology."
                    mm="သင့်စက်ပစ္စည်းသည် eSIM နည်းပညာကို ထောက်ပံ့ခြင်း ရှိမရှိ စစ်ဆေးပါ။"
                  />
                </p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* Buttons */}
        <TabsContent value="buttons" className="space-y-8">
          <Card>
            <CardHeader>
              <CardTitle>Button Styles</CardTitle>
              <CardDescription>Different button styles for various actions</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-6">
                  <div className="space-y-2">
                    <Button className="btn-primary w-full">Primary Button</Button>
                    <p className="text-sm text-[#B0BEC5]">btn-primary</p>
                  </div>

<div className="space-y-2">
                    <Button className="btn-secondary w-full">Secondary Button</Button>
                    <p className="text-sm text-[#B0BEC5]">btn-secondary</p>
                  </div>

<div className="space-y-2">
                    <Button className="btn-tertiary">Tertiary Button</Button>
                    <p className="text-sm text-[#B0BEC5]">btn-tertiary</p>
                  </div>

<div className="space-y-6">
                  <div className="space-y-2">
                    <Button className="btn-primary w-full flex items-center">
                      Check Compatibility
                      <ArrowRight className="ml-2 h-5 w-5" />
                    </Button>
                    <p className="text-sm text-[#B0BEC5]">With icon</p>
                  </div>

<div className="space-y-2">
                    <Button className="btn-primary w-full" disabled>
                      Disabled Button
                    </Button>
                    <p className="text-sm text-[#B0BEC5]">Disabled state</p>
                  </div>

<div className="space-y-2">
                    <Button className="btn-primary w-full">
                      <span className="flex items-center justify-center">
                        <svg
                          className="animate-spin h-5 w-5 mr-2"
                          xmlns="http://www.w3.org/2000/svg"
                          fill="none"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            className="opacity-25"
                            cx="12"
                            cy="12"
                            r="10"
                            stroke="currentColor"
                            strokeWidth="4"
                          ></circle>
                          <path
                            className="opacity-75"
                            fill="currentColor"
                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                          ></path>
                        </svg>
                        Loading...
                      </span>
                    </Button>
                    <p className="text-sm text-[#B0BEC5]">Loading state</p>
                  </div>

<div className="space-y-2">
                    <div className="flex gap-2">
                      <Button className="btn-primary" size="sm">
                        Small
                      </Button>
                      <Button className="btn-primary">Default</Button>
                      <Button className="btn-primary" size="lg">
                        Large
                      </Button>
                    </div>
                    <p className="text-sm text-[#B0BEC5]">Size variants</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Button Animations</CardTitle>
              <CardDescription>Interactive button animations</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div className="space-y-2">
                  <Button className="btn-primary w-full group relative overflow-hidden">
                    <span className="relative z-10">Hover Me</span>
                    <motion.div
                      className="absolute inset-0 bg-gradient-to-r from-[#00FFFF]/0 via-[#00FFFF]/30 to-[#00FFFF]/0"
                      initial={{ x: "-100%" }}
                      animate={{ x: "200%" }}
                      transition={{ repeat: Number.POSITIVE_INFINITY, duration: 2, ease: "linear" }}
                    />
                  </Button>
                  <p className="text-sm text-[#B0BEC5]">Shimmer effect</p>
                </div>

<div className="space-y-2">
                  <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                    <Button className="btn-primary w-full">Scale on Hover</Button>
                  </motion.div>
                  <p className="text-sm text-[#B0BEC5]">Scale animation</p>
                </div>

<div className="space-y-2">
                  <Button className="btn-secondary w-full group">
                    <span className="flex items-center">
                      Learn More
                      <ArrowRight className="ml-2 h-5 w-5 opacity-0 group-hover:opacity-100 transition-all duration-300 -translate-x-2 group-hover:translate-x-0" />
                    </span>
                  </Button>
                  <p className="text-sm text-[#B0BEC5]">Icon reveal</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* Inputs */}
        <TabsContent value="inputs" className="space-y-8">
          <Card>
            <CardHeader>
              <CardTitle>Form Controls</CardTitle>
              <CardDescription>Input elements for forms</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-6">
                  <div className="space-y-2">
                    <Label htmlFor="default-input">Text Input</Label>
                    <Input id="default-input" placeholder="Enter your name" className="input-primary" />
                    <p className="text-sm text-[#B0BEC5]">input-primary</p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="disabled-input">Disabled Input</Label>
                    <Input id="disabled-input" placeholder="Disabled input" disabled className="input-primary" />
                    <p className="text-sm text-[#B0BEC5]">Disabled state</p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="textarea">Textarea</Label>
                    <Textarea id="textarea" placeholder="Enter your message" className="input-primary min-h-[120px]" />
                    <p className="text-sm text-[#B0BEC5]">Multiline input</p>
                  </div>
                </div>

<div className="space-y-6">
                  <div className="space-y-2">
                    <Label htmlFor="search-input">Search Input</Label>
                    <div className="relative">
                      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#B0BEC5]" size={18} />
                      <Input id="search-input" placeholder="Search..." className="input-primary pl-10" />
                    </div>
                    <p className="text-sm text-[#B0BEC5]">With icon</p>
                  </div>

<div className="space-y-4">
                    <div className="flex items-center space-x-2">
                      <Switch id="airplane-mode" checked={switchValue} onCheckedChange={setSwitchValue} />
                      <Label htmlFor="airplane-mode">Airplane Mode</Label>
                    </div>
                    <p className="text-sm text-[#B0BEC5]">Switch component</p>
                  </div>

<div className="space-y-4">
                    <Label htmlFor="slider">Slider: {sliderValue}%</Label>
                    <Slider
                      id="slider"
                      min={0}
                      max={100}
                      step={1}
                      value={sliderValue}
                      onValueChange={setSliderValue}
                      className="w-full"
                    />
                    <p className="text-sm text-[#B0BEC5]">Slider component</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* Cards */}
        <TabsContent value="cards" className="space-y-8">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="space-y-2">
              <div className="card-primary">
                <h3 className="text-xl font-bold mb-3">Primary Card</h3>
                <p className="text-[#B0BEC5]">This is the primary card style with gradient background.</p>
              </div>
              <p className="text-sm text-[#B0BEC5]">card-primary</p>
            </div>

<div className="space-y-2">
              <div className="card-secondary">
                <h3 className="text-xl font-bold mb-3">Secondary Card</h3>
                <p className="text-[#B0BEC5]">This is the secondary card style with solid background.</p>
              </div>
              <p className="text-sm text-[#B0BEC5]">card-secondary</p>
            </div>

<div className="space-y-2">
              <div className="card-primary card-hover">
                <h3 className="text-xl font-bold mb-3">Hover Card</h3>
                <p className="text-[#B0BEC5]">This card has hover effects. Try hovering over it!</p>
              </div>
              <p className="text-sm text-[#B0BEC5]">card-primary card-hover</p>
            </div>

<div className="space-y-2">
              <div className="glass p-6 rounded-xl">
                <h3 className="text-xl font-bold mb-3">Glass Card</h3>
                <p className="text-[#B0BEC5]">This card has a glassmorphism effect.</p>
              </div>
              <p className="text-sm text-[#B0BEC5]">glass</p>
            </div>
          </div>

<Card>
            <CardHeader>
              <CardTitle>Feature Card</CardTitle>
              <CardDescription>Example of a feature card with icon</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex items-start">
                <div className="w-12 h-12 rounded-full bg-[#00FFFF]/10 flex items-center justify-center mr-4 flex-shrink-0">
                  <Zap className="h-6 w-6 text-[#00FFFF]" />
                </div>
                <div>
                  <h3 className="text-xl font-bold mb-2">Instant Activation</h3>
                  <p className="text-[#B0BEC5]">
                    Activate your eSIM instantly by scanning a QR code - no physical SIM card needed.
                  </p>
                </div>
              </div>
            </CardContent>
            <CardFooter>
              <Button variant="link" className="text-[#00FFFF] p-0">
                Learn more <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </CardFooter>
          </Card>
        </TabsContent>

{/* Components */}
        <TabsContent value="components" className="space-y-8">
          <Card>
            <CardHeader>
              <CardTitle>Badges</CardTitle>
              <CardDescription>Status and category indicators</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex flex-wrap gap-4">
                <div className="space-y-2">
                  <Badge className="badge-primary">New Feature</Badge>
                  <p className="text-sm text-[#B0BEC5]">badge-primary</p>
                </div>
                <div className="space-y-2">
                  <Badge className="badge-secondary">Coming Soon</Badge>
                  <p className="text-sm text-[#B0BEC5]">badge-secondary</p>
                </div>
                <div className="space-y-2">
                  <Badge variant="outline" className="text-[#00FFFF] border-[#00FFFF]/30">
                    Premium
                  </Badge>
                  <p className="text-sm text-[#B0BEC5]">outline variant</p>
                </div>
                <div className="space-y-2">
                  <Badge variant="destructive">Error</Badge>
                  <p className="text-sm text-[#B0BEC5]">destructive variant</p>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Feature Icons</CardTitle>
              <CardDescription>Icons used to represent features</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 md:grid-cols-5 gap-6">
                {[
                  { icon: <Smartphone className="h-8 w-8 text-[#00FFFF]" />, label: "Multiple Profiles" },
                  { icon: <Zap className="h-8 w-8 text-[#00FFFF]" />, label: "Instant Activation" },
                  { icon: <Shield className="h-8 w-8 text-[#00FFFF]" />, label: "Enhanced Security" },
                  { icon: <Globe className="h-8 w-8 text-[#00FFFF]" />, label: "Global Compatibility" },
                  { icon: <RefreshCw className="h-8 w-8 text-[#00FFFF]" />, label: "Easy Switching" },
                ].map((item, index) => (
                  <div key={index} className="flex flex-col items-center text-center">
                    <div className="w-16 h-16 rounded-full bg-[#00FFFF]/10 flex items-center justify-center mb-3">
                      {item.icon}
                    </div>
                    <p className="font-medium">{item.label}</p>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Dividers</CardTitle>
              <CardDescription>Separators for content sections</CardDescription>
            </CardHeader>
            <CardContent className="space-y-8">
              <div className="space-y-2">
                <div className="divider"></div>
                <p className="text-sm text-[#B0BEC5]">divider</p>
              </div>

<div className="space-y-2">
                <div className="flex items-center">
                  <div className="flex-grow h-px bg-[#00FFFF]/10"></div>
                  <span className="px-4 text-[#B0BEC5]">OR</span>
                  <div className="flex-grow h-px bg-[#00FFFF]/10"></div>
                </div>
                <p className="text-sm text-[#B0BEC5]">divider with text</p>
              </div>

<div className="space-y-2">
                <div className="w-16 h-1 bg-gradient-to-r from-[#00FFFF] to-[#00CCFF] rounded-full"></div>
                <p className="text-sm text-[#B0BEC5]">section divider</p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/enhanced-button.tsx" isMerged="true"
"use client"

import { forwardRef } from "react"
import { motion } from "framer-motion"
import { Button as BaseButton, type ButtonProps } from "@/components/ui/button"
import { Loader2 } from "lucide-react"
import { cn } from "@/lib/utils"

export interface EnhancedButtonProps extends ButtonProps {
  isLoading?: boolean
  loadingText?: string
  withShimmer?: boolean
  withScale?: boolean
  withGlow?: boolean
  size?: "sm" | "default" | "lg" | "xl"
  variant?: "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "link" | "icon"
}

const EnhancedButton = forwardRef<HTMLButtonElement, EnhancedButtonProps>(
  (
    {
      className,
      children,
      isLoading,
      loadingText,
      withShimmer = false,
      withScale = false,
      withGlow = false,
      variant = "primary",
      size = "default",
      ...props
    },
    ref,
  ) => {
    // Define variant classes
    const variantClasses = {
      primary:
        "bg-gradient-to-r from-[#00FFFF] to-[#00CCFF] text-[#1E2F3C] hover:opacity-90 shadow-lg shadow-[#00FFFF]/20",
      secondary: "border border-[#00FFFF] text-[#00FFFF] hover:bg-[#00FFFF]/10 bg-transparent",
      tertiary: "text-[#00FFFF] hover:text-[#00CCFF] bg-transparent",
      outline: "border border-[#00FFFF]/30 text-[#00FFFF] hover:border-[#00FFFF] hover:bg-[#00FFFF]/5 bg-transparent",
      ghost: "text-white hover:bg-[#00FFFF]/10 hover:text-[#00FFFF] bg-transparent",
      link: "text-[#00FFFF] hover:text-[#00CCFF] underline-offset-4 hover:underline bg-transparent p-0 h-auto",
      icon: "w-10 h-10 rounded-full flex items-center justify-center bg-[#263A49] text-[#00FFFF] hover:bg-[#00FFFF]/20 p-0",
    }

// Define size classes
    const sizeClasses = {
      sm: "px-3 py-1 text-sm rounded-md",
      default: "px-6 py-3 rounded-lg",
      lg: "px-8 py-4 text-lg rounded-lg",
      xl: "px-10 py-5 text-xl rounded-xl",
    }

// Add glow effect if requested
    const glowClass = withGlow ? "hover:shadow-[0_0_15px_rgba(0,255,255,0.5)]" : ""

// Combine all classes
    const buttonClasses = cn(
      variantClasses[variant],
      sizeClasses[size],
      glowClass,
      "font-medium transition-all duration-300",
      className,
    )

// If withScale is true, wrap with motion.div
    if (withScale) {
      return (
        <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
          <BaseButton ref={ref} className={buttonClasses} disabled={isLoading || props.disabled} {...props}>
            {isLoading ? (
              <span className="flex items-center justify-center">
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                {loadingText || "Loading..."}
              </span>
            ) : (
              <span className="relative z-10 flex items-center justify-center">
                {children}
                {withShimmer && (
                  <motion.div
                    className="absolute inset-0 bg-gradient-to-r from-[#00FFFF]/0 via-[#00FFFF]/30 to-[#00FFFF]/0"
                    initial={{ x: "-100%" }}
                    animate={{ x: "200%" }}
                    transition={{ repeat: Number.POSITIVE_INFINITY, duration: 2, ease: "linear" }}
                  />
                )}
              </span>
            )}
          </BaseButton>
        </motion.div>
      )
    }

// Regular button without scale animation
    return (
      <BaseButton ref={ref} className={buttonClasses} disabled={isLoading || props.disabled} {...props}>
        {isLoading ? (
          <span className="flex items-center justify-center">
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            {loadingText || "Loading..."}
          </span>
        ) : (
          <span className="relative z-10 flex items-center justify-center">
            {children}
            {withShimmer && (
              <motion.div
                className="absolute inset-0 bg-gradient-to-r from-[#00FFFF]/0 via-[#00FFFF]/30 to-[#00FFFF]/0"
                initial={{ x: "-100%" }}
                animate={{ x: "200%" }}
                transition={{ repeat: Number.POSITIVE_INFINITY, duration: 2, ease: "linear" }}
              />
            )}
          </span>
        )}
      </BaseButton>
    )
  },
)

EnhancedButton.displayName = "EnhancedButton"

export { EnhancedButton }

[V0_FILE]typescriptreact:file="components/ui/enhanced-card.tsx" isMerged="true"
"use client"

import { forwardRef } from "react"
import { motion } from "framer-motion"
import { Card, type CardProps } from "@/components/ui/card"
import { cn } from "@/lib/utils"

export interface EnhancedCardProps extends CardProps {
  variant?: "primary" | "secondary" | "glass" | "glassDark"
  withHover?: boolean
  withAnimation?: boolean
  animationDelay?: number
}

const EnhancedCard = forwardRef<HTMLDivElement, EnhancedCardProps>(
  (
    {
      className,
      children,
      variant = "primary",
      withHover = false,
      withAnimation = false,
      animationDelay = 0,
      ...props
    },
    ref,
  ) => {
    // Define variant classes
    const variantClasses = {
      primary: "bg-gradient-to-br from-[#263A49] to-[#1E2F3C] border-[#00FFFF]/10",
      secondary: "bg-[#1E2F3C] border-[#00FFFF]/10",
      glass: "glass border-[#00FFFF]/10",
      glassDark: "glass-dark border-[#00FFFF]/5",
    }

// Add hover effect if requested
    const hoverClass = withHover
      ? "transition-all duration-300 hover:border-[#00FFFF]/30 hover:shadow-lg hover:shadow-[#00FFFF]/10"
      : ""

// Combine all classes
    const cardClasses = cn(variantClasses[variant], hoverClass, "shadow-lg", className)

// If withAnimation is true, wrap with motion.div
    if (withAnimation) {
      return (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: animationDelay }}
          viewport={{ once: true }}
        >
          <Card ref={ref} className={cardClasses} {...props}>
            {children}
          </Card>
        </motion.div>
      )
    }

// Regular card without animation
    return (
      <Card ref={ref} className={cardClasses} {...props}>
        {children}
      </Card>
    )
  },
)

EnhancedCard.displayName = "EnhancedCard"

export { EnhancedCard }

[V0_FILE]typescriptreact:file="components/ui/enhanced-badge.tsx" isMerged="true"
"use client"

import { forwardRef } from "react"
import { motion } from "framer-motion"
import { Badge, type BadgeProps } from "@/components/ui/badge"
import { cn } from "@/lib/utils"

export interface EnhancedBadgeProps extends BadgeProps {
  variant?: "primary" | "secondary" | "outline" | "glow"
  withAnimation?: boolean
  animationDelay?: number
}

const EnhancedBadge = forwardRef<HTMLDivElement, EnhancedBadgeProps>(
  ({ className, children, variant = "primary", withAnimation = false, animationDelay = 0, ...props }, ref) => {
    // Define variant classes
    const variantClasses = {
      primary: "bg-[#00FFFF]/10 border border-[#00FFFF]/20 text-[#00FFFF] hover:bg-[#00FFFF]/20",
      secondary: "bg-[#263A49] text-[#B0BEC5] hover:bg-[#324b5e]",
      outline: "bg-transparent border border-[#00FFFF]/30 text-[#00FFFF] hover:border-[#00FFFF]/60",
      glow: "bg-[#00FFFF]/10 border border-[#00FFFF]/20 text-[#00FFFF] shadow-[0_0_10px_rgba(0,255,255,0.3)] hover:shadow-[0_0_15px_rgba(0,255,255,0.5)]",
    }

// Combine all classes
    const badgeClasses = cn(variantClasses[variant], "transition-all duration-300 font-medium", className)

// If withAnimation is true, wrap with motion.div
    if (withAnimation) {
      return (
        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.3, delay: animationDelay }}
        >
          <Badge ref={ref} className={badgeClasses} {...props}>
            {children}
          </Badge>
        </motion.div>
      )
    }

// Regular badge without animation
    return (
      <Badge ref={ref} className={badgeClasses} {...props}>
        {children}
      </Badge>
    )
  },
)

EnhancedBadge.displayName = "EnhancedBadge"

export { EnhancedBadge }

[V0_FILE]typescriptreact:file="components/ui/enhanced-input.tsx" isMerged="true"
"use client"

import type React from "react"

import { forwardRef } from "react"
import { Input, type InputProps } from "@/components/ui/input"
import { cn } from "@/lib/utils"

export interface EnhancedInputProps extends InputProps {
  variant?: "primary" | "secondary" | "minimal"
  isError?: boolean
  leftIcon?: React.ReactNode
  rightIcon?: React.ReactNode
}

const EnhancedInput = forwardRef<HTMLInputElement, EnhancedInputProps>(
  ({ className, variant = "primary", isError = false, leftIcon, rightIcon, ...props }, ref) => {
    // Define variant classes
    const variantClasses = {
      primary: "bg-[#1E2F3C] border-[#00FFFF]/30 focus:border-[#00FFFF] focus:ring-[#00FFFF]",
      secondary: "bg-[#263A49] border-[#00FFFF]/20 focus:border-[#00FFFF] focus:ring-[#00FFFF]",
      minimal: "bg-transparent border-[#00FFFF]/10 focus:border-[#00FFFF] focus:ring-[#00FFFF]",
    }

// Error state
    const errorClass = isError ? "border-red-500 focus:border-red-500 focus:ring-red-500" : ""

// Icon padding
    const leftPadding = leftIcon ? "pl-10" : ""
    const rightPadding = rightIcon ? "pr-10" : ""

// Combine all classes
    const inputClasses = cn(
      variantClasses[variant],
      errorClass,
      leftPadding,
      rightPadding,
      "rounded-lg text-white placeholder:text-[#B0BEC5]/70 transition-colors duration-200",
      className,
    )

// If we have icons, wrap with a div for positioning
    if (leftIcon || rightIcon) {
      return (
        <div className="relative">
          {leftIcon && (
            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#B0BEC5]">{leftIcon}</div>
          )}

{rightIcon && (
            <div className="absolute right-3 top-1/2 transform -translate-y-1/2 text-[#B0BEC5]">{rightIcon}</div>
          )}
        </div>
      )
    }

// Regular input without icons
    return <Input ref={ref} className={inputClasses} {...props} />
  },
)

EnhancedInput.displayName = "EnhancedInput"

export { EnhancedInput }

[V0_FILE]javascript:file="tailwind.config.js" isEdit="true" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
          light: "hsl(var(--primary-light))",
          dark: "hsl(var(--primary-dark))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
        "pulse-glow": {
          "0%, 100%": {
            opacity: 0.5,
            boxShadow: "0 0 5px rgba(0, 255, 255, 0.5)",
          },
          "50%": {
            opacity: 1,
            boxShadow: "0 0 15px rgba(0, 255, 255, 0.8)",
          },
        },
        float: {
          "0%": { transform: "translateY(0px)" },
          "50%": { transform: "translateY(-10px)" },
          "100%": { transform: "translateY(0px)" },
        },
        shimmer: {
          "0%": { transform: "translateX(-100%)" },
          "100%": { transform: "translateX(100%)" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "pulse-glow": "pulse-glow 2s ease-in-out infinite",
        float: "float 6s ease-in-out infinite",
        shimmer: "shimmer 2s ease-in-out infinite",
      },
      boxShadow: {
        "glow-sm": "var(--shadow-sm)",
        "glow-md": "var(--shadow-md)",
        "glow-lg": "var(--shadow-lg)",
        "glow-xl": "var(--shadow-xl)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Moon, Sun, Laptop } from "lucide-react"
import { useTheme } from "next-themes"

export default function ThemeToggle() {
  const { theme, setTheme } = useTheme()
  const [mounted, setMounted] = useState(false)

// Ensure component is mounted before accessing theme
  useEffect(() => {
    setMounted(true)
  }, [])

if (!mounted) {
    return null
  }

return (
    <div className="flex items-center space-x-2 bg-[#1E2F3C] p-1 rounded-full border border-[#00FFFF]/10">
      <Button
        variant="ghost"
        size="icon"
        onClick={() => setTheme("light")}
        className={`rounded-full w-8 h-8 ${theme === "light" ? "bg-[#00FFFF]/20 text-[#00FFFF]" : "text-[#B0BEC5]"}`}
        aria-label="Light mode"
      >
        <Sun size={16} />
      </Button>

<Button
        variant="ghost"
        size="icon"
        onClick={() => setTheme("dark")}
        className={`rounded-full w-8 h-8 ${theme === "dark" ? "bg-[#00FFFF]/20 text-[#00FFFF]" : "text-[#B0BEC5]"}`}
        aria-label="Dark mode"
      >
        <Moon size={16} />
      </Button>

<Button
        variant="ghost"
        size="icon"
        onClick={() => setTheme("system")}
        className={`rounded-full w-8 h-8 ${theme === "system" ? "bg-[#00FFFF]/20 text-[#00FFFF]" : "text-[#B0BEC5]"}`}
        aria-label="System theme"
      >
        <Laptop size={16} />
      </Button>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import Link from "next/link"
import { usePathname } from "next/navigation"
import LanguageToggle from "@/components/language-toggle"
import ThemeToggle from "@/components/theme-toggle"
import { Menu, X, ChevronDown, Globe } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useLanguage } from "@/contexts/language-context"
import { LocalizedText } from "@/components/ui/localized-text"

export default function Header() {
  const [isScrolled, setIsScrolled] = useState(false)
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
  const pathname = usePathname()
  const { t } = useLanguage()

useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10)
    }
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

const navLinks = [
    { href: "/", label: t("Home", "ပင်မစာမျက်နှာ") },
    { href: "/about", label: t("About", "အကြောင်း") },
    { href: "/compatibility", label: t("Compatibility", "သဟဇာတဖြစ်မှု") },
    { href: "/how-it-works", label: t("How it Works", "မည်သို့အလုပ်လုပ်သည်") },
    { href: "/faq", label: t("FAQ", "မေးလေ့ရှိသောမေးခွန်းများ") },
    { href: "/contact", label: t("Contact", "ဆက်သွယ်ရန်") },
  ]

const legalLinks = [
    { href: "/privacy-policy", label: t("Privacy Policy", "ကိုယ်ရေးအချက်အလက်မူဝါဒ") },
    { href: "/terms-of-service", label: t("Terms of Service", "ဝန်ဆောင်မှုစည်းကမ်းချက်များ") },
  ]

return (
    <header
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
        isScrolled ? "glass shadow-lg py-2" : "bg-transparent py-4"
      }`}
    >
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between">
          <Link href="/" className="relative z-10 group">
            <motion.div
              className="text-2xl font-bold flex items-center"
              whileHover={{ scale: 1.05 }}
              transition={{ type: "spring", stiffness: 400, damping: 10 }}
            >
              <span className="text-[#00FFFF] mr-1 group-hover:animate-pulse">e</span>
              <span className="bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-300">SIM</span>
              <span className="ml-1 text-[#00FFFF] group-hover:animate-pulse">Myanmar</span>
            </motion.div>
          </Link>

{/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-1">
            {navLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className={`relative px-4 py-2 rounded-md transition-colors ${
                  pathname === link.href ? "text-[#00FFFF]" : "text-white hover:text-[#00FFFF]"
                }`}
              >
                {pathname === link.href && (
                  <motion.span
                    layoutId="activeNavIndicator"
                    className="absolute inset-0 rounded-md bg-[#00FFFF]/10"
                    transition={{ type: "spring", stiffness: 300, damping: 30 }}
                  />
                )}
                <span className="relative z-10">{link.label}</span>
              </Link>
            ))}

{/* Legal dropdown */}
            <div className="relative">
              <button
                className="flex items-center px-4 py-2 rounded-md text-white hover:text-[#00FFFF] transition-colors"
                onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                onMouseEnter={() => setIsDropdownOpen(true)}
                onMouseLeave={() => setIsDropdownOpen(false)}
              >
                <LocalizedText en="Legal" mm="ဥပဒေရေးရာ" />
                <ChevronDown
                  className={`ml-1 h-4 w-4 transition-transform duration-300 ${isDropdownOpen ? "rotate-180" : ""}`}
                />
              </button>

<AnimatePresence>
                {isDropdownOpen && (
                  <motion.div
                    initial={{ opacity: 0, y: 10, scale: 0.95 }}
                    animate={{ opacity: 1, y: 0, scale: 1 }}
                    exit={{ opacity: 0, y: 10, scale: 0.95 }}
                    transition={{ duration: 0.2 }}
                    className="absolute top-full right-0 mt-1 glass border border-[#00FFFF]/20 rounded-md shadow-lg overflow-hidden z-50"
                    onMouseEnter={() => setIsDropdownOpen(true)}
                    onMouseLeave={() => setIsDropdownOpen(false)}
                  >
                    <div className="py-1">
                      {legalLinks.map((link) => (
                        <Link
                          key={link.href}
                          href={link.href}
                          className="block px-4 py-2 text-sm text-white hover:bg-[#00FFFF]/10 hover:text-[#00FFFF] whitespace-nowrap transition-colors duration-200"
                        >
                          {link.label}
                        </Link>
                      ))}
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>

{/* Mobile Menu Button */}
          <div className="flex items-center md:hidden">
            <LanguageToggle />
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="ml-2 text-white hover:bg-[#00FFFF]/10 transition-colors duration-200"
              aria-label={isMobileMenuOpen ? "Close menu" : "Open menu"}
            >
              <AnimatePresence mode="wait">
                {isMobileMenuOpen ? (
                  <motion.div
                    key="close"
                    initial={{ rotate: -90, opacity: 0 }}
                    animate={{ rotate: 0, opacity: 1 }}
                    exit={{ rotate: 90, opacity: 0 }}
                    transition={{ duration: 0.2 }}
                  >
                    <X size={24} />
                  </motion.div>
                ) : (
                  <motion.div
                    key="menu"
                    initial={{ rotate: 90, opacity: 0 }}
                    animate={{ rotate: 0, opacity: 1 }}
                    exit={{ rotate: -90, opacity: 0 }}
                    transition={{ duration: 0.2 }}
                  >
                    <Menu size={24} />
                  </motion.div>
                )}
              </AnimatePresence>
            </Button>
          </div>
        </div>
      </div>

{/* Mobile Navigation */}
      <AnimatePresence>
        {isMobileMenuOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.3 }}
            className="md:hidden glass border-t border-[#00FFFF]/20"
          >
            <nav className="container mx-auto px-4 py-4 flex flex-col space-y-2">
              {navLinks.map((link, index) => (
                <motion.div
                  key={link.href}
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: index * 0.1 }}
                >
                  <Link
                    href={link.href}
                    className={`block py-3 px-4 rounded-md ${
                      pathname === link.href
                        ? "bg-[#00FFFF]/10 text-[#00FFFF]"
                        : "hover:bg-[#00FFFF]/5 transition-colors duration-200"
                    }`}
                    onClick={() => setIsMobileMenuOpen(false)}
                  >
                    {link.label}
                  </Link>
                </motion.div>
              ))}

{/* Legal links in mobile menu */}
              <div className="pt-2 mt-2 border-t border-[#00FFFF]/10">
                <p className="px-4 py-2 text-sm text-[#B0BEC5] flex items-center">
                  <Globe className="h-4 w-4 mr-2 text-[#00FFFF]/70" />
                  <LocalizedText en="Legal" mm="ဥပဒေရေးရာ" />
                </p>
                {legalLinks.map((link, index) => (
                  <motion.div
                    key={link.href}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: (navLinks.length + index) * 0.1 }}
                  >
                    <Link
                      href={link.href}
                      className="block py-2 px-4 rounded-md text-sm hover:bg-[#00FFFF]/5 transition-colors duration-200"
                      onClick={() => setIsMobileMenuOpen(false)}
                    >
                      {link.label}
                    </Link>
                  </motion.div>
                ))}
              </div>

<div className="pt-2 mt-2 border-t border-[#00FFFF]/10 flex justify-center">
                <ThemeToggle />
              </div>
            </nav>
          </motion.div>
        )}
      </AnimatePresence>
    </header>
  )
}

[V0_FILE]typescriptreact:file="components/ui/enhanced-tooltip.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { cn } from "@/lib/utils"

interface EnhancedTooltipProps {
  children: React.ReactNode
  content: React.ReactNode
  position?: "top" | "bottom" | "left" | "right"
  variant?: "default" | "info" | "success" | "warning" | "error"
  delay?: number
  className?: string
}

export function EnhancedTooltip({
  children,
  content,
  position = "top",
  variant = "default",
  delay = 0.2,
  className,
}: EnhancedTooltipProps) {
  const [isVisible, setIsVisible] = useState(false)

// Define variant classes
  const variantClasses = {
    default: "bg-[#1E2F3C] text-white border-[#00FFFF]/30",
    info: "bg-[#1E2F3C] text-[#00FFFF] border-[#00FFFF]/50",
    success: "bg-emerald-900/90 text-emerald-100 border-emerald-500/50",
    warning: "bg-amber-900/90 text-amber-100 border-amber-500/50",
    error: "bg-red-900/90 text-red-100 border-red-500/50",
  }

// Define position styles
  const positionStyles = {
    top: {
      container: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
      arrow: "top-full left-1/2 transform -translate-x-1/2 border-t-current border-x-transparent border-b-transparent",
      animation: { y: 10 },
    },
    bottom: {
      container: "top-full left-1/2 transform -translate-x-1/2 mt-2",
      arrow:
        "bottom-full left-1/2 transform -translate-x-1/2 rotate-180 border-t-current border-x-transparent border-b-transparent",
      animation: { y: -10 },
    },
    left: {
      container: "right-full top-1/2 transform -translate-y-1/2 mr-2",
      arrow:
        "left-full top-1/2 transform -translate-y-1/2 -rotate-90 border-t-current border-x-transparent border-b-transparent",
      animation: { x: 10 },
    },
    right: {
      container: "left-full top-1/2 transform -translate-y-1/2 ml-2",
      arrow:
        "right-full top-1/2 transform -translate-y-1/2 rotate-90 border-t-current border-x-transparent border-b-transparent",
      animation: { x: -10 },
    },
  }

return (
    <div
      className="relative inline-block"
      onMouseEnter={() => setIsVisible(true)}
      onMouseLeave={() => setIsVisible(false)}
      onFocus={() => setIsVisible(true)}
      onBlur={() => setIsVisible(false)}
    >
      {children}

<AnimatePresence>
        {isVisible && (
          <motion.div
            className={cn("absolute z-50 whitespace-nowrap", positionStyles[position].container)}
            initial={{ opacity: 0, ...positionStyles[position].animation }}
            animate={{ opacity: 1, y: 0, x: 0 }}
            exit={{ opacity: 0, ...positionStyles[position].animation }}
            transition={{ duration: 0.2, delay: isVisible ? delay : 0 }}
          >
            <div
              className={cn(
                "relative px-3 py-1.5 rounded-md text-sm shadow-lg backdrop-blur-sm border",
                variantClasses[variant],
                className,
              )}
            >
              {content}
              <div className={cn("absolute w-0 h-0 border-4 text-inherit", positionStyles[position].arrow)} />
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/enhanced-alert.tsx" isMerged="true"
"use client"

import type React from "react"

import { forwardRef } from "react"
import { motion } from "framer-motion"
import { Alert, type AlertProps } from "@/components/ui/alert"
import { AlertCircle, CheckCircle, AlertTriangle, Info, X } from "lucide-react"
import { cn } from "@/lib/utils"

export interface EnhancedAlertProps extends AlertProps {
  variant?: "default" | "info" | "success" | "warning" | "error"
  title?: string
  description?: string
  icon?: React.ReactNode
  withAnimation?: boolean
  animationDelay?: number
  onClose?: () => void
}

const EnhancedAlert = forwardRef<HTMLDivElement, EnhancedAlertProps>(
  (
    {
      className,
      children,
      variant = "default",
      title,
      description,
      icon,
      withAnimation = false,
      animationDelay = 0,
      onClose,
      ...props
    },
    ref,
  ) => {
    // Define variant classes
    const variantClasses = {
      default: "bg-[#1E2F3C] border-[#00FFFF]/30",
      info: "bg-blue-900/20 border-blue-500/30 text-blue-100",
      success: "bg-green-900/20 border-green-500/30 text-green-100",
      warning: "bg-amber-900/20 border-amber-500/30 text-amber-100",
      error: "bg-red-900/20 border-red-500/30 text-red-100",
    }

// Define variant icons
    const variantIcons = {
      default: <AlertCircle className="h-5 w-5 text-[#00FFFF]" />,
      info: <Info className="h-5 w-5 text-blue-400" />,
      success: <CheckCircle className="h-5 w-5 text-green-400" />,
      warning: <AlertTriangle className="h-5 w-5 text-amber-400" />,
      error: <AlertCircle className="h-5 w-5 text-red-400" />,
    }

// Combine all classes
    const alertClasses = cn(variantClasses[variant], "relative", className)

const alertContent = (
      <Alert ref={ref} className={alertClasses} {...props}>
        <div className="flex">
          {icon || variantIcons[variant]}
          <div className="ml-3 flex-1">
            {title && <div className="font-medium">{title}</div>}
            {description && <div className="text-sm opacity-90">{description}</div>}
            {children}
          </div>
          {onClose && (
            <button
              onClick={onClose}
              className="ml-auto -mr-1 flex-shrink-0 p-1 rounded-full hover:bg-white/10 transition-colors"
              aria-label="Close"
            >
              <X className="h-4 w-4" />
            </button>
          )}
        </div>
      </Alert>
    )

// If withAnimation is true, wrap with motion.div
    if (withAnimation) {
      return (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -20 }}
          transition={{ duration: 0.3, delay: animationDelay }}
        >
          {alertContent}
        </motion.div>
      )
    }

// Regular alert without animation
    return alertContent
  },
)

EnhancedAlert.displayName = "EnhancedAlert"

export { EnhancedAlert }

[V0_FILE]typescriptreact:file="components/ui/enhanced-progress.tsx" isMerged="true"
"use client"

import { forwardRef } from "react"
import { motion } from "framer-motion"
import { Progress, type ProgressProps } from "@/components/ui/progress"
import { cn } from "@/lib/utils"

export interface EnhancedProgressProps extends ProgressProps {
  variant?: "default" | "success" | "warning" | "error" | "gradient"
  showValue?: boolean
  valuePosition?: "inside" | "outside"
  size?: "sm" | "default" | "lg"
  animated?: boolean
  label?: string
}

const EnhancedProgress = forwardRef<HTMLDivElement, EnhancedProgressProps>(
  (
    {
      className,
      value = 0,
      variant = "default",
      showValue = false,
      valuePosition = "outside",
      size = "default",
      animated = false,
      label,
      ...props
    },
    ref,
  ) => {
    // Define variant classes
    const variantClasses = {
      default: "bg-[#00FFFF]",
      success: "bg-green-500",
      warning: "bg-amber-500",
      error: "bg-red-500",
      gradient: "bg-gradient-to-r from-[#00FFFF] to-[#00CCFF]",
    }

// Define size classes
    const sizeClasses = {
      sm: "h-1",
      default: "h-2",
      lg: "h-3",
    }

// Animation class
    const animationClass = animated ? "animate-pulse" : ""

// Combine all classes
    const progressClasses = cn("rounded-full", sizeClasses[size], className)

// Indicator classes
    const indicatorClasses = cn(variantClasses[variant], animationClass, "rounded-full transition-all")

return (
      <div className="w-full">
        {(label || (showValue && valuePosition === "outside")) && (
          <div className="flex justify-between items-center mb-1">
            {label && <div className="text-sm font-medium">{label}</div>}
            {showValue && valuePosition === "outside" && (
              <div className="text-sm text-[#B0BEC5]">{Math.round(value)}%</div>
            )}
          </div>
        )}

<div className="relative">
          <Progress ref={ref} value={value} className={progressClasses} {...props}>
            {animated && (
              <motion.div
                className={indicatorClasses}
                style={{ width: `${value}%` }}
                initial={{ width: 0 }}
                animate={{ width: `${value}%` }}
                transition={{ duration: 0.5 }}
              />
            )}
          </Progress>

{showValue && valuePosition === "inside" && value >= 20 && (
            <div
              className="absolute inset-y-0 left-0 flex items-center justify-end pr-2 text-xs font-medium text-white"
              style={{ width: `${value}%` }}
            >
              {Math.round(value)}%
            </div>
          )}
        </div>
      </div>
    )
  },
)

EnhancedProgress.displayName = "EnhancedProgress"

export { EnhancedProgress }

[V0_FILE]typescriptreact:file="components/ui/enhanced-avatar.tsx" isMerged="true"
"use client"

import { forwardRef } from "react"
import { Avatar, AvatarFallback, AvatarImage, type AvatarProps } from "@/components/ui/avatar"
import { cn } from "@/lib/utils"

export interface EnhancedAvatarProps extends AvatarProps {
  src?: string
  alt?: string
  fallback?: string
  status?: "online" | "offline" | "away" | "busy" | "none"
  variant?: "circle" | "rounded" | "square"
  size?: "xs" | "sm" | "md" | "lg" | "xl"
  withBorder?: boolean
  borderColor?: string
  withAnimation?: boolean
  animationType?: "pulse" | "bounce" | "shake"
}

const EnhancedAvatar = forwardRef<HTMLDivElement, EnhancedAvatarProps>(
  (
    {
      className,
      src,
      alt = "",
      fallback,
      status = "none",
      variant = "circle",
      size = "md",
      withBorder = false,
      borderColor = "border-[#00FFFF]/30",
      withAnimation = false,
      animationType = "pulse",
      ...props
    },
    ref,
  ) => {
    // Define variant classes
    const variantClasses = {
      circle: "rounded-full",
      rounded: "rounded-xl",
      square: "rounded-none",
    }

// Define size classes
    const sizeClasses = {
      xs: "h-8 w-8 text-xs",
      sm: "h-10 w-10 text-sm",
      md: "h-12 w-12 text-base",
      lg: "h-16 w-16 text-lg",
      xl: "h-20 w-20 text-xl",
    }

// Define status classes
    const statusClasses = {
      online: "bg-green-500",
      offline: "bg-gray-500",
      away: "bg-amber-500",
      busy: "bg-red-500",
      none: "hidden",
    }

// Define animation classes
    const animationClasses = {
      pulse: "animate-pulse",
      bounce: "animate-bounce",
      shake: "animate-[shake_0.5s_ease-in-out_infinite]",
    }

// Border class
    const borderClass = withBorder ? `border-2 ${borderColor}` : ""

// Animation class
    const animationClass = withAnimation ? animationClasses[animationType] : ""

// Combine all classes
    const avatarClasses = cn(
      variantClasses[variant],
      sizeClasses[size],
      borderClass,
      animationClass,
      "relative",
      className,
    )

return (
      <div className="relative inline-block">
        <Avatar ref={ref} className={avatarClasses} {...props}>
          {src && <AvatarImage src={src} alt={alt} />}
          {fallback && <AvatarFallback>{fallback.substring(0, 2).toUpperCase()}</AvatarFallback>}
        </Avatar>

{status !== "none" && (
          <span
            className={cn(
              "absolute bottom-0 right-0 block rounded-full ring-2 ring-white",
              statusClasses[status],
              size === "xs" ? "h-2 w-2" : "h-3 w-3",
            )}
          />
        )}
      </div>
    )
  },
)

EnhancedAvatar.displayName = "EnhancedAvatar"

export { EnhancedAvatar }

[V0_FILE]typescriptreact:file="components/ui/enhanced-skeleton.tsx" isMerged="true"
"use client"

import { forwardRef } from "react"
import { Skeleton, type SkeletonProps } from "@/components/ui/skeleton"
import { cn } from "@/lib/utils"

export interface EnhancedSkeletonProps extends SkeletonProps {
  variant?: "default" | "card" | "text" | "avatar" | "button" | "input"
  lines?: number
  animated?: boolean
}

const EnhancedSkeleton = forwardRef<HTMLDivElement, EnhancedSkeletonProps>(
  ({ className, variant = "default", lines = 1, animated = true, ...props }, ref) => {
    // Define variant classes
    const variantClasses = {
      default: "",
      card: "w-full h-[200px] rounded-xl",
      text: "h-4 w-full",
      avatar: "h-12 w-12 rounded-full",
      button: "h-10 w-24 rounded-lg",
      input: "h-10 w-full rounded-lg",
    }

// Animation class
    const animationClass = animated ? "animate-pulse" : ""

// Combine all classes
    const skeletonClasses = cn(variantClasses[variant], animationClass, "bg-[#263A49]", className)

// If it's a text variant with multiple lines
    if (variant === "text" && lines > 1) {
      return (
        <div className="space-y-2">
          {Array.from({ length: lines }).map((_, i) => (
            <Skeleton
              key={i}
              ref={i === 0 ? ref : undefined}
              className={cn(
                skeletonClasses,
                // Make some lines shorter for a more realistic text effect
                i === lines - 1 ? "w-4/5" : i % 2 === 0 ? "w-full" : "w-11/12",
              )}
              {...props}
            />
          ))}
        </div>
      )
    }

// Regular skeleton
    return <Skeleton ref={ref} className={skeletonClasses} {...props} />
  },
)

EnhancedSkeleton.displayName = "EnhancedSkeleton"

export { EnhancedSkeleton }

[V0_FILE]typescriptreact:file="components/ui/enhanced-tag-input.tsx" isMerged="true"
"use client"

import { useState, useRef, type KeyboardEvent } from "react"
import { Input } from "@/components/ui/input"
import { X } from "lucide-react"
import { motion, AnimatePresence } from "framer-motion"
import { cn } from "@/lib/utils"

interface EnhancedTagInputProps {
  value: string[]
  onChange: (value: string[]) => void
  placeholder?: string
  disabled?: boolean
  maxTags?: number
  className?: string
  tagClassName?: string
  variant?: "default" | "primary" | "secondary"
  allowDuplicates?: boolean
  validateTag?: (tag: string) => boolean
  onExceedMaxTags?: () => void
}

export function EnhancedTagInput({
  value = [],
  onChange,
  placeholder = "Add tag...",
  disabled = false,
  maxTags,
  className,
  tagClassName,
  variant = "default",
  allowDuplicates = false,
  validateTag,
  onExceedMaxTags,
}: EnhancedTagInputProps) {
  const [inputValue, setInputValue] = useState("")
  const inputRef = useRef<HTMLInputElement>(null)

// Define variant classes
  const variantClasses = {
    default: "bg-[#1E2F3C] border-[#00FFFF]/30 focus:border-[#00FFFF] focus:ring-[#00FFFF]",
    primary: "bg-[#263A49] border-[#00FFFF]/20 focus:border-[#00FFFF] focus:ring-[#00FFFF]",
    secondary: "bg-transparent border-[#00FFFF]/10 focus:border-[#00FFFF] focus:ring-[#00FFFF]",
  }

// Define tag variant classes
  const tagVariantClasses = {
    default: "bg-[#263A49] text-white",
    primary: "bg-[#00FFFF]/10 text-[#00FFFF]",
    secondary: "bg-[#1E2F3C] text-white",
  }

const addTag = (tag: string) => {
    const trimmedTag = tag.trim()

if (!trimmedTag) return

// Check if we've reached the maximum number of tags
    if (maxTags !== undefined && value.length >= maxTags) {
      onExceedMaxTags?.()
      return
    }

// Check if tag is valid
    if (validateTag && !validateTag(trimmedTag)) {
      return
    }

// Check if tag already exists
    if (!allowDuplicates && value.includes(trimmedTag)) {
      return
    }

onChange([...value, trimmedTag])
    setInputValue("")
  }

const removeTag = (index: number) => {
    const newTags = [...value]
    newTags.splice(index, 1)
    onChange(newTags)
  }

const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter" || e.key === ",") {
      e.preventDefault()
      addTag(inputValue)
    } else if (e.key === "Backspace" && !inputValue && value.length > 0) {
      removeTag(value.length - 1)
    }
  }

return (
    <div
      className={cn("flex flex-wrap items-center gap-2 p-2 border rounded-lg", variantClasses[variant], className)}
      onClick={() => inputRef.current?.focus()}
    >
      <AnimatePresence>
        {value.map((tag, index) => (
          <motion.span
            key={`${tag}-${index}`}
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.8 }}
            transition={{ duration: 0.2 }}
            className={cn(
              "inline-flex items-center px-2 py-1 rounded-md text-sm",
              tagVariantClasses[variant],
              tagClassName,
            )}
          >
            {tag}
            {!disabled && (
              <button
                type="button"
                className="ml-1 rounded-full hover:bg-white/10 p-0.5"
                onClick={(e) => {
                  e.stopPropagation()
                  removeTag(index)
                }}
                aria-label={`Remove ${tag}`}
              >
                <X className="h-3 w-3" />
              </button>
            )}
          </motion.span>
        ))}
      </AnimatePresence>

<Input
        ref={inputRef}
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        onKeyDown={handleKeyDown}
        onBlur={() => addTag(inputValue)}
        placeholder={value.length === 0 ? placeholder : ""}
        disabled={disabled || (maxTags !== undefined && value.length >= maxTags)}
        className="flex-1 min-w-[120px] border-0 focus-visible:ring-0 focus-visible:ring-offset-0 p-0 h-8 bg-transparent placeholder:text-[#B0BEC5]/70"
      />
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/enhanced-file-upload.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Button } from "@/components/ui/button"
import { EnhancedProgress } from "@/components/ui/enhanced-progress"
import { Upload, X, File, Image, FileText, Film, Music, AlertTriangle } from "lucide-react"
import { cn } from "@/lib/utils"

interface EnhancedFileUploadProps {
  onChange: (files: File[]) => void
  value?: File[]
  multiple?: boolean
  accept?: string
  maxSize?: number // in MB
  maxFiles?: number
  className?: string
  variant?: "default" | "compact" | "minimal"
  showPreview?: boolean
  previewType?: "grid" | "list"
  onError?: (error: string) => void
  uploadProgress?: number // 0-100
  disabled?: boolean
}

export function EnhancedFileUpload({
  onChange,
  value = [],
  multiple = false,
  accept,
  maxSize,
  maxFiles = 5,
  className,
  variant = "default",
  showPreview = true,
  previewType = "grid",
  onError,
  uploadProgress,
  disabled = false,
}: EnhancedFileUploadProps) {
  const [isDragging, setIsDragging] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)

// Define variant classes
  const variantClasses = {
    default: "border-2 border-dashed border-[#00FFFF]/30 rounded-lg p-6",
    compact: "border border-dashed border-[#00FFFF]/30 rounded-lg p-3",
    minimal: "border border-[#00FFFF]/20 rounded-lg p-2",
  }

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFiles = Array.from(e.target.files || [])
    validateAndAddFiles(selectedFiles)

// Reset the input value so the same file can be selected again
    if (fileInputRef.current) {
      fileInputRef.current.value = ""
    }
  }

const validateAndAddFiles = (files: File[]) => {
    setError(null)

// Check if adding these files would exceed the max files limit
    if (maxFiles && value.length + files.length > maxFiles) {
      const errorMsg = `You can only upload a maximum of ${maxFiles} files`
      setError(errorMsg)
      onError?.(errorMsg)
      return
    }

const validFiles = files.filter((file) => {
      // Check file size
      if (maxSize && file.size > maxSize * 1024 * 1024) {
        const errorMsg = `File "${file.name}" exceeds the maximum size of ${maxSize}MB`
        setError(errorMsg)
        onError?.(errorMsg)
        return false
      }

// Check file type if accept is specified
      if (accept) {
        const acceptedTypes = accept.split(",").map((type) => type.trim())
        const fileType = file.type

// Check if the file type matches any of the accepted types
        const isAccepted = acceptedTypes.some((type) => {
          if (type.startsWith(".")) {
            // Check file extension
            return file.name.toLowerCase().endsWith(type.toLowerCase())
          } else if (type.includes("*")) {
            // Handle wildcards like "image/*"
            return fileType.startsWith(type.split("*")[0])
          } else {
            // Exact match
            return fileType === type
          }
        })

if (!isAccepted) {
          const errorMsg = `File "${file.name}" is not an accepted file type`
          setError(errorMsg)
          onError?.(errorMsg)
          return false
        }
      }

return true
    })

if (validFiles.length > 0) {
      onChange([...value, ...validFiles])
    }
  }

const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(true)
  }

const handleDragLeave = () => {
    setIsDragging(false)
  }

const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(false)

const droppedFiles = Array.from(e.dataTransfer.files)
    validateAndAddFiles(droppedFiles)
  }

const removeFile = (index: number) => {
    const newFiles = [...value]
    newFiles.splice(index, 1)
    onChange(newFiles)
  }

// Get appropriate icon based on file type
  const getFileIcon = (file: File) => {
    const type = file.type

if (type.startsWith("image/")) {
      return <Image className="h-5 w-5 text-[#00FFFF]" />
    } else if (type.startsWith("video/")) {
      return <Film className="h-5 w-5 text-[#00FFFF]" />
    } else if (type.startsWith("audio/")) {
      return <Music className="h-5 w-5 text-[#00FFFF]" />
    } else if (type.startsWith("text/")) {
      return <FileText className="h-5 w-5 text-[#00FFFF]" />
    } else {
      return <File className="h-5 w-5 text-[#00FFFF]" />
    }
  }

// Format file size
  const formatFileSize = (bytes: number) => {
    if (bytes === 0) return "0 Bytes"

const k = 1024
    const sizes = ["Bytes", "KB", "MB", "GB"]
    const i = Math.floor(Math.log(bytes) / Math.log(k))

return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
  }

return (
    <div className={className}>
      <div
        className={cn(
          variantClasses[variant],
          isDragging ? "border-[#00FFFF] bg-[#00FFFF]/5" : "hover:border-[#00FFFF]/60 hover:bg-[#00FFFF]/5",
          "transition-colors duration-200",
          disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
        )}
        onDragOver={!disabled ? handleDragOver : undefined}
        onDragLeave={!disabled ? handleDragLeave : undefined}
        onDrop={!disabled ? handleDrop : undefined}
        onClick={() => !disabled && fileInputRef.current?.click()}
      >
        <div className="flex flex-col items-center justify-center text-center">
          <Upload className="h-10 w-10 text-[#00FFFF]/70 mb-2" />
          <p className="text-[#B0BEC5] mb-1">
            {isDragging ? "Drop files here" : "Drag & drop files here or click to browse"}
          </p>
          <p className="text-[#B0BEC5]/70 text-sm">
            {accept && `Accepted file types: ${accept}`}
            {maxSize && `${accept ? " | " : ""}Maximum file size: ${maxSize}MB`}
            {maxFiles && multiple && `${accept || maxSize ? " | " : ""}Maximum files: ${maxFiles}`}
          </p>
        </div>

{error && (
        <div className="mt-2 text-red-400 text-sm flex items-center">
          <AlertTriangle className="h-4 w-4 mr-1" />
          {error}
        </div>
      )}

{uploadProgress !== undefined && (
        <div className="mt-3">
          <EnhancedProgress value={uploadProgress} variant="gradient" showValue animated size="sm" />
        </div>
      )}

{showPreview && value.length > 0 && (
        <div className={cn("mt-4", previewType === "grid" ? "grid grid-cols-2 md:grid-cols-3 gap-3" : "space-y-2")}>
          <AnimatePresence>
            {value.map((file, index) => (
              <motion.div
                key={`${file.name}-${index}`}
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, scale: 0.9 }}
                transition={{ duration: 0.2 }}
                className={cn(
                  "bg-[#1E2F3C] rounded-lg border border-[#00FFFF]/10 overflow-hidden group",
                  previewType === "list" ? "flex items-center" : "relative",
                )}
              >
                {file.type.startsWith("image/") && previewType === "grid" ? (
                  <div className="aspect-square w-full relative">
                    <img
                      src={URL.createObjectURL(file) || "/placeholder.svg"}
                      alt={file.name}
                      className="w-full h-full object-cover"
                    />
                    <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                      <Button
                        variant="ghost"
                        size="icon"
                        className="h-8 w-8 rounded-full bg-black/50 text-white hover:bg-black/70"
                        onClick={(e) => {
                          e.stopPropagation()
                          removeFile(index)
                        }}
                        disabled={disabled}
                      >
                        <X className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                ) : (
                  <div className={cn("flex items-center", previewType === "grid" ? "p-3" : "p-2 flex-1")}>
                    <div className="w-8 h-8 rounded-full bg-[#263A49] flex items-center justify-center mr-3 flex-shrink-0">
                      {getFileIcon(file)}
                    </div>
                    <div className="min-w-0 flex-1">
                      <p className="text-sm font-medium truncate">{file.name}</p>
                      <p className="text-xs text-[#B0BEC5]">{formatFileSize(file.size)}</p>
                    </div>
                    {!disabled && (
                      <Button
                        variant="ghost"
                        size="icon"
                        className="h-8 w-8 rounded-full text-[#B0BEC5] hover:text-white hover:bg-[#00FFFF]/10 ml-2 flex-shrink-0"
                        onClick={(e) => {
                          e.stopPropagation()
                          removeFile(index)
                        }}
                      >
                        <X className="h-4 w-4" />
                      </Button>
                    )}
                  </div>
                )}
              </motion.div>
            ))}
          </AnimatePresence>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/enhanced-notification.tsx" isMerged="true"
"use client"

import type React from "react"

import { forwardRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { X, CheckCircle, AlertTriangle, AlertCircle, Info, Bell } from "lucide-react"
import { cn } from "@/lib/utils"

export interface EnhancedNotificationProps {
  open?: boolean
  onClose?: () => void
  title: string
  description?: string
  variant?: "default" | "info" | "success" | "warning" | "error"
  icon?: React.ReactNode
  action?: React.ReactNode
  position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center"
  duration?: number
  className?: string
}

const EnhancedNotification = forwardRef<HTMLDivElement, EnhancedNotificationProps>(
  (
    {
      open = true,
      onClose,
      title,
      description,
      variant = "default",
      icon,
      action,
      position = "top-right",
      duration = 5000,
      className,
    },
    ref,
  ) => {
    // Define variant classes
    const variantClasses = {
      default: "bg-[#1E2F3C] border-[#00FFFF]/30",
      info: "bg-blue-900/90 border-blue-500/50",
      success: "bg-green-900/90 border-green-500/50",
      warning: "bg-amber-900/90 border-amber-500/50",
      error: "bg-red-900/90 border-red-500/50",
    }

// Define variant icons
    const variantIcons = {
      default: <Bell className="h-5 w-5 text-[#00FFFF]" />,
      info: <Info className="h-5 w-5 text-blue-400" />,
      success: <CheckCircle className="h-5 w-5 text-green-400" />,
      warning: <AlertTriangle className="h-5 w-5 text-amber-400" />,
      error: <AlertCircle className="h-5 w-5 text-red-400" />,
    }

// Define position classes
    const positionClasses = {
      "top-right": "top-4 right-4",
      "top-left": "top-4 left-4",
      "bottom-right": "bottom-4 right-4",
      "bottom-left": "bottom-4 left-4",
      "top-center": "top-4 left-1/2 -translate-x-1/2",
      "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
    }

// Auto close after duration
    if (open && duration > 0 && onClose) {
      setTimeout(() => {
        onClose()
      }, duration)
    }

return (
      <AnimatePresence>
        {open && (
          <motion.div
            ref={ref}
            className={cn(
              "fixed z-50 max-w-sm w-full shadow-lg rounded-lg border backdrop-blur-sm",
              positionClasses[position],
              variantClasses[variant],
              className,
            )}
            initial={{ opacity: 0, y: position.startsWith("top") ? -20 : 20, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, scale: 0.95 }}
            transition={{ duration: 0.2 }}
          >
            <div className="p-4">
              <div className="flex items-start">
                <div className="flex-shrink-0">{icon || variantIcons[variant]}</div>
                <div className="ml-3 flex-1">
                  <p className="text-sm font-medium">{title}</p>
                  {description && <p className="mt-1 text-sm opacity-90">{description}</p>}
                  {action && <div className="mt-3">{action}</div>}
                </div>
                {onClose && (
                  <button
                    type="button"
                    className="flex-shrink-0 ml-3 h-5 w-5 rounded-full inline-flex items-center justify-center text-white/70 hover:text-white focus:outline-none"
                    onClick={onClose}
                    aria-label="Close"
                  >
                    <X className="h-4 w-4" />
                  </button>
                )}
              </div>
            </div>

{/* Auto-close progress bar */}
            {duration > 0 && (
              <motion.div
                className="h-1 bg-white/20 rounded-b-lg overflow-hidden"
                initial={{ width: "100%" }}
                animate={{ width: "0%" }}
                transition={{ duration: duration / 1000, ease: "linear" }}
              />
            )}
          </motion.div>
        )}
      </AnimatePresence>
    )
  },
)

EnhancedNotification.displayName = "EnhancedNotification"

export { EnhancedNotification }

[V0_FILE]typescriptreact:file="app/ui-kit/loading.tsx" isEdit="true" isMerged="true"
export default function Loading() {
  return null
}

[V0_FILE]typescriptreact:file="components/ui/enhanced-modal.tsx"
"use client"

import type React from "react"

import { useState, useEffect, forwardRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { X } from "lucide-react"
import { cn } from "@/lib/utils"

export interface EnhancedModalProps {
  isOpen: boolean
  onClose: () => void
  title?: React.ReactNode
  description?: React.ReactNode
  children: React.ReactNode
  footer?: React.ReactNode
  size?: "sm" | "md" | "lg" | "xl" | "full"
  position?: "center" | "top" | "bottom"
  closeOnClickOutside?: boolean
  showCloseButton?: boolean
  variant?: "default" | "blur" | "minimal"
  className?: string
  contentClassName?: string
  overlayClassName?: string
}

export const EnhancedModal = forwardRef<HTMLDivElement, EnhancedModalProps>(
  (
    {
      isOpen,
      onClose,
      title,
      description,
      children,
      footer,
      size = "md",
      position = "center",
      closeOnClickOutside = true,
      showCloseButton = true,
      variant = "default",
      className,
      contentClassName,
      overlayClassName,
    },
    ref,
  ) => {
    const [isMounted, setIsMounted] = useState(false)

// Handle escape key press
    useEffect(() => {
      const handleEscapeKey = (e: KeyboardEvent) => {
        if (e.key === "Escape" && isOpen) {
          onClose()
        }
      }

if (isOpen) {
        document.addEventListener("keydown", handleEscapeKey)
        // Prevent scrolling when modal is open
        document.body.style.overflow = "hidden"
      }

return () => {
        document.removeEventListener("keydown", handleEscapeKey)
        // Restore scrolling when modal is closed
        document.body.style.overflow = ""
      }
    }, [isOpen, onClose])

// Handle client-side rendering
    useEffect(() => {
      setIsMounted(true)
    }, [])

if (!isMounted) {
      return null
    }

// Define size classes
    const sizeClasses = {
      sm: "max-w-sm",
      md: "max-w-md",
      lg: "max-w-lg",
      xl: "max-w-xl",
      full: "max-w-full w-full h-full m-0 rounded-none",
    }

// Define position classes
    const positionClasses = {
      center: "items-center justify-center",
      top: "items-start justify-center pt-16",
      bottom: "items-end justify-center pb-16",
    }

// Define variant classes
    const variantClasses = {
      default: "bg-[#1E2F3C] border border-[#00FFFF]/30",
      blur: "bg-[#1E2F3C]/80 backdrop-blur-md border border-[#00FFFF]/20",
      minimal: "bg-[#1E2F3C] border-none shadow-xl",
    }

// Animation variants
    const overlayVariants = {
      hidden: { opacity: 0 },
      visible: { opacity: 1 },
    }

const modalVariants = {
      hidden: {
        opacity: 0,
        scale: 0.95,
        y: position === "top" ? -20 : position === "bottom" ? 20 : 0,
      },
      visible: {
        opacity: 1,
        scale: 1,
        y: 0,
        transition: {
          type: "spring",
          damping: 25,
          stiffness: 300,
        },
      },
      exit: {
        opacity: 0,
        scale: 0.95,
        transition: {
          duration: 0.2,
        },
      },
    }

return (
      <AnimatePresence>
        {isOpen && (
          <div className="fixed inset-0 z-50 overflow-y-auto">
            <motion.div
              className={cn("fixed inset-0 bg-black/50 z-0", overlayClassName)}
              initial="hidden"
              animate="visible"
              exit="hidden"
              variants={overlayVariants}
              onClick={closeOnClickOutside ? onClose : undefined}
            />

<div className={cn("min-h-full p-4 flex", positionClasses[position])}>
              <motion.div
                ref={ref}
                className={cn(
                  "relative w-full rounded-lg shadow-lg",
                  sizeClasses[size],
                  variantClasses[variant],
                  className,
                )}
                initial="hidden"
                animate="visible"
                exit="exit"
                variants={modalVariants}
                onClick={(e) => e.stopPropagation()}
              >
                {showCloseButton && (
                  <button
                    className="absolute top-4 right-4 p-1 rounded-full hover:bg-[#00FFFF]/10 transition-colors"
                    onClick={onClose}
                    aria-label="Close modal"
                  >
                    <X className="h-5 w-5" />
                  </button>
                )}

{(title || description) && (
                  <div className="p-6 pb-0">
                    {title && <h2 className="text-xl font-semibold mb-2">{title}</h2>}
                    {description && <p className="text-[#B0BEC5]">{description}</p>}
                  </div>
                )}

<div className={cn("p-6", contentClassName)}>{children}</div>

{footer && <div className="p-6 pt-0 flex justify-end gap-2">{footer}</div>}
              </motion.div>
            </div>
          </div>
        )}
      </AnimatePresence>
    )
  },
)

EnhancedModal.displayName = "EnhancedModal"

[V0_FILE]typescriptreact:file="components/ui/enhanced-drawer.tsx"
"use client"

import type React from "react"

import { useState, useEffect, forwardRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { X } from "lucide-react"
import { cn } from "@/lib/utils"

export interface EnhancedDrawerProps {
  isOpen: boolean
  onClose: () => void
  title?: React.ReactNode
  description?: React.ReactNode
  children: React.ReactNode
  footer?: React.ReactNode
  position?: "left" | "right" | "top" | "bottom"
  size?: "sm" | "md" | "lg" | "full"
  closeOnClickOutside?: boolean
  showCloseButton?: boolean
  variant?: "default" | "blur" | "minimal"
  className?: string
  contentClassName?: string
  overlayClassName?: string
}

export const EnhancedDrawer = forwardRef<HTMLDivElement, EnhancedDrawerProps>(
  (
    {
      isOpen,
      onClose,
      title,
      description,
      children,
      footer,
      position = "right",
      size = "md",
      closeOnClickOutside = true,
      showCloseButton = true,
      variant = "default",
      className,
      contentClassName,
      overlayClassName,
    },
    ref,
  ) => {
    const [isMounted, setIsMounted] = useState(false)

// Handle escape key press
    useEffect(() => {
      const handleEscapeKey = (e: KeyboardEvent) => {
        if (e.key === "Escape" && isOpen) {
          onClose()
        }
      }

if (isOpen) {
        document.addEventListener("keydown", handleEscapeKey)
        // Prevent scrolling when drawer is open
        document.body.style.overflow = "hidden"
      }

return () => {
        document.removeEventListener("keydown", handleEscapeKey)
        // Restore scrolling when drawer is closed
        document.body.style.overflow = ""
      }
    }, [isOpen, onClose])

// Handle client-side rendering
    useEffect(() => {
      setIsMounted(true)
    }, [])

if (!isMounted) {
      return null
    }

// Define size classes based on position
    const sizeClasses = {
      left: {
        sm: "w-64",
        md: "w-80",
        lg: "w-96",
        full: "w-full",
      },
      right: {
        sm: "w-64",
        md: "w-80",
        lg: "w-96",
        full: "w-full",
      },
      top: {
        sm: "h-1/4",
        md: "h-1/3",
        lg: "h-1/2",
        full: "h-full",
      },
      bottom: {
        sm: "h-1/4",
        md: "h-1/3",
        lg: "h-1/2",
        full: "h-full",
      },
    }

// Define position classes
    const positionClasses = {
      left: "inset-y-0 left-0 h-full",
      right: "inset-y-0 right-0 h-full",
      top: "inset-x-0 top-0 w-full",
      bottom: "inset-x-0 bottom-0 w-full",
    }

// Define variant classes
    const variantClasses = {
      default: "bg-[#1E2F3C] border-[#00FFFF]/30",
      blur: "bg-[#1E2F3C]/80 backdrop-blur-md border-[#00FFFF]/20",
      minimal: "bg-[#1E2F3C] shadow-xl",
    }

// Define border classes based on position
    const borderClasses = {
      left: "border-r",
      right: "border-l",
      top: "border-b",
      bottom: "border-t",
    }

// Animation variants based on position
    const drawerVariants = {
      left: {
        hidden: { x: "-100%" },
        visible: { x: 0 },
        exit: { x: "-100%" },
      },
      right: {
        hidden: { x: "100%" },
        visible: { x: 0 },
        exit: { x: "100%" },
      },
      top: {
        hidden: { y: "-100%" },
        visible: { y: 0 },
        exit: { y: "-100%" },
      },
      bottom: {
        hidden: { y: "100%" },
        visible: { y: 0 },
        exit: { y: "100%" },
      },
    }

return (
      <AnimatePresence>
        {isOpen && (
          <div className="fixed inset-0 z-50 overflow-hidden">
            <motion.div
              className={cn("fixed inset-0 bg-black/50 z-0", overlayClassName)}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={closeOnClickOutside ? onClose : undefined}
            />

<motion.div
              ref={ref}
              className={cn(
                "fixed z-50",
                positionClasses[position],
                sizeClasses[position][size],
                variantClasses[variant],
                borderClasses[position],
                className,
              )}
              initial="hidden"
              animate="visible"
              exit="exit"
              variants={drawerVariants[position]}
              transition={{ type: "spring", damping: 30, stiffness: 300 }}
            >
              <div className="h-full flex flex-col">
                {(title || description || showCloseButton) && (
                  <div className="p-4 border-b border-[#00FFFF]/10 flex items-center justify-between">
                    <div>
                      {title && <h2 className="text-xl font-semibold">{title}</h2>}
                      {description && <p className="text-sm text-[#B0BEC5]">{description}</p>}
                    </div>

{showCloseButton && (
                      <button
                        className="p-1 rounded-full hover:bg-[#00FFFF]/10 transition-colors"
                        onClick={onClose}
                        aria-label="Close drawer"
                      >
                        <X className="h-5 w-5" />
                      </button>
                    )}
                  </div>
                )}

<div className={cn("flex-1 overflow-auto p-4", contentClassName)}>{children}</div>

{footer && <div className="p-4 border-t border-[#00FFFF]/10">{footer}</div>}
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    )
  },
)

EnhancedDrawer.displayName = "EnhancedDrawer"

[V0_FILE]typescriptreact:file="components/ui/enhanced-tabs.tsx"
"use client"

import type React from "react"

import { useState, useEffect, forwardRef } from "react"
import { motion } from "framer-motion"
import { cn } from "@/lib/utils"

export interface EnhancedTabsProps {
  tabs: {
    id: string
    label: React.ReactNode
    content: React.ReactNode
    icon?: React.ReactNode
    disabled?: boolean
  }[]
  defaultTab?: string
  onChange?: (tabId: string) => void
  variant?: "default" | "pills" | "underline" | "enclosed"
  size?: "sm" | "md" | "lg"
  fullWidth?: boolean
  animated?: boolean
  className?: string
  tabsClassName?: string
  contentClassName?: string
}

export const EnhancedTabs = forwardRef<HTMLDivElement, EnhancedTabsProps>(
  (
    {
      tabs,
      defaultTab,
      onChange,
      variant = "default",
      size = "md",
      fullWidth = false,
      animated = true,
      className,
      tabsClassName,
      contentClassName,
    },
    ref,
  ) => {
    const [activeTab, setActiveTab] = useState<string>(defaultTab || (tabs.length > 0 ? tabs[0].id : ""))
    const [isMounted, setIsMounted] = useState(false)

// Handle client-side rendering
    useEffect(() => {
      setIsMounted(true)
    }, [])

// Update active tab when defaultTab changes
    useEffect(() => {
      if (defaultTab) {
        setActiveTab(defaultTab)
      }
    }, [defaultTab])

const handleTabChange = (tabId: string) => {
      setActiveTab(tabId)
      onChange?.(tabId)
    }

// Define variant classes
    const variantClasses = {
      default: {
        container: "border-b border-[#00FFFF]/10",
        tab: "border-b-2 border-transparent hover:border-[#00FFFF]/30 hover:text-[#00FFFF]/70",
        activeTab: "border-[#00FFFF] text-[#00FFFF]",
      },
      pills: {
        container: "gap-2",
        tab: "rounded-full hover:bg-[#00FFFF]/10 hover:text-[#00FFFF]/70",
        activeTab: "bg-[#00FFFF]/20 text-[#00FFFF]",
      },
      underline: {
        container: "",
        tab: "border-b-2 border-transparent hover:text-[#00FFFF]/70",
        activeTab: "border-[#00FFFF] text-[#00FFFF]",
      },
      enclosed: {
        container: "bg-[#1E2F3C] rounded-lg p-1",
        tab: "rounded-md hover:bg-[#00FFFF]/5 hover:text-[#00FFFF]/70",
        activeTab: "bg-[#263A49] text-[#00FFFF] shadow-sm",
      },
    }

// Define size classes
    const sizeClasses = {
      sm: "text-sm py-2 px-3",
      md: "py-2 px-4",
      lg: "text-lg py-3 px-6",
    }

if (!isMounted) {
      return null
    }

return (
      <div ref={ref} className={cn("w-full", className)}>
        <div className={cn("flex", fullWidth ? "w-full" : "w-fit", variantClasses[variant].container, tabsClassName)}>
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => !tab.disabled && handleTabChange(tab.id)}
              className={cn(
                "relative flex items-center transition-all duration-200",
                sizeClasses[size],
                variantClasses[variant].tab,
                tab.id === activeTab && variantClasses[variant].activeTab,
                tab.disabled && "opacity-50 cursor-not-allowed",
                fullWidth && "flex-1 justify-center",
              )}
              disabled={tab.disabled}
              aria-selected={tab.id === activeTab}
              role="tab"
            >
              {tab.icon && <span className="mr-2">{tab.icon}</span>}
              {tab.label}

{variant === "pills" && tab.id === activeTab && animated && (
                <motion.span
                  layoutId="pill-indicator"
                  className="absolute inset-0 rounded-full bg-current -z-10"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ duration: 0.2 }}
                />
              )}

{variant === "enclosed" && tab.id === activeTab && animated && (
                <motion.span
                  layoutId="enclosed-indicator"
                  className="absolute inset-0 rounded-md bg-current -z-10"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ duration: 0.2 }}
                />
              )}
            </button>
          ))}
        </div>

<div className={cn("mt-4", contentClassName)}>
          {animated ? (
            <motion.div
              key={activeTab}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3 }}
            >
              {tabs.find((tab) => tab.id === activeTab)?.content}
            </motion.div>
          ) : (
            tabs.find((tab) => tab.id === activeTab)?.content
          )}
        </div>
      </div>
    )
  },
)

EnhancedTabs.displayName = "EnhancedTabs"

[V0_FILE]typescriptreact:file="components/ui/enhanced-accordion.tsx"
"use client"

import type React from "react"

import { useState, forwardRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { ChevronDown, Plus, Minus } from "lucide-react"
import { cn } from "@/lib/utils"

export interface EnhancedAccordionItemProps {
  id: string
  title: React.ReactNode
  content: React.ReactNode
  icon?: React.ReactNode
  disabled?: boolean
}

export interface EnhancedAccordionProps {
  items: EnhancedAccordionItemProps[]
  defaultOpen?: string[]
  multiple?: boolean
  variant?: "default" | "bordered" | "separated" | "minimal"
  iconPosition?: "left" | "right"
  iconType?: "chevron" | "plus" | "none"
  animated?: boolean
  className?: string
  itemClassName?: string
}

export const EnhancedAccordion = forwardRef<HTMLDivElement, EnhancedAccordionProps>(
  (
    {
      items,
      defaultOpen = [],
      multiple = false,
      variant = "default",
      iconPosition = "right",
      iconType = "chevron",
      animated = true,
      className,
      itemClassName,
    },
    ref,
  ) => {
    const [openItems, setOpenItems] = useState<string[]>(defaultOpen)

const handleToggle = (id: string) => {
      if (multiple) {
        setOpenItems((prev) => (prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]))
      } else {
        setOpenItems((prev) => (prev.includes(id) ? [] : [id]))
      }
    }

// Define variant classes
    const variantClasses = {
      default: {
        container: "border rounded-lg border-[#00FFFF]/20 divide-y divide-[#00FFFF]/20",
        item: "px-4 py-3",
      },
      bordered: {
        container: "divide-y divide-[#00FFFF]/20",
        item: "border border-[#00FFFF]/20 rounded-lg px-4 py-3 mb-2",
      },
      separated: {
        container: "space-y-2",
        item: "bg-[#1E2F3C] rounded-lg px-4 py-3",
      },
      minimal: {
        container: "space-y-1",
        item: "px-2 py-2 hover:bg-[#00FFFF]/5 rounded-md",
      },
    }

// Get icon component based on type and state
    const getIcon = (id: string) => {
      const isOpen = openItems.includes(id)

switch (iconType) {
        case "chevron":
          return (
            <ChevronDown
              className={cn("h-5 w-5 transition-transform duration-200", isOpen && "transform rotate-180")}
            />
          )
        case "plus":
          return isOpen ? <Minus className="h-5 w-5" /> : <Plus className="h-5 w-5" />
        case "none":
          return null
        default:
          return null
      }
    }

return (
      <div ref={ref} className={cn(variant !== "bordered" && variantClasses[variant].container, className)}>
        {items.map((item) => (
          <div key={item.id} className={cn(variant === "bordered" && variantClasses[variant].item, itemClassName)}>
            <button
              onClick={() => !item.disabled && handleToggle(item.id)}
              className={cn(
                "flex items-center justify-between w-full text-left",
                variant !== "bordered" && variantClasses[variant].item,
                item.disabled && "opacity-50 cursor-not-allowed",
              )}
              disabled={item.disabled}
              aria-expanded={openItems.includes(item.id)}
            >
              <div className={cn("flex items-center", iconPosition === "left" && "flex-row-reverse")}>
                {item.icon && <span className={cn(iconPosition === "left" ? "ml-2" : "mr-2")}>{item.icon}</span>}
                <span className="font-medium">{item.title}</span>
              </div>

{iconType !== "none" && <span className="flex-shrink-0 ml-2">{getIcon(item.id)}</span>}
            </button>

<AnimatePresence initial={false}>
              {openItems.includes(item.id) && (
                <motion.div
                  initial={animated ? { height: 0, opacity: 0 } : false}
                  animate={animated ? { height: "auto", opacity: 1 } : { opacity: 1 }}
                  exit={animated ? { height: 0, opacity: 0 } : { opacity: 0 }}
                  transition={{ duration: 0.2 }}
                  className="overflow-hidden"
                >
                  <div className={cn("pt-2 pb-1", variant !== "bordered" && "px-4", variant === "minimal" && "pl-6")}>
                    {item.content}
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        ))}
      </div>
    )
  },
)

EnhancedAccordion.displayName = "EnhancedAccordion"

[V0_FILE]typescriptreact:file="components/ui/enhanced-dropdown.tsx"
"use client"

import type React from "react"

import { useState, useRef, useEffect, forwardRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Check } from "lucide-react"
import { cn } from "@/lib/utils"

export interface EnhancedDropdownItemProps {
  id: string
  label: React.ReactNode
  icon?: React.ReactNode
  disabled?: boolean
  onClick?: () => void
}

export interface EnhancedDropdownProps {
  trigger: React.ReactNode
  items: EnhancedDropdownItemProps[]
  value?: string
  onChange?: (value: string) => void
  position?: "bottom-left" | "bottom-right" | "top-left" | "top-right"
  width?: "auto" | "trigger" | number
  variant?: "default" | "outline" | "ghost"
  showSelectedCheck?: boolean
  closeOnSelect?: boolean
  className?: string
  triggerClassName?: string
  menuClassName?: string
  itemClassName?: string
}

export const EnhancedDropdown = forwardRef<HTMLDivElement, EnhancedDropdownProps>(
  (
    {
      trigger,
      items,
      value,
      onChange,
      position = "bottom-left",
      width = "auto",
      variant = "default",
      showSelectedCheck = true,
      closeOnSelect = true,
      className,
      triggerClassName,
      menuClassName,
      itemClassName,
    },
    ref,
  ) => {
    const [isOpen, setIsOpen] = useState(false)
    const containerRef = useRef<HTMLDivElement>(null)
    const triggerRef = useRef<HTMLDivElement>(null)

// Close dropdown when clicking outside
    useEffect(() => {
      const handleClickOutside = (event: MouseEvent) => {
        if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
          setIsOpen(false)
        }
      }

if (isOpen) {
        document.addEventListener("mousedown", handleClickOutside)
      }

return () => {
        document.removeEventListener("mousedown", handleClickOutside)
      }
    }, [isOpen])

// Handle escape key press
    useEffect(() => {
      const handleEscapeKey = (e: KeyboardEvent) => {
        if (e.key === "Escape" && isOpen) {
          setIsOpen(false)
        }
      }

if (isOpen) {
        document.addEventListener("keydown", handleEscapeKey)
      }

return () => {
        document.removeEventListener("keydown", handleEscapeKey)
      }
    }, [isOpen])

const handleSelect = (item: EnhancedDropdownItemProps) => {
      if (item.disabled) return

if (onChange) {
        onChange(item.id)
      }

if (item.onClick) {
        item.onClick()
      }

if (closeOnSelect) {
        setIsOpen(false)
      }
    }

// Define variant classes
    const variantClasses = {
      default: "bg-[#1E2F3C] border border-[#00FFFF]/30 hover:bg-[#00FFFF]/10",
      outline: "bg-transparent border border-[#00FFFF]/30 hover:bg-[#00FFFF]/10",
      ghost: "bg-transparent hover:bg-[#00FFFF]/10",
    }

// Define position classes
    const positionClasses = {
      "bottom-left": "top-full left-0 mt-1",
      "bottom-right": "top-full right-0 mt-1",
      "top-left": "bottom-full left-0 mb-1",
      "top-right": "bottom-full right-0 mb-1",
    }

// Calculate width style
    const getWidthStyle = () => {
      if (width === "auto") return {}
      if (width === "trigger" && triggerRef.current) {
        return { width: triggerRef.current.offsetWidth }
      }
      if (typeof width === "number") {
        return { width: `${width}px` }
      }
      return {}
    }

return (
      <div ref={containerRef} className={cn("relative inline-block", className)}>
        <div ref={triggerRef} onClick={() => setIsOpen(!isOpen)} className={cn("cursor-pointer", triggerClassName)}>
          {trigger}
        </div>

<AnimatePresence>
          {isOpen && (
            <motion.div
              ref={ref}
              className={cn(
                "absolute z-50 min-w-[10rem] rounded-md shadow-lg py-1",
                "bg-[#1E2F3C] border border-[#00FFFF]/20",
                positionClasses[position],
                menuClassName,
              )}
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.95 }}
              transition={{ duration: 0.1 }}
              style={getWidthStyle()}
            >
              {items.map((item) => (
                <div
                  key={item.id}
                  onClick={() => handleSelect(item)}
                  className={cn(
                    "flex items-center px-4 py-2 text-sm",
                    !item.disabled && "cursor-pointer hover:bg-[#00FFFF]/10",
                    item.disabled && "opacity-50 cursor-not-allowed",
                    value === item.id && "bg-[#00FFFF]/5 text-[#00FFFF]",
                    itemClassName,
                  )}
                >
                  {item.icon && <span className="mr-2">{item.icon}</span>}
                  <span>{item.label}</span>

{showSelectedCheck && value === item.id && <Check className="ml-auto h-4 w-4" />}
                </div>
              ))}
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    )
  },
)

EnhancedDropdown.displayName = "EnhancedDropdown"

[V0_FILE]typescriptreact:file="components/ui/enhanced-carousel.tsx"
"use client"

import type React from "react"

import { useState, useRef, useEffect, forwardRef } from "react"
import { motion, AnimatePresence, type PanInfo } from "framer-motion"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { cn } from "@/lib/utils"

export interface EnhancedCarouselProps {
  items: React.ReactNode[]
  autoPlay?: boolean
  interval?: number
  showArrows?: boolean
  showDots?: boolean
  infinite?: boolean
  effect?: "slide" | "fade" | "zoom"
  className?: string
  slideClassName?: string
  dotsClassName?: string
  arrowClassName?: string
}

export const EnhancedCarousel = forwardRef<HTMLDivElement, EnhancedCarouselProps>(
  (
    {
      items,
      autoPlay = false,
      interval = 5000,
      showArrows = true,
      showDots = true,
      infinite = true,
      effect = "slide",
      className,
      slideClassName,
      dotsClassName,
      arrowClassName,
    },
    ref,
  ) => {
    const [currentIndex, setCurrentIndex] = useState(0)
    const [direction, setDirection] = useState(0)
    const [isPaused, setIsPaused] = useState(false)
    const containerRef = useRef<HTMLDivElement>(null)

// Auto play functionality
    useEffect(() => {
      if (!autoPlay || isPaused || items.length <= 1) return

const timer = setInterval(() => {
        handleNext()
      }, interval)

return () => clearInterval(timer)
    }, [autoPlay, interval, currentIndex, isPaused, items.length])

const handlePrevious = () => {
      setDirection(-1)
      setCurrentIndex((prev) => {
        if (prev === 0) {
          return infinite ? items.length - 1 : 0
        }
        return prev - 1
      })
    }

const handleNext = () => {
      setDirection(1)
      setCurrentIndex((prev) => {
        if (prev === items.length - 1) {
          return infinite ? 0 : items.length - 1
        }
        return prev + 1
      })
    }

const handleDotClick = (index: number) => {
      setDirection(index > currentIndex ? 1 : -1)
      setCurrentIndex(index)
    }

const handleDragEnd = (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
      const threshold = 50

if (info.offset.x > threshold) {
        handlePrevious()
      } else if (info.offset.x < -threshold) {
        handleNext()
      }
    }

// Define animation variants based on effect
    const slideVariants = {
      slide: {
        enter: (direction: number) => ({
          x: direction > 0 ? "100%" : "-100%",
          opacity: 1,
        }),
        center: {
          x: 0,
          opacity: 1,
        },
        exit: (direction: number) => ({
          x: direction > 0 ? "-100%" : "100%",
          opacity: 1,
        }),
      },
      fade: {
        enter: {
          opacity: 0,
        },
        center: {
          opacity: 1,
        },
        exit: {
          opacity: 0,
        },
      },
      zoom: {
        enter: {
          opacity: 0,
          scale: 0.8,
        },
        center: {
          opacity: 1,
          scale: 1,
        },
        exit: {
          opacity: 0,
          scale: 1.2,
        },
      },
    }

return (
      <div
        ref={ref}
        className={cn("relative overflow-hidden rounded-lg", className)}
        onMouseEnter={() => setIsPaused(true)}
        onMouseLeave={() => setIsPaused(false)}
      >
        <div ref={containerRef} className="relative w-full h-full">
          <AnimatePresence initial={false} custom={direction} mode="popLayout">
            <motion.div
              key={currentIndex}
              custom={direction}
              variants={slideVariants[effect]}
              initial="enter"
              animate="center"
              exit="exit"
              transition={{
                x: { type: "spring", stiffness: 300, damping: 30 },
                opacity: { duration: 0.4 },
                scale: { duration: 0.4 },
              }}
              drag={effect === "slide" ? "x" : false}
              dragConstraints={{ left: 0, right: 0 }}
              dragElastic={0.1}
              onDragEnd={handleDragEnd}
              className={cn("absolute inset-0 w-full h-full", slideClassName)}
            >
              {items[currentIndex]}
            </motion.div>
          </AnimatePresence>

{showArrows && items.length > 1 && (
            <>
              <button
                onClick={handlePrevious}
                className={cn(
                  "absolute top-1/2 left-2 transform -translate-y-1/2 z-10",
                  "w-10 h-10 rounded-full bg-black/30 backdrop-blur-sm flex items-center justify-center",
                  "text-white hover:bg-black/50 transition-colors",
                  !infinite && currentIndex === 0 && "opacity-50 cursor-not-allowed",
                  arrowClassName,
                )}
                disabled={!infinite && currentIndex === 0}
                aria-label="Previous slide"
              >
                <ChevronLeft className="h-6 w-6" />
              </button>

<button
                onClick={handleNext}
                className={cn(
                  "absolute top-1/2 right-2 transform -translate-y-1/2 z-10",
                  "w-10 h-10 rounded-full bg-black/30 backdrop-blur-sm flex items-center justify-center",
                  "text-white hover:bg-black/50 transition-colors",
                  !infinite && currentIndex === items.length - 1 && "opacity-50 cursor-not-allowed",
                  arrowClassName,
                )}
                disabled={!infinite && currentIndex === items.length - 1}
                aria-label="Next slide"
              >
                <ChevronRight className="h-6 w-6" />
              </button>
            </>
          )}

{showDots && items.length > 1 && (
            <div
              className={cn(
                "absolute bottom-4 left-1/2 transform -translate-x-1/2 z-10",
                "flex items-center space-x-2",
                dotsClassName,
              )}
            >
              {items.map((_, index) => (
                <button
                  key={index}
                  onClick={() => handleDotClick(index)}
                  className={cn(
                    "w-2 h-2 rounded-full transition-all",
                    index === currentIndex ? "bg-white w-3 h-3" : "bg-white/50 hover:bg-white/80",
                  )}
                  aria-label={`Go to slide ${index + 1}`}
                />
              ))}
            </div>
          )}
        </div>
      </div>
    )
  },
)

EnhancedCarousel.displayName = "EnhancedCarousel"

[V0_FILE]typescriptreact:file="components/ui/enhanced-popover.tsx"
"use client"

import type React from "react"

import { useState, useRef, useEffect, forwardRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { cn } from "@/lib/utils"

export interface EnhancedPopoverProps {
  trigger: React.ReactNode
  content: React.ReactNode
  position?: "top" | "bottom" | "left" | "right"
  align?: "start" | "center" | "end"
  openOnHover?: boolean
  closeOnClickOutside?: boolean
  className?: string
  triggerClassName?: string
  contentClassName?: string
}

export const EnhancedPopover = forwardRef<HTMLDivElement, EnhancedPopoverProps>(
  (
    {
      trigger,
      content,
      position = "bottom",
      align = "center",
      openOnHover = false,
      closeOnClickOutside = true,
      className,
      triggerClassName,
      contentClassName,
    },
    ref,
  ) => {
    const [isOpen, setIsOpen] = useState(false)
    const containerRef = useRef<HTMLDivElement>(null)
    const triggerRef = useRef<HTMLDivElement>(null)

// Close popover when clicking outside
    useEffect(() => {
      if (!closeOnClickOutside) return

const handleClickOutside = (event: MouseEvent) => {
        if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
          setIsOpen(false)
        }
      }

if (isOpen) {
        document.addEventListener("mousedown", handleClickOutside)
      }

return () => {
        document.removeEventListener("mousedown", handleClickOutside)
      }
    }, [isOpen, closeOnClickOutside])

// Define position classes
    const positionClasses = {
      top: {
        start: "bottom-full left-0 mb-2",
        center: "bottom-full left-1/2 -translate-x-1/2 mb-2",
        end: "bottom-full right-0 mb-2",
      },
      bottom: {
        start: "top-full left-0 mt-2",
        center: "top-full left-1/2 -translate-x-1/2 mt-2",
        end: "top-full right-0 mt-2",
      },
      left: {
        start: "right-full top-0 mr-2",
        center: "right-full top-1/2 -translate-y-1/2 mr-2",
        end: "right-full bottom-0 mr-2",
      },
      right: {
        start: "left-full top-0 ml-2",
        center: "left-full top-1/2 -translate-y-1/2 ml-2",
        end: "left-full bottom-0 ml-2",
      },
    }

// Animation variants based on position
    const getAnimationVariants = () => {
      switch (position) {
        case "top":
          return {
            hidden: { opacity: 0, y: 10 },
            visible: { opacity: 1, y: 0 },
          }
        case "bottom":
          return {
            hidden: { opacity: 0, y: -10 },
            visible: { opacity: 1, y: 0 },
          }
        case "left":
          return {
            hidden: { opacity: 0, x: 10 },
            visible: { opacity: 1, x: 0 },
          }
        case "right":
          return {
            hidden: { opacity: 0, x: -10 },
            visible: { opacity: 1, x: 0 },
          }
        default:
          return {
            hidden: { opacity: 0 },
            visible: { opacity: 1 },
          }
      }
    }

const handleTriggerClick = () => {
      if (!openOnHover) {
        setIsOpen(!isOpen)
      }
    }

const handleMouseEnter = () => {
      if (openOnHover) {
        setIsOpen(true)
      }
    }

const handleMouseLeave = () => {
      if (openOnHover) {
        setIsOpen(false)
      }
    }

return (
      <div
        ref={containerRef}
        className={cn("relative inline-block", className)}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        <div
          ref={triggerRef}
          onClick={handleTriggerClick}
          className={cn(openOnHover ? "cursor-default" : "cursor-pointer", triggerClassName)}
        >
          {trigger}
        </div>

<AnimatePresence>
          {isOpen && (
            <motion.div
              ref={ref}
              className={cn(
                "absolute z-50 min-w-[10rem] rounded-md shadow-lg py-2 px-3",
                "bg-[#1E2F3C] border border-[#00FFFF]/20",
                positionClasses[position][align],
                contentClassName,
              )}
              variants={getAnimationVariants()}
              initial="hidden"
              animate="visible"
              exit="hidden"
              transition={{ duration: 0.15 }}
            >
              {content}
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    )
  },
)

EnhancedPopover.displayName = "EnhancedPopover"

[V0_FILE]typescriptreact:file="app/ui-kit/page.tsx" isEdit="true"
"use client"

import { useState } from "react"
import { EnhancedButton } from "@/components/ui/enhanced-button"
import { EnhancedCard } from "@/components/ui/enhanced-card"
import { EnhancedInput } from "@/components/ui/enhanced-input"
import { EnhancedTooltip } from "@/components/ui/enhanced-tooltip"
import { EnhancedAlert } from "@/components/ui/enhanced-alert"
import { EnhancedProgress } from "@/components/ui/enhanced-progress"
import { EnhancedAvatar } from "@/components/ui/enhanced-avatar"
import { EnhancedSkeleton } from "@/components/ui/enhanced-skeleton"
import { EnhancedTagInput } from "@/components/ui/enhanced-tag-input"
import { EnhancedFileUpload } from "@/components/ui/enhanced-file-upload"
import { EnhancedNotification } from "@/components/ui/enhanced-notification"
import { EnhancedModal } from "@/components/ui/enhanced-modal"
import { EnhancedDrawer } from "@/components/ui/enhanced-drawer"
import { EnhancedTabs } from "@/components/ui/enhanced-tabs"
import { EnhancedAccordion } from "@/components/ui/enhanced-accordion"
import { EnhancedDropdown } from "@/components/ui/enhanced-dropdown"
import { EnhancedCarousel } from "@/components/ui/enhanced-carousel"
import { EnhancedPopover } from "@/components/ui/enhanced-popover"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import {
  ArrowRight,
  Search,
  Heart,
  Star,
  Settings,
  Smartphone,
  Zap,
  User,
  Info,
  AlertTriangle,
  Bell,
  MessageSquare,
  ChevronDown,
  Mail,
  Phone,
  MapPin,
} from "lucide-react"

export default function UIKitPage() {
  const [tags, setTags] = useState<string[]>(["eSIM", "Digital"])
  const [files, setFiles] = useState<File[]>([])
  const [uploadProgress, setUploadProgress] = useState(0)
  const [showNotification, setShowNotification] = useState(false)
  const [notificationType, setNotificationType] = useState<"default" | "info" | "success" | "warning" | "error">(
    "default",
  )

// Modal states
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [modalSize, setModalSize] = useState<"sm" | "md" | "lg" | "xl" | "full">("md")
  const [modalPosition, setModalPosition] = useState<"center" | "top" | "bottom">("center")

// Drawer states
  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
  const [drawerPosition, setDrawerPosition] = useState<"left" | "right" | "top" | "bottom">("right")

// Dropdown state
  const [selectedItem, setSelectedItem] = useState("item1")

// Simulate upload progress
  const simulateUpload = () => {
    setUploadProgress(0)
    const interval = setInterval(() => {
      setUploadProgress((prev) => {
        if (prev >= 100) {
          clearInterval(interval)
          return 100
        }
        return prev + 5
      })
    }, 300)
  }

// Show notification with type
  const showNotificationWithType = (type: "default" | "info" | "success" | "warning" | "error") => {
    setNotificationType(type)
    setShowNotification(true)
  }

// Sample tabs data
  const tabsData = [
    {
      id: "tab1",
      label: "Profile",
      icon: <User size={16} />,
      content: (
        <div className="p-4 bg-[#1E2F3C] rounded-lg">
          <h3 className="text-lg font-medium mb-2">Profile Content</h3>
          <p className="text-[#B0BEC5]">This is the profile tab content.</p>
        </div>
      ),
    },
    {
      id: "tab2",
      label: "Settings",
      icon: <Settings size={16} />,
      content: (
        <div className="p-4 bg-[#1E2F3C] rounded-lg">
          <h3 className="text-lg font-medium mb-2">Settings Content</h3>
          <p className="text-[#B0BEC5]">This is the settings tab content.</p>
        </div>
      ),
    },
    {
      id: "tab3",
      label: "Messages",
      icon: <MessageSquare size={16} />,
      content: (
        <div className="p-4 bg-[#1E2F3C] rounded-lg">
          <h3 className="text-lg font-medium mb-2">Messages Content</h3>
          <p className="text-[#B0BEC5]">This is the messages tab content.</p>
        </div>
      ),
    },
  ]

// Sample accordion data
  const accordionData = [
    {
      id: "item1",
      title: "What is an eSIM?",
      content: (
        <p className="text-[#B0BEC5]">
          An eSIM (embedded SIM) is a digital SIM that allows you to activate a cellular plan from your carrier without
          having to use a physical SIM card.
        </p>
      ),
      icon: <Info size={16} className="text-[#00FFFF]" />,
    },
    {
      id: "item2",
      title: "How do I activate an eSIM?",
      content: (
        <p className="text-[#B0BEC5]">
          To activate an eSIM, you'll need to scan a QR code provided by your carrier or enter an activation code
          manually. The exact steps vary by device.
        </p>
      ),
      icon: <Zap size={16} className="text-[#00FFFF]" />,
    },
    {
      id: "item3",
      title: "Which devices support eSIM?",
      content: (
        <p className="text-[#B0BEC5]">
          Most modern smartphones and tablets support eSIM, including iPhone XS and newer, Google Pixel 3 and newer, and
          Samsung Galaxy S20 and newer.
        </p>
      ),
      icon: <Smartphone size={16} className="text-[#00FFFF]" />,
    },
  ]

// Sample dropdown items
  const dropdownItems = [
    {
      id: "item1",
      label: "Option 1",
      icon: <User size={16} />,
    },
    {
      id: "item2",
      label: "Option 2",
      icon: <Settings size={16} />,
    },
    {
      id: "item3",
      label: "Option 3",
      icon: <Bell size={16} />,
    },
    {
      id: "item4",
      label: "Disabled Option",
      icon: <AlertTriangle size={16} />,
      disabled: true,
    },
  ]

// Sample carousel items
  const carouselItems = [
    <div
      key="slide1"
      className="w-full h-64 bg-gradient-to-r from-[#00FFFF]/20 to-[#00CCFF]/20 flex items-center justify-center"
    >
      <h3 className="text-2xl font-bold">Slide 1</h3>
    </div>,
    <div
      key="slide2"
      className="w-full h-64 bg-gradient-to-r from-[#00FFFF]/30 to-[#00CCFF]/30 flex items-center justify-center"
    >
      <h3 className="text-2xl font-bold">Slide 2</h3>
    </div>,
    <div
      key="slide3"
      className="w-full h-64 bg-gradient-to-r from-[#00FFFF]/40 to-[#00CCFF]/40 flex items-center justify-center"
    >
      <h3 className="text-2xl font-bold">Slide 3</h3>
    </div>,
  ]

return (
    <div className="container mx-auto px-4 py-12">
      <h1 className="heading-1 mb-8">eSIM Myanmar UI Kit</h1>
      <p className="text-xl text-[#B0BEC5] max-w-3xl mb-12">
        A comprehensive collection of UI components and design patterns for the eSIM Myanmar application.
      </p>

<Tabs defaultValue="dialogs" className="w-full">
        <TabsList className="mb-8">
          <TabsTrigger value="dialogs">Dialogs & Overlays</TabsTrigger>
          <TabsTrigger value="navigation">Navigation</TabsTrigger>
          <TabsTrigger value="data-display">Data Display</TabsTrigger>
          <TabsTrigger value="inputs">Inputs & Forms</TabsTrigger>
          <TabsTrigger value="feedback">Feedback</TabsTrigger>
          <TabsTrigger value="buttons">Buttons</TabsTrigger>
        </TabsList>

{/* Dialogs & Overlays */}
        <TabsContent value="dialogs" className="space-y-8">
          <EnhancedCard>
            <CardHeader>
              <CardTitle>Modal</CardTitle>
              <CardDescription>Dialog windows for important interactions</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <EnhancedButton
                    variant="primary"
                    onClick={() => {
                      setModalSize("md")
                      setModalPosition("center")
                      setIsModalOpen(true)
                    }}
                  >
                    Open Default Modal
                  </EnhancedButton>

<EnhancedButton
                    variant="secondary"
                    onClick={() => {
                      setModalSize("sm")
                      setModalPosition("center")
                      setIsModalOpen(true)
                    }}
                  >
                    Open Small Modal
                  </EnhancedButton>

<EnhancedButton
                    variant="secondary"
                    onClick={() => {
                      setModalSize("lg")
                      setModalPosition("center")
                      setIsModalOpen(true)
                    }}
                  >
                    Open Large Modal
                  </EnhancedButton>

<EnhancedButton
                    variant="secondary"
                    onClick={() => {
                      setModalSize("md")
                      setModalPosition("top")
                      setIsModalOpen(true)
                    }}
                  >
                    Open Top Modal
                  </EnhancedButton>

<EnhancedButton
                    variant="secondary"
                    onClick={() => {
                      setModalSize("md")
                      setModalPosition("bottom")
                      setIsModalOpen(true)
                    }}
                  >
                    Open Bottom Modal
                  </EnhancedButton>

<EnhancedButton
                    variant="secondary"
                    onClick={() => {
                      setModalSize("full")
                      setModalPosition("center")
                      setIsModalOpen(true)
                    }}
                  >
                    Open Full Screen Modal
                  </EnhancedButton>
                </div>

<EnhancedModal
                  isOpen={isModalOpen}
                  onClose={() => setIsModalOpen(false)}
                  title="Modal Title"
                  description="This is a description of the modal content."
                  size={modalSize}
                  position={modalPosition}
                  footer={
                    <>
                      <EnhancedButton variant="secondary" onClick={() => setIsModalOpen(false)}>
                        Cancel
                      </EnhancedButton>
                      <EnhancedButton variant="primary" onClick={() => setIsModalOpen(false)}>
                        Confirm
                      </EnhancedButton>
                    </>
                  }
                >
                  <div className="space-y-4">
                    <p className="text-[#B0BEC5]">
                      This is the content of the modal. You can put any components or text here.
                    </p>
                    <div className="p-4 bg-[#263A49] rounded-lg">
                      <p className="text-sm">Modal size: {modalSize}</p>
                      <p className="text-sm">Modal position: {modalPosition}</p>
                    </div>
                  </div>
                </EnhancedModal>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Drawer</CardTitle>
              <CardDescription>Slide-in panels for side content</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <EnhancedButton
                    variant="primary"
                    onClick={() => {
                      setDrawerPosition("right")
                      setIsDrawerOpen(true)
                    }}
                  >
                    Open Right Drawer
                  </EnhancedButton>

<EnhancedButton
                    variant="secondary"
                    onClick={() => {
                      setDrawerPosition("left")
                      setIsDrawerOpen(true)
                    }}
                  >
                    Open Left Drawer
                  </EnhancedButton>

<EnhancedButton
                    variant="secondary"
                    onClick={() => {
                      setDrawerPosition("top")
                      setIsDrawerOpen(true)
                    }}
                  >
                    Open Top Drawer
                  </EnhancedButton>

<EnhancedButton
                    variant="secondary"
                    onClick={() => {
                      setDrawerPosition("bottom")
                      setIsDrawerOpen(true)
                    }}
                  >
                    Open Bottom Drawer
                  </EnhancedButton>
                </div>

<EnhancedDrawer
                  isOpen={isDrawerOpen}
                  onClose={() => setIsDrawerOpen(false)}
                  title="Drawer Title"
                  description="This is a description of the drawer content."
                  position={drawerPosition}
                  footer={
                    <div className="flex justify-end">
                      <EnhancedButton variant="primary" onClick={() => setIsDrawerOpen(false)}>
                        Close Drawer
                      </EnhancedButton>
                    </div>
                  }
                >
                  <div className="space-y-4">
                    <p className="text-[#B0BEC5]">
                      This is the content of the drawer. You can put any components or text here.
                    </p>
                    <div className="p-4 bg-[#263A49] rounded-lg">
                      <p className="text-sm">Drawer position: {drawerPosition}</p>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="drawer-input">Sample Input</Label>
                      <EnhancedInput id="drawer-input" placeholder="Enter some text..." />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="drawer-textarea">Sample Textarea</Label>
                      <Textarea
                        id="drawer-textarea"
                        placeholder="Enter a longer message..."
                        className="min-h-[100px] bg-[#1E2F3C] border-[#00FFFF]/30 focus:border-[#00FFFF]"
                      />
                    </div>
                  </div>
                </EnhancedDrawer>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Popover</CardTitle>
              <CardDescription>Small floating content panels</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-6">
                  <h3 className="text-lg font-medium">Click Trigger</h3>
                  <div className="flex justify-center">
                    <EnhancedPopover
                      trigger={<EnhancedButton variant="secondary">Click Me</EnhancedButton>}
                      content={
                        <div className="w-64">
                          <h4 className="font-medium mb-2">Popover Title</h4>
                          <p className="text-sm text-[#B0BEC5]">
                            This is a popover with content that appears when you click the trigger.
                          </p>
                        </div>
                      }
                    />
                  </div>
                  <p className="text-sm text-[#B0BEC5] text-center">Default popover (click to toggle)</p>
                </div>

<div className="space-y-6">
                  <h3 className="text-lg font-medium">Hover Trigger</h3>
                  <div className="flex justify-center">
                    <EnhancedPopover
                      trigger={<EnhancedButton variant="secondary">Hover Me</EnhancedButton>}
                      content={
                        <div className="w-64">
                          <h4 className="font-medium mb-2">Hover Popover</h4>
                          <p className="text-sm text-[#B0BEC5]">
                            This popover appears when you hover over the trigger.
                          </p>
                        </div>
                      }
                      openOnHover
                    />
                  </div>
                  <p className="text-sm text-[#B0BEC5] text-center">openOnHover</p>
                </div>
              </div>

<div className="mt-8 grid grid-cols-1 md:grid-cols-4 gap-4">
                <div className="space-y-2">
                  <div className="flex justify-center">
                    <EnhancedPopover
                      trigger={<EnhancedButton variant="secondary">Top Position</EnhancedButton>}
                      content={
                        <div className="w-48">
                          <p className="text-sm">Top position popover</p>
                        </div>
                      }
                      position="top"
                    />
                  </div>
                  <p className="text-sm text-[#B0BEC5] text-center">position="top"</p>
                </div>

<div className="space-y-2">
                  <div className="flex justify-center">
                    <EnhancedPopover
                      trigger={<EnhancedButton variant="secondary">Bottom Position</EnhancedButton>}
                      content={
                        <div className="w-48">
                          <p className="text-sm">Bottom position popover</p>
                        </div>
                      }
                      position="bottom"
                    />
                  </div>
                  <p className="text-sm text-[#B0BEC5] text-center">position="bottom"</p>
                </div>

<div className="space-y-2">
                  <div className="flex justify-center">
                    <EnhancedPopover
                      trigger={<EnhancedButton variant="secondary">Left Position</EnhancedButton>}
                      content={
                        <div className="w-48">
                          <p className="text-sm">Left position popover</p>
                        </div>
                      }
                      position="left"
                    />
                  </div>
                  <p className="text-sm text-[#B0BEC5] text-center">position="left"</p>
                </div>

<div className="space-y-2">
                  <div className="flex justify-center">
                    <EnhancedPopover
                      trigger={<EnhancedButton variant="secondary">Right Position</EnhancedButton>}
                      content={
                        <div className="w-48">
                          <p className="text-sm">Right position popover</p>
                        </div>
                      }
                      position="right"
                    />
                  </div>
                  <p className="text-sm text-[#B0BEC5] text-center">position="right"</p>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>
        </TabsContent>

{/* Navigation */}
        <TabsContent value="navigation" className="space-y-8">
          <EnhancedCard>
            <CardHeader>
              <CardTitle>Tabs</CardTitle>
              <CardDescription>Tabbed interface for organizing content</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-8">
                <div className="space-y-2">
                  <h3 className="text-lg font-medium">Default Tabs</h3>
                  <EnhancedTabs tabs={tabsData} />
                  <p className="text-sm text-[#B0BEC5] mt-2">variant="default"</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Pills Variant</h3>
                  <EnhancedTabs tabs={tabsData} variant="pills" />
                  <p className="text-sm text-[#B0BEC5] mt-2">variant="pills"</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Underline Variant</h3>
                  <EnhancedTabs tabs={tabsData} variant="underline" />
                  <p className="text-sm text-[#B0BEC5] mt-2">variant="underline"</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Enclosed Variant</h3>
                  <EnhancedTabs tabs={tabsData} variant="enclosed" />
                  <p className="text-sm text-[#B0BEC5] mt-2">variant="enclosed"</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Full Width Tabs</h3>
                  <EnhancedTabs tabs={tabsData} variant="enclosed" fullWidth />
                  <p className="text-sm text-[#B0BEC5] mt-2">fullWidth</p>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Accordion</CardTitle>
              <CardDescription>Collapsible content panels</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-8">
                <div className="space-y-2">
                  <h3 className="text-lg font-medium">Default Accordion</h3>
                  <EnhancedAccordion items={accordionData} />
                  <p className="text-sm text-[#B0BEC5] mt-2">variant="default"</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Bordered Variant</h3>
                  <EnhancedAccordion items={accordionData} variant="bordered" />
                  <p className="text-sm text-[#B0BEC5] mt-2">variant="bordered"</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Separated Variant</h3>
                  <EnhancedAccordion items={accordionData} variant="separated" />
                  <p className="text-sm text-[#B0BEC5] mt-2">variant="separated"</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Minimal Variant</h3>
                  <EnhancedAccordion items={accordionData} variant="minimal" />
                  <p className="text-sm text-[#B0BEC5] mt-2">variant="minimal"</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Multiple Open Items</h3>
                  <EnhancedAccordion
                    items={accordionData}
                    variant="bordered"
                    multiple
                    defaultOpen={["item1", "item2"]}
                  />
                  <p className="text-sm text-[#B0BEC5] mt-2">multiple defaultOpen={["item1", "item2"]}</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Plus/Minus Icons</h3>
                  <EnhancedAccordion items={accordionData} variant="bordered" iconType="plus" />
                  <p className="text-sm text-[#B0BEC5] mt-2">iconType="plus"</p>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Dropdown</CardTitle>
              <CardDescription>Dropdown menus for navigation and selection</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-6">
                  <div className="space-y-2">
                    <h3 className="text-lg font-medium">Default Dropdown</h3>
                    <div className="flex justify-center">
                      <EnhancedDropdown
                        trigger={
                          <EnhancedButton variant="secondary">
                            Select Option <ChevronDown className="ml-2 h-4 w-4" />
                          </EnhancedButton>
                        }
                        items={dropdownItems}
                        value={selectedItem}
                        onChange={setSelectedItem}
                      />
                    </div>
                    <p className="text-sm text-[#B0BEC5] text-center">Default dropdown</p>
                  </div>

<div className="space-y-2">
                    <h3 className="text-lg font-medium">Position Variants</h3>
                    <div className="flex flex-wrap justify-center gap-4">
                      <EnhancedDropdown
                        trigger={
                          <EnhancedButton variant="secondary" size="sm">
                            Bottom Left <ChevronDown className="ml-1 h-3 w-3" />
                          </EnhancedButton>
                        }
                        items={dropdownItems}
                        position="bottom-left"
                      />

<EnhancedDropdown
                        trigger={
                          <EnhancedButton variant="secondary" size="sm">
                            Bottom Right <ChevronDown className="ml-1 h-3 w-3" />
                          </EnhancedButton>
                        }
                        items={dropdownItems}
                        position="bottom-right"
                      />

<EnhancedDropdown
                        trigger={
                          <EnhancedButton variant="secondary" size="sm">
                            Top Left <ChevronDown className="ml-1 h-3 w-3" />
                          </EnhancedButton>
                        }
                        items={dropdownItems}
                        position="top-left"
                      />

<EnhancedDropdown
                        trigger={
                          <EnhancedButton variant="secondary" size="sm">
                            Top Right <ChevronDown className="ml-1 h-3 w-3" />
                          </EnhancedButton>
                        }
                        items={dropdownItems}
                        position="top-right"
                      />
                    </div>
                  </div>
                </div>

<div className="space-y-6">
                  <div className="space-y-2">
                    <h3 className="text-lg font-medium">Width Variants</h3>
                    <div className="flex flex-col items-center gap-4">
                      <EnhancedDropdown
                        trigger={
                          <EnhancedButton variant="secondary">
                            Auto Width <ChevronDown className="ml-2 h-4 w-4" />
                          </EnhancedButton>
                        }
                        items={dropdownItems}
                        width="auto"
                      />

<EnhancedDropdown
                        trigger={
                          <EnhancedButton variant="secondary">
                            Match Trigger Width <ChevronDown className="ml-2 h-4 w-4" />
                          </EnhancedButton>
                        }
                        items={dropdownItems}
                        width="trigger"
                      />

<EnhancedDropdown
                        trigger={
                          <EnhancedButton variant="secondary">
                            Fixed Width (200px) <ChevronDown className="ml-2 h-4 w-4" />
                          </EnhancedButton>
                        }
                        items={dropdownItems}
                        width={200}
                      />
                    </div>
                  </div>

<div className="space-y-2">
                    <h3 className="text-lg font-medium">Custom Trigger</h3>
                    <div className="flex justify-center">
                      <EnhancedDropdown
                        trigger={
                          <div className="flex items-center gap-2 p-2 rounded-lg bg-[#263A49] hover:bg-[#00FFFF]/10 cursor-pointer">
                            <EnhancedAvatar size="sm" fallback="JD" />
                            <div>
                              <div className="font-medium">John Doe</div>
                              <div className="text-xs text-[#B0BEC5]">john@example.com</div>
                            </div>
                            <ChevronDown className="ml-2 h-4 w-4" />
                          </div>
                        }
                        items={[
                          { id: "profile", label: "View Profile", icon: <User size={16} /> },
                          { id: "settings", label: "Settings", icon: <Settings size={16} /> },
                          { id: "logout", label: "Logout", icon: <ArrowRight size={16} /> },
                        ]}
                      />
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>
        </TabsContent>

{/* Data Display */}
        <TabsContent value="data-display" className="space-y-8">
          <EnhancedCard>
            <CardHeader>
              <CardTitle>Carousel</CardTitle>
              <CardDescription>Slideshow component for cycling through elements</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-8">
                <div className="space-y-2">
                  <h3 className="text-lg font-medium">Default Carousel</h3>
                  <EnhancedCarousel items={carouselItems} />
                  <p className="text-sm text-[#B0BEC5] mt-2">Default carousel with slide effect</p>
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                  <div className="space-y-2">
                    <h3 className="text-lg font-medium">Fade Effect</h3>
                    <EnhancedCarousel items={carouselItems} effect="fade" />
                    <p className="text-sm text-[#B0BEC5] mt-2">effect="fade"</p>
                  </div>

<div className="space-y-2">
                    <h3 className="text-lg font-medium">Zoom Effect</h3>
                    <EnhancedCarousel items={carouselItems} effect="zoom" />
                    <p className="text-sm text-[#B0BEC5] mt-2">effect="zoom"</p>
                  </div>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Auto Play Carousel</h3>
                  <EnhancedCarousel items={carouselItems} autoPlay interval={3000} />
                  <p className="text-sm text-[#B0BEC5] mt-2">autoPlay interval={3000}</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Customized Carousel</h3>
                  <EnhancedCarousel
                    items={carouselItems}
                    showArrows={true}
                    showDots={true}
                    infinite={true}
                    effect="slide"
                    arrowClassName="bg-[#00FFFF]/20 hover:bg-[#00FFFF]/40 text-white"
                  />
                  <p className="text-sm text-[#B0BEC5] mt-2">Custom styling with all controls</p>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Avatars</CardTitle>
              <CardDescription>User avatars with various styles and states</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-6">
                  <h3 className="text-lg font-medium">Avatar Sizes</h3>
                  <div className="flex flex-wrap gap-4 items-end">
                    <div className="space-y-2">
                      <EnhancedAvatar size="xs" fallback="XS" />
                      <p className="text-sm text-[#B0BEC5] text-center">size="xs"</p>
                    </div>

<h3 className="text-lg font-medium">Avatar Variants</h3>
                  <div className="flex flex-wrap gap-4">
                    <div className="space-y-2">
                      <EnhancedAvatar variant="circle" fallback="CI" />
                      <p className="text-sm text-[#B0BEC5] text-center">variant="circle"</p>
                    </div>

<div className="space-y-2">
                      <EnhancedAvatar variant="rounded" fallback="RO" />
                      <p className="text-sm text-[#B0BEC5] text-center">variant="rounded"</p>
                    </div>

<div className="space-y-2">
                      <EnhancedAvatar variant="square" fallback="SQ" />
                      <p className="text-sm text-[#B0BEC5] text-center">variant="square"</p>
                    </div>
                  </div>
                </div>

<div className="space-y-6">
                  <h3 className="text-lg font-medium">Avatar with Status</h3>
                  <div className="flex flex-wrap gap-4">
                    <div className="space-y-2">
                      <EnhancedAvatar status="online" fallback="ON" />
                      <p className="text-sm text-[#B0BEC5] text-center">status="online"</p>
                    </div>

<div className="space-y-2">
                      <EnhancedAvatar status="offline" fallback="OF" />
                      <p className="text-sm text-[#B0BEC5] text-center">status="offline"</p>
                    </div>

<div className="space-y-2">
                      <EnhancedAvatar status="away" fallback="AW" />
                      <p className="text-sm text-[#B0BEC5] text-center">status="away"</p>
                    </div>

<div className="space-y-2">
                      <EnhancedAvatar status="busy" fallback="BU" />
                      <p className="text-sm text-[#B0BEC5] text-center">status="busy"</p>
                    </div>
                  </div>

<h3 className="text-lg font-medium">Avatar with Border</h3>
                  <div className="flex flex-wrap gap-4">
                    <div className="space-y-2">
                      <EnhancedAvatar withBorder fallback="BO" />
                      <p className="text-sm text-[#B0BEC5] text-center">withBorder</p>
                    </div>

<div className="space-y-2">
                      <EnhancedAvatar withBorder borderColor="border-green-500" fallback="GR" />
                      <p className="text-sm text-[#B0BEC5] text-center">borderColor="border-green-500"</p>
                    </div>
                  </div>

<h3 className="text-lg font-medium">Animated Avatar</h3>
                  <div className="flex flex-wrap gap-4">
                    <div className="space-y-2">
                      <EnhancedAvatar withAnimation animationType="pulse" fallback="PU" />
                      <p className="text-sm text-[#B0BEC5] text-center">animationType="pulse"</p>
                    </div>

<div className="space-y-2">
                      <EnhancedAvatar withAnimation animationType="bounce" fallback="BO" />
                      <p className="text-sm text-[#B0BEC5] text-center">animationType="bounce"</p>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Skeletons</CardTitle>
              <CardDescription>Loading state placeholders for various components</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-6">
                  <h3 className="text-lg font-medium">Skeleton Variants</h3>
                  <div className="space-y-4">
                    <div>
                      <EnhancedSkeleton variant="text" lines={3} />
                      <p className="text-sm text-[#B0BEC5] mt-2">variant="text" lines={3}</p>
                    </div>

<div>
                      <EnhancedSkeleton variant="avatar" />
                      <p className="text-sm text-[#B0BEC5] mt-2">variant="avatar"</p>
                    </div>

<div>
                      <EnhancedSkeleton variant="button" />
                      <p className="text-sm text-[#B0BEC5] mt-2">variant="button"</p>
                    </div>

<div>
                      <EnhancedSkeleton variant="input" />
                      <p className="text-sm text-[#B0BEC5] mt-2">variant="input"</p>
                    </div>
                  </div>
                </div>

<div className="space-y-6">
                  <h3 className="text-lg font-medium">Skeleton Card Example</h3>
                  <div className="space-y-4">
                    <EnhancedCard>
                      <CardContent className="p-6">
                        <div className="flex items-center space-x-4 mb-4">
                          <EnhancedSkeleton variant="avatar" />
                          <div className="space-y-2 flex-1">
                            <EnhancedSkeleton className="h-4 w-1/2" />
                            <EnhancedSkeleton className="h-3 w-1/3" />
                          </div>
                        </div>
                        <EnhancedSkeleton variant="text" lines={3} />
                        <div className="mt-4 flex justify-end">
                          <EnhancedSkeleton variant="button" />
                        </div>
                      </CardContent>
                    </EnhancedCard>
                    <p className="text-sm text-[#B0BEC5]">Card loading state example</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>
        </TabsContent>

{/* Inputs & Forms */}
        <TabsContent value="inputs" className="space-y-8">
          <EnhancedCard>
            <CardHeader>
              <CardTitle>Enhanced Inputs</CardTitle>
              <CardDescription>Improved input components with various styles</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-6">
                  <div className="space-y-2">
                    <Label htmlFor="primary-input">Primary Input</Label>
                    <EnhancedInput id="primary-input" variant="primary" placeholder="Enter your name" />
                    <p className="text-sm text-[#B0BEC5]">variant="primary"</p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="secondary-input">Secondary Input</Label>
                    <EnhancedInput id="secondary-input" variant="secondary" placeholder="Enter your email" />
                    <p className="text-sm text-[#B0BEC5]">variant="secondary"</p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="minimal-input">Minimal Input</Label>
                    <EnhancedInput id="minimal-input" variant="minimal" placeholder="Enter your phone number" />
                    <p className="text-sm text-[#B0BEC5]">variant="minimal"</p>
                  </div>
                </div>

<div className="space-y-6">
                  <div className="space-y-2">
                    <Label htmlFor="left-icon-input">Input with Left Icon</Label>
                    <EnhancedInput
                      id="left-icon-input"
                      variant="primary"
                      placeholder="Search..."
                      leftIcon={<Search size={18} />}
                    />
                    <p className="text-sm text-[#B0BEC5]">leftIcon</p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="right-icon-input">Input with Right Icon</Label>
                    <EnhancedInput
                      id="right-icon-input"
                      variant="primary"
                      placeholder="Enter your username"
                      rightIcon={<User size={18} />}
                    />
                    <p className="text-sm text-[#B0BEC5]">rightIcon</p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="error-input">Input with Error</Label>
                    <EnhancedInput id="error-input" variant="primary" placeholder="Enter your password" isError />
                    <p className="text-sm text-red-400">This field is required</p>
                    <p className="text-sm text-[#B0BEC5]">isError</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Tag Input</CardTitle>
              <CardDescription>Input for multiple tags or keywords</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="space-y-2">
                  <Label htmlFor="tag-input">Tags</Label>
                  <EnhancedTagInput value={tags} onChange={setTags} placeholder="Add a tag..." maxTags={5} />
                  <p className="text-sm text-[#B0BEC5]">Type and press Enter to add tags</p>
                </div>

<div className="space-y-2">
                  <Label htmlFor="tag-input-variant">Tag Input Variants</Label>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                      <EnhancedTagInput
                        value={["Default", "Variant"]}
                        onChange={() => {}}
                        placeholder="Default variant..."
                        variant="default"
                      />
                      <p className="text-sm text-[#B0BEC5] mt-1">variant="default"</p>
                    </div>
                    <div>
                      <EnhancedTagInput
                        value={["Primary", "Variant"]}
                        onChange={() => {}}
                        placeholder="Primary variant..."
                        variant="primary"
                      />
                      <p className="text-sm text-[#B0BEC5] mt-1">variant="primary"</p>
                    </div>
                    <div>
                      <EnhancedTagInput
                        value={["Secondary", "Variant"]}
                        onChange={() => {}}
                        placeholder="Secondary variant..."
                        variant="secondary"
                      />
                      <p className="text-sm text-[#B0BEC5] mt-1">variant="secondary"</p>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>File Upload</CardTitle>
              <CardDescription>Enhanced file upload component with drag and drop support</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <EnhancedFileUpload
                  onChange={(files) => {
                    setFiles(files)
                    simulateUpload()
                  }}
                  value={files}
                  multiple
                  accept="image/*,.pdf"
                  maxSize={5}
                  uploadProgress={uploadProgress}
                />

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
                  <div>
                    <h3 className="text-lg font-medium mb-2">Compact Variant</h3>
                    <EnhancedFileUpload onChange={() => {}} variant="compact" showPreview={false} />
                    <p className="text-sm text-[#B0BEC5] mt-1">variant="compact"</p>
                  </div>
                  <div>
                    <h3 className="text-lg font-medium mb-2">Minimal Variant</h3>
                    <EnhancedFileUpload onChange={() => {}} variant="minimal" showPreview={false} />
                    <p className="text-sm text-[#B0BEC5] mt-1">variant="minimal"</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Form Example</CardTitle>
              <CardDescription>Complete form with various input components</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="form-name">Full Name</Label>
                      <EnhancedInput id="form-name" placeholder="Enter your full name" leftIcon={<User size={18} />} />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="form-email">Email Address</Label>
                      <EnhancedInput
                        id="form-email"
                        type="email"
                        placeholder="Enter your email address"
                        leftIcon={<Mail size={18} />}
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="form-phone">Phone Number</Label>
                      <EnhancedInput
                        id="form-phone"
                        placeholder="Enter your phone number"
                        leftIcon={<Phone size={18} />}
                      />
                    </div>
                  </div>

<div className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="form-address">Address</Label>
                      <EnhancedInput
                        id="form-address"
                        placeholder="Enter your address"
                        leftIcon={<MapPin size={18} />}
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="form-tags">Interests</Label>
                      <EnhancedTagInput
                        value={["Technology", "Mobile"]}
                        onChange={() => {}}
                        placeholder="Add interests..."
                        maxTags={5}
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="form-message">Message</Label>
                      <Textarea
                        id="form-message"
                        placeholder="Enter your message"
                        className="min-h-[100px] bg-[#1E2F3C] border-[#00FFFF]/30 focus:border-[#00FFFF]"
                      />
                    </div>
                  </div>
                </div>

<div className="pt-4 border-t border-[#00FFFF]/10 flex justify-end">
                  <EnhancedButton variant="primary">Submit Form</EnhancedButton>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>
        </TabsContent>

{/* Feedback */}
        <TabsContent value="feedback" className="space-y-8">
          <EnhancedCard>
            <CardHeader>
              <CardTitle>Tooltips</CardTitle>
              <CardDescription>Informational tooltips with various positions and styles</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-6">
                  <div className="space-y-2">
                    <div className="flex justify-center">
                      <EnhancedTooltip content="This is a top tooltip" position="top">
                        <EnhancedButton variant="secondary">Hover Me (Top)</EnhancedButton>
                      </EnhancedTooltip>
                    </div>
                    <p className="text-sm text-[#B0BEC5] text-center">position="top"</p>
                  </div>

<div className="space-y-2">
                    <div className="flex justify-center">
                      <EnhancedTooltip content="This is a bottom tooltip" position="bottom">
                        <EnhancedButton variant="secondary">Hover Me (Bottom)</EnhancedButton>
                      </EnhancedTooltip>
                    </div>
                    <p className="text-sm text-[#B0BEC5] text-center">position="bottom"</p>
                  </div>

<div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <div className="flex justify-center">
                        <EnhancedTooltip content="This is a left tooltip" position="left">
                          <EnhancedButton variant="secondary">Hover Me (Left)</EnhancedButton>
                        </EnhancedTooltip>
                      </div>
                      <p className="text-sm text-[#B0BEC5] text-center">position="left"</p>
                    </div>

<div className="space-y-2">
                      <div className="flex justify-center">
                        <EnhancedTooltip content="This is a right tooltip" position="right">
                          <EnhancedButton variant="secondary">Hover Me (Right)</EnhancedButton>
                        </EnhancedTooltip>
                      </div>
                      <p className="text-sm text-[#B0BEC5] text-center">position="right"</p>
                    </div>
                  </div>
                </div>

<div className="space-y-6">
                  <div className="space-y-2">
                    <div className="flex justify-center">
                      <EnhancedTooltip content="Default tooltip style" variant="default">
                        <EnhancedButton variant="secondary">Default Style</EnhancedButton>
                      </EnhancedTooltip>
                    </div>
                    <p className="text-sm text-[#B0BEC5] text-center">variant="default"</p>
                  </div>

<div className="space-y-2">
                    <div className="flex justify-center">
                      <EnhancedTooltip content="Information tooltip style" variant="info">
                        <EnhancedButton variant="secondary">Info Style</EnhancedButton>
                      </EnhancedTooltip>
                    </div>
                    <p className="text-sm text-[#B0BEC5] text-center">variant="info"</p>
                  </div>

<div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <div className="flex justify-center">
                        <EnhancedTooltip content="Success tooltip style" variant="success">
                          <EnhancedButton variant="secondary">Success Style</EnhancedButton>
                        </EnhancedTooltip>
                      </div>
                      <p className="text-sm text-[#B0BEC5] text-center">variant="success"</p>
                    </div>

<div className="space-y-2">
                      <div className="flex justify-center">
                        <EnhancedTooltip content="Warning tooltip style" variant="warning">
                          <EnhancedButton variant="secondary">Warning Style</EnhancedButton>
                        </EnhancedTooltip>
                      </div>
                      <p className="text-sm text-[#B0BEC5] text-center">variant="warning"</p>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Alerts</CardTitle>
              <CardDescription>Alert components for various types of messages</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <EnhancedAlert
                  variant="default"
                  title="Default Alert"
                  description="This is a default alert with standard styling."
                />

<EnhancedCard>
            <CardHeader>
              <CardTitle>Progress</CardTitle>
              <CardDescription>Progress indicators for various states</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-8">
                <div className="space-y-6">
                  <h3 className="text-lg font-medium">Progress Variants</h3>
                  <div className="space-y-4">
                    <div>
                      <EnhancedProgress value={75} variant="default" />
                      <p className="text-sm text-[#B0BEC5] mt-1">variant="default"</p>
                    </div>

<div>
                      <EnhancedProgress value={75} variant="success" />
                      <p className="text-sm text-[#B0BEC5] mt-1">variant="success"</p>
                    </div>

<div>
                      <EnhancedProgress value={75} variant="warning" />
                      <p className="text-sm text-[#B0BEC5] mt-1">variant="warning"</p>
                    </div>

<div>
                      <EnhancedProgress value={75} variant="error" />
                      <p className="text-sm text-[#B0BEC5] mt-1">variant="error"</p>
                    </div>

<div>
                      <EnhancedProgress value={75} variant="gradient" />
                      <p className="text-sm text-[#B0BEC5] mt-1">variant="gradient"</p>
                    </div>
                  </div>
                </div>

<div className="space-y-6">
                  <h3 className="text-lg font-medium">Progress with Value</h3>
                  <div className="space-y-4">
                    <div>
                      <EnhancedProgress value={65} variant="default" showValue valuePosition="outside" />
                      <p className="text-sm text-[#B0BEC5] mt-1">showValue valuePosition="outside"</p>
                    </div>

<div>
                      <EnhancedProgress value={65} variant="gradient" showValue valuePosition="inside" />
                      <p className="text-sm text-[#B0BEC5] mt-1">showValue valuePosition="inside"</p>
                    </div>
                  </div>
                </div>

<div className="space-y-6">
                  <h3 className="text-lg font-medium">Progress Sizes</h3>
                  <div className="space-y-4">
                    <div>
                      <EnhancedProgress value={75} variant="gradient" size="sm" />
                      <p className="text-sm text-[#B0BEC5] mt-1">size="sm"</p>
                    </div>

<div>
                      <EnhancedProgress value={75} variant="gradient" size="default" />
                      <p className="text-sm text-[#B0BEC5] mt-1">size="default"</p>
                    </div>

<div className="space-y-6">
                  <h3 className="text-lg font-medium">Animated Progress</h3>
                  <div>
                    <EnhancedProgress value={75} variant="gradient" animated label="Downloading..." />
                    <p className="text-sm text-[#B0BEC5] mt-1">animated label="Downloading..."</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Notifications</CardTitle>
              <CardDescription>Toast notifications for various types of messages</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <EnhancedButton variant="secondary" onClick={() => showNotificationWithType("default")}>
                    Show Default Notification
                  </EnhancedButton>

<EnhancedButton variant="secondary" onClick={() => showNotificationWithType("info")}>
                    Show Info Notification
                  </EnhancedButton>

<EnhancedButton variant="secondary" onClick={() => showNotificationWithType("success")}>
                    Show Success Notification
                  </EnhancedButton>

<EnhancedButton variant="secondary" onClick={() => showNotificationWithType("warning")}>
                    Show Warning Notification
                  </EnhancedButton>

<EnhancedButton variant="secondary" onClick={() => showNotificationWithType("error")}>
                    Show Error Notification
                  </EnhancedButton>
                </div>

<EnhancedNotification
                  open={showNotification}
                  onClose={() => setShowNotification(false)}
                  title={`${notificationType.charAt(0).toUpperCase() + notificationType.slice(1)} Notification`}
                  description="This is an example notification that will automatically dismiss after 5 seconds."
                  variant={notificationType}
                  position="top-right"
                  duration={5000}
                  action={
                    <EnhancedButton
                      variant="secondary"
                      size="sm"
                      className="mt-2"
                      onClick={() => setShowNotification(false)}
                    >
                      Dismiss
                    </EnhancedButton>
                  }
                />

<div className="p-4 bg-[#1E2F3C] rounded-lg">
                  <p className="text-[#B0BEC5]">
                    Notifications appear in the corner of the screen. Click any of the buttons above to see a
                    demonstration.
                  </p>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>
        </TabsContent>

{/* Buttons */}
        <TabsContent value="buttons" className="space-y-8">
          <EnhancedCard>
            <CardHeader>
              <CardTitle>Enhanced Buttons</CardTitle>
              <CardDescription>Improved button components with various styles and animations</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-6">
                  <div className="space-y-2">
                    <EnhancedButton variant="primary" className="w-full">
                      Primary Button
                    </EnhancedButton>
                    <p className="text-sm text-[#B0BEC5]">variant="primary"</p>
                  </div>

<div className="space-y-2">
                    <EnhancedButton variant="secondary" className="w-full">
                      Secondary Button
                    </EnhancedButton>
                    <p className="text-sm text-[#B0BEC5]">variant="secondary"</p>
                  </div>

<div className="space-y-2">
                    <EnhancedButton variant="tertiary">Tertiary Button</EnhancedButton>
                    <p className="text-sm text-[#B0BEC5]">variant="tertiary"</p>
                  </div>

<div className="space-y-2 flex items-center gap-4">
                    <EnhancedButton variant="icon">
                      <Heart size={18} />
                    </EnhancedButton>
                    <EnhancedButton variant="icon">
                      <Star size={18} />
                    </EnhancedButton>
                    <EnhancedButton variant="icon">
                      <Settings size={18} />
                    </EnhancedButton>
                    <p className="text-sm text-[#B0BEC5]">variant="icon"</p>
                  </div>
                </div>

<div className="space-y-6">
                  <div className="space-y-2">
                    <EnhancedButton variant="primary" withShimmer className="w-full">
                      With Shimmer Effect
                    </EnhancedButton>
                    <p className="text-sm text-[#B0BEC5]">withShimmer</p>
                  </div>

<div className="space-y-2">
                    <EnhancedButton variant="primary" withScale className="w-full">
                      With Scale Animation
                    </EnhancedButton>
                    <p className="text-sm text-[#B0BEC5]">withScale</p>
                  </div>

<div className="space-y-2">
                    <EnhancedButton variant="primary" withGlow className="w-full">
                      With Glow Effect
                    </EnhancedButton>
                    <p className="text-sm text-[#B0BEC5]">withGlow</p>
                  </div>

<div className="space-y-2">
                    <EnhancedButton variant="primary" isLoading className="w-full">
                      Loading Button
                    </EnhancedButton>
                    <p className="text-sm text-[#B0BEC5]">isLoading</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Button Sizes</CardTitle>
              <CardDescription>Different size variants for buttons</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex flex-wrap gap-4">
                <div className="space-y-2">
                  <EnhancedButton variant="primary" size="sm">
                    Small
                  </EnhancedButton>
                  <p className="text-sm text-[#B0BEC5]">size="sm"</p>
                </div>
                <div className="space-y-2">
                  <EnhancedButton variant="primary" size="default">
                    Default
                  </EnhancedButton>
                  <p className="text-sm text-[#B0BEC5]">size="default"</p>
                </div>
                <div className="space-y-2">
                  <EnhancedButton variant="primary" size="lg">
                    Large
                  </EnhancedButton>
                  <p className="text-sm text-[#B0BEC5]">size="lg"</p>
                </div>
                <div className="space-y-2">
                  <EnhancedButton variant="primary" size="xl">
                    Extra Large
                  </EnhancedButton>
                  <p className="text-sm text-[#B0BEC5]">size="xl"</p>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Button with Icons</CardTitle>
              <CardDescription>Buttons with various icon placements</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex flex-wrap gap-4">
                <EnhancedButton variant="primary">
                  <ArrowRight className="mr-2 h-4 w-4" />
                  Icon Left
                </EnhancedButton>

<EnhancedButton variant="primary">
                  Icon Right
                  <ArrowRight className="ml-2 h-4 w-4" />
                </EnhancedButton>

<EnhancedButton variant="secondary" className="group">
                  <span className="flex items-center">
                    Learn More
                    <ArrowRight className="ml-2 h-4 w-4 opacity-0 group-hover:opacity-100 transition-all duration-300 -translate-x-2 group-hover:translate-x-0" />
                  </span>
                </EnhancedButton>
              </div>
            </CardContent>
          </EnhancedCard>
        </TabsContent>
      </Tabs>
    </div>
  )
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More from esimadmin

More Templates Like This

About

Tags

Share

About

Tags

Share

More from esimadmin

More Templates Like This