Switch to version 1: modified src/app/signup/page.tsx
This commit is contained in:
@@ -2,51 +2,17 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import { useState } from "react";
|
||||
import { Globe, Eye, EyeOff } from "lucide-react";
|
||||
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
|
||||
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
|
||||
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
||||
import SplitAbout from "@/components/sections/about/SplitAbout";
|
||||
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
|
||||
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
|
||||
const countryData = [
|
||||
{ code: "US", name: "United States", flag: "🇺🇸", prefix: "+1" },
|
||||
{ code: "CA", name: "Canada", flag: "🇨🇦", prefix: "+1" },
|
||||
{ code: "GB", name: "United Kingdom", flag: "🇬🇧", prefix: "+44" },
|
||||
{ code: "AU", name: "Australia", flag: "🇦🇺", prefix: "+61" },
|
||||
{ code: "DE", name: "Germany", flag: "🇩🇪", prefix: "+49" },
|
||||
{ code: "FR", name: "France", flag: "🇫🇷", prefix: "+33" },
|
||||
{ code: "JP", name: "Japan", flag: "🇯🇵", prefix: "+81" },
|
||||
{ code: "IN", name: "India", flag: "🇮🇳", prefix: "+91" },
|
||||
{ code: "BR", name: "Brazil", flag: "🇧🇷", prefix: "+55" },
|
||||
{ code: "MX", name: "Mexico", flag: "🇲🇽", prefix: "+52" },
|
||||
];
|
||||
|
||||
const navigationItems = [
|
||||
{ name: "Marketplace", id: "/" },
|
||||
{ name: "How It Works", id: "#how-it-works" },
|
||||
{ name: "Sellers", id: "#sellers" },
|
||||
{ name: "Dashboard", id: "/dashboard" },
|
||||
{ name: "Login", id: "https://example.com/login" },
|
||||
];
|
||||
import Link from "next/link";
|
||||
import { UserPlus, ShoppingCart, MessageCircle, Check, Zap, Sparkles } from "lucide-react";
|
||||
|
||||
export default function SignUpPage() {
|
||||
const [fullName, setFullName] = useState("");
|
||||
const [selectedCountry, setSelectedCountry] = useState(countryData[0]);
|
||||
const [phoneNumber, setPhoneNumber] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log({
|
||||
fullName,
|
||||
selectedCountry,
|
||||
phoneNumber,
|
||||
email,
|
||||
password,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
@@ -60,192 +26,190 @@ export default function SignUpPage() {
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
{/* Navbar */}
|
||||
<div id="nav" data-section="nav" className="mx-auto px-4 md:px-6">
|
||||
<NavbarStyleApple
|
||||
brandName="ArcadeHub"
|
||||
navItems={navigationItems}
|
||||
navItems={[
|
||||
{ name: "Marketplace", id: "marketplace" },
|
||||
{ name: "How It Works", id: "how-it-works" },
|
||||
{ name: "Sellers", id: "sellers" },
|
||||
{ name: "Dashboard", id: "dashboard" },
|
||||
{ name: "Login", id: "https://example.com/login" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="signup-form" data-section="signup-form" className="min-h-screen flex items-center justify-center py-20 px-4 md:px-6">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="bg-card rounded-lg border border-accent/20 shadow-lg p-8">
|
||||
<h1 className="text-3xl font-bold text-foreground mb-2">Create Account</h1>
|
||||
<p className="text-foreground/60 mb-8">Join ArcadeHub and start your arcade gaming journey</p>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Full Name Field */}
|
||||
<div>
|
||||
<label htmlFor="fullName" className="block text-sm font-medium text-foreground mb-2">
|
||||
Full Name
|
||||
</label>
|
||||
<input
|
||||
id="fullName"
|
||||
type="text"
|
||||
placeholder="John Doe"
|
||||
value={fullName}
|
||||
onChange={(e) => setFullName(e.target.value)}
|
||||
className="w-full px-4 py-2 bg-background border border-accent/20 rounded-lg text-foreground placeholder-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary-cta/50 transition"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Phone Number with Country Selector */}
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-foreground mb-2">
|
||||
Phone Number
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
{/* Country Selector Dropdown */}
|
||||
<div className="relative w-32">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||||
className="w-full px-3 py-2 bg-background border border-accent/20 rounded-lg text-foreground hover:border-primary-cta/40 focus:outline-none focus:ring-2 focus:ring-primary-cta/50 transition flex items-center justify-between"
|
||||
>
|
||||
<span className="text-lg">{selectedCountry.flag}</span>
|
||||
<span className="text-xs font-medium">{selectedCountry.prefix}</span>
|
||||
</button>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
{isDropdownOpen && (
|
||||
<div className="absolute top-full left-0 right-0 mt-1 bg-card border border-accent/20 rounded-lg shadow-lg z-10 max-h-64 overflow-y-auto">
|
||||
{countryData.map((country) => (
|
||||
<button
|
||||
key={country.code}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSelectedCountry(country);
|
||||
setIsDropdownOpen(false);
|
||||
}}
|
||||
className="w-full px-3 py-2 text-left hover:bg-primary-cta/10 transition flex items-center gap-2 text-sm text-foreground"
|
||||
>
|
||||
<span className="text-lg">{country.flag}</span>
|
||||
<span className="flex-1">{country.name}</span>
|
||||
<span className="text-foreground/60 text-xs">{country.prefix}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Phone Input */}
|
||||
<input
|
||||
id="phone"
|
||||
type="tel"
|
||||
placeholder="123-456-7890"
|
||||
value={phoneNumber}
|
||||
onChange={(e) => setPhoneNumber(e.target.value)}
|
||||
className="flex-1 px-4 py-2 bg-background border border-accent/20 rounded-lg text-foreground placeholder-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary-cta/50 transition"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-foreground/50 mt-1 flex items-center gap-1">
|
||||
<Globe size={12} /> Country code automatically included
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Business Email Field */}
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
|
||||
Business Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="business@example.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full px-4 py-2 bg-background border border-accent/20 rounded-lg text-foreground placeholder-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary-cta/50 transition"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Password Field */}
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-foreground mb-2">
|
||||
Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
id="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full px-4 py-2 bg-background border border-accent/20 rounded-lg text-foreground placeholder-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary-cta/50 transition pr-10"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground/60 hover:text-foreground transition"
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOff size={18} />
|
||||
) : (
|
||||
<Eye size={18} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-foreground/50 mt-1">At least 8 characters with uppercase, lowercase, and numbers</p>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-2 px-4 bg-primary-cta text-primary-cta-text rounded-lg font-medium hover:opacity-90 transition flex items-center justify-center gap-2"
|
||||
>
|
||||
Create Account
|
||||
</button>
|
||||
|
||||
{/* Sign In Link */}
|
||||
<p className="text-center text-sm text-foreground/60">
|
||||
Already have an account?{" "}
|
||||
<a href="https://example.com/login" className="text-primary-cta hover:underline font-medium">
|
||||
Sign In
|
||||
</a>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
{/* Terms and Conditions */}
|
||||
<p className="text-xs text-foreground/50 text-center mt-6">
|
||||
By creating an account, you agree to our{" "}
|
||||
<a href="#" className="text-primary-cta hover:underline">
|
||||
Terms of Service
|
||||
</a>
|
||||
{" "}and{" "}
|
||||
<a href="#" className="text-primary-cta hover:underline">
|
||||
Privacy Policy
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Hero Section */}
|
||||
<div id="hero" data-section="hero" className="mx-auto px-4 md:px-6">
|
||||
<HeroLogoBillboardSplit
|
||||
logoText="ArcadeHub"
|
||||
description="Discover, buy, and sell authentic arcade games. Connect with passionate collectors and sellers in the ultimate marketplace for classic gaming."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
buttons={[
|
||||
{ text: "Browse Marketplace", href: "/marketplace" },
|
||||
{ text: "Start Selling", href: "/signup" },
|
||||
]}
|
||||
layoutOrder="default"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/smiling-young-people-playing-table-football-while-indoors_146671-15220.jpg?_wi=3"
|
||||
imageAlt="Arcade games marketplace collection"
|
||||
frameStyle="browser"
|
||||
mediaAnimation="slide-up"
|
||||
buttonAnimation="opacity"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer" className="mt-20">
|
||||
{/* Features Section */}
|
||||
<div id="features" data-section="features" className="mx-auto px-4 md:px-6">
|
||||
<FeatureCardNineteen
|
||||
title="Why Choose ArcadeHub"
|
||||
description="Your trusted platform for arcade game transactions with security, community, and seamless management."
|
||||
tag="Features"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
tag: "Security", title: "Secure Authentication", subtitle: "Protected user accounts and verified sellers", description: "Every user has a secure login system with verified seller credentials. All transactions are protected with industry-standard security protocols to ensure buyer and seller confidence. Your personal data and payment information remain encrypted and safe.", imageSrc: "http://img.b2bpic.net/free-vector/security-background-with-colored-circles-flat-elements_23-2147633975.jpg?_wi=2", imageAlt: "Secure authentication system"},
|
||||
{
|
||||
id: 2,
|
||||
tag: "Management", title: "Seller Dashboard", subtitle: "Complete control over your inventory and sales", description: "Sellers get a comprehensive dashboard to manage their arcade game listings, track sales, respond to inquiries, and maintain their seller profile. Post new games with detailed specifications, pricing, certification details, and year information. Monitor buyer interest and close deals with ease.", imageSrc: "http://img.b2bpic.net/free-vector/user-panel-dashboard-template_23-2148375533.jpg?_wi=2", imageAlt: "Seller dashboard interface"},
|
||||
{
|
||||
id: 3,
|
||||
tag: "Community", title: "Vibrant Marketplace", subtitle: "Browse and connect with passionate collectors", description: "Explore a dynamic feed of arcade game listings posted by verified sellers. See seller profiles, ratings, and reviews with every listing. Filter by game type, year, certification status, and price. Connect with the community and find your next prized arcade machine.", imageSrc: "http://img.b2bpic.net/free-vector/digital-marketing-landing-page-template_23-2148250745.jpg?_wi=2", imageAlt: "Marketplace interface"},
|
||||
]}
|
||||
buttonAnimation="opacity"
|
||||
tagAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Marketplace Showcase Section */}
|
||||
<div id="marketplace-showcase" data-section="marketplace-showcase" className="mx-auto px-4 md:px-6">
|
||||
<ProductCardOne
|
||||
title="Featured Arcade Games"
|
||||
description="Recently posted games with seller information and detailed specifications. Click any game to view the full listing."
|
||||
tag="Browse"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "Pac-Man Cabinet 1982", price: "$3,500", imageSrc: "http://img.b2bpic.net/free-vector/retro-gaming-poster-template_23-2148754402.jpg?_wi=2", imageAlt: "Pac-Man arcade game cabinet"},
|
||||
{
|
||||
id: "2", name: "Pinball Machine 1985", price: "$1,800", imageSrc: "http://img.b2bpic.net/free-photo/80-s-inspired-summer-activities-with-retro-aesthetic_23-2151425796.jpg?_wi=2", imageAlt: "Vintage pinball machine"},
|
||||
{
|
||||
id: "3", name: "Mortal Kombat Arcade 1992", price: "$2,200", imageSrc: "http://img.b2bpic.net/free-vector/set-video-game-related-objects-neon-linear-style_24908-58680.jpg?_wi=2", imageAlt: "Mortal Kombat arcade cabinet"},
|
||||
]}
|
||||
buttonAnimation="opacity"
|
||||
tagAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* How It Works Section */}
|
||||
<div id="how-it-works" data-section="how-it-works" className="mx-auto px-4 md:px-6">
|
||||
<SplitAbout
|
||||
title="How the Marketplace Works"
|
||||
description="Simple steps to buy or sell arcade games on ArcadeHub. Join our community of collectors and sellers today."
|
||||
tag="Getting Started"
|
||||
tagIcon={Zap}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
imagePosition="right"
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Create Your Account", description: "Sign up with your email and complete your profile. Buyers and sellers both enjoy full access to the marketplace.", icon: UserPlus,
|
||||
},
|
||||
{
|
||||
title: "Browse or List Games", description: "Browse the live feed of arcade games or post your own listings with images, descriptions, year, price, and certification details.", icon: ShoppingCart,
|
||||
},
|
||||
{
|
||||
title: "Connect with Sellers", description: "See who posted each game, review their seller profile, ratings, and past transactions. Message sellers directly with questions.", icon: MessageCircle,
|
||||
},
|
||||
{
|
||||
title: "Close the Deal", description: "Negotiate, arrange payment, and coordinate logistics. Our community makes it easy to complete arcade game transactions.", icon: Check,
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Get Started", href: "/signup" }]}
|
||||
buttonAnimation="opacity"
|
||||
tagAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/smiling-young-people-playing-table-football-while-indoors_146671-15220.jpg?_wi=4"
|
||||
imageAlt="How to use ArcadeHub marketplace"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<div id="testimonials" data-section="testimonials" className="mx-auto px-4 md:px-6">
|
||||
<TestimonialCardTwo
|
||||
title="Community Stories"
|
||||
description="Hear from sellers and buyers who have successfully connected on ArcadeHub."
|
||||
tag="Testimonials"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Marcus Johnson", role: "Arcade Game Seller", testimonial: "ArcadeHub made it incredibly easy to connect with serious collectors. I've sold three arcade cabinets in the past month. The seller dashboard helps me manage everything efficiently.", imageSrc: "http://img.b2bpic.net/free-photo/person-working-pottery-workshop_23-2148970766.jpg?_wi=2", imageAlt: "Marcus Johnson"},
|
||||
{
|
||||
id: "2", name: "Elena Rodriguez", role: "Collector & Buyer", testimonial: "Finding authentic arcade games has never been easier. I can see exactly who posted each game and read their seller profile. I found my dream Donkey Kong machine here!", imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-gesturing-ok_23-2147767531.jpg?_wi=2", imageAlt: "Elena Rodriguez"},
|
||||
{
|
||||
id: "3", name: "David Chen", role: "Arcade Shop Owner", testimonial: "As a business owner, I use ArcadeHub to inventory my arcade games and reach buyers worldwide. The detailed listing features let me showcase condition, year, certifications, and pricing perfectly.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-standing-front-toys-amusement-park_23-2147910668.jpg?_wi=2", imageAlt: "David Chen"},
|
||||
{
|
||||
id: "4", name: "Sarah Thompson", role: "Gaming Enthusiast", testimonial: "The community here is amazing. Sellers are responsive, trustworthy, and passionate about arcade games just like me. I've made connections that led to lifelong friendships.", imageSrc: "http://img.b2bpic.net/free-photo/gamer-captivating-fans-livestream-engaging-with-them_482257-115467.jpg?_wi=2", imageAlt: "Sarah Thompson"},
|
||||
]}
|
||||
buttonAnimation="opacity"
|
||||
tagAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Contact CTA Section */}
|
||||
<div id="contact-cta" data-section="contact-cta" className="mx-auto px-4 md:px-6">
|
||||
<ContactFaq
|
||||
ctaTitle="Ready to Join?"
|
||||
ctaDescription="Start buying and selling arcade games today. Sign up in seconds and access the full marketplace."
|
||||
ctaButton={{ text: "Create Account", href: "/signup" }}
|
||||
ctaIcon={Sparkles}
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
accordionAnimationType="smooth"
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "How do I verify my seller account?", content: "Complete your profile with accurate information, add a profile photo, and provide details about your arcade game experience. Our team verifies seller credentials within 24-48 hours. Verified sellers get a badge on their profile."},
|
||||
{
|
||||
id: "2", title: "What information can I include in a listing?", content: "Include the game name, year of manufacture, condition, price, high-quality images, detailed description, certification status (if applicable), and any repair history. Transparent listings build trust with buyers and lead to faster sales."},
|
||||
{
|
||||
id: "3", title: "How do payments and logistics work?", content: "Transactions are arranged directly between buyers and sellers. We recommend clear communication about payment methods and shipping. Many sellers offer local pickup or arrange freight services for large arcade cabinets."},
|
||||
{
|
||||
id: "4", title: "Can I see seller profiles and ratings?", content: "Yes! Every listing shows the seller's profile, including their name, location, number of sales, ratings from past buyers, and verified seller status. This helps you make informed decisions about who to buy from or contact."},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer" className="mx-auto px-4 md:px-6">
|
||||
<FooterBaseCard
|
||||
logoText="ArcadeHub"
|
||||
copyrightText="© 2025 ArcadeHub. All rights reserved."
|
||||
columns={[
|
||||
{
|
||||
title: "Marketplace", items: [
|
||||
{ label: "Browse Games", href: "/" },
|
||||
{ label: "Browse Games", href: "/marketplace" },
|
||||
{ label: "Post a Listing", href: "/dashboard" },
|
||||
{ label: "Featured Games", href: "/" },
|
||||
{ label: "Featured Games", href: "#marketplace-showcase" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "For Sellers", items: [
|
||||
{ label: "Seller Dashboard", href: "/dashboard" },
|
||||
{ label: "How to Sell", href: "/" },
|
||||
{ label: "How to Sell", href: "#how-it-works" },
|
||||
{ label: "Seller Guidelines", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Community", items: [
|
||||
{ label: "Testimonials", href: "/" },
|
||||
{ label: "Contact Us", href: "/" },
|
||||
{ label: "Testimonials", href: "#testimonials" },
|
||||
{ label: "Contact Us", href: "#contact-cta" },
|
||||
{ label: "Community Forum", href: "#" },
|
||||
],
|
||||
},
|
||||
@@ -262,4 +226,4 @@ export default function SignUpPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user