[V0_FILE]typescriptreact:file="app/page.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" import { Wifi, CreditCard, Clock } from "lucide-react" export default function HomePage() { return (

WiFiConnect

Welcome to WiFiConnect

Fast, secure internet access with easy online payment options.

Choose Your Plan

{[ { name: "Hourly", price: "$2.99", duration: "1 Hour", features: ["Full Speed Access", "No Data Limits", "Secure Connection"], }, { name: "Daily", price: "$5.99", duration: "24 Hours", features: ["Full Speed Access", "No Data Limits", "Secure Connection", "Multiple Devices"], }, { name: "Weekly", price: "$19.99", duration: "7 Days", features: [ "Full Speed Access", "No Data Limits", "Secure Connection", "Multiple Devices", "Priority Support", ], }, ].map((plan, i) => (

{plan.name}

{plan.price}

{plan.duration}

{feature}

))}

How It Works

Connect to WiFi

Find and connect to the "WiFiConnect" network on your device.

Make Payment

Choose your plan and complete the secure payment process.

Enjoy Internet

Start browsing immediately after your payment is confirmed.

) } [V0_FILE]typescriptreact:file="app/payment/page.tsx" isFixed="true" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Wifi, Shield } from "lucide-react" import { purchaseWifiAccess } from "@/lib/actions" export default function PaymentPage() { const router = useRouter() const [selectedPlan, setSelectedPlan] = useState("hourly") const [email, setEmail] = useState("") const [isProcessing, setIsProcessing] = useState(false) const plans = { hourly: { name: "Hourly", price: "$2.99", duration: "1 Hour" }, daily: { name: "Daily", price: "$5.99", duration: "24 Hours" }, weekly: { name: "Weekly", price: "$19.99", duration: "7 Days" }, } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsProcessing(true) try { await purchaseWifiAccess({ plan: selectedPlan, email, }) router.push("/payment/success") } catch (error) { console.error("Payment failed:", error) setIsProcessing(false) } } return (

WiFiConnect

Complete your purchase to access the internet

Select WiFi Plan Choose the plan that works best for you

{Object.entries(plans).map(([id, plan]) => (

{plan.name}

{plan.duration}

{plan.price}

))}

Email Address setEmail(e.target.value)} required />

We'll send your receipt and access instructions to this email

Secure payment processing

) } [V0_FILE]typescriptreact:file="app/payment/success/page.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { CheckCircle, Wifi } from "lucide-react" export default function SuccessPage() { return (

Payment Successful!

Your WiFi access has been activated. You can now browse the internet.

Connection Details

Network: WiFiConnect

Access Code: WC-123456

Valid until: {new Date(Date.now() + 24 * 60 * 60 * 1000).toLocaleString()}

A receipt has been sent to your email address.

) } [V0_FILE]typescriptreact:file="lib/actions.ts" "use server" type PurchaseParams = { plan: string email: string } export async function purchaseWifiAccess({ plan, email }: PurchaseParams) { // In a real implementation, this would: // 1. Process the payment through Stripe or another payment processor // 2. Generate an access code for the WiFi system // 3. Update the captive portal's allowed devices list // 4. Send a confirmation email console.log(`Processing purchase for plan: ${plan}, email: ${email}`) // Simulate a delay for processing await new Promise((resolve) => setTimeout(resolve, 1500)) // Return success return { success: true, accessCode: "WC-123456" } } [V0_FILE]typescriptreact:file="app/captive-portal/page.tsx" "use client" import type React from "react" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Wifi, ArrowRight } from "lucide-react" export default function CaptivePortalPage() { const router = useRouter() const [accessCode, setAccessCode] = useState("") const [macAddress, setMacAddress] = useState("") const [ipAddress, setIpAddress] = useState("") useEffect(() => { // In a real implementation, we would get these from the captive portal system setMacAddress("00:11:22:33:44:55") setIpAddress("192.168.1.100") }, []) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // In a real implementation, this would validate the access code against the database if (accessCode) { // Simulate successful validation router.push("/captive-portal/success") } } const handleBuyAccess = () => { router.push("/payment") } return (

WiFiConnect

Enter your access code or purchase WiFi access

WiFi Access Enter your access code to connect to the internet

Don't have an access code?

) } [V0_FILE]typescriptreact:file="app/captive-portal/success/page.tsx" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { CheckCircle, Wifi, ExternalLink } from "lucide-react" export default function SuccessPage() { return (

Connected Successfully!

You are now connected to WiFiConnect and can browse the internet.

Connection Details

Network: WiFiConnect

Speed: 50 Mbps

Valid until: {new Date(Date.now() + 24 * 60 * 60 * 1000).toLocaleString()}

) } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This