[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import CreateAccount from "@/components/create-account" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/create-account.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Lock, ArrowLeft } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" // Change the mock plans data to tech gadget subscription plans const mockPlans = [ { id: "basic", name: "Explorer Plan", price: 29.99, stripe_price_id: "price_basic123", features: [ "One tech gadget every 3 months", "Access to member-only deals", "Basic tech support", "Free shipping on all items", ], }, { id: "premium", name: "Tech Elite Plan", price: 49.99, stripe_price_id: "price_premium456", features: [ "One premium tech gadget monthly", "Early access to new releases", "24/7 priority tech support", "Exclusive member events", "Free shipping and returns", ], }, ] const SkeletonLoader = () => (

) export default function CreateAccount() { const [formData, setFormData] = useState({ email: "", fullName: "", password: "", }) const [verificationCode, setVerificationCode] = useState("") const [showVerification, setShowVerification] = useState(false) const [showPayment, setShowPayment] = useState(false) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const [pageLoading, setPageLoading] = useState(true) const [selectedPlan, setSelectedPlan] = useState(null) // Simulate loading and plan selection useEffect(() => { // In a real app, this would come from URL params or context setSelectedPlan(mockPlans[0]) const timer = setTimeout(() => setPageLoading(false), 1500) return () => clearTimeout(timer) }, []) const handleInitialSignUp = async (e: React.FormEvent) => { e.preventDefault() try { setIsLoading(true) setError("") // Simulate API call for sign up await new Promise((resolve) => setTimeout(resolve, 1000)) // In a real app, this would call your auth provider's signup method // For example with Clerk: // await signUp.create({ // emailAddress: formData.email, // password: formData.password, // firstName, // lastName // }) setShowVerification(true) } catch (err: any) { console.error("Error during sign up:", err) setError(err.message || "An error occurred during sign up") } finally { setIsLoading(false) } } const handleVerification = async (e: React.FormEvent) => { e.preventDefault() try { setIsLoading(true) setError("") // Simulate API call for verification await new Promise((resolve) => setTimeout(resolve, 1000)) // In a real app, this would verify the code with your auth provider // For example with Clerk: // const result = await signUp.attemptEmailAddressVerification({ // code: verificationCode, // }) setShowVerification(false) setShowPayment(true) } catch (err: any) { console.error("Error during verification:", err) setError(err.message || "Verification failed") } finally { setIsLoading(false) } } const handleCheckout = async () => { setIsLoading(true) setError("") try { // Simulate redirect to Stripe await new Promise((resolve) => setTimeout(resolve, 1000)) // In a real app, this would redirect to Stripe checkout // const stripe = await stripePromise // await stripe.redirectToCheckout({ // lineItems: [{ price: selectedPlan.stripe_price_id, quantity: 1 }], // mode: 'subscription', // successUrl: `${window.location.origin}/dashboard`, // cancelUrl: `${window.location.origin}/canceled`, // customerEmail: formData.email, // }) alert("In a real app, you would be redirected to Stripe checkout") } catch (err: any) { console.error("Checkout error:", err) setError(err.message || "An error occurred during checkout. Please try again.") } finally { setIsLoading(false) } } const handleBack = () => { if (showPayment) { setShowPayment(false) setShowVerification(true) } else if (showVerification) { setShowVerification(false) } else { // In a real app, this would navigate back // navigate(-1) alert("In a real app, this would navigate back to plan selection") } } const renderForm = () => { if (showPayment) { return (

You will be redirected to Stripe to complete your purchase.

{error &&

{error}

}

) } if (showVerification) { return ( ) } return ( ) } if (pageLoading || !selectedPlan) { return (

) } return (

{/* Left column - Form */} {/* Change the logo and company name */}

TechGear Pro

{/* Update the heading text */}

{showPayment ? "Payment Details" : showVerification ? "Verify your email" : `Upgrade to ${selectedPlan.name}`}

{showPayment ? `Complete your subscription to ${selectedPlan.name}` : showVerification ? `We've sent a verification code to ${formData.email}` : "Get started with your TechGear Pro membership today"}

{renderForm()}

{showPayment ? "Secure payment" : "Secure sign up"}

{showPayment ? "Your payment information is processed securely. We do not store credit card details." : "Your information is processed securely. We prioritize the protection of your personal data."}

{/* Right column - Plan details */}

{selectedPlan.name}

Total ${selectedPlan.price}/Month

Guaranteed to be safe & secure, ensuring that all transactions are protected with the highest level of security

Plan Features:

{/* Update the checkmark color in the features list */} ✔ {feature}

{/* Update the FAQ section */}

Frequently Asked Questions

How does the subscription work?

You'll receive curated tech gadgets based on your plan frequency. All items are yours to keep.

Can I skip a month or pause?

Yes, you can pause or skip a delivery cycle from your account dashboard.

What kind of gadgets will I receive?

Everything from smart home devices to wearables, audio gear, and productivity tools.

) } [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isQuickEdit="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#0070f3", 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

About