[V0_FILE]typescriptreact:file="components/navbar.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" import { Menu, Globe, ChevronDown } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function Navbar() { const [isScrolled, setIsScrolled] = useState(false) const [language, setLanguage] = useState("English") useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 10) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) return (

eSIM

eSIM Myanmar

setLanguage("English")}>English setLanguage("မြန်မာ")}>မြန်မာ

Home Features How It Works Pricing Support

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { Navbar } from "@/components/navbar" import { motion } from "framer-motion" import { ArrowRight, Smartphone, Wifi, Globe } from "lucide-react" export function HeroSection() { const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) const heroRef = useRef(null) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (heroRef.current) { const rect = heroRef.current.getBoundingClientRect() setMousePosition({ x: e.clientX - rect.left, y: e.clientY - rect.top, }) } } const heroElement = heroRef.current if (heroElement) { heroElement.addEventListener("mousemove", handleMouseMove) } return () => { if (heroElement) { heroElement.removeEventListener("mousemove", handleMouseMove) } } }, []) return (

{/* Interactive background effect */}

{/* Animated grid pattern */}

eSIM Myanmar Digital Connectivity Simplified

Experience seamless connectivity with our digital eSIM technology. No physical SIM card needed - activate instantly and stay connected across Myanmar and beyond.

Instant Activation

Nationwide Coverage

International Plans

) } function PhoneModel() { return (

{/* Phone frame */}

{/* Phone screen */}

{/* eSIM interface elements */}

eSIM Myanmar

Current Plan

Unlimited Data

15.2 GB used 20 GB

Active Until

March 28, 2025

Data

Roaming

Profile

{/* Animated particles */}

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

))}

{/* Glow effect */}

) } [V0_FILE]typescriptreact:file="components/features.tsx" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { Smartphone, Globe, Zap, Shield, CreditCard, BarChart } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { cn } from "@/lib/utils" const features = [ { icon: Smartphone, title: "Instant Activation", description: "Activate your eSIM instantly without waiting for physical delivery.", color: "bg-cyan-500/10 text-cyan-500", }, { icon: Globe, title: "Nationwide Coverage", description: "Enjoy reliable connectivity across Myanmar with our extensive network.", color: "bg-blue-500/10 text-blue-500", }, { icon: Zap, title: "Fast Speeds", description: "Experience high-speed data with our optimized network infrastructure.", color: "bg-amber-500/10 text-amber-500", }, { icon: Shield, title: "Secure Connection", description: "Your data is protected with advanced encryption and security protocols.", color: "bg-green-500/10 text-green-500", }, { icon: CreditCard, title: "Flexible Plans", description: "Choose from a variety of plans that suit your needs and budget.", color: "bg-purple-500/10 text-purple-500", }, { icon: BarChart, title: "Usage Monitoring", description: "Track your data usage in real-time through our intuitive dashboard.", color: "bg-pink-500/10 text-pink-500", }, ] export function Features() { const [hoveredIndex, setHoveredIndex] = useState(null) return (

{/* Background elements */}

Why Choose eSIM Myanmar?

Experience the future of mobile connectivity with our cutting-edge eSIM technology, designed to make your digital life simpler and more efficient.

{features.map((feature, index) => ( setHoveredIndex(index)} onMouseLeave={() => setHoveredIndex(null)} >

{feature.title} {feature.description} {/* Animated border */}

))}

) } [V0_FILE]typescriptreact:file="components/how-it-works.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, useAnimation } from "framer-motion" import { Smartphone, QrCode, Wifi, CheckCircle } from "lucide-react" import { Button } from "@/components/ui/button" const steps = [ { icon: QrCode, title: "Scan QR Code", description: "Scan the QR code we provide to begin the eSIM installation process.", color: "text-cyan-500", }, { icon: Smartphone, title: "Install Profile", description: "Follow the prompts to install the eSIM profile on your device.", color: "text-blue-500", }, { icon: Wifi, title: "Activate Service", description: "Activate your eSIM service through our app or website.", color: "text-purple-500", }, { icon: CheckCircle, title: "Start Using", description: "Your eSIM is now ready to use! Enjoy seamless connectivity.", color: "text-green-500", }, ] export function HowItWorks() { const [activeStep, setActiveStep] = useState(0) const controls = useAnimation() useEffect(() => { const interval = setInterval(() => { setActiveStep((prev) => (prev + 1) % steps.length) }, 5000) return () => clearInterval(interval) }, []) useEffect(() => { controls.start({ width: `${(activeStep + 1) * (100 / steps.length)}%`, transition: { duration: 0.5, ease: "easeInOut" }, }) }, [activeStep, controls]) return (

{/* Background elements */}

How eSIM Works

Setting up your eSIM is quick and easy. Follow these simple steps to get connected.

{/* Progress bar */}

{/* Steps */}

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

{step.title}

{step.description}

))}

{/* Phone frame */}

{/* Phone screen */}

{/* Step content */}

{activeStep === 0 && (

Scan QR Code

Use your camera to scan the QR code

)} {activeStep === 1 && (

Install Profile

Installing eSIM profile...

)} {activeStep === 2 && (

Activate Service

Tap to activate your eSIM service

)} {activeStep === 3 && (

Ready to Use!

Your eSIM is now active and ready to use

)}

{/* Glow effect */}

) } [V0_FILE]typescriptreact:file="components/pricing-plans.tsx" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Check, Clock, Wifi, Globe, Zap } from "lucide-react" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" const plans = { daily: [ { name: "Basic", price: "1,500", currency: "MMK", description: "Perfect for a day of essential connectivity", features: ["500 MB Data", "24-hour validity", "Myanmar coverage only", "Standard speeds"], icon: Wifi, color: "from-cyan-500 to-blue-500", }, { name: "Standard", price: "3,000", currency: "MMK", description: "Ideal for a full day of browsing and streaming", features: ["1.5 GB Data", "24-hour validity", "Myanmar coverage only", "High-speed data"], icon: Clock, color: "from-blue-500 to-indigo-500", popular: true, }, { name: "Premium", price: "5,000", currency: "MMK", description: "Unlimited data for a full day of usage", features: ["Unlimited Data", "24-hour validity", "Myanmar coverage only", "Maximum speeds"], icon: Zap, color: "from-indigo-500 to-purple-500", }, ], monthly: [ { name: "Basic", price: "15,000", currency: "MMK", description: "Essential connectivity for a month", features: ["10 GB Data", "30-day validity", "Myanmar coverage only", "Standard speeds"], icon: Wifi, color: "from-cyan-500 to-blue-500", }, { name: "Standard", price: "25,000", currency: "MMK", description: "Perfect balance of data and value", features: ["30 GB Data", "30-day validity", "Myanmar coverage only", "High-speed data"], icon: Clock, color: "from-blue-500 to-indigo-500", popular: true, }, { name: "Premium", price: "45,000", currency: "MMK", description: "Unlimited data for power users", features: ["Unlimited Data", "30-day validity", "Myanmar coverage only", "Maximum speeds"], icon: Zap, color: "from-indigo-500 to-purple-500", }, ], international: [ { name: "ASEAN", price: "20,000", currency: "MMK", description: "Stay connected across Southeast Asia", features: ["5 GB Data", "7-day validity", "10 ASEAN countries", "High-speed data"], icon: Globe, color: "from-green-500 to-emerald-500", }, { name: "Asia Pacific", price: "35,000", currency: "MMK", description: "Coverage across major Asia Pacific countries", features: ["8 GB Data", "10-day validity", "15 Asia Pacific countries", "High-speed data"], icon: Globe, color: "from-blue-500 to-indigo-500", popular: true, }, { name: "Global", price: "60,000", currency: "MMK", description: "Worldwide coverage for international travelers", features: ["12 GB Data", "15-day validity", "100+ countries worldwide", "High-speed data"], icon: Globe, color: "from-purple-500 to-pink-500", }, ], } export function PricingPlans() { const [planType, setPlanType] = useState("daily") const [hoveredIndex, setHoveredIndex] = useState(null) return (

{/* Background elements */}

Simple, Transparent Pricing

Choose the plan that works best for you. No hidden fees, no contracts.

Daily Monthly International

{plans[planType as keyof typeof plans].map((plan, index) => ( setHoveredIndex(index)} onMouseLeave={() => setHoveredIndex(null)} className="relative" > {plan.popular && (

Verification ID

{result?.verificationId}

Device Information

Model: Detected automatically

OS: Detected automatically

OS Version: Detected automatically

{result && activeTab === "activate" && !result.success && (

{result.message}

)}

Scan this QR code

Use your phone's camera to scan this QR code to install your eSIM profile

After scanning, follow the on-screen instructions on your device to complete the eSIM installation.

{activeTab === "verify" && ( )} {activeTab === "activate" && ( )} {activeTab === "qrcode" && (

)} ) } [V0_FILE]typescriptreact:file="components/verification-section.tsx" isQuickEdit="true" 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 { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { CheckCircle, Loader2, Smartphone, AlertCircle } from "lucide-react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" // Mock function to simulate API call to GSMA eSIM SWAP API async function verifyNumber(phoneNumber: string, countryCode: string) { // In a real implementation, this would call the GSMA eSIM SWAP API return new Promise<{ success: boolean; message: string }>((resolve) => { setTimeout(() => { // Simulate verification success for numbers starting with "9" if (phoneNumber.startsWith("9")) { resolve({ success: true, message: "Number verified successfully", }) } else { resolve({ success: false, message: "Unable to verify number. Please check and try again.", }) } }, 2000) }) } export function VerificationSection() { const [phoneNumber, setPhoneNumber] = useState("") const [countryCode, setCountryCode] = useState("95") // Myanmar country code const [isVerifying, setIsVerifying] = useState(false) const [verificationResult, setVerificationResult] = useState<{ success: boolean message: string } | null>(null) const handleVerify = async () => { if (!phoneNumber) return setIsVerifying(true) setVerificationResult(null) try { const result = await verifyNumber(phoneNumber, countryCode) setVerificationResult(result) } catch (error) { setVerificationResult({ success: false, message: "An error occurred during verification. Please try again.", }) } finally { setIsVerifying(false) } } return (

{/* Background elements */}

Number Verification

Verify your phone number to check compatibility with our eSIM service. We use the GSMA eSIM SWAP API for secure and reliable verification.

Verify Your Number Enter your phone number to check compatibility with our eSIM service.

Country Code

Phone Number

+{countryCode}

setPhoneNumber(e.target.value)} className="rounded-l-none" />

Enter your number without the country code (e.g., 9XXXXXXXX)

{verificationResult && ( {verificationResult.success ? ( ) : ( )}

{verificationResult.message}

)} {verificationResult?.success && ( )}

) } [V0_FILE]typescriptreact:file="components/mobile-navbar.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" import { Menu, X, Globe, Smartphone } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { motion, AnimatePresence } from "framer-motion" export function MobileNavbar() { const [isScrolled, setIsScrolled] = useState(false) const [language, setLanguage] = useState("English") const [isOpen, setIsOpen] = useState(false) useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 10) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) return (

eSIM Myanmar

setLanguage("English")}>English setLanguage("မြန်မာ")}>မြန်မာ

eSIM Myanmar

{[ { name: "Home", href: "#" }, { name: "Features", href: "#features" }, { name: "How It Works", href: "#how-it-works" }, { name: "Plans", href: "#plans" }, { name: "Support", href: "#support" }, ].map((item, i) => ( setIsOpen(false)} > {item.name} ))}

) } [V0_FILE]typescriptreact:file="components/mobile-hero.tsx" isMerged="true" "use client" import { useRef } from "react" import { Button } from "@/components/ui/button" import { MobileNavbar } from "@/components/mobile-navbar" import { motion, useScroll, useTransform } from "framer-motion" import { ArrowRight, Smartphone, Wifi, Globe, ChevronDown } from "lucide-react" export function MobileHero() { const containerRef = useRef(null) const { scrollY } = useScroll() const y = useTransform(scrollY, [0, 300], [0, -100]) const opacity = useTransform(scrollY, [0, 300], [1, 0]) return (

{/* Animated background elements */}

{/* Animated circles */}

{/* Animated dots */}

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

))}

eSIM Myanmar

Digital Connectivity Simplified

Experience seamless connectivity with our digital eSIM technology. No physical SIM card needed - activate instantly and stay connected.

Instant Activation

Nationwide Coverage

International Plans

Scroll down

) } function PhonePreview() { return (

{/* Phone frame */}

{/* Phone screen */}

{/* eSIM interface elements */}

eSIM Myanmar

Current Plan

Unlimited Data

15.2 GB used 20 GB

Active Until

March 28, 2025

Data

Roaming

Profile

{/* Animated particles */}

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

{/* Glow effect */}

) } [V0_FILE]typescriptreact:file="components/mobile-features.tsx" isMerged="true" "use client" import { useState, useRef } from "react" import { motion, useInView } from "framer-motion" import { Smartphone, Globe, Zap, Shield, CreditCard, BarChart } from "lucide-react" import { cn } from "@/lib/utils" const features = [ { icon: Smartphone, title: "Instant Activation", description: "Activate your eSIM instantly without waiting for physical delivery.", color: "bg-cyan/10 text-cyan border-cyan/20", }, { icon: Globe, title: "Nationwide Coverage", description: "Enjoy reliable connectivity across Myanmar with our extensive network.", color: "bg-blue-500/10 text-blue-500 border-blue-500/20", }, { icon: Zap, title: "Fast Speeds", description: "Experience high-speed data with our optimized network infrastructure.", color: "bg-amber-500/10 text-amber-500 border-amber-500/20", }, { icon: Shield, title: "Secure Connection", description: "Your data is protected with advanced encryption and security protocols.", color: "bg-green-500/10 text-green-500 border-green-500/20", }, { icon: CreditCard, title: "Flexible Plans", description: "Choose from a variety of plans that suit your needs and budget.", color: "bg-purple-500/10 text-purple-500 border-purple-500/20", }, { icon: BarChart, title: "Usage Monitoring", description: "Track your data usage in real-time through our intuitive dashboard.", color: "bg-pink-500/10 text-pink-500 border-pink-500/20", }, ] export function MobileFeatures() { const [activeIndex, setActiveIndex] = useState(null) const ref = useRef(null) const isInView = useInView(ref, { once: true, amount: 0.2 }) return (

{/* Background elements */}

Why Choose eSIM Myanmar?

Experience the future of mobile connectivity with our cutting-edge eSIM technology.

{features.map((feature, index) => ( setActiveIndex(activeIndex === index ? null : index)} className={cn( "rounded-lg border p-4 cursor-pointer transition-all duration-300", activeIndex === index ? feature.color : "border-border", activeIndex === index ? "shadow-md" : "", )} >

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="components/mobile-how-it-works.tsx" isMerged="true" "use client" import { useState, useRef } from "react" import { motion, useInView } from "framer-motion" import { Smartphone, QrCode, Wifi, CheckCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" const steps = [ { icon: QrCode, title: "Scan QR Code", description: "Scan the QR code we provide to begin the eSIM installation process.", color: "text-cyan border-cyan", }, { icon: Smartphone, title: "Install Profile", description: "Follow the prompts to install the eSIM profile on your device.", color: "text-blue-500 border-blue-500", }, { icon: Wifi, title: "Activate Service", description: "Activate your eSIM service through our app or website.", color: "text-purple-500 border-purple-500", }, { icon: CheckCircle, title: "Start Using", description: "Your eSIM is now ready to use! Enjoy seamless connectivity.", color: "text-green-500 border-green-500", }, ] export function MobileHowItWorks() { const [activeStep, setActiveStep] = useState(0) const ref = useRef(null) const isInView = useInView(ref, { once: true, amount: 0.2 }) return (

{/* Background elements */}

How eSIM Works

Setting up your eSIM is quick and easy. Follow these simple steps to get connected.

{/* Step indicators */}

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

setActiveStep(index)}>

{index + 1}

{index < steps.length - 1 && (

)}

))}

{/* Step content */}

{steps.map((step, index) => ( index ? -100 : 100, position: activeStep === index ? "relative" : "absolute", }} transition={{ duration: 0.5 }} className={cn( "w-full h-full flex flex-col items-center justify-center text-center p-4", activeStep === index ? "block" : "hidden", )} >

{step.title}

{step.description}

{/* Step-specific illustrations */} {index === 0 && (

)} {index === 1 && (

)} {index === 2 && (

)} {index === 3 && (

)} ))}

{/* Navigation buttons */}

) } [V0_FILE]typescriptreact:file="components/mobile-verification.tsx" isMerged="true" "use client" import { useState, useRef } from "react" import { motion, useInView } from "framer-motion" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { CheckCircle, Loader2, Smartphone, AlertCircle } from "lucide-react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" // Mock function to simulate API call to GSMA eSIM SWAP API async function verifyNumber(phoneNumber: string, countryCode: string) { // In a real implementation, this would call the GSMA eSIM SWAP API using the environment variable const apiKey = process.env.GSMA_API_KEY || "demo_api_key" return new Promise<{ success: boolean; message: string }>((resolve) => { setTimeout(() => { // Simulate verification success for numbers starting with "9" if (phoneNumber.startsWith("9")) { resolve({ success: true, message: "Number verified successfully", }) } else { resolve({ success: false, message: "Unable to verify number. Please check and try again.", }) } }, 2000) }) } export function MobileVerification() { const [phoneNumber, setPhoneNumber] = useState("") const [countryCode, setCountryCode] = useState("95") // Myanmar country code const [isVerifying, setIsVerifying] = useState(false) const [verificationResult, setVerificationResult] = useState<{ success: boolean message: string } | null>(null) const ref = useRef(null) const isInView = useInView(ref, { once: true, amount: 0.2 }) const handleVerify = async () => { if (!phoneNumber) return setIsVerifying(true) setVerificationResult(null) try { const result = await verifyNumber(phoneNumber, countryCode) setVerificationResult(result) } catch (error) { setVerificationResult({ success: false, message: "An error occurred during verification. Please try again.", }) } finally { setIsVerifying(false) } } return (

{/* Background elements */}

Number Verification

Verify your phone number to check compatibility with our eSIM service.

Verify Your Number Enter your phone number to check compatibility with our eSIM service.

Country Code

Phone Number

+{countryCode}

setPhoneNumber(e.target.value)} className="rounded-l-none" />

Enter your number without the country code (e.g., 9XXXXXXXX)

{verificationResult && ( {verificationResult.success ? ( ) : ( )}

{verificationResult.message}

)} {verificationResult?.success && ( )}

) } [V0_FILE]typescriptreact:file="components/mobile-plans.tsx" isMerged="true" "use client" import { useState, useRef } from "react" import { motion, useInView } from "framer-motion" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Check, Clock, Wifi, Globe, Zap } from "lucide-react" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { cn } from "@/lib/utils" const plans = { daily: [ { name: "Basic", price: "1,500", currency: "MMK", description: "Perfect for a day of essential connectivity", features: ["500 MB Data", "24-hour validity", "Myanmar coverage only", "Standard speeds"], icon: Wifi, color: "from-cyan to-cyan-hover border-cyan/20", }, { name: "Standard", price: "3,000", currency: "MMK", description: "Ideal for a full day of browsing and streaming", features: ["1.5 GB Data", "24-hour validity", "Myanmar coverage only", "High-speed data"], icon: Clock, color: "from-blue-500 to-indigo-500 border-blue-500/20", popular: true, }, { name: "Premium", price: "5,000", currency: "MMK", description: "Unlimited data for a full day of usage", features: ["Unlimited Data", "24-hour validity", "Myanmar coverage only", "Maximum speeds"], icon: Zap, color: "from-indigo-500 to-purple-500 border-indigo-500/20", }, ], monthly: [ { name: "Basic", price: "15,000", currency: "MMK", description: "Essential connectivity for a month", features: ["10 GB Data", "30-day validity", "Myanmar coverage only", "Standard speeds"], icon: Wifi, color: "from-cyan to-cyan-hover border-cyan/20", }, { name: "Standard", price: "25,000", currency: "MMK", description: "Perfect balance of data and value", features: ["30 GB Data", "30-day validity", "Myanmar coverage only", "High-speed data"], icon: Clock, color: "from-blue-500 to-indigo-500 border-blue-500/20", popular: true, }, { name: "Premium", price: "45,000", currency: "MMK", description: "Unlimited data for power users", features: ["Unlimited Data", "30-day validity", "Myanmar coverage only", "Maximum speeds"], icon: Zap, color: "from-indigo-500 to-purple-500 border-indigo-500/20", }, ], international: [ { name: "ASEAN", price: "20,000", currency: "MMK", description: "Stay connected across Southeast Asia", features: ["5 GB Data", "7-day validity", "10 ASEAN countries", "High-speed data"], icon: Globe, color: "from-green-500 to-emerald-500 border-green-500/20", }, { name: "Asia Pacific", price: "35,000", currency: "MMK", description: "Coverage across major Asia Pacific countries", features: ["8 GB Data", "10-day validity", "15 Asia Pacific countries", "High-speed data"], icon: Globe, color: "from-blue-500 to-indigo-500 border-blue-500/20", popular: true, }, { name: "Global", price: "60,000", currency: "MMK", description: "Worldwide coverage for international travelers", features: ["12 GB Data", "15-day validity", "100+ countries worldwide", "High-speed data"], icon: Globe, color: "from-purple-500 to-pink-500 border-purple-500/20", }, ], } export function MobilePlans() { const [planType, setPlanType] = useState("daily") const [activePlan, setActivePlan] = useState(null) const ref = useRef(null) const isInView = useInView(ref, { once: true, amount: 0.2 }) return (

{/* Background elements */}

Simple, Transparent Pricing

Choose the plan that works best for you. No hidden fees, no contracts.

Daily Monthly Int'l

{plans[planType as keyof typeof plans].map((plan, index) => ( {plan.popular && (

Popular

)} setActivePlan(activePlan === index ? null : index)} >

{plan.name} {plan.description}

{plan.price} {plan.currency}

{feature}

{/* Animated border */}

))}

) } [V0_FILE]typescriptreact:file="components/mobile-footer.tsx" isMerged="true" "use client" import { useRef } from "react" import { motion, useInView } from "framer-motion" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Facebook, Twitter, Instagram, Youtube, Mail, ArrowUp } from "lucide-react" export function MobileFooter() { const ref = useRef(null) const isInView = useInView(ref, { once: true, amount: 0.2 }) const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth", }) } return ( ) } [V0_FILE]typescriptreact:file="lib/gsma-api.ts" isMerged="true" // This is a mock implementation of the GSMA eSIM SWAP API client // In a real-world scenario, this would be replaced with actual API calls export interface VerificationRequest { phoneNumber: string countryCode: string } export interface VerificationResponse { success: boolean message: string verificationId?: string timestamp?: string } export interface ActivationRequest { verificationId: string deviceInfo: { model: string os: string osVersion: string } } export interface ActivationResponse { success: boolean message: string activationCode?: string qrCodeUrl?: string expiresAt?: string } export class GSMAClient { private apiKey: string private baseUrl: string constructor(apiKey: string, baseUrl = "https://api.gsma-esim.com/v1") { this.apiKey = apiKey this.baseUrl = baseUrl } /** * Verify a phone number for eSIM compatibility * @param request Verification request data * @returns Verification response */ async verifyPhoneNumber(request: VerificationRequest): Promise { // In a real implementation, this would make an API call to the GSMA eSIM SWAP API // For demo purposes, we're simulating the response // Simulate API call delay await new Promise((resolve) => setTimeout(resolve, 1500)) // Simulate verification success for numbers starting with "9" if (request.phoneNumber.startsWith("9")) { return { success: true, message: "Phone number verified successfully", verificationId: `VER-${Math.random().toString(36).substring(2, 10).toUpperCase()}`, timestamp: new Date().toISOString(), } } else { return { success: false, message: "Unable to verify phone number. Please check and try again.", } } } /** * Activate an eSIM for a verified phone number * @param request Activation request data * @returns Activation response */ async activateESIM(request: ActivationRequest): Promise { // In a real implementation, this would make an API call to the GSMA eSIM SWAP API // For demo purposes, we're simulating the response // Simulate API call delay await new Promise((resolve) => setTimeout(resolve, 2000)) // Simulate activation success if (request.verificationId.startsWith("VER-")) { return { success: true, message: "eSIM activated successfully", activationCode: `LPA:1$SMDP.ESIM-MYANMAR.COM$${Math.random().toString(36).substring(2, 10).toUpperCase()}`, qrCodeUrl: `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=LPA:1$SMDP.ESIM-MYANMAR.COM$${Math.random().toString(36).substring(2, 10).toUpperCase()}`, expiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(), // 24 hours from now } } else { return { success: false, message: "Invalid verification ID. Please try again.", } } } /** * Check the status of an eSIM activation * @param activationCode The activation code to check * @returns Status response */ async checkActivationStatus(activationCode: string): Promise<{ success: boolean message: string status: "pending" | "active" | "failed" }> { // In a real implementation, this would make an API call to the GSMA eSIM SWAP API // For demo purposes, we're simulating the response // Simulate API call delay await new Promise((resolve) => setTimeout(resolve, 1000)) // Simulate status check if (activationCode.startsWith("LPA:1$")) { return { success: true, message: "eSIM activation status retrieved successfully", status: "active", } } else { return { success: false, message: "Invalid activation code", status: "failed", } } } } // Create a singleton instance for use throughout the application export const gsmaClient = new GSMAClient(process.env.GSMA_API_KEY || "demo_api_key") [V0_FILE]typescriptreact:file="components/animated-data-usage.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Wifi, BarChart2, RefreshCw, TrendingUp, TrendingDown } from "lucide-react" import { cn } from "@/lib/utils" export function AnimatedDataUsage() { const [isLoading, setIsLoading] = useState(true) const [dataUsage, setDataUsage] = useState({ total: 20, // GB used: 0, // GB percentage: 0, daily: [] as number[], }) // Simulate loading data useEffect(() => { const timer = setTimeout(() => { setDataUsage({ total: 20, used: 15.2, percentage: 76, daily: [0.8, 1.2, 0.5, 2.1, 1.7, 0.9, 1.4], }) setIsLoading(false) }, 1500) return () => clearTimeout(timer) }, []) const refreshData = () => { setIsLoading(true) setTimeout(() => { setDataUsage((prev) => ({ ...prev, used: Math.min(prev.total, prev.used + Math.random() * 0.5), percentage: Math.min(100, prev.percentage + Math.floor(Math.random() * 3)), daily: [...prev.daily.slice(1), Math.random() * 2.5], })) setIsLoading(false) }, 1000) } return (

Data Usage

{/* Main usage indicator */}

Monthly Plan

{isLoading ? (

) : ( {dataUsage.used.toFixed(1)} / {dataUsage.total} GB )}

{isLoading ? "" : `${dataUsage.percentage}% used`} {isLoading ? "" : `${(dataUsage.total - dataUsage.used).toFixed(1)} GB remaining`}

{/* Daily usage chart */}

Daily Usage

{!isLoading && dataUsage.daily.length > 1 && ( {dataUsage.daily[dataUsage.daily.length - 1] > dataUsage.daily[dataUsage.daily.length - 2] ? ( <> + {( ((dataUsage.daily[dataUsage.daily.length - 1] - dataUsage.daily[dataUsage.daily.length - 2]) / dataUsage.daily[dataUsage.daily.length - 2]) * 100 ).toFixed(0)} % ) : ( <> {( ((dataUsage.daily[dataUsage.daily.length - 2] - dataUsage.daily[dataUsage.daily.length - 1]) / dataUsage.daily[dataUsage.daily.length - 2]) * 100 ).toFixed(0)} % )} )}

{isLoading ? // Loading skeleton Array.from({ length: 7 }).map((_, i) => (

)) : // Actual data bars dataUsage.daily.map((day, i) => { const height = (day / Math.max(...dataUsage.daily)) * 100 const dayNames = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] return (

{dayNames[i]}

) })}

{/* Animated recommendation */} {!isLoading && dataUsage.percentage > 75 && (

Data usage alert

You've used {dataUsage.percentage}% of your data. Consider upgrading your plan.

)}

) } [V0_FILE]typescriptreact:file="components/animated-loading-states.tsx" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Loader2, CheckCircle, XCircle, AlertTriangle } from "lucide-react" export function AnimatedLoadingStates() { const [activeTab, setActiveTab] = useState("loading") const [isLoading, setIsLoading] = useState(false) const [loadingState, setLoadingState] = useState<"idle" | "loading" | "success" | "error" | "warning">("idle") const handleTriggerLoading = () => { setIsLoading(true) setLoadingState("loading") setTimeout(() => { if (activeTab === "loading") { setLoadingState("idle") } else if (activeTab === "success") { setLoadingState("success") } else if (activeTab === "error") { setLoadingState("error") } else if (activeTab === "warning") { setLoadingState("warning") } setIsLoading(false) }, 2000) } return ( Animated States Loading Success Error Warning

{loadingState === "idle" && (

Click the button below to see the {activeTab} animation

)} {loadingState === "loading" && (

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

Operation completed successfully! )} {loadingState === "error" && (

An error occurred. Please try again. )} {loadingState === "warning" && (

Warning: Proceed with caution

This action may have unexpected consequences

)}

) } [V0_FILE]typescriptreact:file="components/animated-transitions.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import React from "react" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ChevronRight, ChevronLeft, Home, User, CreditCard, CheckCircle } from "lucide-react" const screens = [ { id: "home", title: "Welcome", icon: Home, color: "text-cyan bg-cyan/10", content: "Start your eSIM activation process", }, { id: "profile", title: "Your Profile", icon: User, color: "text-blue-500 bg-blue-500/10", content: "Verify your identity and contact information", }, { id: "payment", title: "Payment", icon: CreditCard, color: "text-purple-500 bg-purple-500/10", content: "Choose your payment method and complete purchase", }, { id: "complete", title: "Complete", icon: CheckCircle, color: "text-green-500 bg-green-500/10", content: "Your eSIM has been activated successfully", }, ] export function AnimatedTransitions() { const [currentScreen, setCurrentScreen] = useState(0) const [direction, setDirection] = useState(0) const goToNextScreen = () => { if (currentScreen < screens.length - 1) { setDirection(1) setCurrentScreen((prev) => prev + 1) } } const goToPrevScreen = () => { if (currentScreen > 0) { setDirection(-1) setCurrentScreen((prev) => prev - 1) } } const goToScreen = (index: number) => { setDirection(index > currentScreen ? 1 : -1) setCurrentScreen(index) } const variants = { enter: (direction: number) => ({ x: direction > 0 ? 300 : -300, opacity: 0, }), center: { x: 0, opacity: 1, }, exit: (direction: number) => ({ x: direction < 0 ? 300 : -300, opacity: 0, }), } return ( Screen Transitions

{screens.map((screen, index) => ( ))}

{React.createElement(screens[currentScreen].icon, { className: `h-6 w-6 ${screens[currentScreen].color.split(" ")[0]}`, })}

{screens[currentScreen].title}

{screens[currentScreen].content}

{/* Screen-specific animated elements */} {currentScreen === 0 && (

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

)} {currentScreen === 1 && (

)} {currentScreen === 2 && (

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

)} {currentScreen === 3 && (

)}

) } [V0_FILE]typescriptreact:file="hooks/use-reduced-motion.ts" isMerged="true" "use client" import { useState, useEffect } from "react" export function useReducedMotion(): boolean { const [prefersReducedMotion, setPrefersReducedMotion] = useState(false) useEffect(() => { const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)") setPrefersReducedMotion(mediaQuery.matches) const handleChange = () => { setPrefersReducedMotion(mediaQuery.matches) } mediaQuery.addEventListener("change", handleChange) return () => { mediaQuery.removeEventListener("change", handleChange) } }, []) return prefersReducedMotion } [V0_FILE]typescriptreact:file="contexts/animation-context.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useState, useEffect } from "react" import { useReducedMotion } from "@/hooks/use-reduced-motion" type AnimationLevel = "none" | "minimal" | "full" interface AnimationContextType { animationLevel: AnimationLevel setAnimationLevel: (level: AnimationLevel) => void isReducedMotion: boolean duration: (multiplier?: number) => number getTransition: (props?: { delay?: number; type?: string }) => any } const AnimationContext = createContext(undefined) export function AnimationProvider({ children }: { children: React.ReactNode }) { const isReducedMotion = useReducedMotion() const [animationLevel, setAnimationLevel] = useState(isReducedMotion ? "minimal" : "full") useEffect(() => { if (isReducedMotion && animationLevel === "full") { setAnimationLevel("minimal") } }, [isReducedMotion, animationLevel]) const duration = (multiplier = 1) => { switch (animationLevel) { case "none": return 0 case "minimal": return 0.2 * multiplier case "full": return 0.4 * multiplier default: return 0.4 * multiplier } } const getTransition = ({ delay = 0, type = "ease" } = {}) => { if (animationLevel === "none") { return { duration: 0 } } return { duration: duration(), delay, ease: type, } } return ( {children} ) } export function useAnimation() { const context = useContext(AnimationContext) if (context === undefined) { throw new Error("useAnimation must be used within an AnimationProvider") } return context } [V0_FILE]typescriptreact:file="components/enhanced-mobile-navbar.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" import { Menu, X, Globe, Smartphone, Moon, Sun, Settings } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { motion, AnimatePresence } from "framer-motion" import { useAnimation } from "@/contexts/animation-context" import { useTheme } from "next-themes" export function EnhancedMobileNavbar() { const [isScrolled, setIsScrolled] = useState(false) const [language, setLanguage] = useState("English") const [isOpen, setIsOpen] = useState(false) const { animationLevel, setAnimationLevel, getTransition } = useAnimation() const { theme, setTheme } = useTheme() useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 10) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const navVariants = { hidden: { opacity: 0, y: -20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.3, when: "beforeChildren", staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, y: -10 }, visible: { opacity: 1, y: 0 }, } const logoVariants = { initial: { scale: 1 }, hover: { scale: 1.05 }, } const menuItems = [ { name: "Home", href: "#" }, { name: "Features", href: "#features" }, { name: "How It Works", href: "#how-it-works" }, { name: "Plans", href: "#plans" }, { name: "Support", href: "#support" }, ] return (

eSIM Myanmar

setLanguage("English")}>English setLanguage("မြန်မာ")}>မြန်မာ setAnimationLevel("none")} className={animationLevel === "none" ? "bg-muted" : ""} > No Animations setAnimationLevel("minimal")} className={animationLevel === "minimal" ? "bg-muted" : ""} > Minimal Animations setAnimationLevel("full")} className={animationLevel === "full" ? "bg-muted" : ""} > Full Animations

eSIM Myanmar

) } [V0_FILE]typescriptreact:file="app/animation-showcase.tsx" isMerged="true" import { MicroInteractions } from "@/components/micro-interactions" import { PageTransitions } from "@/components/page-transitions" import { InteractiveForm } from "@/components/interactive-form" import { EnhancedHero } from "@/components/enhanced-hero" export default function AnimationShowcase() { return (

Animation-Driven Design

Interactive UI without static images

Micro-Interactions

Small animations that provide feedback and enhance the user experience.

Page Transitions

Smooth transitions between different pages and states.

Interactive Form

Form with real-time validation and animated feedback.

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 222 47% 11%; --foreground: 210 40% 98%; --card: 222 47% 11%; --card-foreground: 210 40% 98%; --popover: 222 47% 11%; --popover-foreground: 210 40% 98%; --primary: 196 100% 50%; --primary-foreground: 222.2 47.4% 11.2%; --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: 196 100% 50%; --accent-foreground: 222.2 47.4% 11.2%; --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: 196 100% 50%; --radius: 1rem; /* Custom colors */ --cyan: 180 100% 50%; --cyan-hover: 180 100% 60%; --cyan-500: 180 100% 50%; } .light { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 196 100% 50%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 196 100% 50%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 196 100% 50%; /* Custom colors in light mode */ --cyan: 180 100% 50%; --cyan-hover: 180 100% 60%; --cyan-500: 180 100% 50%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Grid pattern background */ .bg-grid-pattern { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 20px 20px; } .light .bg-grid-pattern { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px); } /* Animation for floating particles */ @keyframes float { 0% { transform: translateY(0) translateX(0); opacity: 0.3; } 50% { transform: translateY(-10px) translateX(5px); opacity: 0.8; } 100% { transform: translateY(0) translateX(0); opacity: 0.3; } } /* Pulse glow animation */ @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); } 50% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.8); } } .animate-pulse-glow { animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Gradient animation */ @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .animate-gradient { background-size: 200% 200%; animation: gradient-shift 3s ease infinite; } /* Custom button styles */ .btn-cyan { @apply bg-cyan text-background font-medium rounded-full px-6 py-3 transition-all duration-300; } .btn-cyan:hover { @apply bg-cyan-hover transform scale-105 shadow-glow; } .shadow-glow { box-shadow: 0 0 15px rgba(0, 255, 255, 0.7); } /* Custom card styles */ .card-dark { @apply bg-card/80 backdrop-blur-md border border-cyan/20 rounded-2xl overflow-hidden; } /* Custom input styles */ .input-dark { @apply bg-muted/50 border-cyan/20 rounded-xl text-foreground placeholder:text-muted-foreground/50 focus:border-cyan focus:ring-1 focus:ring-cyan; } /* Custom slider styling */ .data-limit-slider .relative { @apply h-5; } .data-limit-slider .relative::before { content: ""; @apply absolute inset-0 top-1/2 -translate-y-1/2 h-1 bg-muted rounded-full; } .data-limit-slider .thumb { @apply h-5 w-5 bg-gradient-to-r from-cyan to-cyan-hover rounded-full border-2 border-background shadow-md transition-all duration-200; } .data-limit-slider:hover .thumb { @apply scale-110; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, cyan: { DEFAULT: "hsl(var(--cyan))", hover: "hsl(var(--cyan-hover))", 500: "hsl(var(--cyan-500))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 0.25rem)", sm: "calc(var(--radius) - 0.5rem)", xl: "calc(var(--radius) + 0.25rem)", "2xl": "calc(var(--radius) + 0.5rem)", }, 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%": { boxShadow: "0 0 10px rgba(0, 255, 255, 0.5)" }, "50%": { boxShadow: "0 0 20px rgba(0, 255, 255, 0.8)" }, }, float: { "0%, 100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(-10px)" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", "pulse-glow": "pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite", float: "float 3s ease-in-out infinite", }, boxShadow: { glow: "0 0 15px rgba(0, 255, 255, 0.7)", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { AnimationProvider } from "@/contexts/animation-context" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "eSIM Myanmar", description: "Digital connectivity simplified for Myanmar and beyond", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/ui/cyan-button.tsx" isMerged="true" "use client" import type React from "react" import { forwardRef } from "react" import { motion } from "framer-motion" import { cn } from "@/lib/utils" import { useAnimation } from "@/contexts/animation-context" interface CyanButtonProps extends React.ButtonHTMLAttributes { variant?: "default" | "outline" | "ghost" size?: "default" | "sm" | "lg" | "icon" isLoading?: boolean loadingText?: string icon?: React.ReactNode iconPosition?: "left" | "right" } const CyanButton = forwardRef( ( { className, variant = "default", size = "default", isLoading = false, loadingText, children, icon, iconPosition = "left", ...props }, ref, ) => { const { animationLevel } = useAnimation() const baseStyles = "inline-flex items-center justify-center font-medium transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-cyan focus:ring-offset-2 focus:ring-offset-background disabled:opacity-50 disabled:pointer-events-none" const variants = { default: "bg-cyan text-background hover:bg-cyan-hover", outline: "border-2 border-cyan text-cyan hover:bg-cyan/10", ghost: "text-cyan hover:bg-cyan/10", } const sizes = { default: "h-11 px-6 py-3 rounded-full text-sm", sm: "h-9 px-4 py-2 rounded-full text-xs", lg: "h-12 px-8 py-4 rounded-full text-base", icon: "h-10 w-10 rounded-full p-0", } const buttonContent = ( <> {isLoading ? (

{loadingText || "Loading..."}

) : (

{icon && iconPosition === "left" && {icon}} {children} {icon && iconPosition === "right" && {icon}}

)} ) if (animationLevel === "none") { return ( ) } return ( {buttonContent} ) }, ) CyanButton.displayName = "CyanButton" export { CyanButton } [V0_FILE]typescriptreact:file="components/ui/cyan-card.tsx" isMerged="true" "use client" import type React from "react" import { forwardRef } from "react" import { cn } from "@/lib/utils" import { motion } from "framer-motion" interface CyanCardProps extends React.HTMLAttributes { animate?: boolean } const CyanCard = forwardRef( ({ className, animate = false, children, ...props }, ref) => { if (!animate) { return (

{children}

) } return ( {children} ) }, ) CyanCard.displayName = "CyanCard" export { CyanCard } [V0_FILE]typescriptreact:file="components/ui/cyan-input.tsx" isMerged="true" import type React from "react" import { forwardRef } from "react" import { cn } from "@/lib/utils" export interface CyanInputProps extends React.InputHTMLAttributes {} const CyanInput = forwardRef(({ className, type, ...props }, ref) => { return ( ) }) CyanInput.displayName = "CyanInput" export { CyanInput } [V0_FILE]typescriptreact:file="components/micro-interactions.tsx" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import { Bell, BellOff, Zap, Check, X, ThumbsUp, ThumbsDown } from "lucide-react" import { useAnimation } from "@/contexts/animation-context" import { cn } from "@/lib/utils" import { CyanButton } from "@/components/ui/cyan-button" import { CyanCard } from "@/components/ui/cyan-card" export function MicroInteractions() { const [notifications, setNotifications] = useState(false) const [dataLimit, setDataLimit] = useState(50) const [feedback, setFeedback] = useState<"none" | "positive" | "negative">("none") const { animationLevel, getTransition } = useAnimation() const handleNotificationToggle = (checked: boolean) => { setNotifications(checked) } const handleDataLimitChange = (value: number[]) => { setDataLimit(value[0]) } const handleFeedback = (type: "positive" | "negative") => { setFeedback(type) // Reset after animation completes setTimeout(() => { setFeedback("none") }, 2000) } return (

Notification Toggle

{notifications ? ( ) : ( )}

Notifications

{notifications ? "You will receive notifications" : "Notifications are disabled"}

{notifications && animationLevel !== "none" && ( )}

Data Usage Limit

Data Limit: {dataLimit}% 80 ? "rgb(239, 68, 68)" : dataLimit > 50 ? "rgb(234, 179, 8)" : "rgb(34, 197, 94)", }} className="text-sm font-medium" > {dataLimit > 80 ? "High" : dataLimit > 50 ? "Medium" : "Low"}

80 ? "rgb(239, 68, 68)" : "rgb(234, 179, 8)"} 100%)`, }} animate={{ width: `${dataLimit}%`, }} transition={{ type: "spring", stiffness: 100, damping: 15 }} />

{dataLimit > 80 && (

High data usage alert

You've set a high data limit. This may result in additional charges.

)}

Feedback Interaction

How would you rate your experience with our eSIM service?

handleFeedback("positive")} icon={} > Good handleFeedback("negative")} icon={} > Needs Improvement

{feedback !== "none" && ( {feedback === "positive" ? ( ) : ( )}

{feedback === "positive" ? "Thank you for your feedback!" : "We'll work on improving our service."}

)}

) } [V0_FILE]typescriptreact:file="components/page-transitions.tsx" isMerged="true" "use client" import React from "react" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ChevronRight, ChevronLeft, Home, CreditCard, Settings, User } from "lucide-react" import { useAnimation } from "@/contexts/animation-context" import { CyanButton } from "@/components/ui/cyan-button" import { CyanCard } from "@/components/ui/cyan-card" const pages = [ { id: "home", title: "Home", icon: Home, color: "text-cyan bg-cyan/10", }, { id: "account", title: "Account", icon: User, color: "text-blue-500 bg-blue-500/10", }, { id: "billing", title: "Billing", icon: CreditCard, color: "text-purple-500 bg-purple-500/10", }, { id: "settings", title: "Settings", icon: Settings, color: "text-amber-500 bg-amber-500/10", }, ] export function PageTransitions() { const [currentPage, setCurrentPage] = useState(0) const [direction, setDirection] = useState(0) const [transitionType, setTransitionType] = useState<"slide" | "fade" | "scale" | "flip">("slide") const { getTransition } = useAnimation() const goToNextPage = () => { if (currentPage < pages.length - 1) { setDirection(1) setCurrentPage((prev) => prev + 1) } } const goToPrevPage = () => { if (currentPage > 0) { setDirection(-1) setCurrentPage((prev) => prev - 1) } } const getVariants = () => { switch (transitionType) { case "slide": return { enter: (direction: number) => ({ x: direction > 0 ? 300 : -300, opacity: 0, }), center: { x: 0, opacity: 1, }, exit: (direction: number) => ({ x: direction < 0 ? 300 : -300, opacity: 0, }), } case "fade": return { enter: { opacity: 0 }, center: { opacity: 1 }, exit: { opacity: 0 }, } case "scale": return { enter: { opacity: 0, scale: 0.8 }, center: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, } case "flip": return { enter: (direction: number) => ({ opacity: 0, rotateY: direction > 0 ? 90 : -90, }), center: { opacity: 1, rotateY: 0, }, exit: (direction: number) => ({ opacity: 0, rotateY: direction < 0 ? 90 : -90, }), } default: return { enter: { opacity: 0 }, center: { opacity: 1 }, exit: { opacity: 0 }, } } } return ( Page Transitions

setTransitionType(value as any)} className="mb-6"> Slide Fade Scale Flip

{pages.map((page, index) => ( ))}

{React.createElement(pages[currentPage].icon, { className: `h-6 w-6 ${pages[currentPage].color.split(" ")[0]}`, })}

{pages[currentPage].title}

{currentPage === 0 && (

)} {currentPage === 1 && (

)} {currentPage === 2 && (

)} {currentPage === 3 && (

)}

} > Previous } iconPosition="right" > Next

) } [V0_FILE]typescriptreact:file="components/interactive-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { CheckCircle, AlertCircle, Info } from "lucide-react" import { useAnimation } from "@/contexts/animation-context" import { cn } from "@/lib/utils" import { CyanButton } from "@/components/ui/cyan-button" import { CyanCard } from "@/components/ui/cyan-card" import { CyanInput } from "@/components/ui/cyan-input" type FieldState = "idle" | "valid" | "invalid" | "loading" interface FormField { id: string label: string type: string placeholder: string state: FieldState value: string errorMessage?: string } export function InteractiveForm() { const [formState, setFormState] = useState<"idle" | "submitting" | "success" | "error">("idle") const [fields, setFields] = useState([ { id: "name", label: "Full Name", type: "text", placeholder: "Enter your full name", state: "idle", value: "", }, { id: "phone", label: "Phone Number", type: "tel", placeholder: "Enter your phone number", state: "idle", value: "", }, { id: "email", label: "Email", type: "email", placeholder: "Enter your email address", state: "idle", value: "", }, ]) const [agreed, setAgreed] = useState(false) const { animationLevel, getTransition } = useAnimation() const updateField = (id: string, value: string) => { setFields((prev) => prev.map((field) => { if (field.id === id) { let state: FieldState = "idle" let errorMessage: string | undefined = undefined // Simple validation if (value.trim() !== "") { if (field.id === "email") { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (emailRegex.test(value)) { state = "valid" } else { state = "invalid" errorMessage = "Please enter a valid email address" } } else if (field.id === "phone") { const phoneRegex = /^\d{10,}$/ if (phoneRegex.test(value.replace(/\D/g, ""))) { state = "valid" } else { state = "invalid" errorMessage = "Please enter a valid phone number" } } else { state = "valid" } } return { ...field, value, state, errorMessage } } return field }), ) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Validate all fields let isValid = true const updatedFields = fields.map((field) => { if (field.value.trim() === "") { isValid = false return { ...field, state: "invalid", errorMessage: "This field is required" } } return field }) if (!agreed) { isValid = false } setFields(updatedFields) if (isValid) { setFormState("submitting") // Simulate API call setTimeout(() => { // 90% chance of success if (Math.random() > 0.1) { setFormState("success") } else { setFormState("error") } }, 2000) } } const resetForm = () => { setFormState("idle") setFields(fields.map((field) => ({ ...field, state: "idle", value: "", errorMessage: undefined }))) setAgreed(false) } return ( eSIM Registration

{formState === "success" ? (

{animationLevel !== "none" && ( )} Registration Successful! Your eSIM registration has been completed successfully. Register Another ) : formState === "error" ? (

Registration Failed There was an error processing your registration. Please try again. Go Back setFormState("submitting")}>Retry ) : ( {fields.map((field) => (

{field.label} {field.state === "invalid" && ( )}

updateField(field.id, e.target.value)} className={cn( field.state === "invalid" && "border-red-500 focus-visible:ring-red-500", field.state === "valid" && "border-green-500 focus-visible:ring-green-500", )} disabled={formState === "submitting"} /> {field.state === "valid" && ( )}

{field.errorMessage && ( {field.errorMessage} )}

))}

setAgreed(checked as boolean)} disabled={formState === "submitting"} className="data-[state=checked]:bg-cyan data-[state=checked]:border-cyan" />

f.state === "invalid") && "text-red-500", )} > Accept terms and conditions

By checking this, you agree to our{" "} Terms of Service {" "} and{" "} Privacy Policy .

Your information is secure and will only be used to register your eSIM. We'll never share your data with third parties.

)}

) } [V0_FILE]typescriptreact:file="components/enhanced-hero.tsx" isMerged="true" "use client" import { useRef, useState } from "react" import { motion, useScroll, useTransform, useMotionValueEvent, AnimatePresence } from "framer-motion" import { ArrowRight, Smartphone, Wifi, Globe, ChevronDown, CheckCircle } from "lucide-react" import { useAnimation } from "@/contexts/animation-context" import { EnhancedMobileNavbar } from "@/components/enhanced-mobile-navbar" import { CyanButton } from "@/components/ui/cyan-button" export function EnhancedHero() { const containerRef = useRef(null) const { scrollY } = useScroll() const y = useTransform(scrollY, [0, 300], [0, -100]) const opacity = useTransform(scrollY, [0, 300], [1, 0]) const { animationLevel, getTransition } = useAnimation() const [showFeatures, setShowFeatures] = useState(false) useMotionValueEvent(scrollY, "change", (latest) => { if (latest > 100 && !showFeatures) { setShowFeatures(true) } }) const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { when: "beforeChildren", staggerChildren: 0.1, delayChildren: 0.2, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: getTransition(), }, } const buttonVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: getTransition({ delay: 0.4 }), }, hover: { scale: 1.05, boxShadow: "0 0 15px rgba(0, 255, 255, 0.5)", transition: { duration: 0.2 }, }, tap: { scale: 0.98 }, } const featureVariants = { hidden: { opacity: 0, scale: 0.8 }, visible: (i: number) => ({ opacity: 1, scale: 1, transition: { delay: 0.6 + i * 0.1, ...getTransition(), }, }), hover: { y: -5, boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", transition: { duration: 0.2 }, }, } const features = [ { icon: Smartphone, label: "Instant Activation" }, { icon: Wifi, label: "Nationwide Coverage" }, { icon: Globe, label: "International Plans" }, ] return ( {/* Animated background elements */}

{/* Animated circles */} {/* Animated dots */} {animationLevel !== "none" && (

{Array.from({ length: animationLevel === "full" ? 20 : 10 }).map((_, i) => ( ))}

)}

eSIM {" "} Myanmar

Digital Connectivity Simplified Experience seamless connectivity with our digital eSIM technology. No physical SIM card needed - activate instantly and stay connected. } iconPosition="right" > Get Your eSIM Learn More {features.map((feature, i) => ( {feature.label} ))} {showFeatures && (

Compatible with your device

Our eSIM works with all modern smartphones and tablets that support eSIM technology.

)} ) } function PhonePreview() { const { animationLevel } = useAnimation() const [isActive, setIsActive] = useState(false) const phoneVariants = { hidden: { opacity: 0, y: 100 }, visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 100, damping: 15, delay: 0.5, }, }, } const screenVariants = { initial: { opacity: 0.7 }, hover: { opacity: 1 }, } const progressVariants = { initial: { width: "0%" }, animate: { width: "75%" }, } return (

setIsActive(true)} onHoverEnd={() => setIsActive(false)} onTapStart={() => setIsActive(true)} onTap={() => setIsActive((prev) => !prev)} >

{/* Phone frame */}

{/* Phone screen */} {/* eSIM interface elements */}

eSIM Myanmar

Current Plan

Unlimited Data

15.2 GB used 20 GB

Active Until

March 28, 2025

{[ { icon: Wifi, label: "Data" }, { icon: Globe, label: "Roaming" }, { icon: Smartphone, label: "Profile" }, ].map((item, i) => (

{item.label} ))}

{/* Animated particles */} {animationLevel !== "none" && (

{Array.from({ length: animationLevel === "full" ? 8 : 4 }).map((_, i) => ( ))}

)}

{/* Glow effect */}

) } [V0_FILE]typescriptreact:file="lib/theme-config.ts" isMerged="true" export const themeConfig = { colors: { primary: { light: "from-cyan-400 to-blue-400", default: "from-cyan to-cyan-hover", dark: "from-cyan-600 to-blue-600", }, providers: { MYTEL: { bg: "from-red-500 to-red-600", border: "border-red-500/20", light: "bg-red-500/10", text: "text-red-500", }, ATOM: { bg: "from-blue-500 to-blue-600", border: "border-blue-500/20", light: "bg-blue-500/10", text: "text-blue-500", }, OOREDOO: { bg: "from-red-500 to-red-600", border: "border-red-500/20", light: "bg-red-500/10", text: "text-red-500", }, MPT: { bg: "from-yellow-500 to-yellow-600", border: "border-yellow-500/20", light: "bg-yellow-500/10", text: "text-yellow-500", }, }, status: { pending: { bg: "bg-muted", text: "text-muted-foreground", light: "bg-muted/50", }, processing: { bg: "bg-amber-500", text: "text-amber-500", light: "bg-amber-500/10", }, completed: { bg: "bg-green-500", text: "text-green-500", light: "bg-green-500/10", }, failed: { bg: "bg-red-500", text: "text-red-500", light: "bg-red-500/10", }, }, }, animations: { transition: { fast: "duration-200", default: "duration-300", slow: "duration-500", }, hover: { scale: "hover:scale-105", lift: "hover:-translate-y-1", glow: "hover:shadow-glow", }, }, shadows: { sm: "shadow-sm", md: "shadow-md", lg: "shadow-lg", glow: "shadow-[0_0_15px_rgba(0,255,255,0.5)]", }, gradients: { subtle: "bg-gradient-to-br from-background to-muted/50", card: "bg-gradient-to-br from-card/50 to-card", primary: "bg-gradient-to-r from-cyan to-cyan-hover", }, borders: { subtle: "border border-border/50", default: "border border-border", primary: "border border-cyan/30", focus: "focus-visible:ring-2 focus-visible:ring-cyan focus-visible:ring-offset-2", }, spacing: { section: "py-12 md:py-16", container: "px-4 md:px-6", }, } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { EnhancedButton } from "@/components/ui/enhanced-button" import { ArrowRight, Smartphone, Wifi, Globe } from "lucide-react" export default function Home() { return (

{/* Background elements */}

eSIM Myanmar

Experience seamless connectivity with our digital eSIM technology. No physical SIM card needed.

Get Your eSIM Now

Instant Activation

Activate your eSIM instantly without waiting for physical delivery

Nationwide Coverage

Enjoy reliable connectivity across Myanmar with our extensive network

International Plans

Stay connected globally with our international eSIM plans

) } [V0_FILE]typescriptreact:file="package.json" isMerged="true" { "dependencies": { "qrcode": "^1.5.3" } } [V0_FILE]typescriptreact:file="contexts/checkout-context.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useState, useEffect } from "react" import { v4 as uuidv4 } from "uuid" export type EsimProvider = "MYTEL" | "ATOM" | "OOREDOO" | "MPT" export interface CheckoutItem { id: string provider: EsimProvider name: string price: number } export interface OrderDetails { orderId: string phoneNumber: string email: string items: CheckoutItem[] totalAmount: number paymentMethod: string status: "pending" | "processing" | "completed" | "failed" createdAt: Date } interface CheckoutContextType { items: CheckoutItem[] selectedItem: CheckoutItem | null phoneNumber: string email: string paymentMethod: string orderDetails: OrderDetails | null setPhoneNumber: (phone: string) => void setEmail: (email: string) => void setPaymentMethod: (method: string) => void selectItem: (item: CheckoutItem) => void placeOrder: () => Promise getOrderById: (orderId: string) => OrderDetails | null clearCheckout: () => void } const CheckoutContext = createContext(undefined) const defaultItems: CheckoutItem[] = [ { id: "1", provider: "MYTEL", name: "MYTEL eSIM", price: 70000 }, { id: "2", provider: "ATOM", name: "ATOM eSIM", price: 70000 }, { id: "3", provider: "OOREDOO", name: "OOREDOO eSIM", price: 70000 }, { id: "4", provider: "MPT", name: "MPT eSIM", price: 70000 }, ] // Mock storage for orders let orders: OrderDetails[] = [] export const CheckoutProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [items] = useState(defaultItems) const [selectedItem, setSelectedItem] = useState(null) const [phoneNumber, setPhoneNumber] = useState("") const [email, setEmail] = useState("") const [paymentMethod, setPaymentMethod] = useState("myanmarpay") const [orderDetails, setOrderDetails] = useState(null) // Load orders from localStorage on client side useEffect(() => { const savedOrders = localStorage.getItem("esim_orders") if (savedOrders) { orders = JSON.parse(savedOrders) } }, []) // Save orders to localStorage whenever they change const saveOrders = () => { if (typeof window !== "undefined") { localStorage.setItem("esim_orders", JSON.stringify(orders)) } } const selectItem = (item: CheckoutItem) => { setSelectedItem(item) } const placeOrder = async (): Promise => { if (!selectedItem) { throw new Error("No item selected") } if (!phoneNumber || !email) { throw new Error("Phone number and email are required") } // Generate a unique order ID const orderId = uuidv4().substring(0, 8).toUpperCase() // Create order details const newOrder: OrderDetails = { orderId, phoneNumber, email, items: [selectedItem], totalAmount: selectedItem.price, paymentMethod, status: "pending", createdAt: new Date(), } // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1500)) // Update order status to processing after "payment" newOrder.status = "processing" // Store the order orders.push(newOrder) saveOrders() // Update state setOrderDetails(newOrder) return newOrder } const getOrderById = (orderId: string): OrderDetails | null => { const order = orders.find((o) => o.orderId === orderId) return order || null } const clearCheckout = () => { setSelectedItem(null) setPhoneNumber("") setEmail("") setPaymentMethod("myanmarpay") setOrderDetails(null) } return ( {children} ) } export const useCheckout = () => { const context = useContext(CheckoutContext) if (context === undefined) { throw new Error("useCheckout must be used within a CheckoutProvider") } return context } [V0_FILE]typescriptreact:file="types/qrcode.d.ts" isEdit="true" isMerged="true" declare module "qrcode" { export function toCanvas( canvas: HTMLCanvasElement, text: string, options?: { width?: number margin?: number color?: { dark?: string light?: string } }, callback?: (error: Error | null) => void, ): void } [V0_FILE]typescriptreact:file="lib/theme-constants.ts" isMerged="true" export const themeConstants = { colors: { primary: "from-cyan to-cyan-hover", primarySolid: "bg-cyan", primaryHover: "bg-cyan-hover", primaryGlow: "shadow-[0_0_15px_rgba(0,255,255,0.5)]", primaryBorder: "border-cyan/30", primaryText: "text-cyan", primaryBg: "bg-cyan/10", providers: { MYTEL: { gradient: "from-red-500 to-red-600", border: "border-red-500/20", bg: "bg-red-500/10", text: "text-red-500", }, ATOM: { gradient: "from-blue-500 to-blue-600", border: "border-blue-500/20", bg: "bg-blue-500/10", text: "text-blue-500", }, OOREDOO: { gradient: "from-red-500 to-red-600", border: "border-red-500/20", bg: "bg-red-500/10", text: "text-red-500", }, MPT: { gradient: "from-yellow-500 to-yellow-600", border: "border-yellow-500/20", bg: "bg-yellow-500/10", text: "text-yellow-500", }, }, }, animations: { buttonHover: "hover:scale-105 transition-transform duration-300", cardHover: "hover:-translate-y-1 transition-transform duration-300", glow: "hover:shadow-glow transition-shadow duration-300", }, gradients: { card: "bg-gradient-to-br from-card/50 to-card", primary: "bg-gradient-to-r from-cyan to-cyan-hover", subtle: "bg-gradient-to-br from-muted/30 to-muted/10", }, borders: { subtle: "border border-border/50", primary: "border border-cyan/30", focus: "focus:ring-2 focus:ring-cyan focus:ring-offset-2", }, } [V0_FILE]typescriptreact:file="components/ui/enhanced-button.tsx" isEdit="true" isMerged="true" "use client" import { forwardRef } from "react" import { motion } from "framer-motion" import { Button, type ButtonProps } from "@/components/ui/button" import { Loader2 } from "lucide-react" import { cn } from "@/lib/utils" import { themeConstants } from "@/lib/theme-constants" interface EnhancedButtonProps extends ButtonProps { isLoading?: boolean loadingText?: string gradient?: boolean glow?: boolean animation?: "none" | "subtle" | "bounce" } export const EnhancedButton = forwardRef( ( { children, className, variant = "default", size = "default", isLoading = false, loadingText, gradient = false, glow = false, animation = "subtle", ...props }, ref, ) => { // If animation is none, render a regular button if (animation === "none") { return ( ) } // Otherwise, render a motion button return ( ) }, ) EnhancedButton.displayName = "EnhancedButton" [V0_FILE]typescriptreact:file="components/ui/enhanced-card.tsx" isEdit="true" 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" import { themeConstants } from "@/lib/theme-constants" interface EnhancedCardProps extends CardProps { gradient?: boolean glow?: boolean animation?: "none" | "hover" | "float" borderHighlight?: "none" | "bottom" | "all" highlightColor?: string } export const EnhancedCard = forwardRef( ( { children, className, gradient = false, glow = false, animation = "none", borderHighlight = "none", highlightColor = themeConstants.colors.primary, ...props }, ref, ) => { // If animation is none, render a regular card if (animation === "none") { return ( {children} ) } // For hover animation if (animation === "hover") { return ( {children} {borderHighlight === "bottom" && ( )} ) } // For float animation return ( {children} ) }, ) EnhancedCard.displayName = "EnhancedCard" [V0_FILE]typescriptreact:file="components/ui/enhanced-input.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { forwardRef, useState } from "react" import { motion } from "framer-motion" import { Input, type InputProps } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { cn } from "@/lib/utils" import { CheckCircle, AlertCircle, Info } from "lucide-react" import { themeConstants } from "@/lib/theme-constants" interface EnhancedInputProps extends InputProps { label?: string helperText?: string error?: string success?: boolean icon?: React.ReactNode animation?: "none" | "subtle" } export const EnhancedInput = forwardRef( ({ label, helperText, error, success, icon, animation = "subtle", className, id, ...props }, ref) => { const [focused, setFocused] = useState(false) const inputId = id || label?.toLowerCase().replace(/\s+/g, "-") return (

{label && ( {label} )}

{icon &&

{icon}

} setFocused(true)} onBlur={() => setFocused(false)} {...props} /> {(error || success) && (

{error ? ( ) : ( )}

)}

{(error || helperText) && ( {error ? ( <>

{error}

) : helperText ? ( <>

{helperText}

) : null} )}

) }, ) EnhancedInput.displayName = "EnhancedInput" [V0_FILE]typescriptreact:file="components/checkout/product-selection.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { CheckCircle, Smartphone, Wifi, Globe, ArrowRight } from "lucide-react" import { useCheckout, type CheckoutItem } from "@/contexts/checkout-context" import { cn } from "@/lib/utils" import { themeConstants } from "@/lib/theme-constants" import { EnhancedButton } from "@/components/ui/enhanced-button" import { EnhancedCard } from "@/components/ui/enhanced-card" interface ProductSelectionProps { onNext: () => void } export function ProductSelection({ onNext }: ProductSelectionProps) { const { items, selectItem, selectedItem } = useCheckout() const [hoveredItem, setHoveredItem] = useState(null) const handleSelectItem = (item: CheckoutItem) => { selectItem(item) } const handleContinue = () => { if (selectedItem) { onNext() } } const providerIcons = { MYTEL: Smartphone, ATOM: Wifi, OOREDOO: Globe, MPT: Smartphone, } const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 100, damping: 15, }, }, } return (

Select Your eSIM Provider

All eSIMs include nationwide coverage and instant activation

{items.map((item) => { const Icon = providerIcons[item.provider] const providerTheme = themeConstants.colors.providers[item.provider] const isSelected = selectedItem?.id === item.id const isHovered = hoveredItem === item.id return ( setHoveredItem(item.id)} onHoverEnd={() => setHoveredItem(null)} > handleSelectItem(item)} >

{item.name} Nationwide Coverage

{item.price.toLocaleString()} Ks

Instant Activation
30-day Validity
High-Speed Data

{isSelected ? ( Selected ) : ( Click to select )} {/* Animated border */}

) })} Continue to Details

) } [V0_FILE]typescriptreact:file="components/checkout/myanmar-pay-qr.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" import QRCode from "qrcode" import { motion } from "framer-motion" import { Smartphone, CreditCard } from "lucide-react" import { themeConstants } from "@/lib/theme-constants" interface MyanmarPayQRProps { qrData: string size?: number } export function MyanmarPayQR({ qrData, size = 200 }: MyanmarPayQRProps) { const canvasRef = useRef(null) useEffect(() => { if (canvasRef.current) { QRCode.toCanvas( canvasRef.current, qrData, { width: size, margin: 2, color: { dark: "#000000", light: "#FFFFFF", }, }, (error) => { if (error) console.error("Error generating QR code:", error) }, ) } }, [qrData, size]) return (

Scan with any mobile wallet app

{["KBZ Pay", "Wave Pay", "CB Pay", "AYA Pay"].map((wallet, index) => (

{wallet}

))}

Scan the QR code above with your mobile banking app to make payment

) } [V0_FILE]typescriptreact:file="components/checkout/checkout-form.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion } from "framer-motion" import { CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { useCheckout } from "@/contexts/checkout-context" import { ArrowLeft, ArrowRight, Smartphone, Mail, CreditCard, Info } from "lucide-react" import { EnhancedButton } from "@/components/ui/enhanced-button" import { EnhancedCard } from "@/components/ui/enhanced-card" import { EnhancedInput } from "@/components/ui/enhanced-input" import { themeConstants } from "@/lib/theme-constants" interface CheckoutFormProps { onNext: () => void onBack: () => void } export function CheckoutForm({ onNext, onBack }: CheckoutFormProps) { const { selectedItem, phoneNumber, setPhoneNumber, email, setEmail } = useCheckout() const [errors, setErrors] = useState<{ phone?: string; email?: string }>({}) const [touched, setTouched] = useState<{ phone: boolean; email: boolean }>({ phone: false, email: false }) if (!selectedItem) { return (

Please select an eSIM provider first.

Go Back

) } const validatePhone = (value: string) => { if (!value.trim()) { return "Phone number is required" } if (!/^\d{9,11}$/.test(value.replace(/\D/g, ""))) { return "Please enter a valid phone number" } return undefined } const validateEmail = (value: string) => { if (!value.trim()) { return "Email is required" } if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) { return "Please enter a valid email address" } return undefined } const handlePhoneChange = (e: React.ChangeEvent) => { const value = e.target.value setPhoneNumber(value) if (touched.phone) { setErrors((prev) => ({ ...prev, phone: validatePhone(value) })) } } const handleEmailChange = (e: React.ChangeEvent) => { const value = e.target.value setEmail(value) if (touched.email) { setErrors((prev) => ({ ...prev, email: validateEmail(value) })) } } const handleBlur = (field: "phone" | "email") => { setTouched((prev) => ({ ...prev, [field]: true })) if (field === "phone") { setErrors((prev) => ({ ...prev, phone: validatePhone(phoneNumber) })) } else { setErrors((prev) => ({ ...prev, email: validateEmail(email) })) } } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Validate all fields const phoneError = validatePhone(phoneNumber) const emailError = validateEmail(email) setErrors({ phone: phoneError, email: emailError }) setTouched({ phone: true, email: true }) if (!phoneError && !emailError) { onNext() } } const formVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 100, damping: 15, }, }, } return (

Contact Information Please provide your contact details for eSIM activation

handleBlur("phone")} error={touched.phone ? errors.phone : undefined} success={touched.phone && !errors.phone} icon={} helperText="Enter your Myanmar phone number without country code (e.g., 9xxxxxxxxx)" className="input-dark" /> handleBlur("email")} error={touched.email ? errors.email : undefined} success={touched.email && !errors.email} icon={} helperText="We'll send your eSIM activation details to this email" className="input-dark" />

Selected eSIM

{selectedItem.provider.charAt(0)}

{selectedItem.name}

{selectedItem.price.toLocaleString()} Ks

Your information is secure and will only be used to register your eSIM. We'll never share your data with third parties.

Back Continue to Payment

) } [V0_FILE]typescriptreact:file="components/checkout/checkout-stepper.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { CheckCircle } from "lucide-react" import { cn } from "@/lib/utils" import { themeConstants } from "@/lib/theme-constants" interface CheckoutStepperProps { steps: string[] currentStep: number } export function CheckoutStepper({ steps, currentStep }: CheckoutStepperProps) { return (

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

= index ? 1 : 0.8, opacity: 1, backgroundColor: currentStep > index ? "rgb(0, 255, 255)" : currentStep === index ? "rgb(0, 255, 255)" : "rgb(113, 113, 122)", }} transition={{ duration: 0.3, delay: index * 0.1 }} className={cn( "w-12 h-12 rounded-full flex items-center justify-center text-sm font-medium transition-all duration-300", currentStep > index ? `${themeConstants.colors.primarySolid} text-background shadow-[0_0_10px_rgba(0,255,255,0.5)]` : currentStep === index ? `${themeConstants.colors.primarySolid} text-background shadow-[0_0_15px_rgba(0,255,255,0.7)]` : "bg-muted text-muted-foreground", )} > {currentStep > index ? ( ) : ( {index + 1} )} = index ? "text-foreground" : "text-muted-foreground", )} > {step}

))}

{/* Progress line */}

) } [V0_FILE]typescriptreact:file="components/checkout/support-contact-info.tsx" "use client" import { useState } from "react" import { Mail, MessageSquare, ClipboardCopy, MessageCircle } from "lucide-react" import { EnhancedButton } from "@/components/ui/enhanced-button" import { themeConstants } from "@/lib/theme-constants" // Contact information export const CONTACT_INFO = { email: "info@esim.com.mm", messenger: "@esimmyanmar", viber: "09650000172", } interface SupportContactInfoProps { variant?: "full" | "compact" showViber?: boolean className?: string } export function SupportContactInfo({ variant = "full", showViber = true, className = "" }: SupportContactInfoProps) { const [emailCopied, setEmailCopied] = useState(false) const [messengerCopied, setMessengerCopied] = useState(false) const [viberCopied, setViberCopied] = useState(false) const handleCopyEmail = () => { navigator.clipboard.writeText(CONTACT_INFO.email) setEmailCopied(true) setTimeout(() => setEmailCopied(false), 2000) } const handleCopyMessenger = () => { navigator.clipboard.writeText(CONTACT_INFO.messenger) setMessengerCopied(true) setTimeout(() => setMessengerCopied(false), 2000) } const handleCopyViber = () => { navigator.clipboard.writeText(CONTACT_INFO.viber) setViberCopied(true) setTimeout(() => setViberCopied(false), 2000) } if (variant === "compact") { return (

{CONTACT_INFO.email}

{CONTACT_INFO.messenger}

{showViber && (

{CONTACT_INFO.viber}

)}

) } return (

Contact Support

Email Support

{CONTACT_INFO.email}

{emailCopied ? "Copied!" : "Copy"}

Messenger

{CONTACT_INFO.messenger}

{messengerCopied ? "Copied!" : "Copy"}

{showViber && (

Viber

{CONTACT_INFO.viber}

{viberCopied ? "Copied!" : "Copy"}

)}

) } [V0_FILE]typescriptreact:file="components/checkout/order-confirmation.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" import { motion } from "framer-motion" import { CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { useCheckout, type OrderDetails } from "@/contexts/checkout-context" import { CheckCircle, ClipboardCopy, ArrowRight, ShoppingBag, MessageCircle, Smartphone } from "lucide-react" import { EnhancedButton } from "@/components/ui/enhanced-button" import { EnhancedCard } from "@/components/ui/enhanced-card" import { themeConstants } from "@/lib/theme-constants" import { SupportContactInfo, CONTACT_INFO } from "@/components/checkout/support-contact-info" // Replace the existing Viber contact number constant with the one from CONTACT_INFO // const VIBER_CONTACT = "09650000172" interface OrderConfirmationProps { orderId: string | null onTrack: () => void onNewOrder: () => void } export function OrderConfirmation({ orderId, onTrack, onNewOrder }: OrderConfirmationProps) { const { getOrderById, clearCheckout } = useCheckout() const [order, setOrder] = useState(null) const [copied, setCopied] = useState(false) const [viberCopied, setViberCopied] = useState(false) useEffect(() => { if (orderId) { const orderDetails = getOrderById(orderId) setOrder(orderDetails) } }, [orderId, getOrderById]) const handleCopyOrderId = () => { if (orderId) { navigator.clipboard.writeText(orderId) setCopied(true) setTimeout(() => setCopied(false), 2000) } } const handleCopyViberNumber = () => { navigator.clipboard.writeText(CONTACT_INFO.viber) setViberCopied(true) setTimeout(() => setViberCopied(false), 2000) } const handleNewOrder = () => { clearCheckout() onNewOrder() } if (!order) { return (

Order not found.

Start New Order

) } const containerVariants = { hidden: { opacity: 0, scale: 0.9 }, visible: { opacity: 1, scale: 1, transition: { duration: 0.5, staggerChildren: 0.1, delayChildren: 0.3, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 100, damping: 15, }, }, } return (

Order Confirmed! Your eSIM order has been successfully placed

Order Number

{copied ? "Copied!" : "Copy"}

{order.orderId}

Please save this order number for tracking and support

Order Details

Product: {order.items[0].name}

Amount: {order.totalAmount.toLocaleString()} Ks

Payment Method: MyanmarPay QR

Status: Processing

Date: {new Date(order.createdAt).toLocaleString()}

Contact Us on Viber

Please contact us on Viber to confirm your purchase and activate your eSIM.

{CONTACT_INFO.viber}

{viberCopied ? "Copied!" : "Copy"}

Send your order number and payment screenshot to this Viber number

What's Next?

We're processing your eSIM activation. You'll receive an email with your eSIM QR code and activation instructions shortly.

You can also track your order status using the button below.

Track Order Status Place Another Order

) } [V0_FILE]typescriptreact:file="components/checkout/order-tracking.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { useCheckout, type OrderDetails } from "@/contexts/checkout-context" import { ArrowLeft, Search, CheckCircle, Clock, AlertCircle, Package, MessageCircle, ClipboardCopy } from "lucide-react" import { cn } from "@/lib/utils" import { EnhancedButton } from "@/components/ui/enhanced-button" import { EnhancedCard } from "@/components/ui/enhanced-card" import { EnhancedInput } from "@/components/ui/enhanced-input" import { themeConstants } from "@/lib/theme-constants" import { SupportContactInfo, CONTACT_INFO } from "@/components/checkout/support-contact-info" // Replace the existing Viber contact number constant with the one from CONTACT_INFO // const VIBER_CONTACT = "09650000172" interface OrderTrackingProps { orderId: string | null onBack: () => void } export function OrderTracking({ orderId: initialOrderId, onBack }: OrderTrackingProps) { const { getOrderById } = useCheckout() const [orderId, setOrderId] = useState(initialOrderId || "") const [order, setOrder] = useState(null) const [error, setError] = useState(null) const [isSearching, setIsSearching] = useState(false) const [viberCopied, setViberCopied] = useState(false) useEffect(() => { if (initialOrderId) { const orderDetails = getOrderById(initialOrderId) setOrder(orderDetails) } }, [initialOrderId, getOrderById]) const handleSearch = () => { if (!orderId.trim()) { setError("Please enter an order ID") return } setIsSearching(true) setError(null) // Simulate search delay setTimeout(() => { const orderDetails = getOrderById(orderId) if (orderDetails) { setOrder(orderDetails) } else { setError("Order not found. Please check the order ID and try again.") } setIsSearching(false) }, 1000) } const handleCopyViberNumber = () => { navigator.clipboard.writeText(CONTACT_INFO.viber) setViberCopied(true) setTimeout(() => setViberCopied(false), 2000) } const getStatusIcon = (status: string) => { switch (status) { case "completed": return case "processing": return case "pending": return case "failed": return default: return } } const getStatusText = (status: string) => { switch (status) { case "completed": return "Completed" case "processing": return "Processing" case "pending": return "Pending" case "failed": return "Failed" default: return "Unknown" } } const getStatusColor = (status: string) => { switch (status) { case "completed": return "text-green-500" case "processing": return "text-amber-500" case "pending": return "text-muted-foreground" case "failed": return "text-red-500" default: return "text-muted-foreground" } } const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 100, damping: 15, }, }, } return (

Track Your Order Enter your order ID to check the status of your eSIM

setOrderId(e.target.value)} error={error || undefined} icon={} className="input-dark" />

{order && (

Order Information

Order ID: {order.orderId}

Product: {order.items[0].name}

Date: {new Date(order.createdAt).toLocaleString()}

Amount: {order.totalAmount.toLocaleString()} Ks

Order Status

{/* Progress line */}

{["pending", "processing", "completed"].map((status, index) => { const isActive = (order.status === "pending" && status === "pending") || (order.status === "processing" && (status === "pending" || status === "processing")) || (order.status === "completed" && (status === "pending" || status === "processing" || status === "completed")) const isCurrentStatus = order.status === status return (

{isActive && !isCurrentStatus ? ( ) : ( {index + 1} )} {status.charAt(0).toUpperCase() + status.slice(1)}

) })}

{getStatusIcon(order.status)}

{getStatusText(order.status)}

{order.status === "pending" && "Your order is pending payment confirmation."} {order.status === "processing" && "Your eSIM is being processed and will be activated soon."} {order.status === "completed" && "Your eSIM has been activated and is ready to use."} {order.status === "failed" && "There was an issue with your order. Please contact support."}

Contact Us on Viber

Please contact us on Viber to confirm your purchase and activate your eSIM.

{CONTACT_INFO.viber}

{viberCopied ? "Copied!" : "Copy"}

{order.status === "processing" && (

What's Next?

Your eSIM is being processed. You'll receive an email with activation instructions within 30 minutes.

)} {order.status === "completed" && (

eSIM Activated!

Your eSIM has been activated. Check your email for the QR code and installation instructions.

)} )} {!order && (

Need Help?

If you're having trouble finding your order or need assistance, please contact our support team:

)} Back to Confirmation

) } [V0_FILE]typescriptreact:file="components/checkout/payment-methods.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { useCheckout } from "@/contexts/checkout-context" import { ArrowLeft, QrCode, Loader2, CheckCircle, AlertCircle, CreditCard, MessageCircle } from "lucide-react" import { EnhancedButton } from "@/components/ui/enhanced-button" import { EnhancedCard } from "@/components/ui/enhanced-card" import { MyanmarPayQR } from "@/components/checkout/myanmar-pay-qr" import { themeConstants } from "@/lib/theme-constants" import { SupportContactInfo } from "@/components/checkout/support-contact-info" // MyanmarPay QR data const MYANMAR_PAY_QR_DATA = "00020101021126500015com.mmqrpay.www01152235110100152220208100165355204481253031045802MM5912ESIM Myanmar6006Hlaing61051105164330002MY0113အီးဆင်းမြန်မာ0206လှိုင်63041C92" // Replace the existing Viber contact number constant with the one from CONTACT_INFO // const VIBER_CONTACT = "09650000172" interface PaymentMethodsProps { onNext: (orderId: string) => void onBack: () => void } export function PaymentMethods({ onNext, onBack }: PaymentMethodsProps) { const { selectedItem, paymentMethod, setPaymentMethod, placeOrder } = useCheckout() const [isProcessing, setIsProcessing] = useState(false) const [paymentStatus, setPaymentStatus] = useState<"idle" | "processing" | "success" | "error">("idle") if (!selectedItem) { return (

Please select an eSIM provider first.

Go Back

) } const handlePaymentMethodChange = (value: string) => { setPaymentMethod(value) } const handlePayment = async () => { setIsProcessing(true) setPaymentStatus("processing") try { // Simulate payment processing await new Promise((resolve) => setTimeout(resolve, 2000)) // Place the order const order = await placeOrder() setPaymentStatus("success") // Simulate a delay before moving to the next step setTimeout(() => { onNext(order.orderId) }, 1500) } catch (error) { console.error("Payment error:", error) setPaymentStatus("error") setIsProcessing(false) } } const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 100, damping: 15, }, }, } return (

Payment Method Choose how you want to pay for your eSIM

Order Summary

{selectedItem.name} {selectedItem.price.toLocaleString()} Ks

Total {selectedItem.price.toLocaleString()} Ks

Select Payment Method

MyanmarPay QR

Scan QR code with your mobile banking app

{paymentMethod === "myanmarpay" && paymentStatus === "idle" && (

After payment

After completing your payment, please contact us to confirm your purchase using any of the methods below:

)} {paymentStatus === "processing" && (

Processing Payment

Please wait while we process your payment...

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

Payment Successful!

Your payment has been processed successfully. Redirecting to confirmation...

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

Payment Failed

There was an error processing your payment. Please try again.

)} Back Complete Payment

) } [V0_FILE]typescriptreact:file="components/checkout/floating-support-button.tsx" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { HelpCircle, X, Mail, MessageSquare, MessageCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { CONTACT_INFO } from "@/components/checkout/support-contact-info" import { themeConstants } from "@/lib/theme-constants" export function FloatingSupportButton() { const [isOpen, setIsOpen] = useState(false) const toggleOpen = () => setIsOpen(!isOpen) return (

{isOpen && (

Contact Support

{CONTACT_INFO.email} {CONTACT_INFO.messenger} {CONTACT_INFO.viber}

)} {isOpen ? : }

) } [V0_FILE]typescriptreact:file="app/checkout/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { CheckoutProvider } from "@/contexts/checkout-context" import { CheckoutStepper } from "@/components/checkout/checkout-stepper" import { ProductSelection } from "@/components/checkout/product-selection" import { CheckoutForm } from "@/components/checkout/checkout-form" import { PaymentMethods } from "@/components/checkout/payment-methods" import { OrderConfirmation } from "@/components/checkout/order-confirmation" import { OrderTracking } from "@/components/checkout/order-tracking" import { themeConstants } from "@/lib/theme-constants" // Import the SupportContactInfo component import { SupportContactInfo } from "@/components/checkout/support-contact-info" // Import the FloatingSupportButton component import { FloatingSupportButton } from "@/components/checkout/floating-support-button" export default function CheckoutPage() { const [step, setStep] = useState(0) const [orderId, setOrderId] = useState(null) const steps = [ { title: "Select eSIM", component: setStep(1)} /> }, { title: "Your Details", component: setStep(2)} onBack={() => setStep(0)} /> }, { title: "Payment", component: ( { setOrderId(id) setStep(3) }} onBack={() => setStep(1)} /> ), }, { title: "Confirmation", component: ( setStep(4)} onNewOrder={() => { setStep(0) setOrderId(null) }} /> ), }, { title: "Track Order", component: setStep(3)} />, }, ] return (

{/* Background elements */}

eSIM {" "} Myanmar Checkout

Complete your purchase to get connected

s.title)} />

Step {step + 1} of {steps.length}: {steps[step].title}

{steps[step].component}

Need Assistance?

Our support team is here to help you with any questions or issues.

) }

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