Files
1f7d54d3-23f6-4499-aa2e-55c…/src/app/page.tsx

324 lines
16 KiB
TypeScript

"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Crown, Droplet, Heart, Phone, Shield, Smartphone, Sparkles, Star, Zap } from 'lucide-react';
export default function iPhoneSalesPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="largeSizeMediumTitles"
background="aurora"
cardStyle="gradient-mesh"
primaryButtonStyle="shadow"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Shop", id: "products" },
{ name: "Features", id: "features" },
{ name: "Specs", id: "metrics" },
{ name: "Reviews", id: "testimonials" },
{ name: "Contact", id: "contact" }
]}
brandName="iPhone"
bottomLeftText="Premium Technology"
bottomRightText="hello@iphone.shop"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardScroll
title="Experience Innovation in Your Hands"
description="Discover the latest iPhone with breakthrough camera technology, lightning-fast performance, and all-day battery life. Designed for those who demand excellence."
background={{ variant: "animated-grid" }}
tag="Latest Technology"
tagIcon={Smartphone}
buttons={[
{ text: "Shop Now", href: "#products" },
{ text: "Learn More", href: "#features" },
{ text: "Watch Demo", href: "#demo" }
]}
imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"
imageAlt="Latest iPhone showcasing premium design"
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
products={[
{
id: "1", name: "iPhone 15 Pro", price: "$999", imageSrc: "https://img.b2bpic.net/free-photo/smartphone-minimal-display-marble_23-2149554984.jpg", imageAlt: "iPhone 15 Pro with premium titanium design"
},
{
id: "2", name: "iPhone 15 Pro Max", price: "$1,099", imageSrc: "https://img.b2bpic.net/free-photo/smartphone-minimal-display-marble_23-2149554966.jpg", imageAlt: "iPhone 15 Pro Max in multiple colors"
},
{
id: "3", name: "iPhone 15", price: "$799", imageSrc: "https://img.b2bpic.net/free-photo/smartphone-minimal-display-rock_23-2149554977.jpg", imageAlt: "iPhone 15 with stunning display"
}
]}
title="Our iPhone Collection"
description="Choose from our premium lineup of iPhones, each engineered for excellence and packed with cutting-edge technology."
tag="Available Now"
tagIcon={Star}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="noInvert"
gridVariant="three-columns-all-equal-width"
carouselMode="buttons"
/>
</div>
<div id="features" data-section="features">
<FeatureBento
title="Engineered to Perfection"
description="Revolutionary features that set the standard in the industry. Every detail crafted for performance and beauty."
tag="Innovation"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="invertDefault"
features={[
{
title: "Pro Camera System", description: "Advanced 48MP main camera with improved zoom and night mode", bentoComponent: "globe"
},
{
title: "A17 Pro Chip", description: "Fastest smartphone processor with enhanced performance", bentoComponent: "animated-bar-chart"
},
{
title: "All-Day Battery", description: "Up to 29 hours of battery life with optimized efficiency", bentoComponent: "line-chart"
},
{
title: "Premium Build", description: "Surgical-grade titanium and advanced glass construction", bentoComponent: "icon-info-cards", items: [
{ icon: Shield, label: "Durability", value: "Ceramic Shield" },
{ icon: Droplet, label: "Water Resistance", value: "IP68 Rated" }
]
}
]}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardEight
title="Choose Your Perfect iPhone"
description="Select the model that matches your lifestyle and budget"
tag="Flexible Pricing"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="noInvert"
carouselMode="buttons"
plans={[
{
id: "standard", badge: "Popular", badgeIcon: Sparkles,
price: "$799", subtitle: "Perfect for everyday users", buttons: [{ text: "Select Plan", href: "#contact" }],
features: [
"6.1-inch display", "128GB storage", "Dual camera system", "All-day battery", "5G connectivity", "1-year warranty"
]
},
{
id: "pro", badge: "Best Value", badgeIcon: Crown,
price: "$999", subtitle: "For professionals and enthusiasts", buttons: [{ text: "Select Plan", href: "#contact" }],
features: [
"6.1-inch Super Retina XDR", "256GB storage", "Pro triple camera system", "ProMotion 120Hz display", "A17 Pro chip", "2-year warranty"
]
},
{
id: "pro-max", badge: "Premium", badgeIcon: Zap,
price: "$1,099", subtitle: "Maximum power and performance", buttons: [{ text: "Select Plan", href: "#contact" }],
features: [
"6.7-inch display", "512GB storage", "Pro quad camera system", "Advanced zoom capabilities", "All-day plus battery", "Premium support"
]
}
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
title="By The Numbers"
description="Impressive specifications that demonstrate iPhone excellence"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="invertDefault"
metrics={[
{
id: "1", value: "48MP", title: "Main Camera", description: "Advanced sensor for stunning photos", imageSrc: "https://img.b2bpic.net/free-photo/modern-workspace-featuring-cellphone-setup_58702-17222.jpg", imageAlt: "iPhone camera capability showcase"
},
{
id: "2", value: "6.1\"", title: "Dynamic Island", description: "Intuitive interface at your fingertips", imageSrc: "https://img.b2bpic.net/free-photo/smartphone-minimal-display-rock_23-2149554977.jpg", imageAlt: "Dynamic Island display feature"
},
{
id: "3", value: "A17 Pro", title: "Processor Power", description: "Fastest smartphone chip ever", imageSrc: "https://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722629.jpg", imageAlt: "A17 Pro processor performance"
},
{
id: "4", value: "29h", title: "Battery Life", description: "Extended usage on single charge", imageSrc: "https://img.b2bpic.net/free-photo/smartphone-rocks-arrangement_23-2149672674.jpg", imageAlt: "iPhone battery endurance"
}
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
testimonials={[
{
id: "1", name: "Sarah Johnson", imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Sarah Johnson"
},
{
id: "2", name: "Michael Chen", imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg", imageAlt: "Michael Chen"
},
{
id: "3", name: "Emma Rodriguez", imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg", imageAlt: "Emma Rodriguez"
},
{
id: "4", name: "David Kim", imageSrc: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg", imageAlt: "David Kim"
},
{
id: "5", name: "Lisa Anderson", imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg", imageAlt: "Lisa Anderson"
},
{
id: "6", name: "James Wilson", imageSrc: "https://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg", imageAlt: "James Wilson"
}
]}
cardTitle="Over 50 million customers worldwide love their iPhone for its innovation, design, and reliability"
cardTag="Trusted by millions"
cardTagIcon={Heart}
useInvertedBackground="noInvert"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
title="Frequently Asked Questions"
description="Find answers to common questions about iPhone features, pricing, and support"
textboxLayout="default"
animationType="smooth"
useInvertedBackground="invertDefault"
mediaPosition="left"
imageSrc="https://img.b2bpic.net/free-photo/smartphone-minimal-display-rock_23-2149554985.jpg"
imageAlt="iPhone design and build quality"
faqs={[
{
id: "1", title: "What is the warranty coverage?", content: "All iPhones come with a 1-year limited warranty covering hardware defects. AppleCare+ extends protection to 2-3 years with accidental damage coverage."
},
{
id: "2", title: "How long does the battery last?", content: "iPhone 15 Pro Max offers up to 29 hours of battery life. Standard iPhone 15 provides up to 20 hours of usage on a single charge."
},
{
id: "3", title: "Is the display water resistant?", content: "Yes, all iPhone 15 models feature IP68 water resistance rating, allowing submersion in water up to 6 meters deep for 30 minutes."
},
{
id: "4", title: "Can I upgrade my storage?", content: "iPhone storage cannot be upgraded after purchase. Choose the right capacity at the time of purchase: 128GB, 256GB, 512GB, or 1TB."
},
{
id: "5", title: "What payment options are available?", content: "We accept all major credit cards, Apple Pay, PayPal, and offer flexible financing through various payment plans."
},
{
id: "6", title: "How fast is the shipping?", content: "Standard shipping takes 3-5 business days. Express shipping available for 1-2 day delivery at checkout."
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
tag="Get Started"
tagIcon={Phone}
title="Ready to Experience iPhone Excellence?"
description="Join millions of users who have chosen iPhone for its seamless performance, innovative features, and unmatched ecosystem. Order your iPhone today and discover what's possible."
background={{ variant: "plain" }}
useInvertedBackground="noInvert"
buttons={[
{ text: "Shop Now", href: "#products" },
{ text: "Contact Support", href: "mailto:hello@iphone.shop" }
]}
/>
</div>
<div id="product" data-section="product">
<ProductCardOne
products={[
{
id: "1",
name: "iPhone 15 Pro",
price: "$999",
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
imageAlt: "iPhone 15 Pro with premium titanium design"
},
{
id: "2",
name: "iPhone 15 Pro Max",
price: "$1,099",
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
imageAlt: "iPhone 15 Pro Max in multiple colors"
},
{
id: "3",
name: "iPhone 15",
price: "$799",
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
imageAlt: "iPhone 15 with stunning display"
},
{
id: "4",
name: "iPhone 15 Plus",
price: "$899",
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
imageAlt: "iPhone 15 Plus with powerful performance"
}
]}
title="Our Best Selling Products"
description="Discover the top picks from our iPhone lineup, designed to meet your every need."
tag="Best Sellers"
tagIcon={Star}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="noInvert"
gridVariant="three-columns-all-equal-width"
carouselMode="buttons"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="iPhone"
copyrightText="© 2025 iPhone Sales. All rights reserved."
columns={[
{
title: "Shop", items: [
{ label: "iPhone 15 Pro", href: "#products" },
{ label: "iPhone 15 Pro Max", href: "#products" },
{ label: "iPhone 15", href: "#products" }
]
},
{
title: "Support", items: [
{ label: "Contact Us", href: "#contact" },
{ label: "FAQ", href: "#faq" },
{ label: "Warranty", href: "#faq" }
]
},
{
title: "Company", items: [
{ label: "About", href: "https://apple.com" },
{ label: "Privacy Policy", href: "https://apple.com/privacy" },
{ label: "Terms of Service", href: "https://apple.com/legal" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}