Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #1.
This commit is contained in:
444
src/app/page.tsx
444
src/app/page.tsx
@@ -16,324 +16,152 @@ import { Award, Sparkles, Star } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="fluid"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="fluid"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Presence",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Narrative",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Chapters",
|
||||
id: "filmography",
|
||||
},
|
||||
{
|
||||
name: "Aura",
|
||||
id: "aura",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Hande Erçel"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Presence", id: "hero" },
|
||||
{ name: "Narrative", id: "about" },
|
||||
{ name: "Chapters", id: "filmography" },
|
||||
{ name: "Aura", id: "aura" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Hande Erçel"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Presence Beyond the Screen"
|
||||
description="Redefining the boundaries of elegance. A journey into cinematic storytelling and timeless femininity."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-man-woman-posing-with-transparent-fabric_23-2148239957.jpg"
|
||||
imageAlt="Hande Erçel"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478937.jpg",
|
||||
alt: "Portrait of fashion model",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/full-shot-woman-wearing-sunglasses_23-2149267445.jpg",
|
||||
alt: "Stylized fashion portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-woman-with-albinism-posing-studio_23-2150535706.jpg",
|
||||
alt: "Editorial fashion photography",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478971.jpg",
|
||||
alt: "Cinematic headshot",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453354.jpg",
|
||||
alt: "Artistic portrait",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Couture Excellence",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Cinematic Vision",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Global Influence",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Timeless Elegance",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Sophistication Defined",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Presence Beyond the Screen"
|
||||
description="Redefining the boundaries of elegance. A journey into cinematic storytelling and timeless femininity."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-man-woman-posing-with-transparent-fabric_23-2148239957.jpg"
|
||||
imageAlt="Hande Erçel"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478937.jpg", alt: "Portrait of fashion model" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/full-shot-woman-wearing-sunglasses_23-2149267445.jpg", alt: "Stylized fashion portrait" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/front-view-woman-with-albinism-posing-studio_23-2150535706.jpg", alt: "Editorial fashion photography" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478971.jpg", alt: "Cinematic headshot" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453354.jpg", alt: "Artistic portrait" },
|
||||
]}
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Couture Excellence" },
|
||||
{ type: "text", text: "Cinematic Vision" },
|
||||
{ type: "text", text: "Global Influence" },
|
||||
{ type: "text", text: "Timeless Elegance" },
|
||||
{ type: "text", text: "Sophistication Defined" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="The Duality of Icon"
|
||||
metrics={[
|
||||
{
|
||||
icon: Star,
|
||||
label: "Global Campaigns",
|
||||
value: "25+",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
label: "Cinematic Chapters",
|
||||
value: "12",
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
label: "Years of Presence",
|
||||
value: "10",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="The Duality of Icon"
|
||||
metrics={[
|
||||
{ icon: Star, label: "Global Campaigns", value: "25+" },
|
||||
{ icon: Award, label: "Cinematic Chapters", value: "12" },
|
||||
{ icon: Sparkles, label: "Years of Presence", value: "10" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="filmography" data-section="filmography">
|
||||
<FeatureCardTwentyOne
|
||||
useInvertedBackground={false}
|
||||
title="Cinematic Chapters"
|
||||
description="Each performance, a visual exploration of human emotion."
|
||||
accordionItems={[
|
||||
{
|
||||
id: "c1",
|
||||
title: "The Essence of Silence",
|
||||
content: "A story written in whispers and glances.",
|
||||
},
|
||||
{
|
||||
id: "c2",
|
||||
title: "Velvet Night",
|
||||
content: "Where elegance meets shadows of mystery.",
|
||||
},
|
||||
{
|
||||
id: "c3",
|
||||
title: "Cannes Horizon",
|
||||
content: "A moment captured under global spotlights.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-sitting-car-night_23-2149001297.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="filmography" data-section="filmography">
|
||||
<FeatureCardTwentyOne
|
||||
useInvertedBackground={false}
|
||||
title="Cinematic Chapters"
|
||||
description="Each performance, a visual exploration of human emotion."
|
||||
accordionItems={[
|
||||
{ id: "c1", title: "The Essence of Silence", content: "A story written in whispers and glances." },
|
||||
{ id: "c2", title: "Velvet Night", content: "Where elegance meets shadows of mystery." },
|
||||
{ id: "c3", title: "Cannes Horizon", content: "A moment captured under global spotlights." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-sitting-car-night_23-2149001297.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="fashion" data-section="fashion">
|
||||
<ProductCardThree
|
||||
textboxLayout="split"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Couture Campaign",
|
||||
price: "Iconic",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-young-woman-sitting-chair_23-2149411363.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Runway Presence",
|
||||
price: "Timeless",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-red-dress_624325-688.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Editorial Focus",
|
||||
price: "Modern",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/silhouette-woman-home-with-window-shadows_23-2148870661.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Global Vision",
|
||||
price: "Elite",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-blond-woman-white-long-dress-posing-smoking-cigarette_613910-11002.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Luxury Partnership",
|
||||
price: "Premium",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lights-prisms-effect-close-up_23-2148917909.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Cinematic Style",
|
||||
price: "Refined",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/colorful-water-drops_23-2147785893.jpg",
|
||||
},
|
||||
]}
|
||||
title="Global Presence"
|
||||
description="Defining the modern luxury aesthetic across continents."
|
||||
/>
|
||||
</div>
|
||||
<div id="fashion" data-section="fashion">
|
||||
<ProductCardThree
|
||||
textboxLayout="split"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
animationType="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Couture Campaign", price: "Iconic", imageSrc: "http://img.b2bpic.net/free-photo/side-view-young-woman-sitting-chair_23-2149411363.jpg" },
|
||||
{ id: "p2", name: "Runway Presence", price: "Timeless", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-red-dress_624325-688.jpg" },
|
||||
{ id: "p3", name: "Editorial Focus", price: "Modern", imageSrc: "http://img.b2bpic.net/free-photo/silhouette-woman-home-with-window-shadows_23-2148870661.jpg" },
|
||||
{ id: "p4", name: "Global Vision", price: "Elite", imageSrc: "http://img.b2bpic.net/free-photo/young-blond-woman-white-long-dress-posing-smoking-cigarette_613910-11002.jpg" },
|
||||
{ id: "p5", name: "Luxury Partnership", price: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/lights-prisms-effect-close-up_23-2148917909.jpg" },
|
||||
{ id: "p6", name: "Cinematic Style", price: "Refined", imageSrc: "http://img.b2bpic.net/free-photo/colorful-water-drops_23-2147785893.jpg" },
|
||||
]}
|
||||
title="Global Presence"
|
||||
description="Defining the modern luxury aesthetic across continents."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="aura" data-section="aura">
|
||||
<MetricCardSeven
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "Elegance",
|
||||
title: "The Core",
|
||||
items: [
|
||||
"Timeless Aura",
|
||||
"Emotional Depth",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "Mystery",
|
||||
title: "The Veil",
|
||||
items: [
|
||||
"Cinematic Beauty",
|
||||
"Quiet Power",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "Magnetic",
|
||||
title: "The Reach",
|
||||
items: [
|
||||
"Global Presence",
|
||||
"Sophistication",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="The Aura Effect"
|
||||
description="An experience beyond visual perception."
|
||||
/>
|
||||
</div>
|
||||
<div id="aura" data-section="aura">
|
||||
<MetricCardSeven
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "Elegance", title: "The Core", items: ["Timeless Aura", "Emotional Depth"] },
|
||||
{ id: "m2", value: "Mystery", title: "The Veil", items: ["Cinematic Beauty", "Quiet Power"] },
|
||||
{ id: "m3", value: "Magnetic", title: "The Reach", items: ["Global Presence", "Sophistication"] },
|
||||
]}
|
||||
title="The Aura Effect"
|
||||
description="An experience beyond visual perception."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah V.",
|
||||
role: "Fashion Director",
|
||||
company: "Vogue Intl",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-studio-fashion-portrait_1328-2185.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Marc L.",
|
||||
role: "Cinematographer",
|
||||
company: "Studio A24",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-holding-photo-camera_23-2150506126.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena R.",
|
||||
role: "Luxury Brand Consultant",
|
||||
company: "Dior Legacy",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-confident-corporate-woman-professional-entrepreneur-smiling-cross-arms-chest-smiling-enthusiastic-standing-white-background_1258-85600.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David K.",
|
||||
role: "Art Director",
|
||||
company: "Campaign Vision",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/nerd-man-student_329181-12712.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Julia P.",
|
||||
role: "Creative Lead",
|
||||
company: "Cinema Edge",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-camera-photo-looking-away_23-2148565518.jpg",
|
||||
},
|
||||
]}
|
||||
title="The Icon's Legacy"
|
||||
description="Voices in the landscape of high fashion and cinema."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah V.", role: "Fashion Director", company: "Vogue Intl", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-studio-fashion-portrait_1328-2185.jpg" },
|
||||
{ id: "2", name: "Marc L.", role: "Cinematographer", company: "Studio A24", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-holding-photo-camera_23-2150506126.jpg" },
|
||||
{ id: "3", name: "Elena R.", role: "Luxury Brand Consultant", company: "Dior Legacy", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-confident-corporate-woman-professional-entrepreneur-smiling-cross-arms-chest-smiling-enthusiastic-standing-white-background_1258-85600.jpg" },
|
||||
{ id: "4", name: "David K.", role: "Art Director", company: "Campaign Vision", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/nerd-man-student_329181-12712.jpg" },
|
||||
{ id: "5", name: "Julia P.", role: "Creative Lead", company: "Cinema Edge", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-camera-photo-looking-away_23-2148565518.jpg" },
|
||||
]}
|
||||
title="The Icon's Legacy"
|
||||
description="Voices in the landscape of high fashion and cinema."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
text="Elegance is not seen. It is felt. A presence remains in the silence."
|
||||
buttons={[
|
||||
{
|
||||
text: "Enter the Universe",
|
||||
href: "#hero",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
text="Elegance is not seen. It is felt. A presence remains in the silence."
|
||||
buttons={[{ text: "Enter the Universe", href: "#hero" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Hande Erçel"
|
||||
leftLink={{
|
||||
text: "© 2026 Studio Aura",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Terms of Presence",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Hande Erçel"
|
||||
leftLink={{ text: "© 2026 Studio Aura", href: "#" }}
|
||||
rightLink={{ text: "Terms of Presence", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user