Merge version_2 into main #1
275
src/app/page.tsx
275
src/app/page.tsx
@@ -22,28 +22,19 @@ export default function LandingPage() {
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="layered"
|
||||
background="noise"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Works",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Works", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Portfolio"
|
||||
/>
|
||||
@@ -51,111 +42,18 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
title="Creative Portfolio"
|
||||
description="Showcasing high-impact designs, strategic concepts, and visual excellence built with precision and passion."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-minimalist-wedding-invitation_23-2148242357.jpg",
|
||||
imageAlt: "Hero Creative 1",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/designer-template-design_23-2151776101.jpg",
|
||||
imageAlt: "Hero Creative 2",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-stain-with-ferromagnetic-liquid-metal-with-copy-space_23-2148253549.jpg",
|
||||
imageAlt: "Hero Creative 3",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-abstract-shapes-facebook-cover_23-2149098199.jpg",
|
||||
imageAlt: "Hero Creative 4",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-wedding-paper-with-dried-plant_23-2149374589.jpg",
|
||||
imageAlt: "Hero Creative 5",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-minimalist-wedding-invitation_23-2148242357.jpg", imageAlt: "Hero Creative 1" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-psd/designer-template-design_23-2151776101.jpg", imageAlt: "Hero Creative 2" },
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/art-gallery-banner-template_23-2148596130.jpg",
|
||||
imageAlt: "Hero Creative 6",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/red-coffee-cup-open-laptop-white-background_23-2148178591.jpg",
|
||||
imageAlt: "Hero Creative 7",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-developing-photos_23-2149893918.jpg",
|
||||
imageAlt: "Hero Creative 8",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2151272900.jpg",
|
||||
imageAlt: "Hero Creative 9",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-shades-pink-each-other-divided-by-line_181624-5214.jpg",
|
||||
imageAlt: "Hero Creative 10",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "View Projects",
|
||||
href: "#features",
|
||||
},
|
||||
]}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/houndstongue-leaves-white-background-text-space_53876-97375.jpg",
|
||||
alt: "Avatar 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/top-view-notebook-with-plant_23-2148838842.jpg",
|
||||
alt: "Avatar 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/dried-leaf-frame-botanical-background_53876-106189.jpg",
|
||||
alt: "Avatar 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/tropical-palm-leaf-simple-social-media-banner-background_53876-96889.jpg",
|
||||
alt: "Avatar 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-vector/fluid-gradient-background-templates_53876-80614.jpg",
|
||||
alt: "Avatar 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 50+ clients worldwide"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/yellow-red-dye-water_23-2147745440.jpg",
|
||||
alt: "Marquee 1",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/flat-lay-shades-red-papers-close-up_23-2148263920.jpg",
|
||||
alt: "Marquee 2",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/detail-tasty-jelly-cake_23-2147840383.jpg",
|
||||
alt: "Marquee 3",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/single-curved-sheet-paper_23-2148319062.jpg",
|
||||
alt: "Marquee 4",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-vector/abstract-banners-with-chrome-elements_1284-25621.jpg",
|
||||
alt: "Marquee 5",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-psd/art-gallery-banner-template_23-2148596130.jpg", imageAlt: "Hero Creative 3" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/red-coffee-cup-open-laptop-white-background_23-2148178591.jpg", imageAlt: "Hero Creative 4" },
|
||||
]}
|
||||
buttons={[{ text: "View Projects", href: "#features" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -166,18 +64,8 @@ export default function LandingPage() {
|
||||
title="About My Creative Journey"
|
||||
description="With over 5 years of experience in digital design and strategy, I transform complex ideas into visually compelling realities that resonate with audiences."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Design Strategy",
|
||||
description: "Focused on user-centric design principles.",
|
||||
},
|
||||
{
|
||||
title: "Visual Excellence",
|
||||
description: "High fidelity production across digital media.",
|
||||
},
|
||||
{
|
||||
title: "Collaboration",
|
||||
description: "Working closely with teams for results.",
|
||||
},
|
||||
{ title: "Design Strategy", description: "Focused on user-centric design principles." },
|
||||
{ title: "Visual Excellence", description: "High fidelity production across digital media." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/smiley-woman-posing-black-white-medium-shot_23-2149411384.jpg"
|
||||
/>
|
||||
@@ -190,21 +78,8 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Brand Identity",
|
||||
description: "Crafting visual identities for startups.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg",
|
||||
},
|
||||
{
|
||||
title: "Web Platforms",
|
||||
description: "Design systems for scalable platforms.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-bokeh-background_1017-3117.jpg",
|
||||
},
|
||||
{
|
||||
title: "Motion Graphics",
|
||||
description: "High end animations and transitions.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-bright-curves-paper-sheets_23-2148428671.jpg",
|
||||
},
|
||||
{ title: "Brand Identity", description: "Crafting visual identities for startups.", imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg" },
|
||||
{ title: "Web Platforms", description: "Design systems for scalable platforms.", imageSrc: "http://img.b2bpic.net/free-photo/black-bokeh-background_1017-3117.jpg" },
|
||||
]}
|
||||
title="Selected Works"
|
||||
description="A collection of design projects ranging from branding to UI/UX and motion design."
|
||||
@@ -218,61 +93,20 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "50+",
|
||||
title: "Projects",
|
||||
description: "Delivered successfully.",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "20+",
|
||||
title: "Brands",
|
||||
description: "Collaborated with global brands.",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "5",
|
||||
title: "Years",
|
||||
description: "Of industry experience.",
|
||||
icon: Clock,
|
||||
},
|
||||
{ id: "m1", value: "50+", title: "Projects", description: "Delivered successfully.", icon: CheckCircle },
|
||||
{ id: "m2", value: "20+", title: "Brands", description: "Collaborated with global brands.", icon: Award },
|
||||
]}
|
||||
title="Impact by Numbers"
|
||||
description="Measuring success through tangible project outcomes and growth metrics."
|
||||
description="Measuring success through tangible project outcomes."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Working with this designer was a fantastic experience. The attention to detail and ability to understand our vision was truly impressive."
|
||||
testimonial="Working with this designer was a fantastic experience."
|
||||
rating={5}
|
||||
author="Sarah Miller, Design Lead"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-blonde-short-haired-woman-posing-white-shirt_23-2149021781.jpg",
|
||||
alt: "Sarah",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/charming-young-woman-stylish-beige-dress-sits-comfortable-pose-wooden-bench-leans-h_197531-33584.jpg",
|
||||
alt: "Colleague A",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-man-with-messy-bun-posing_23-2149435265.jpg",
|
||||
alt: "Colleague B",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-sitting_23-2149213193.jpg",
|
||||
alt: "Colleague C",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-asian-woman-autumn-clothes_23-2149071320.jpg",
|
||||
alt: "Colleague D",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
@@ -280,54 +114,24 @@ export default function LandingPage() {
|
||||
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"InnovateTech",
|
||||
"CreativePulse",
|
||||
"GlobalDesign",
|
||||
"NextGenSaaS",
|
||||
"VisualGrowth",
|
||||
"DesignStream",
|
||||
"FutureWorks",
|
||||
]}
|
||||
names={["InnovateTech", "CreativePulse", "GlobalDesign"]}
|
||||
title="Trusted By Industry Leaders"
|
||||
description="I have had the pleasure of working with exceptional organizations worldwide."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do you accept new clients?",
|
||||
content: "Yes, I am always open to new project opportunities.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "What is your process?",
|
||||
content: "I follow a design-thinking process from discovery to final delivery.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Are your designs responsive?",
|
||||
content: "Every project is mobile-first and fully responsive.",
|
||||
},
|
||||
{ id: "f1", title: "Do you accept new clients?", content: "Yes, I am always open to new project opportunities." }
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Need more info? Let's clarify."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Let's Talk"
|
||||
title="Let's Get Started"
|
||||
description="Ready to bring your ideas to life? Contact me to discuss your next big project."
|
||||
@@ -337,37 +141,10 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Portfolio"
|
||||
columns={[
|
||||
{
|
||||
title: "Links",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Projects",
|
||||
href: "#features",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
columns={[{ title: "Links", items: [{ label: "About", href: "#about" }] }]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f7f6f7;
|
||||
--card: #ffffff;
|
||||
--foreground: #250c0d;
|
||||
--primary-cta: #b82b40;
|
||||
--background: #1a1a1a;
|
||||
--card: #262626;
|
||||
--foreground: #f5f5f5;
|
||||
--primary-cta: #f97316;
|
||||
--primary-cta-text: #f7f6f7;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta: #fef08a;
|
||||
--secondary-cta-text: #250c0d;
|
||||
--accent: #b90941;
|
||||
--background-accent: #e8a8b6;
|
||||
--accent: #f97316;
|
||||
--background-accent: #262626;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user