5 Commits

3 changed files with 73 additions and 8 deletions

View File

@@ -2,7 +2,7 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
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 FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
@@ -41,19 +41,21 @@ export default function LandingPage() {
</div>
<div id="hero" data-section="hero">
<HeroSplit
background={{ variant: "glowing-orb" }}
<HeroBillboardGallery
title="Introducing iPhone 15 Pro"
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"
tagIcon={Sparkles}
buttons={[
{ text: "Shop Now", href: "products" },
{ text: "Learn More", href: "features" }
]}
imageSrc="https://img.b2bpic.net/free-photo/mockup-mobile-phone-screen_53876-63379.jpg"
imageAlt="iPhone 15 Pro Premium Smartphone"
imagePosition="right"
mediaItems={[
{ imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone 15 Pro Premium Smartphone" },
{ 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">
@@ -320,6 +322,69 @@ export default function LandingPage() {
/>
</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">
<FooterLogoReveal
logoText="iPhone"

View File

@@ -99,7 +99,7 @@ const HeroBillboardGallery = ({
<section
aria-label={ariaLabel}
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
)}
>

View File

@@ -129,7 +129,7 @@ const HeroSplit = ({
style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920&q=80)', backgroundSize: 'cover', backgroundPosition: 'center' }}
>
<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}
<div className={cls("w-full md:w-1/2")}>