Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #2.
This commit is contained in:
436
src/app/page.tsx
436
src/app/page.tsx
@@ -2,6 +2,7 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { Zap, Shield, Layout, Printer } from "lucide-react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
@@ -15,314 +16,153 @@ import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCar
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="largeSmall"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="largeSmall"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "portfolio",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="DesignStudio"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Portfolio", id: "portfolio" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="DesignStudio"
|
||||
button={{ text: "Let's Talk", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "rotated-rays-static",
|
||||
}}
|
||||
title="Creative Graphic Designer & Visual Storyteller"
|
||||
description="Crafting visual identities and digital experiences that bring ideas to life. Specialized in branding, editorial design, and visual communication."
|
||||
buttons={[
|
||||
{
|
||||
text: "View My Work",
|
||||
href: "#portfolio",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320706.jpg?_wi=1"
|
||||
imageAlt="Graphic design portfolio showcase"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320705.jpg",
|
||||
alt: "Graphic design peer 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320721.jpg",
|
||||
alt: "Graphic design peer 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/still-life-graphic-design-day_52683-160824.jpg",
|
||||
alt: "Graphic design peer 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg",
|
||||
alt: "Graphic design peer 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/closeup-portrait-successful-confident-young-woman-start-career-look-determined-get-job-waiting-interview-lean-glass-wall-business-center-smiling-looking-away-satisfied_197531-30572.jpg",
|
||||
alt: "Graphic design peer 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 500+ creative professionals"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Brand Identity",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "UX/UI Design",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Editorial Art",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Motion Graphics",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Packaging",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{ variant: "rotated-rays-static" }}
|
||||
title="Creative Graphic Designer & Visual Storyteller"
|
||||
description="Crafting visual identities and digital experiences that bring ideas to life. Specialized in branding, editorial design, and visual communication."
|
||||
buttons={[{ text: "View My Work", href: "#portfolio" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320706.jpg"
|
||||
imageAlt="Graphic design portfolio showcase"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320705.jpg", alt: "Graphic design peer 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320721.jpg", alt: "Graphic design peer 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/still-life-graphic-design-day_52683-160824.jpg", alt: "Graphic design peer 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg", alt: "Graphic design peer 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-portrait-successful-confident-young-woman-start-career-look-determined-get-job-waiting-interview-lean-glass-wall-business-center-smiling-looking-away-satisfied_197531-30572.jpg", alt: "Graphic design peer 5" }
|
||||
]}
|
||||
avatarText="Trusted by 500+ creative professionals"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Brand Identity" },
|
||||
{ type: "text", text: "UX/UI Design" },
|
||||
{ type: "text", text: "Editorial Art" },
|
||||
{ type: "text", text: "Motion Graphics" },
|
||||
{ type: "text", text: "Packaging" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Bringing Concepts to Life"
|
||||
description="I focus on blending aesthetic appeal with strategic communication to deliver designs that resonate. Every project is an opportunity to elevate a brand's visual presence."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Strategic Branding",
|
||||
description: "Building iconic brand identities from scratch.",
|
||||
},
|
||||
{
|
||||
title: "Visual Storytelling",
|
||||
description: "Translating complex ideas into simple visuals.",
|
||||
},
|
||||
{
|
||||
title: "Digital Excellence",
|
||||
description: "Designing intuitive interfaces and digital assets.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-girl-hat-sitting-box-white-wall_176420-8478.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Bringing Concepts to Life"
|
||||
description="I focus on blending aesthetic appeal with strategic communication to deliver designs that resonate. Every project is an opportunity to elevate a brand's visual presence."
|
||||
bulletPoints={[
|
||||
{ title: "Strategic Branding", description: "Building iconic brand identities from scratch." },
|
||||
{ title: "Visual Storytelling", description: "Translating complex ideas into simple visuals." },
|
||||
{ title: "Digital Excellence", description: "Designing intuitive interfaces and digital assets." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-girl-hat-sitting-box-white-wall_176420-8478.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Identity Design",
|
||||
price: "Project",
|
||||
variant: "Branding",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-desk_23-2150440910.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Web Interface",
|
||||
price: "Project",
|
||||
variant: "UI/UX",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-designer-working-floor_23-2149930985.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Packaging Set",
|
||||
price: "Project",
|
||||
variant: "Print",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-black-white-minimal-design_23-2149253105.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Editorial Art",
|
||||
price: "Project",
|
||||
variant: "Design",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-background-with-liquid-shapes-generative-ai_8829-2896.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Social Campaign",
|
||||
price: "Project",
|
||||
variant: "Digital",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-social-media-drawings_1134-84.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Brand Campaign",
|
||||
price: "Project",
|
||||
variant: "Identity",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-with-pink-yellow-spheres_23-2148235949.jpg",
|
||||
},
|
||||
]}
|
||||
title="Selected Works"
|
||||
description="A collection of recent projects spanning branding, digital design, and editorial art."
|
||||
/>
|
||||
</div>
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "1", name: "Identity Design", price: "Project", variant: "Branding", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-desk_23-2150440910.jpg" },
|
||||
{ id: "2", name: "Web Interface", price: "Project", variant: "UI/UX", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-designer-working-floor_23-2149930985.jpg" },
|
||||
{ id: "3", name: "Packaging Set", price: "Project", variant: "Print", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-black-white-minimal-design_23-2149253105.jpg" },
|
||||
{ id: "4", name: "Editorial Art", price: "Project", variant: "Design", imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-background-with-liquid-shapes-generative-ai_8829-2896.jpg" },
|
||||
{ id: "5", name: "Social Campaign", price: "Project", variant: "Digital", imageSrc: "http://img.b2bpic.net/free-photo/top-view-social-media-drawings_1134-84.jpg" },
|
||||
{ id: "6", name: "Brand Campaign", price: "Project", variant: "Identity", imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-with-pink-yellow-spheres_23-2148235949.jpg" }
|
||||
]}
|
||||
title="Selected Works"
|
||||
description="A collection of recent projects spanning branding, digital design, and editorial art."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Logo Design",
|
||||
description: "Timeless logos that build lasting recognition.",
|
||||
buttonIcon: "Zap",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/phoenix-with-burning-wings-feathers-generative-ai_8829-2886.jpg",
|
||||
imageAlt: "abstract company logo design",
|
||||
},
|
||||
{
|
||||
title: "Brand Identity",
|
||||
description: "Complete visual systems that tell your story.",
|
||||
buttonIcon: "Shield",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320706.jpg?_wi=2",
|
||||
imageAlt: "abstract company logo design",
|
||||
},
|
||||
{
|
||||
title: "Web Design",
|
||||
description: "Modern and responsive digital interfaces.",
|
||||
buttonIcon: "Layout",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-hat-sitting-box-white-wall_176420-8478.jpg?_wi=2",
|
||||
imageAlt: "abstract company logo design",
|
||||
},
|
||||
{
|
||||
title: "Print Media",
|
||||
description: "High-quality assets for any physical medium.",
|
||||
buttonIcon: "Printer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-desk_23-2150440910.jpg?_wi=2",
|
||||
imageAlt: "abstract company logo design",
|
||||
},
|
||||
]}
|
||||
title="My Expertise"
|
||||
description="Offering a comprehensive range of design services to support your business goals."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Logo Design", description: "Timeless logos that build lasting recognition.", buttonIcon: Zap, imageSrc: "http://img.b2bpic.net/free-photo/phoenix-with-burning-wings-feathers-generative-ai_8829-2886.jpg" },
|
||||
{ title: "Brand Identity", description: "Complete visual systems that tell your story.", buttonIcon: Shield, imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320706.jpg" },
|
||||
{ title: "Web Design", description: "Modern and responsive digital interfaces.", buttonIcon: Layout, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-hat-sitting-box-white-wall_176420-8478.jpg" },
|
||||
{ title: "Print Media", description: "High-quality assets for any physical medium.", buttonIcon: Printer, imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-desk_23-2150440910.jpg" }
|
||||
]}
|
||||
title="My Expertise"
|
||||
description="Offering a comprehensive range of design services to support your business goals."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah J.",
|
||||
handle: "@sarah_j",
|
||||
testimonial: "Exceptional work and great communication.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-people-working-office-with-digital-tablet_1301-6633.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mike D.",
|
||||
handle: "@mike_d",
|
||||
testimonial: "The design quality truly elevated our brand.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1665.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily R.",
|
||||
handle: "@emily_r",
|
||||
testimonial: "Creative, professional, and very efficient.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453434.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David W.",
|
||||
handle: "@david_w",
|
||||
testimonial: "Transformed our identity into a masterpiece.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-sad-expression_1194-3905.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Lisa M.",
|
||||
handle: "@lisa_m",
|
||||
testimonial: "I love the attention to detail.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/selfie-business-couple_23-2147985081.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Feedback"
|
||||
description="Hear what my partners say about working together."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah J.", handle: "@sarah_j", testimonial: "Exceptional work and great communication.", imageSrc: "http://img.b2bpic.net/free-photo/business-people-working-office-with-digital-tablet_1301-6633.jpg" },
|
||||
{ id: "2", name: "Mike D.", handle: "@mike_d", testimonial: "The design quality truly elevated our brand.", imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1665.jpg" },
|
||||
{ id: "3", name: "Emily R.", handle: "@emily_r", testimonial: "Creative, professional, and very efficient.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453434.jpg" },
|
||||
{ id: "4", name: "David W.", handle: "@david_w", testimonial: "Transformed our identity into a masterpiece.", imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-sad-expression_1194-3905.jpg" },
|
||||
{ id: "5", name: "Lisa M.", handle: "@lisa_m", testimonial: "I love the attention to detail.", imageSrc: "http://img.b2bpic.net/free-photo/selfie-business-couple_23-2147985081.jpg" }
|
||||
]}
|
||||
title="Client Feedback"
|
||||
description="Hear what my partners say about working together."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Alpha Studio",
|
||||
"Beta Systems",
|
||||
"Gamma Corp",
|
||||
"Delta Group",
|
||||
"Epsilon Lab",
|
||||
]}
|
||||
title="Trusted By"
|
||||
description="Collaborated with forward-thinking businesses and brands."
|
||||
/>
|
||||
</div>
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["Alpha Studio", "Beta Systems", "Gamma Corp", "Delta Group", "Epsilon Lab"]}
|
||||
title="Trusted By"
|
||||
description="Collaborated with forward-thinking businesses and brands."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "rotated-rays-static",
|
||||
}}
|
||||
tag="Let's Collaborate"
|
||||
title="Let's Start a Project"
|
||||
description="Ready to bring your ideas to life? Get in touch for collaboration and consultation."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/artist-props-photography-studio_23-2148885645.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "rotated-rays-static" }}
|
||||
tag="Let's Collaborate"
|
||||
title="Let's Start a Project"
|
||||
description="Ready to bring your ideas to life? Get in touch for collaboration and consultation."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/artist-props-photography-studio_23-2148885645.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="DesignStudio"
|
||||
leftLink={{
|
||||
text: "Home",
|
||||
href: "/",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Contact",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="DesignStudio"
|
||||
leftLink={{ text: "Home", href: "/" }}
|
||||
rightLink={{ text: "Contact", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user