283 lines
15 KiB
TypeScript
283 lines
15 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
|
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { Facebook, Instagram, Linkedin, Mail, Shield, Sparkles, Star, Twitter, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="sharp"
|
|
contentWidth="mediumLarge"
|
|
sizing="medium"
|
|
background="none"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="iPhone"
|
|
navItems={[
|
|
{ name: "Shop", id: "products" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
title="The Future of Mobile Innovation"
|
|
description="Experience cutting-edge technology with stunning design. Discover iPhone's revolutionary features that redefine what's possible."
|
|
tag="Latest Technology"
|
|
tagIcon={Zap}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-psd/new-smartphone-a18-bionic-social-media-banner-design-template_47987-33085.jpg", imageAlt: "iPhone premium design showcase"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/mockup-mobile-phone-screen_53876-63379.jpg", imageAlt: "iPhone innovative features"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/curly-young-woman-silk-stylish-black-pajamas-eyeglasses-sits-brown-soft-sofa-with-laptop_197531-33652.jpg", imageAlt: "iPhone stunning display"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-psd/phone-screen-mockup-couch_23-2152021409.jpg", imageAlt: "iPhone modern technology"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/handsome-bearded-man-wearing-suit-sitting-leather-sofa-holding-smartphone-comfort-relaxation_496169-1406.jpg", imageAlt: "iPhone in hand"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Shop Now", href: "#products" },
|
|
{ text: "Learn More", href: "#features" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
title="Best Selling Products"
|
|
description="Discover our top-selling items that customers love the most."
|
|
tag="Top Picks"
|
|
tagIcon={Sparkles}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="invertDefault"
|
|
gridVariant="three-columns-all-equal-width"
|
|
carouselMode="buttons"
|
|
products={[
|
|
{
|
|
id: "1",
|
|
name: "iPhone 15 Pro Max",
|
|
price: "$1,199",
|
|
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
|
|
imageAlt: "iPhone 15 Pro Max"
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "iPhone 15 Pro",
|
|
price: "$999",
|
|
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
|
|
imageAlt: "iPhone 15 Pro"
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "iPhone 15",
|
|
price: "$799",
|
|
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
|
|
imageAlt: "iPhone 15"
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "iPhone SE",
|
|
price: "$449",
|
|
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
|
|
imageAlt: "iPhone SE"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "View All Best Sellers", href: "#best-sellers" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
title="Why Choose iPhone?"
|
|
description="iPhone combines beautiful hardware with powerful software to create an extraordinary experience. Every detail is meticulously crafted to deliver performance, privacy, and peace of mind."
|
|
tag="Innovation & Design"
|
|
tagIcon={Shield}
|
|
imageSrc="https://img.b2bpic.net/free-photo/handsome-businesman-summer-city_1157-25610.jpg"
|
|
imageAlt="iPhone innovation and design"
|
|
useInvertedBackground="noInvert"
|
|
buttons={[
|
|
{ text: "Explore Features", href: "#features" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardMedia
|
|
title="Revolutionary Features"
|
|
description="Discover the technology that makes iPhone the world's most powerful personal device."
|
|
tag="Advanced Tech"
|
|
tagIcon={Zap}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="invertDefault"
|
|
features={[
|
|
{
|
|
id: "1", title: "Advanced Camera System", description: "Capture stunning photos and videos with our advanced computational photography and professional-grade camera system.", tag: "Photography", imageSrc: "https://img.b2bpic.net/free-photo/mobile-phone-pen_23-2147978224.jpg", imageAlt: "iPhone advanced camera"
|
|
},
|
|
{
|
|
id: "2", title: "All-Day Battery Life", description: "Stay powered through the entire day with intelligent battery management and fast charging technology.", tag: "Battery", imageSrc: "https://img.b2bpic.net/free-photo/people-using-smartphones_53876-24890.jpg", imageAlt: "iPhone long battery life"
|
|
},
|
|
{
|
|
id: "3", title: "Stunning Retina Display", description: "Experience vibrant colors and incredible clarity on our advanced Retina display with ProMotion technology.", tag: "Display", imageSrc: "https://img.b2bpic.net/free-photo/person-using-smartphone-check-social-media-while-sitting-couch_181624-44428.jpg", imageAlt: "iPhone retina display"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
title="Simple, Transparent Pricing"
|
|
description="Choose the perfect iPhone for your needs. All models include Apple's one-year limited warranty and access to AppleCare+."
|
|
tag="Flexible Options"
|
|
tagIcon={Sparkles}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
plans={[
|
|
{
|
|
id: "iphone-15", badge: "Popular", badgeIcon: Star,
|
|
price: "$799", subtitle: "Perfect for everyday use", buttons: [
|
|
{ text: "Buy Now", href: "#contact" }
|
|
],
|
|
features: [
|
|
"6.1-inch Liquid Retina display", "Advanced dual camera system", "All-day battery life", "A17 Pro chip", "5G connectivity", "Apple One year warranty"
|
|
]
|
|
},
|
|
{
|
|
id: "iphone-15-pro", badge: "Most Powerful", badgeIcon: Zap,
|
|
price: "$999", subtitle: "For power users", buttons: [
|
|
{ text: "Buy Now", href: "#contact" }
|
|
],
|
|
features: [
|
|
"6.1-inch Super Retina XDR display", "Pro camera system with telephoto", "ProMotion 120Hz display", "A17 Pro chip", "Titanium design", "Enhanced thermal management"
|
|
]
|
|
},
|
|
{
|
|
id: "iphone-15-pro-max", badge: "Best Display", badgeIcon: Sparkles,
|
|
price: "$1,199", subtitle: "The ultimate iPhone", buttons: [
|
|
{ text: "Buy Now", href: "#contact" }
|
|
],
|
|
features: [
|
|
"6.7-inch Super Retina XDR display", "Pro Max camera system", "ProMotion 120Hz display", "A17 Pro chip", "Longest battery life", "Premium titanium construction"
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="Loved by Millions"
|
|
description="See what our customers have to say about their iPhone experience."
|
|
tag="Customer Reviews"
|
|
tagIcon={Star}
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Changed My Photography Game", quote: "The camera system on iPhone is absolutely incredible. I've been able to capture professional-quality photos that I thought would only be possible with a DSLR.", name: "Sarah Mitchell", role: "Professional Photographer", imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Sarah Mitchell"
|
|
},
|
|
{
|
|
id: "2", title: "Seamless Integration", quote: "The ecosystem integration between my iPhone, iPad, and Mac is seamless. It's made my workflow incredibly efficient and productive.", name: "Michael Chen", role: "Software Developer", 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: "Michael Chen"
|
|
},
|
|
{
|
|
id: "3", title: "Battery Life is Amazing", quote: "I can finally go through a full day of heavy use without needing to charge. The battery optimization is exceptional.", name: "Emily Rodriguez", role: "Marketing Executive", imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg", imageAlt: "Emily Rodriguez"
|
|
},
|
|
{
|
|
id: "4", title: "Best Design and Performance", quote: "iPhone delivers the perfect balance of design and performance. It's not just a phone, it's a lifestyle choice.", name: "David Kim", role: "Tech Enthusiast", imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg", imageAlt: "David Kim"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Stay Updated"
|
|
title="Get the Latest iPhone News"
|
|
description="Subscribe to our newsletter to receive exclusive updates, special offers, and early access to new iPhone releases."
|
|
tagIcon={Mail}
|
|
background={{ variant: "rotated-rays-animated-grid" }}
|
|
useInvertedBackground="noInvert"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Subscribe"
|
|
termsText="We respect your privacy. Unsubscribe at any time."
|
|
/>
|
|
</div>
|
|
|
|
<div id="product" data-section="product">
|
|
<ProductCardOne
|
|
title="Our Notable iPhone Selection"
|
|
description="Take a look at our selection of iPhones that might not be the latest, but still offer great value."
|
|
tag="Previously Featured"
|
|
tagIcon={Sparkles}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="invertDefault"
|
|
gridVariant="three-columns-all-equal-width"
|
|
carouselMode="buttons"
|
|
products={[
|
|
{
|
|
id: "1", name: "iPhone 12", price: "$699", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone 12"
|
|
},
|
|
{
|
|
id: "2", name: "iPhone 11", price: "$599", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone 11"
|
|
},
|
|
{
|
|
id: "3", name: "iPhone XR", price: "$499", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone XR"
|
|
},
|
|
{
|
|
id: "4", name: "iPhone 8", price: "$399", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone 8"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "View All Models", href: "#pricing" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="iPhone"
|
|
copyrightText="© 2025 iPhone Store. All rights reserved. Privacy Policy • Terms of Service"
|
|
socialLinks={[
|
|
{ icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
|
|
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
|
|
{ icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
|
|
{ icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |