192 lines
9.7 KiB
TypeScript
192 lines
9.7 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import { CheckCircle, Sparkles, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="none"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{ name: "Home", id: "#hero" },
|
|
{ name: "Work", id: "#work" },
|
|
{ name: "Contact", id: "#contact" },
|
|
]}
|
|
brandName="Tapasya Mittal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
background={{ variant: "plain" }}
|
|
title="Creative Portfolio"
|
|
description="Visual identity, packaging, and book design crafted with passion and purpose. I help brands tell their unique story through compelling visuals."
|
|
tag="Graphic Designer"
|
|
mediaItems={[
|
|
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-2shc324i.jpg?_wi=1", imageAlt: "Graphic Designer Portrait" },
|
|
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-sdip55j6.jpg?_wi=1", imageAlt: "Design Work Showcase" }
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
rating={5}
|
|
ratingText="Top Rated Designer"
|
|
tagIcon={Sparkles}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
useInvertedBackground={false}
|
|
title="Crafting Brand Identities"
|
|
description="I focus on creating thoughtful, visually appealing brand identities that resonate with Gen Z and beyond. My approach balances modern style with clear communication."
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-bhmo4fxw.jpg?_wi=1"
|
|
imageAlt="Brand Company Kit"
|
|
/>
|
|
</div>
|
|
|
|
<div id="packaging" data-section="packaging">
|
|
<FeatureCardTen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
title="Packaging Design Expertise"
|
|
description="I create packaging that stands out on the shelf, balancing creativity with practical brand communication."
|
|
features={[
|
|
{
|
|
title: "Concept Creation", description: "Developing initial ideas based on brand personality.", items: [{ icon: CheckCircle, text: "Brand storytelling" }, { icon: CheckCircle, text: "Visual hierarchy" }],
|
|
reverse: false,
|
|
media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-sdip55j6.jpg?_wi=2", imageAlt: "Packaging Concept" }
|
|
},
|
|
{
|
|
title: "Brand Cohesion", description: "Ensuring every pack reflects the core identity.", items: [{ icon: CheckCircle, text: "Consistent color palettes" }, { icon: CheckCircle, text: "Typography balance" }],
|
|
reverse: true,
|
|
media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-bhmo4fxw.jpg?_wi=2", imageAlt: "Packaging Cohesion" }
|
|
},
|
|
{
|
|
title: "Visual Impact", description: "Creating designs that captivate the target audience.", items: [{ icon: CheckCircle, text: "Modern aesthetic" }, { icon: CheckCircle, text: "High engagement" }],
|
|
reverse: false,
|
|
media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-hzpberw9.jpg?_wi=1", imageAlt: "Visual Impact" }
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="branding" data-section="branding">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="two-columns-alternating-heights"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{ id: "1", brand: "Identity", name: "Logo Design", price: "Custom", rating: 5, reviewCount: "120", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-bhmo4fxw.jpg?_wi=3" },
|
|
{ id: "2", brand: "Identity", name: "Company Kit", price: "Custom", rating: 5, reviewCount: "85", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-2shc324i.jpg?_wi=2" },
|
|
{ id: "3", brand: "Print", name: "Envelopes", price: "Custom", rating: 4, reviewCount: "50", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-sdip55j6.jpg?_wi=3" }
|
|
]}
|
|
title="Brand Company Kits"
|
|
description="Comprehensive design solutions tailored to establish consistent, professional brand identities."
|
|
/>
|
|
</div>
|
|
|
|
<div id="book-design" data-section="book-design">
|
|
<FeatureCardTen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
title="Book Cover Design"
|
|
description="Bold, fresh designs connecting deeply with the Gen Z audience."
|
|
features={[
|
|
{
|
|
title: "Gen Z Focus", description: "Targeted visuals for modern readers.", items: [{ icon: Zap, text: "Eye-catching colors" }, { icon: Zap, text: "Youthful vibe" }],
|
|
reverse: false,
|
|
media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-37du6737.jpg", imageAlt: "Gen Z Book Cover" }
|
|
},
|
|
{
|
|
title: "Clean Typography", description: "Modern fonts for maximum readability.", items: [{ icon: Zap, text: "Dynamic layout" }, { icon: Zap, text: "Clear communication" }],
|
|
reverse: true,
|
|
media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-sdip55j6.jpg?_wi=4", imageAlt: "Typography Detail" }
|
|
},
|
|
{
|
|
title: "Trendy Elements", description: "Integrating current design trends.", items: [{ icon: Zap, text: "Bold visuals" }, { icon: Zap, text: "Relatable themes" }],
|
|
reverse: false,
|
|
media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-hzpberw9.jpg?_wi=2", imageAlt: "Trends Showcase" }
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
useInvertedBackground={false}
|
|
cardTitle="Client Voices"
|
|
cardTag="Trusted by Brands"
|
|
cardAnimation="slide-up"
|
|
testimonials={[
|
|
{ id: "1", name: "Sarah J.", imageSrc: "http://img.b2bpic.net/free-photo/graphic-designer-making-logo-notebook_23-2149142118.jpg" },
|
|
{ id: "2", name: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/female-logo-designer-working-her-tablet-connected-laptop_23-2149119251.jpg" },
|
|
{ id: "3", name: "Emily R.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-with-plans-showing-approval_23-2148269277.jpg" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{ id: "1", title: "What is your design process?", content: "I research, sketch, and iterate until the design matches your brand vision perfectly." },
|
|
{ id: "2", title: "Do you offer revisions?", content: "Yes, I offer up to three rounds of revisions to ensure you are 100% satisfied with the outcome." },
|
|
{ id: "3", title: "How do we get started?", content: "Simply reach out via email or social media and we can discuss your specific project needs." }
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-hzpberw9.jpg?_wi=3"
|
|
title="Common Questions"
|
|
description="Learn more about my design process and project timeline."
|
|
faqsAnimation="slide-up"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{ variant: "plain" }}
|
|
tag="Let's Connect"
|
|
title="Let's Work Together"
|
|
description="I assure you that you won't regret your decision to work with me."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="Tapasya Mittal"
|
|
columns={[
|
|
{ items: [{ label: "Portfolio", href: "#hero" }, { label: "Work", href: "#work" }] },
|
|
{ items: [{ label: "Instagram", href: "#" }, { label: "Email", href: "#" }] }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |