bender/b3ef17f4-448c-4cf3-b967-e8289164e3cd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-04-18 16:26:44 +00:00
parent 9e078fbfe0
commit 7ccb1d44f8
1 changed files with 166 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

586
src/app/page.tsx
View File

@@ -21,438 +21,184 @@ export default function LandingPage() {
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "About",
id: "about",
},
{
name: "Projects",
id: "projects",
},
{
name: "Testimonials",
id: "testimonials",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="DevFolio"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{ name: "About", id: "about" },
{ name: "Projects", id: "projects" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" },
]}
brandName="DevFolio"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
background={{
variant: "gradient-bars",
}}
imagePosition="right"
title="Crafting Digital Experiences."
description="Freelance web developer specialized in creating high-performance, modern web applications that drive business growth."
testimonials={[
{
name: "Sarah J.",
handle: "@sarahj",
testimonial: "Exceptional work on our platform migration.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg?_wi=1",
},
{
name: "Mike D.",
handle: "@miked",
testimonial: "Delivered the product early and beyond expectations.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg?_wi=1",
},
{
name: "Ana R.",
handle: "@anar",
testimonial: "Excellent communication and technical expertise.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/user-profile-icon-front-side_187299-39596.jpg?_wi=1",
},
{
name: "John K.",
handle: "@johnk",
testimonial: "The performance gains were immediate and massive.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/user-front-side-with-white-background_187299-40007.jpg?_wi=1",
},
{
name: "Lisa V.",
handle: "@lisav",
testimonial: "Very professional and a pleasure to work with.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-vector/linear-flat-people-faces-icon-set-social-media-avatar-userpic-profiles_1416-508.jpg?_wi=1",
},
]}
buttons={[
{
text: "View Projects",
href: "#projects",
},
{
text: "Contact Me",
href: "#contact",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/cozy-loft-style-illuminated-apartment-with-modern-home-office_482257-126413.jpg"
mediaAnimation="blur-reveal"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/smiling-man-suit-looking-camera_23-2148112202.jpg",
alt: "user-1",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-man-with-glasses_23-2148514897.jpg",
alt: "user-2",
},
{
src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",
alt: "user-3",
},
{
src: "http://img.b2bpic.net/free-photo/beautiful-afro-american-woman-smiling_23-2148336914.jpg",
alt: "user-4",
},
{
src: "http://img.b2bpic.net/free-photo/blond-businessman-with-glasses_1098-57.jpg",
alt: "user-5",
},
]}
avatarText="Trusted by 50+ clients"
marqueeItems={[
{
type: "text",
text: "React.js",
},
{
type: "text",
text: "Next.js",
},
{
type: "text",
text: "TypeScript",
},
{
type: "text",
text: "PostgreSQL",
},
{
type: "text",
text: "Cloud-Native",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
background={{ variant: "gradient-bars" }}
imagePosition="right"
title="Crafting Digital Experiences."
description="Freelance web developer specialized in creating high-performance, modern web applications that drive business growth."
testimonials={[
{ name: "Sarah J.", handle: "@sarahj", testimonial: "Exceptional work on our platform migration.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg" },
{ name: "Mike D.", handle: "@miked", testimonial: "Delivered the product early and beyond expectations.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg" },
{ name: "Ana R.", handle: "@anar", testimonial: "Excellent communication and technical expertise.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/user-profile-icon-front-side_187299-39596.jpg" },
{ name: "John K.", handle: "@johnk", testimonial: "The performance gains were immediate and massive.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/user-front-side-with-white-background_187299-40007.jpg" },
{ name: "Lisa V.", handle: "@lisav", testimonial: "Very professional and a pleasure to work with.", rating: 5, imageSrc: "http://img.b2bpic.net/free-vector/linear-flat-people-faces-icon-set-social-media-avatar-userpic-profiles_1416-508.jpg" }
]}
buttons={[{ text: "View Projects", href: "#projects" }, { text: "Contact Me", href: "#contact" }]}
imageSrc="http://img.b2bpic.net/free-photo/cozy-loft-style-illuminated-apartment-with-modern-home-office_482257-126413.jpg"
mediaAnimation="blur-reveal"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/smiling-man-suit-looking-camera_23-2148112202.jpg", alt: "user-1" },
{ src: "http://img.b2bpic.net/free-photo/portrait-man-with-glasses_23-2148514897.jpg", alt: "user-2" },
{ src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "user-3" },
{ src: "http://img.b2bpic.net/free-photo/beautiful-afro-american-woman-smiling_23-2148336914.jpg", alt: "user-4" },
{ src: "http://img.b2bpic.net/free-photo/blond-businessman-with-glasses_1098-57.jpg", alt: "user-5" },
]}
avatarText="Trusted by 50+ clients"
marqueeItems={[{ type: "text", text: "React.js" }, { type: "text", text: "Next.js" }, { type: "text", text: "TypeScript" }, { type: "text", text: "PostgreSQL" }, { type: "text", text: "Cloud-Native" }]}
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={false}
title="Passionate about Quality Code."
description="With over 6 years of experience, I build robust, scalable, and responsive web solutions that prioritize user experience and maintainability."
metrics={[
{
value: "100+",
title: "Projects Completed",
},
{
value: "50+",
title: "Happy Clients",
},
{
value: "6y",
title: "Experience",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={false}
title="Passionate about Quality Code."
description="With over 6 years of experience, I build robust, scalable, and responsive web solutions that prioritize user experience and maintainability."
metrics={[{ value: "100+", title: "Projects Completed" }, { value: "50+", title: "Happy Clients" }, { value: "6y", title: "Experience" }]}
imageSrc="http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
/>
</div>
<div id="skills" data-section="skills">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{
icon: Zap,
title: "Front-End Development",
description: "Expert in React, Next.js, and TypeScript for fast user interfaces.",
},
{
icon: Shield,
title: "Backend Engineering",
description: "Strong skills in Node.js, PostgreSQL, and secure API architecture.",
},
{
icon: Globe,
title: "Responsive Design",
description: "Mobile-first approach ensuring perfect experience on every device.",
},
]}
title="Core Technical Skills."
description="Leveraging modern tech stacks to deliver high-quality, efficient, and scalable digital solutions."
/>
</div>
<div id="skills" data-section="skills">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{ icon: Zap, title: "Front-End Development", description: "Expert in React, Next.js, and TypeScript for fast user interfaces." },
{ icon: Shield, title: "Backend Engineering", description: "Strong skills in Node.js, PostgreSQL, and secure API architecture." },
{ icon: Globe, title: "Responsive Design", description: "Mobile-first approach ensuring perfect experience on every device." }
]}
title="Core Technical Skills."
description="Leveraging modern tech stacks to deliver high-quality, efficient, and scalable digital solutions."
/>
</div>
<div id="projects" data-section="projects">
<ProductCardFour
animationType="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "SaaS Dashboard",
price: "View Project",
variant: "web",
imageSrc: "http://img.b2bpic.net/free-photo/man-trading-browsing-online-stock-investments-night_169016-57295.jpg",
},
{
id: "p2",
name: "E-Commerce Site",
price: "View Project",
variant: "web",
imageSrc: "http://img.b2bpic.net/free-psd/soft-nest-website-template_23-2151985943.jpg",
},
{
id: "p3",
name: "Banking App",
price: "View Project",
variant: "mobile",
imageSrc: "http://img.b2bpic.net/free-photo/two-factor-authentication-mobile-device_23-2151997022.jpg",
},
{
id: "p4",
name: "Portfolio Site",
price: "View Project",
variant: "web",
imageSrc: "http://img.b2bpic.net/free-vector/abstract-paper-cut-banner-template-backgrounds-paper-cut-shapes-template-banner_1142-9405.jpg",
},
{
id: "p5",
name: "Medical Booking",
price: "View Project",
variant: "web",
imageSrc: "http://img.b2bpic.net/free-photo/empty-medical-workspace-with-technology_482257-115276.jpg",
},
{
id: "p6",
name: "Learning Platform",
price: "View Project",
variant: "web",
imageSrc: "http://img.b2bpic.net/free-photo/education-application-knowledge-development-concept_53876-105721.jpg",
},
]}
title="Selected Projects."
description="A showcase of recent work focusing on functionality, aesthetics, and user impact."
/>
</div>
<div id="projects" data-section="projects">
<ProductCardFour
animationType="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
products={[
{ id: "p1", name: "SaaS Dashboard", price: "View Project", variant: "web", imageSrc: "http://img.b2bpic.net/free-photo/man-trading-browsing-online-stock-investments-night_169016-57295.jpg" },
{ id: "p2", name: "E-Commerce Site", price: "View Project", variant: "web", imageSrc: "http://img.b2bpic.net/free-psd/soft-nest-website-template_23-2151985943.jpg" },
{ id: "p3", name: "Banking App", price: "View Project", variant: "mobile", imageSrc: "http://img.b2bpic.net/free-photo/two-factor-authentication-mobile-device_23-2151997022.jpg" },
{ id: "p4", name: "Portfolio Site", price: "View Project", variant: "web", imageSrc: "http://img.b2bpic.net/free-vector/abstract-paper-cut-banner-template-backgrounds-paper-cut-shapes-template-banner_1142-9405.jpg" },
{ id: "p5", name: "Medical Booking", price: "View Project", variant: "web", imageSrc: "http://img.b2bpic.net/free-photo/empty-medical-workspace-with-technology_482257-115276.jpg" },
{ id: "p6", name: "Learning Platform", price: "View Project", variant: "web", imageSrc: "http://img.b2bpic.net/free-photo/education-application-knowledge-development-concept_53876-105721.jpg" }
]}
title="Selected Projects."
description="A showcase of recent work focusing on functionality, aesthetics, and user impact."
/>
</div>
<div id="experience" data-section="experience">
<MetricCardEleven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{
id: "m1",
value: "99.9%",
title: "Uptime",
description: "Guaranteed performance for all apps.",
imageSrc: "http://img.b2bpic.net/free-photo/data-analysis-summary-graph-arrow-up_53876-133586.jpg",
},
{
id: "m2",
value: "40ms",
title: "Avg Response",
description: "Optimized database queries.",
imageSrc: "http://img.b2bpic.net/free-photo/high-tech-governmental-cyber-security-room-without-staff-work_482257-94558.jpg",
},
{
id: "m3",
value: "1.2M",
title: "Users Served",
description: "Platform capacity reached.",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphics-composition_23-2148991203.jpg",
},
]}
title="Growth and Milestones."
description="Tracking impactful growth markers throughout my freelance career."
/>
</div>
<div id="experience" data-section="experience">
<MetricCardEleven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{ id: "m1", value: "99.9%", title: "Uptime", description: "Guaranteed performance for all apps.", imageSrc: "http://img.b2bpic.net/free-photo/data-analysis-summary-graph-arrow-up_53876-133586.jpg" },
{ id: "m2", value: "40ms", title: "Avg Response", description: "Optimized database queries.", imageSrc: "http://img.b2bpic.net/free-photo/high-tech-governmental-cyber-security-room-without-staff-work_482257-94558.jpg" },
{ id: "m3", value: "1.2M", title: "Users Served", description: "Platform capacity reached.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphics-composition_23-2148991203.jpg" }
]}
title="Growth and Milestones."
description="Tracking impactful growth markers throughout my freelance career."
/>
</div>
<div id="team" data-section="team">
<TeamCardFive
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
team={[
{
id: "t1",
name: "Alex W.",
role: "Senior Dev",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-graphic-designer-smiling_1170-992.jpg",
},
{
id: "t2",
name: "Jane D.",
role: "UI Designer",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bright-curly-woman-dressed-blue-jacket-glasses-stands-with-serious-emotions-pink_291650-1099.jpg",
},
{
id: "t3",
name: "Mark S.",
role: "Product Manager",
imageSrc: "http://img.b2bpic.net/free-photo/technician-optimizing-data-center-equipment-maximum-efficiency_482257-117650.jpg",
},
]}
title="Key Contributors."
description="Often collaborating with industry specialists to expand project capabilities."
/>
</div>
<div id="team" data-section="team">
<TeamCardFive
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
team={[
{ id: "t1", name: "Alex W.", role: "Senior Dev", imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-graphic-designer-smiling_1170-992.jpg" },
{ id: "t2", name: "Jane D.", role: "UI Designer", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bright-curly-woman-dressed-blue-jacket-glasses-stands-with-serious-emotions-pink_291650-1099.jpg" },
{ id: "t3", name: "Mark S.", role: "Product Manager", imageSrc: "http://img.b2bpic.net/free-photo/technician-optimizing-data-center-equipment-maximum-efficiency_482257-117650.jpg" }
]}
title="Key Contributors."
description="Often collaborating with industry specialists to expand project capabilities."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={true}
testimonials={[
{
id: "1",
name: "Alice M.",
role: "Director",
company: "TechStream",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg?_wi=2",
},
{
id: "2",
name: "Bob B.",
role: "Founder",
company: "StartupX",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg?_wi=2",
},
{
id: "3",
name: "Charlie C.",
role: "CTO",
company: "Innovate",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/user-profile-icon-front-side_187299-39596.jpg?_wi=2",
},
{
id: "4",
name: "Diana D.",
role: "Manager",
company: "DataCorp",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/user-front-side-with-white-background_187299-40007.jpg?_wi=2",
},
{
id: "5",
name: "Evan E.",
role: "Product Lead",
company: "GrowthIQ",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-vector/linear-flat-people-faces-icon-set-social-media-avatar-userpic-profiles_1416-508.jpg?_wi=2",
},
]}
title="What Clients Say."
description="Building lasting relationships through reliable, professional results."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={true}
testimonials={[
{ id: "1", name: "Alice M.", role: "Director", company: "TechStream", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg" },
{ id: "2", name: "Bob B.", role: "Founder", company: "StartupX", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg" },
{ id: "3", name: "Charlie C.", role: "CTO", company: "Innovate", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/user-profile-icon-front-side_187299-39596.jpg" },
{ id: "4", name: "Diana D.", role: "Manager", company: "DataCorp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/user-front-side-with-white-background_187299-40007.jpg" },
{ id: "5", name: "Evan E.", role: "Product Lead", company: "GrowthIQ", rating: 5, imageSrc: "http://img.b2bpic.net/free-vector/linear-flat-people-faces-icon-set-social-media-avatar-userpic-profiles_1416-508.jpg" }
]}
title="What Clients Say."
description="Building lasting relationships through reliable, professional results."
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "How do you handle project timelines?",
content: "I use agile methodology and detailed milestones.",
},
{
id: "f2",
title: "What is your typical stack?",
content: "React, Next.js, and TypeScript are my go-to tools.",
},
{
id: "f3",
title: "Do you provide maintenance?",
content: "Yes, I offer monthly maintenance and support packages.",
},
]}
title="Frequently Asked."
description="Clear answers to standard questions about the hiring and development process."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "How do you handle project timelines?", content: "I use agile methodology and detailed milestones." },
{ id: "f2", title: "What is your typical stack?", content: "React, Next.js, and TypeScript are my go-to tools." },
{ id: "f3", title: "Do you provide maintenance?", content: "Yes, I offer monthly maintenance and support packages." }
]}
title="Frequently Asked."
description="Clear answers to standard questions about the hiring and development process."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={true}
background={{
variant: "gradient-bars",
}}
text="Ready to discuss your project? Let's build something extraordinary together."
buttons={[
{
text: "Email Me",
href: "mailto:hello@example.com",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={true}
background={{ variant: "gradient-bars" }}
text="Ready to discuss your project? Let's build something extraordinary together."
buttons={[{ text: "Email Me", href: "mailto:hello@example.com" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Company",
items: [
{
label: "About",
href: "#about",
},
{
label: "Careers",
href: "#",
},
],
},
{
title: "Connect",
items: [
{
label: "Twitter",
href: "https://twitter.com",
},
{
label: "LinkedIn",
href: "https://linkedin.com",
},
],
},
]}
bottomLeftText="© 2024 DevFolio."
bottomRightText="All rights reserved."
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Careers", href: "#" }] },
{ title: "Connect", items: [{ label: "Twitter", href: "https://twitter.com" }, { label: "LinkedIn", href: "https://linkedin.com" }] }
]}
bottomLeftText="© 2024 DevFolio."
bottomRightText="All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}