[V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { Globe, ShoppingCart, Menu, X, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" const navigation = [ { name: "Store", href: "/store" }, { name: "Installation", href: "/installation" }, { name: "Support", href: "/support" }, { name: "FAQs", href: "/faqs" }, ] export function Navbar() { const [isOpen, setIsOpen] = useState(false) const pathname = usePathname() const [language, setLanguage] = useState("English") return (

OXP

{/* Search bar */}

{navigation.map((item) => ( {item.name} ))}

setLanguage("English")}>English setLanguage("Burmese")}>Burmese

{/* Mobile menu */} {isOpen && (

{/* Mobile search */}

{navigation.map((item) => ( {item.name} ))}

)}

) } [V0_FILE]typescriptreact:file="components/hero.tsx" isEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { Wifi } from "lucide-react" export function Hero() { return (

Global eSIM Solutions For Myanmar

Stay connected worldwide with our eSIM packages. Easy activation, instant delivery, and local support.

{/* Gradient orbs */}

) } [V0_FILE]typescriptreact:file="components/esim-card.tsx" isEdit="true" isMerged="true" import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Globe, Wifi } from "lucide-react" interface ESIMCardProps { title: string data: string validity: string price: number countries: string[] } export function ESIMCard({ title, data, validity, price, countries }: ESIMCardProps) { return (

{title}

{data} Data

Valid for {validity}

{countries.length} countries

{price.toLocaleString()} MMK

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { Navbar } from "@/components/navbar" import { Hero } from "@/components/hero" import { ESIMCard } from "@/components/esim-card" const esimPackages = [ { title: "Asia Explorer", data: "10GB", validity: "30 days", price: 25000, countries: ["Thailand", "Singapore", "Malaysia", "Vietnam"], }, { title: "Global Traveler", data: "20GB", validity: "30 days", price: 45000, countries: ["USA", "UK", "Europe", "Japan", "Korea"], }, { title: "ASEAN Connect", data: "5GB", validity: "15 days", price: 15000, countries: ["Thailand", "Singapore", "Malaysia"], }, { title: "Europe Unlimited", data: "Unlimited", validity: "15 days", price: 55000, countries: ["France", "Germany", "Italy", "Spain", "UK"], }, { title: "Asia Premium", data: "30GB", validity: "30 days", price: 35000, countries: ["Japan", "Korea", "Hong Kong", "Taiwan"], }, { title: "Global Elite", data: "50GB", validity: "60 days", price: 75000, countries: ["Global Coverage", "200+ countries"], }, ] export default function Home() { return (

Popular eSIM Packages

Choose from our selection of eSIM packages for your travel needs

{esimPackages.map((pkg) => ( ))}

) } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{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: "#0A0A0A", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#4F46E5", 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))", }, }, backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", grid: "linear-gradient(to right, #232323 1px, transparent 1px), linear-gradient(to bottom, #232323 1px, transparent 1px)", }, backgroundSize: { grid: "44px 44px", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Navbar } from "@/components/navbar" import type React from "react" // Added import for React const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "OXP eSIM Marketplace", description: "Global eSIM solutions for Myanmar", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/store/page.tsx" import { ESIMCard } from "@/components/esim-card" const esimPackages = [ { title: "Asia Explorer", data: "10GB", validity: "30 days", price: 25000, countries: ["Thailand", "Singapore", "Malaysia", "Vietnam"], }, { title: "Global Traveler", data: "20GB", validity: "30 days", price: 45000, countries: ["USA", "UK", "Europe", "Japan", "Korea"], }, { title: "ASEAN Connect", data: "5GB", validity: "15 days", price: 15000, countries: ["Thailand", "Singapore", "Malaysia"], }, { title: "Europe Unlimited", data: "Unlimited", validity: "15 days", price: 55000, countries: ["France", "Germany", "Italy", "Spain", "UK"], }, { title: "Asia Premium", data: "30GB", validity: "30 days", price: 35000, countries: ["Japan", "Korea", "Hong Kong", "Taiwan"], }, { title: "Global Elite", data: "50GB", validity: "60 days", price: 75000, countries: ["Global Coverage", "200+ countries"], }, ] export default function Store() { return (

eSIM Store

{esimPackages.map((pkg) => ( ))}

) } [V0_FILE]typescriptreact:file="app/installation/page.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Smartphone, QrCodeIcon as Qrcode, Wifi, CheckCircle } from "lucide-react" const steps = [ { title: "Check Compatibility", description: "Ensure your device supports eSIM technology.", icon: Smartphone, }, { title: "Scan QR Code", description: "Use your device's camera to scan the provided QR code.", icon: Qrcode, }, { title: "Download Profile", description: "Follow on-screen instructions to download the eSIM profile.", icon: Wifi, }, { title: "Activate eSIM", description: "Activate the installed eSIM profile in your device settings.", icon: CheckCircle, }, ] export default function Installation() { return (

eSIM Installation Guide

{steps.map((step, index) => ( Step {index + 1}: {step.title}

{step.description}

))}

) } [V0_FILE]typescriptreact:file="app/support/page.tsx" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Mail, Phone, MessageCircle } from "lucide-react" export default function Support() { return (

Support

Contact Us

Email Support

support@oxp-esim.com

Phone Support

+95 1 234 5678

Live Chat

Available 24/7

Send us a message

<Button type="submit" className="w-full">
                Send Message
              </Button>
            </form>
          </div>
        </div>
      </div>
    </main>
  )
}

[V0_FILE]typescriptreact:file="app/faqs/page.tsx"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

const faqs = [
  {
    question: "What is an eSIM?",
    answer:
      "An eSIM (embedded SIM) is a digital SIM that allows you to activate a cellular plan from your carrier without having to use a physical SIM card.",
  },
  {
    question: "How do I install an eSIM?",
    answer:
      "To install an eSIM, you typically need to scan a QR code provided by your carrier, which will download and install the eSIM profile on your device. For detailed instructions, please check our Installation Guide.",
  },
  {
    question: "Which countries are covered by your eSIM packages?",
    answer:
      "Our eSIM packages cover a wide range of countries. You can find specific country coverage information on each package's details page in our store.",
  },
  {
    question: "Can I use an eSIM and a physical SIM at the same time?",
    answer:
      "Yes, most eSIM-compatible devices allow you to use both an eSIM and a physical SIM simultaneously, enabling you to have two different phone numbers or data plans on one device.",
  },
  {
    question: "What happens if I run out of data?",
    answer:
      "If you run out of data, you can easily purchase additional data or a new eSIM package from our store. Your current eSIM will remain installed on your device.",
  },
  {
    question: "How do I contact customer support?",
    answer:
      "You can contact our customer support team via email at support@oxp-esim.com, by phone at +95 1 234 5678, or through the live chat feature on our website.",
  },
]

export default function FAQs() {
  return (
    <main className="relative">
      <div className="absolute inset-0 bg-grid opacity-10"></div>
      <div className="relative max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <h1 className="text-4xl font-bold mb-8">Frequently Asked Questions</h1>
        <Accordion type="single" collapsible className="space-y-4">
          {faqs.map((faq, index) => (
            <AccordionItem
              key={index}
              value={`item-${index}`}
              className="bg-background/50 border border-white/10 rounded-lg"
            >
              <AccordionTrigger className="px-4 py-2 hover:bg-white/5 transition-colors">
                {faq.question}
              </AccordionTrigger>
              <AccordionContent className="px-4 py-2 text-gray-400">{faq.answer}</AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </main>
  )
}
</article></body></html>

About

Tags

Share

More from i-cover-aolcom

More Templates Like This

About

Tags

Share

About

Tags

Share

More from i-cover-aolcom

More Templates Like This