Compare commits
11 Commits
version_1
...
version_18
| Author | SHA1 | Date | |
|---|---|---|---|
| f8de4473ce | |||
| 75a07c91e3 | |||
| 642ccc16bd | |||
| 92954fe7c6 | |||
| 7dddc07c97 | |||
| 1a4d853da4 | |||
| ace6a2c10e | |||
| a7cc279997 | |||
| 9e4ab8f1aa | |||
| fbd944cee1 | |||
| 08f2c0c9f7 |
198
src/app/page.tsx
198
src/app/page.tsx
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||||
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
||||||
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
||||||
@@ -11,6 +11,7 @@ import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCar
|
|||||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||||
import { Sparkles, Phone, Zap, Gift, TrendingUp, Users, Award, Shield, Star, Heart } from "lucide-react";
|
import { Sparkles, Phone, Zap, Gift, TrendingUp, Users, Award, Shield, Star, Heart } from "lucide-react";
|
||||||
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
return (
|
return (
|
||||||
@@ -40,46 +41,77 @@ export default function LandingPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroSplit
|
<HeroBillboardGallery
|
||||||
background={{ variant: "glowing-orb" }}
|
|
||||||
title="Introducing iPhone 15 Pro"
|
title="Introducing iPhone 15 Pro"
|
||||||
description="Experience the future of mobile technology. Titanium design, advanced camera system, and breakthrough performance in your pocket."
|
description="Experience the future of mobile technology. Titanium design, advanced camera system, and breakthrough performance in your pocket."
|
||||||
|
background={{ variant: "sparkles-gradient" }}
|
||||||
tag="Now Available"
|
tag="Now Available"
|
||||||
tagIcon={Sparkles}
|
tagIcon={Sparkles}
|
||||||
buttons={[
|
buttons={[
|
||||||
{ text: "Shop Now", href: "products" },
|
{ text: "Shop Now", href: "products" },
|
||||||
{ text: "Learn More", href: "features" }
|
{ text: "Learn More", href: "features" }
|
||||||
]}
|
]}
|
||||||
imageSrc="https://img.b2bpic.net/free-photo/mockup-mobile-phone-screen_53876-63379.jpg"
|
mediaItems={[
|
||||||
imageAlt="iPhone 15 Pro Premium Smartphone"
|
{ imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone 15 Pro Premium Smartphone" },
|
||||||
imagePosition="right"
|
{ imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone 15 Pro Camera Features" },
|
||||||
/>
|
{ imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone 15 Pro Design and Build" }
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="products" data-section="products">
|
|
||||||
<ProductCardOne
|
|
||||||
title="Our iPhone Collection"
|
|
||||||
description="Discover the perfect iPhone for your lifestyle. From cutting-edge Pro models to accessible core options, find your match."
|
|
||||||
tag="Premium Selection"
|
|
||||||
tagIcon={Phone}
|
|
||||||
textboxLayout="default"
|
|
||||||
products={[
|
|
||||||
{
|
|
||||||
id: "1", name: "iPhone 15 Pro Max", price: "$1,199", imageSrc: "https://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722629.jpg", imageAlt: "iPhone 15 Pro Max"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2", name: "iPhone 15 Pro", price: "$999", imageSrc: "https://img.b2bpic.net/free-psd/new-smartphone-16-pro-social-media-cover-design-template_47987-25428.jpg", imageAlt: "iPhone 15 Pro"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3", name: "iPhone 15", price: "$799", imageSrc: "https://img.b2bpic.net/free-psd/new-smartphone-a18-bionic-social-media-banner-design-template_47987-33085.jpg", imageAlt: "iPhone 15"
|
|
||||||
}
|
|
||||||
]}
|
]}
|
||||||
gridVariant="three-columns-all-equal-width"
|
|
||||||
animationType="slide-up"
|
|
||||||
useInvertedBackground="invertDefault"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="products" data-section="products">
|
||||||
|
<ProductCardTwo
|
||||||
|
title="Explore Our Latest Smartphones"
|
||||||
|
description="Experience the latest in smartphone technology with our cutting-edge devices. From powerful processors to stunning displays, find your perfect match."
|
||||||
|
tag="Latest Models"
|
||||||
|
tagIcon={Star}
|
||||||
|
textboxLayout="default"
|
||||||
|
products={[
|
||||||
|
{
|
||||||
|
id: "1",
|
||||||
|
name: "Samsung Galaxy S23 Ultra",
|
||||||
|
price: "$1,299",
|
||||||
|
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
|
||||||
|
imageAlt: "Samsung Galaxy S23 Ultra",
|
||||||
|
brand: "Samsung",
|
||||||
|
rating: 4.8,
|
||||||
|
reviewCount: "1,200"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2",
|
||||||
|
name: "Google Pixel 7 Pro",
|
||||||
|
price: "$899",
|
||||||
|
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
|
||||||
|
imageAlt: "Google Pixel 7 Pro",
|
||||||
|
brand: "Google",
|
||||||
|
rating: 4.7,
|
||||||
|
reviewCount: "950"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3",
|
||||||
|
name: "OnePlus 10T",
|
||||||
|
price: "$799",
|
||||||
|
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
|
||||||
|
imageAlt: "OnePlus 10T",
|
||||||
|
brand: "OnePlus",
|
||||||
|
rating: 4.6,
|
||||||
|
reviewCount: "800"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "4",
|
||||||
|
name: "Xiaomi 13 Pro",
|
||||||
|
price: "$699",
|
||||||
|
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
|
||||||
|
imageAlt: "Xiaomi 13 Pro",
|
||||||
|
brand: "Xiaomi",
|
||||||
|
rating: 4.5,
|
||||||
|
reviewCount: "750"
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
gridVariant="three-columns-all-equal-width"
|
||||||
|
animationType="slide-up"
|
||||||
|
useInvertedBackground="invertDefault"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<div id="features" data-section="features">
|
<div id="features" data-section="features">
|
||||||
<FeatureCardSix
|
<FeatureCardSix
|
||||||
title="Engineered to Perfection"
|
title="Engineered to Perfection"
|
||||||
@@ -247,6 +279,112 @@ export default function LandingPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="product" data-section="product">
|
||||||
|
<ProductCardOne
|
||||||
|
title="Our Bestsellers"
|
||||||
|
description="Explore our top-selling iPhone models that customers love."
|
||||||
|
tag="Bestsellers"
|
||||||
|
tagIcon={Phone}
|
||||||
|
textboxLayout="default"
|
||||||
|
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 15 Plus",
|
||||||
|
price: "$899",
|
||||||
|
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
|
||||||
|
imageAlt: "iPhone 15 Plus"
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
gridVariant="three-columns-all-equal-width"
|
||||||
|
animationType="slide-up"
|
||||||
|
useInvertedBackground="invertDefault"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="testimonial" data-section="testimonial">
|
||||||
|
<TestimonialCardOne
|
||||||
|
title="What Our Customers Say"
|
||||||
|
description="Join millions of satisfied iPhone users worldwide."
|
||||||
|
tag="Customer Reviews"
|
||||||
|
tagIcon={Heart}
|
||||||
|
textboxLayout="default"
|
||||||
|
gridVariant="uniform-all-items-equal"
|
||||||
|
animationType="slide-up"
|
||||||
|
testimonials={[
|
||||||
|
{
|
||||||
|
id: "1",
|
||||||
|
name: "Sarah Johnson",
|
||||||
|
role: "Professional Photographer",
|
||||||
|
company: "Creative Studios",
|
||||||
|
rating: 5,
|
||||||
|
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
|
||||||
|
imageAlt: "Sarah Johnson"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2",
|
||||||
|
name: "Michael Chen",
|
||||||
|
role: "Software Engineer",
|
||||||
|
company: "Tech Innovations",
|
||||||
|
rating: 5,
|
||||||
|
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
|
||||||
|
imageAlt: "Michael Chen"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3",
|
||||||
|
name: "Emily Rodriguez",
|
||||||
|
role: "Content Creator",
|
||||||
|
company: "Digital Media",
|
||||||
|
rating: 5,
|
||||||
|
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
|
||||||
|
imageAlt: "Emily Rodriguez"
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
useInvertedBackground="invertDefault"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="hero" data-section="hero">
|
||||||
|
<HeroBillboardGallery
|
||||||
|
title="Discover iPhone"
|
||||||
|
description="Unleash the power of the future in your hands. Experience cutting-edge technology, stunning design, and endless possibilities."
|
||||||
|
background={{ variant: "sparkles-gradient" }}
|
||||||
|
tag="Explore Now"
|
||||||
|
tagIcon={Sparkles}
|
||||||
|
buttons={[
|
||||||
|
{ text: "Buy iPhone", href: "buy" },
|
||||||
|
{ text: "See Features", href: "features" },
|
||||||
|
{ text: "Learn More", href: "about" }
|
||||||
|
]}
|
||||||
|
mediaItems={[
|
||||||
|
{ imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone Latest Model" },
|
||||||
|
{ imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone Camera Quality" },
|
||||||
|
{ imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone Design and Build" },
|
||||||
|
{ imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone User Experience" }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterLogoReveal
|
<FooterLogoReveal
|
||||||
logoText="iPhone"
|
logoText="iPhone"
|
||||||
|
|||||||
@@ -3,20 +3,20 @@
|
|||||||
/* --vw is set by ThemeProvider */
|
/* --vw is set by ThemeProvider */
|
||||||
|
|
||||||
/* --background: #f5f4ef;
|
/* --background: #f5f4ef;
|
||||||
--card: #dad6cd;
|
--card: #2c3e2f;
|
||||||
--foreground: #2a2928;
|
--foreground: #ecf0f1;
|
||||||
--primary-cta: #2a2928;
|
--primary-cta: #27ae60;
|
||||||
--secondary-cta: #ecebea;
|
--secondary-cta: #2ecc71;
|
||||||
--accent: #ffffff;
|
--accent: #34495e;
|
||||||
--background-accent: #ffffff; */
|
--background-accent: #2c3e50; */
|
||||||
|
|
||||||
--background: #fcf6ec;
|
--background: #1a1a1a;
|
||||||
--card: #f3ede2;
|
--card: #2c3e2f;
|
||||||
--foreground: #2e2521;
|
--foreground: #ecf0f1;
|
||||||
--primary-cta: #2e2521;
|
--primary-cta: #27ae60;
|
||||||
--secondary-cta: #ffffff;
|
--secondary-cta: #2ecc71;
|
||||||
--accent: #b2a28b;
|
--accent: #34495e;
|
||||||
--background-accent: #b2a28b;
|
--background-accent: #2c3e50;
|
||||||
|
|
||||||
/* text sizing - set by ThemeProvider */
|
/* text sizing - set by ThemeProvider */
|
||||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||||
|
|||||||
@@ -99,7 +99,7 @@ const HeroBillboardGallery = ({
|
|||||||
<section
|
<section
|
||||||
aria-label={ariaLabel}
|
aria-label={ariaLabel}
|
||||||
className={cls(
|
className={cls(
|
||||||
"relative w-full py-hero-page-padding md:h-svh md:py-0",
|
"relative w-full py-hero-page-padding md:h-svh md:py-0 bg-green-500",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -126,9 +126,10 @@ const HeroSplit = ({
|
|||||||
<section
|
<section
|
||||||
aria-label={ariaLabel}
|
aria-label={ariaLabel}
|
||||||
className={cls("relative w-full h-fit py-hero-page-padding md:py-0 md:h-svh flex items-center", className)}
|
className={cls("relative w-full h-fit py-hero-page-padding md:py-0 md:h-svh flex items-center", className)}
|
||||||
|
style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920&q=80)', backgroundSize: 'cover', backgroundPosition: 'center' }}
|
||||||
>
|
>
|
||||||
<HeroBackgrounds {...background} />
|
<HeroBackgrounds {...background} />
|
||||||
<div className={cls("w-content-width mx-auto flex flex-col md:flex-row gap-13 md:gap-15 items-center relative z-10", containerClassName)}>
|
<div className={cls("w-content-width mx-auto flex flex-col md:flex-row gap-13 md:gap-15 items-center relative z-10 rounded-2xl", containerClassName)}>
|
||||||
{imagePosition === "left" && mediaContent}
|
{imagePosition === "left" && mediaContent}
|
||||||
|
|
||||||
<div className={cls("w-full md:w-1/2")}>
|
<div className={cls("w-full md:w-1/2")}>
|
||||||
|
|||||||
Reference in New Issue
Block a user