bender/5d4520f3-9ad2-4d65-a17a-a4dbf38ba52b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_1
Branches Tags
bender:main bender:version_4 bender:version_3 bender:version_2 bender:version_1
...
pull from: bender:version_2
Branches Tags
bender:main bender:version_4 bender:version_3 bender:version_2 bender:version_1

3 Commits
version_1 ... version_2

Author SHA1 Message Date
bender
e308938889 Update src/app/page.tsx 2026-05-06 00:02:23 +00:00
bender
03a055c628 Update src/app/styles/variables.css 2026-05-06 00:01:50 +00:00
bender
f6f131ef2d Update src/app/page.tsx 2026-05-06 00:01:49 +00:00
2 changed files with 40 additions and 257 deletions
Expand all files Collapse all files

283
src/app/page.tsx
View File

@@ -12,7 +12,7 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Award, CheckCircle, Clock } from "lucide-react";
import { Award, CheckCircle } from "lucide-react";
export default function LandingPage() {
return (
@@ -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,21 @@ 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",
},
]}
avatars={[{ src: "https://i.pravatar.cc/150?u=1", alt: "User 1" }, { src: "https://i.pravatar.cc/150?u=2", alt: "User 2" }]}
ratingAnimation="blur-reveal"
avatarsAnimation="slide-up"
/>
@@ -280,94 +115,42 @@ 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."
description="Partnering with top companies to deliver excellence."
textboxLayout="default"
useInvertedBackground={false}
/>
</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"
useInvertedBackground={false}
/>
</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."
useInvertedBackground={false}
/>
</div>
<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>
);
}
}

14
src/app/styles/variables.css
View File

@@ -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);