351 lines
20 KiB
TypeScript
351 lines
20 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
|
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FooterBase1 from '@/components/sections/footer/FooterBase1';
|
|
import { Camera, Zap, Sparkles, Monitor, Shield, Star, Heart } from "lucide-react";
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
|
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
|
import FaqAccordionOne from '@/components/sections/faq/FaqAccordionOne';
|
|
import TeamCardOne1 from '@/components/sections/team/TeamCardOne1';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="compact"
|
|
sizing="largeSmall"
|
|
background="none"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard logoText="iPhone Store" description="Explore the latest iPhone models with cutting-edge features and sleek designs." buttons={[{ label: "Shop Now", href: "/iphones", className: "bg-black text-white hover:bg-gray-800" }]} background={{ variant: "downward-rays-animated" }} imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" ariaLabel="iPhone Collection Hero Section" />
|
|
</div>
|
|
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="iPhone Store"
|
|
navItems={[
|
|
{ name: "Products", id: "products" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
title="Shop Our Latest Collection"
|
|
description="Browse our premium selection of iPhone models. Each device delivers exceptional performance, stunning cameras, and innovative features."
|
|
products={[
|
|
{
|
|
id: "1", name: "iPhone 15 Pro Max", price: "$1,199", imageSrc: "https://img.b2bpic.net/free-photo/mockup-mobile-phone-screen_53876-63379.jpg", imageAlt: "iPhone 15 Pro Max with titanium design", initialQuantity: 1
|
|
},
|
|
{
|
|
id: "2", name: "iPhone 15 Pro", price: "$999", imageSrc: "https://img.b2bpic.net/free-photo/view-electronic-product-balancing-podium_23-2150141321.jpg", imageAlt: "iPhone 15 Pro premium model", initialQuantity: 1
|
|
},
|
|
{
|
|
id: "3", name: "iPhone 15", price: "$799", imageSrc: "https://img.b2bpic.net/free-psd/new-smartphone-17-pro-social-media-banner-design-template_47987-33075.jpg", imageAlt: "iPhone 15 standard version", initialQuantity: 1
|
|
},
|
|
{
|
|
id: "4", name: "iPhone SE", price: "$429", imageSrc: "https://img.b2bpic.net/free-photo/people-holding-colorful-smartphones_23-2151969201.jpg", imageAlt: "iPhone SE affordable model", initialQuantity: 1
|
|
}
|
|
]}
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentySix
|
|
title="Revolutionary Features"
|
|
description="Discover what makes iPhone the most advanced smartphone ever created"
|
|
features={[
|
|
{
|
|
title: "Advanced Camera System", description: "Professional-grade photography and cinematography capabilities with AI-powered processing", imageSrc: "https://img.b2bpic.net/free-vector/camera-interfeace-smartphone-template_1361-2224.jpg", imageAlt: "Advanced camera technology", buttonIcon: Camera,
|
|
buttonHref: "#products"
|
|
},
|
|
{
|
|
title: "All-Day Battery Life", description: "Intelligent battery management ensures power when you need it most", imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-photo-two-croissants_23-2149277917.jpg", imageAlt: "Battery performance features", buttonIcon: Zap,
|
|
buttonHref: "#products"
|
|
},
|
|
{
|
|
title: "Premium Design", description: "Aerospace-grade titanium construction with stunning aesthetics and durability", imageSrc: "https://img.b2bpic.net/free-photo/close-up-hands-taking-coffee-photos_23-2149294500.jpg", imageAlt: "Premium materials and design", buttonIcon: Sparkles,
|
|
buttonHref: "#products"
|
|
},
|
|
{
|
|
title: "Stunning Display", description: "Super Retina XDR display with exceptional brightness and color accuracy", imageSrc: "https://img.b2bpic.net/free-photo/portrait-woman-using-smartphone-with-pop-socket-outdoors_23-2150168486.jpg", imageAlt: "Retina XDR display technology", buttonIcon: Monitor,
|
|
buttonHref: "#products"
|
|
},
|
|
{
|
|
title: "Blazing Fast Performance", description: "A17 Pro chip delivers unprecedented speed and efficiency for demanding tasks", imageSrc: "https://img.b2bpic.net/free-vector/camera-interfeace-smartphone-template_1361-2224.jpg", imageAlt: "A17 Pro chip performance", buttonIcon: Zap,
|
|
buttonHref: "#products"
|
|
},
|
|
{
|
|
title: "Enhanced Security", description: "Advanced Face ID and secure enclave protect your data with military-grade encryption", imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-photo-two-croissants_23-2149277917.jpg", imageAlt: "Face ID security technology", buttonIcon: Shield,
|
|
buttonHref: "#products"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardThree
|
|
title="Choose Your Perfect iPhone"
|
|
description="Select from our premium lineup designed to fit every budget and lifestyle"
|
|
plans={[
|
|
{
|
|
id: "1", price: "$429", name: "iPhone SE", buttons: [
|
|
{ text: "Select Plan", href: "#contact" },
|
|
{ text: "Learn More", href: "#features" }
|
|
],
|
|
features: [
|
|
"5G connectivity", "A15 Bionic chip", "64GB storage", "12MP camera", "IP67 water resistant", "1 year warranty"
|
|
]
|
|
},
|
|
{
|
|
id: "2", price: "$799", name: "iPhone 15", buttons: [
|
|
{ text: "Select Plan", href: "#contact" },
|
|
{ text: "Learn More", href: "#features" }
|
|
],
|
|
features: [
|
|
"5G with Wi-Fi 6E", "A16 Bionic chip", "128GB storage", "Dual 48MP camera", "Action mode video", "1 year warranty"
|
|
]
|
|
},
|
|
{
|
|
id: "3", badge: "Most Popular", badgeIcon: Star,
|
|
price: "$999", name: "iPhone 15 Pro", buttons: [
|
|
{ text: "Select Plan", href: "#contact" },
|
|
{ text: "Learn More", href: "#features" }
|
|
],
|
|
features: [
|
|
"5G with Wi-Fi 7", "A17 Pro chip", "256GB storage", "Advanced 48MP camera", "ProMotion 120Hz display", "Titanium design", "2 year warranty"
|
|
]
|
|
},
|
|
{
|
|
id: "4", price: "$1,199", name: "iPhone 15 Pro Max", buttons: [
|
|
{ text: "Select Plan", href: "#contact" },
|
|
{ text: "Learn More", href: "#features" }
|
|
],
|
|
features: [
|
|
"5G with Wi-Fi 7", "A17 Pro chip", "512GB storage", "Pro camera system", "Periscope zoom lens", "6.7\" display", "Titanium design", "2 year warranty"
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
cardTitle="Trusted by over 50,000 satisfied customers worldwide who experience iPhone excellence daily"
|
|
cardTag="See what our customers say"
|
|
cardTagIcon={Heart}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", imageSrc: "https://img.b2bpic.net/free-photo/caucasian-brunette-male-portrait_158595-7921.jpg", imageAlt: "Sarah Johnson"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Chen", imageSrc: "https://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3797.jpg", imageAlt: "Michael Chen"
|
|
},
|
|
{
|
|
id: "3", name: "Emma Rodriguez", imageSrc: "https://img.b2bpic.net/free-photo/front-view-smiley-man-with-backpack_23-2149915917.jpg", imageAlt: "Emma Rodriguez"
|
|
},
|
|
{
|
|
id: "4", name: "David Kim", imageSrc: "https://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1681.jpg", imageAlt: "David Kim"
|
|
},
|
|
{
|
|
id: "5", name: "Jessica Walsh", imageSrc: "https://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1563.jpg", imageAlt: "Jessica Walsh"
|
|
},
|
|
{
|
|
id: "6", name: "Amanda Foster", imageSrc: "https://img.b2bpic.net/free-photo/confident-young-bald-call-center-man-standing-with-closed-posture-profile-view-isolated-purple-with-copy-space_141793-76759.jpg", imageAlt: "Amanda Foster"
|
|
}
|
|
]}
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Get Your iPhone Today"
|
|
description="Have questions about our products or need assistance? Reach out to our expert team. We're here to help you find the perfect iPhone for your needs."
|
|
inputs={[
|
|
{ name: "fullname", type: "text", placeholder: "Full Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
|
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true },
|
|
{ name: "model", type: "text", placeholder: "iPhone Model of Interest", required: false }
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us how we can help you...", rows: 5,
|
|
required: true
|
|
}}
|
|
useInvertedBackground="invertDefault"
|
|
imageSrc="https://img.b2bpic.net/free-psd/new-smartphone-a18-bionic-social-media-banner-design-template_47987-33085.jpg"
|
|
imageAlt="iPhone contact us"
|
|
mediaPosition="right"
|
|
buttonText="Send Message"
|
|
/>
|
|
</div>
|
|
|
|
<div id="layout" data-section="layout">
|
|
<FeatureCardThree features={[
|
|
{ id: "1", title: "Wireless Charging Stand", description: "Elegant and efficient, charges your iPhone wirelessly.", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Wireless Charging Stand" },
|
|
{ id: "2", title: "Clear iPhone Case", description: "Protect your iPhone with a clear, stylish case.", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Clear iPhone Case" },
|
|
{ id: "3", title: "Bumper Case", description: "Durable bumper case for added protection.", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Bumper Case" },
|
|
{ id: "4", title: "Screen Protector", description: "Keep your iPhone screen scratch-free with this high-quality protector.", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Screen Protector" }
|
|
]} carouselMode="buttons" gridVariant="timeline" title="iPhone Accessories" description="Explore our range of iPhone accessories to enhance your device." buttons={[{ text: "Shop Now", href: "#" }]} textboxLayout="left" useInvertedBackground="light" ariaLabel="iPhone Accessories Section" className="mb-8" />
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardOne1
|
|
title="Meet Our Team"
|
|
description="Discover the talented individuals who bring iPhone Store to life."
|
|
members={[
|
|
{ id: "1", name: "Eve Wilson", role: "Founder & CEO", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" },
|
|
{ id: "2", name: "Frank Lee", role: "CTO", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" },
|
|
{ id: "3", name: "Grace Chen", role: "Head of Design", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" },
|
|
{ id: "4", name: "Hank Green", role: "Marketing Director", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" }
|
|
]}
|
|
gridVariant="grid"
|
|
animationType="slide"
|
|
textboxLayout="boxed"
|
|
useInvertedBackground="light"
|
|
/>
|
|
</div>
|
|
|
|
<div id="navbar" data-section="navbar">
|
|
<NavbarStyleApple
|
|
brandName="iPhone Store"
|
|
navItems={[
|
|
{ name: "iPhone 13", id: "products" },
|
|
{ name: "Waterproof Tech", id: "features" },
|
|
{ name: "Affordable Plans", id: "pricing" },
|
|
{ name: "Customer Reviews", id: "testimonials" }
|
|
]}
|
|
logoUrl="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"
|
|
/>
|
|
</div>
|
|
|
|
<div id="navbar" data-section="navbar">
|
|
<NavbarStyleApple
|
|
brandName="iPhone Store"
|
|
navItems={[
|
|
{ name: "iPhone 13", id: "products-iphone-13", image: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" },
|
|
{ name: "Face ID", id: "features-face-id" },
|
|
{ name: "AppleCare+", id: "pricing-applecare" },
|
|
{ name: "Customer Reviews", id: "testimonials-customers" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqAccordionOne
|
|
title="iPhone Store FAQ"
|
|
description="Have questions about our iPhone models? Check out our frequently asked questions below."
|
|
items={[
|
|
{
|
|
question: "What iPhone models do you offer?",
|
|
answer: "We offer the latest models including iPhone 13, iPhone 13 Pro, iPhone 13 Pro Max, and iPhone SE (2022)."
|
|
},
|
|
{
|
|
question: "What are the key features of the iPhone 13 Pro?",
|
|
answer: "The iPhone 13 Pro features a ProMotion display, A15 Bionic chip, Ceramic Shield front cover, and advanced cameras."
|
|
},
|
|
{
|
|
question: "Can I trade in my old iPhone?",
|
|
answer: "Yes, you can trade in your old iPhone for credit towards a new one. Visit our store for more details."
|
|
},
|
|
{
|
|
question: "How long is the warranty period?",
|
|
answer: "All iPhones come with a standard 1-year warranty. Extended warranty options are available upon purchase."
|
|
}
|
|
]}
|
|
image="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase1
|
|
columns={[
|
|
{
|
|
title: "Products", items: [
|
|
{ label: "iPhone 15 Pro", href: "#products" },
|
|
{ label: "iPhone 15", href: "#products" },
|
|
{ label: "iPhone SE", href: "#products" },
|
|
{ label: "Apple Watch", href: "#products" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "Help Center", href: "#contact" },
|
|
{ label: "Contact Us", href: "#contact" },
|
|
{ label: "Warranty Info", href: "#" },
|
|
{ label: "FAQs", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Press Room", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 iPhone Store. All rights reserved."
|
|
logoUrl="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase1
|
|
columns={[
|
|
{
|
|
title: "Products", items: [
|
|
{ label: "iPhone 15 Pro", href: "#products" },
|
|
{ label: "iPhone 15", href: "#products" },
|
|
{ label: "iPhone SE", href: "#products" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "Help Center", href: "#contact" },
|
|
{ label: "Contact Us", href: "#contact" },
|
|
{ label: "Warranty Info", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 iPhone Store. All rights reserved."
|
|
logoUrl="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |