Merge version_2 into main #2
347
src/app/page.tsx
347
src/app/page.tsx
@@ -3,277 +3,114 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import { Award, Clock, Globe } from "lucide-react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import { Award, Clock, Globe, Star } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="aurora"
|
||||
cardStyle="gradient-bordered"
|
||||
contentWidth="medium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="none"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="glass"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Work",
|
||||
id: "work",
|
||||
},
|
||||
{
|
||||
name: "Book Me",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="EMIL DESIGN"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Work", id: "work" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Book Me", id: "contact" },
|
||||
]}
|
||||
brandName="EMIL"
|
||||
button={{ text: "Book Design", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Swiss precision in design."
|
||||
description="Emil is a Swiss-based designer creating timeless, functional, and minimalist solutions for brands worldwide."
|
||||
tag="Creative Portfolio"
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Emil",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "View Work",
|
||||
href: "#work",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-white-portrait-woman-old-hollywood-glamour-style_23-2150720628.jpg?_wi=1",
|
||||
imageAlt: "Swiss Design Exhibit",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-design-mosaic-birthday-brochure_23-2149155232.jpg?_wi=1",
|
||||
imageAlt: "Typography Art",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-vase-marble-table_53876-71250.jpg?_wi=1",
|
||||
imageAlt: "Studio Space",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/set-new-modernism-aesthetics-business-covers_23-2148848052.jpg?_wi=1",
|
||||
imageAlt: "Abstract Shapes",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-palette-with-paint-brush_23-2148263359.jpg?_wi=1",
|
||||
imageAlt: "Exhibition Space",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/new-modernism-aesthetics-business-cover-collection_23-2148848367.jpg",
|
||||
imageAlt: "Branding Design",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="Emil"
|
||||
description="Swiss-based graphic designer. Precision, clarity, and minimalist visual systems for brands that demand excellence."
|
||||
buttons={[{ text: "Book Design", href: "#contact" }, { text: "View Work", href: "#work" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/black-white-portrait-woman-old-hollywood-glamour-style_23-2150720628.jpg?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="Design Philosophy"
|
||||
metrics={[
|
||||
{
|
||||
icon: Award,
|
||||
label: "Awards Won",
|
||||
value: "15+",
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
label: "Projects Completed",
|
||||
value: "80+",
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
label: "International Clients",
|
||||
value: "50+",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="work" data-section="work">
|
||||
<ProductCardFour
|
||||
title="Selected Work"
|
||||
description="Defining brand identity through Swiss minimalist principles."
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Arch Identity", price: "Identity", variant: "System", imageSrc: "http://img.b2bpic.net/free-photo/laptop-vase-marble-table_53876-71250.jpg?_wi=1" },
|
||||
{ id: "2", name: "Print Editorial", price: "Editorial", variant: "Print", imageSrc: "http://img.b2bpic.net/free-vector/flat-mosaic-horizontal-business-card-template_23-2149043598.jpg?_wi=1" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="work" data-section="work">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "w1",
|
||||
name: "Architectural Identity",
|
||||
price: "Identity",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-messy-bun-hair-style_23-2149459254.jpg",
|
||||
},
|
||||
{
|
||||
id: "w2",
|
||||
name: "Minimal Editorial",
|
||||
price: "Print",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/flat-design-astrophysics-conference-template_23-2150295444.jpg",
|
||||
},
|
||||
{
|
||||
id: "w3",
|
||||
name: "Corporate System",
|
||||
price: "Branding",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-mosaic-horizontal-business-card-template_23-2149043598.jpg",
|
||||
},
|
||||
]}
|
||||
title="Selected Work"
|
||||
description="Curated projects showcasing a commitment to clarity and Swiss minimalism."
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Design Principles"
|
||||
metrics={[
|
||||
{ icon: Award, label: "Awards", value: "12" },
|
||||
{ icon: Clock, label: "Years", value: "10" },
|
||||
{ icon: Globe, label: "Countries", value: "24" }
|
||||
]}
|
||||
metricsAnimation="opacity"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah Miller",
|
||||
date: "Jan 2024",
|
||||
title: "Founder",
|
||||
quote: "Emil's eye for detail is unmatched. He brought our brand to life with surgical precision.",
|
||||
tag: "Branding",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/marketing-company-employees-congratulating-each-other-great-startup-marketing-strategy-results-happy-smiling-pregnant-woman-high-fiving-coworker-amazing-presentation-ideas_482257-40081.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-white-portrait-woman-old-hollywood-glamour-style_23-2150720628.jpg?_wi=2",
|
||||
imageAlt: "swiss design minimalist art exhibition",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Marcus Chen",
|
||||
date: "Dec 2023",
|
||||
title: "CEO",
|
||||
quote: "Clean, effective, and always on time. Emil truly embodies the Swiss standard of design excellence.",
|
||||
tag: "Design Strategy",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-female-posing-with-glasses_23-2148415852.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-design-mosaic-birthday-brochure_23-2149155232.jpg?_wi=2",
|
||||
imageAlt: "minimalist typography art poster",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena Rossi",
|
||||
date: "Oct 2023",
|
||||
title: "Director",
|
||||
quote: "Working with Emil was a transformative process for our company identity.",
|
||||
tag: "Creative Direction",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/smiling-camera-with-crossed-arms-happy-confident-satisfied-expression-lateral-view_1194-633413.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-vase-marble-table_53876-71250.jpg?_wi=2",
|
||||
imageAlt: "graphic design studio workspace",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David Thorne",
|
||||
date: "Aug 2023",
|
||||
title: "Product Lead",
|
||||
quote: "The results surpassed our expectations. His work has a quiet confidence that just works.",
|
||||
tag: "Editorial",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blond-female-dressed-denim-shirt-red-eyeglasses_613910-11864.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/set-new-modernism-aesthetics-business-covers_23-2148848052.jpg?_wi=2",
|
||||
imageAlt: "abstract modern graphic shapes",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Jasmine Lee",
|
||||
date: "Feb 2024",
|
||||
title: "Marketing Manager",
|
||||
quote: "An absolute professional. The minimalist aesthetic he provides is world-class.",
|
||||
tag: "Campaigns",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/marketing-company-employees-congratulating-each-other-great-startup-marketing-strategy-results-happy-smiling-pregnant-woman-high-fiving-coworker-amazing-presentation-ideas_482257-40081.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-palette-with-paint-brush_23-2148263359.jpg?_wi=2",
|
||||
imageAlt: "design exhibition minimalist interior",
|
||||
},
|
||||
]}
|
||||
title="Client Perspectives"
|
||||
description="Hear what partners say about collaborating with Emil."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
title="Collaborators"
|
||||
description="Client feedback on design partnerships."
|
||||
showRating={true}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
testimonials={[
|
||||
{ id: "1", name: "Studio XYZ", handle: "@studio", testimonial: "Pure clarity and precision.", rating: 5, icon: Star },
|
||||
{ id: "2", name: "Brand Lab", handle: "@brandlab", testimonial: "Essential minimalist aesthetic.", rating: 5, icon: Star }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Booking"
|
||||
title="Start a Project"
|
||||
description="Ready to collaborate? Reach out to discuss your design needs."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-black-suit-standing-long-view_23-2148401464.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
buttonText="Send Inquiry"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Contact"
|
||||
title="Book Design"
|
||||
description="Let's define your visual identity. Available for freelance projects."
|
||||
background={{ variant: "plain" }}
|
||||
buttonText="Send Inquiry"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-vector/hand-painted-style-abstract-background-design_60389-36.jpg"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "Hero",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Work",
|
||||
href: "#work",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Imprint",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="EMIL DESIGN"
|
||||
copyrightText="© 2025 | Emil Design Studio"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Work", items: [{ label: "Portfolio" }, { label: "Contact" }] },
|
||||
{ title: "Swiss Design", items: [{ label: "Methodology" }, { label: "Imprint" }] }
|
||||
]}
|
||||
bottomLeftText="© 2025 Emil Design"
|
||||
bottomRightText="Swiss Minimalist"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user