Merge version_1 into main #2
360
src/app/page.tsx
360
src/app/page.tsx
@@ -32,130 +32,48 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "#portfolio",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "#testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Portfolio", id: "#portfolio" },
|
||||
{ name: "Testimonials", id: "#testimonials" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
brandName="Portfolio"
|
||||
button={{
|
||||
text: "Get in touch",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Get in touch", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Your Work. Your Story. Your Next Opportunity."
|
||||
description="Showcase your best projects and let your expertise speak for itself. Make a lasting impression on clients and employers who matter."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah J.",
|
||||
handle: "@sarahj",
|
||||
testimonial: "Exceptional work on our branding project. Professional and creative.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-talking-phone_1153-895.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mark D.",
|
||||
handle: "@markd",
|
||||
testimonial: "The design quality is top-notch. Highly recommended professional.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-using-smartphone-night-city-lights_23-2149024702.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena R.",
|
||||
handle: "@elenar",
|
||||
testimonial: "Transformed our digital presence with incredible insight.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-attractive-redhead-female-student-sits-armchair-leaning-arms-smiling_197531-22962.jpg",
|
||||
},
|
||||
{
|
||||
name: "David K.",
|
||||
handle: "@davidk",
|
||||
testimonial: "Reliable and insightful. A fantastic partner.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-drinking-coffee-spacious-cafeteria_23-2150424004.jpg",
|
||||
},
|
||||
{
|
||||
name: "Lucy M.",
|
||||
handle: "@lucym",
|
||||
testimonial: "Delivered beyond our expectations every time.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-sad-expression_1194-2739.jpg",
|
||||
},
|
||||
{ name: "Sarah J.", handle: "@sarahj", testimonial: "Exceptional work on our branding project. Professional and creative.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-talking-phone_1153-895.jpg" },
|
||||
{ name: "Mark D.", handle: "@markd", testimonial: "The design quality is top-notch. Highly recommended professional.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-using-smartphone-night-city-lights_23-2149024702.jpg" },
|
||||
{ name: "Elena R.", handle: "@elenar", testimonial: "Transformed our digital presence with incredible insight.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-attractive-redhead-female-student-sits-armchair-leaning-arms-smiling_197531-22962.jpg" },
|
||||
{ name: "David K.", handle: "@davidk", testimonial: "Reliable and insightful. A fantastic partner.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/person-drinking-coffee-spacious-cafeteria_23-2150424004.jpg" },
|
||||
{ name: "Lucy M.", handle: "@lucym", testimonial: "Delivered beyond our expectations every time.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-sad-expression_1194-2739.jpg" }
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "View My Work",
|
||||
href: "#portfolio",
|
||||
},
|
||||
{
|
||||
text: "Contact Me",
|
||||
href: "#contact",
|
||||
},
|
||||
{ text: "View My Work", href: "#portfolio" },
|
||||
{ text: "Contact Me", href: "#contact" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/flat-lay-desktop-with-laptop-headphones_23-2148430894.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/flat-lay-desktop-with-laptop-headphones_23-2148430894.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/workspace-minimal-style_53876-16545.jpg",
|
||||
alt: "Creative professional",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/top-view-ring-binder_23-2149568988.jpg",
|
||||
alt: "Collaborator profile",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/desktop-with-mobile-phone_23-2148128818.jpg",
|
||||
alt: "Project lead",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/composition-with-laptop-notepad_23-2147982595.jpg",
|
||||
alt: "Client partner",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-excited-person-portrait_23-2151186655.jpg",
|
||||
alt: "Design director",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/workspace-minimal-style_53876-16545.jpg", alt: "Creative professional" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/top-view-ring-binder_23-2149568988.jpg", alt: "Collaborator profile" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/desktop-with-mobile-phone_23-2148128818.jpg", alt: "Project lead" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/composition-with-laptop-notepad_23-2147982595.jpg", alt: "Client partner" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-excited-person-portrait_23-2151186655.jpg", alt: "Design director" }
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Strategy",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Branding",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "UI/UX Design",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Web Development",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Digital Product",
|
||||
},
|
||||
{ type: "text", text: "Strategy" },
|
||||
{ type: "text", text: "Branding" },
|
||||
{ type: "text", text: "UI/UX Design" },
|
||||
{ type: "text", text: "Web Development" },
|
||||
{ type: "text", text: "Digital Product" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -165,8 +83,7 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
title="A Creative Professional"
|
||||
description={[
|
||||
"I specialize in building clean, impactful digital experiences that translate complex ideas into intuitive design.",
|
||||
"With a focus on detail and functionality, I help brands and individuals stand out in crowded digital spaces.",
|
||||
"I specialize in building clean, impactful digital experiences that translate complex ideas into intuitive design.", "With a focus on detail and functionality, I help brands and individuals stand out in crowded digital spaces."
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -178,41 +95,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Strategy",
|
||||
description: "Defining clear goals and roadmaps for complex projects.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/website-creation-process-line-icons-set-with-prototyping-research-development_1284-8213.jpg",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/words-strategy-notebook-white-background_1357-147.jpg",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-desktop-with-laptop-headphones_23-2148430894.jpg?_wi=2",
|
||||
imageAlt: "digital design process workflow icon",
|
||||
title: "Strategy", description: "Defining clear goals and roadmaps for complex projects.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-vector/website-creation-process-line-icons-set-with-prototyping-research-development_1284-8213.jpg", imageAlt: "digital design process workflow icon" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/words-strategy-notebook-white-background_1357-147.jpg" }
|
||||
},
|
||||
{
|
||||
title: "Branding",
|
||||
description: "Crafting unique visual identities that build lasting trust.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/be-creative-fresh-ideas-solution-innovation-concept_53876-123677.jpg",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-arrangement-3d-glasses_23-2149487729.jpg",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-men-sitting-chair-with-white-t-shirt-sunglasses-street_1153-6668.jpg",
|
||||
imageAlt: "digital design process workflow icon",
|
||||
title: "Branding", description: "Crafting unique visual identities that build lasting trust.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/be-creative-fresh-ideas-solution-innovation-concept_53876-123677.jpg", imageAlt: "digital design process workflow icon" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/abstract-arrangement-3d-glasses_23-2149487729.jpg" }
|
||||
},
|
||||
{
|
||||
title: "Interface Design",
|
||||
description: "Creating intuitive, accessible, and beautiful user interfaces.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/corporate-advisor-planning-report-with-vr-glasses-desk_482257-77584.jpg",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/back-view-woman-working-desk_23-2148521598.jpg",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/printer-icon-computer-page-digital-paper-concept_53876-124304.jpg?_wi=1",
|
||||
imageAlt: "digital design process workflow icon",
|
||||
},
|
||||
title: "Interface Design", description: "Creating intuitive, accessible, and beautiful user interfaces.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/corporate-advisor-planning-report-with-vr-glasses-desk_482257-77584.jpg", imageAlt: "digital design process workflow icon" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/back-view-woman-working-desk_23-2148521598.jpg" }
|
||||
}
|
||||
]}
|
||||
showStepNumbers={true}
|
||||
title="My Expertise"
|
||||
@@ -227,60 +120,12 @@ export default function LandingPage() {
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "Tech",
|
||||
name: "Dashboard Design",
|
||||
price: "2023",
|
||||
rating: 5,
|
||||
reviewCount: "UI",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/printer-icon-computer-page-digital-paper-concept_53876-124304.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
brand: "App",
|
||||
name: "Mobile Utility",
|
||||
price: "2024",
|
||||
rating: 5,
|
||||
reviewCount: "UX",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dating-app-interface-smartphone_23-2149374755.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
brand: "Brand",
|
||||
name: "Identity Refresh",
|
||||
price: "2023",
|
||||
rating: 5,
|
||||
reviewCount: "Brand",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-desk_23-2150440912.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
brand: "Print",
|
||||
name: "Event Poster",
|
||||
price: "2024",
|
||||
rating: 5,
|
||||
reviewCount: "Print",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blank-open-folded-paper-brochure-template_9975-134356.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
brand: "Web",
|
||||
name: "E-commerce Site",
|
||||
price: "2023",
|
||||
rating: 5,
|
||||
reviewCount: "Web",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/notification-bell-left-side_187299-45258.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
brand: "Art",
|
||||
name: "Digital Concept",
|
||||
price: "2024",
|
||||
rating: 5,
|
||||
reviewCount: "Art",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-illustration-graphic-designer_23-2151536981.jpg",
|
||||
},
|
||||
{ id: "1", brand: "Tech", name: "Dashboard Design", price: "2023", rating: 5, reviewCount: "UI", imageSrc: "http://img.b2bpic.net/free-photo/printer-icon-computer-page-digital-paper-concept_53876-124304.jpg" },
|
||||
{ id: "2", brand: "App", name: "Mobile Utility", price: "2024", rating: 5, reviewCount: "UX", imageSrc: "http://img.b2bpic.net/free-photo/dating-app-interface-smartphone_23-2149374755.jpg" },
|
||||
{ id: "3", brand: "Brand", name: "Identity Refresh", price: "2023", rating: 5, reviewCount: "Brand", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-desk_23-2150440912.jpg" },
|
||||
{ id: "4", brand: "Print", name: "Event Poster", price: "2024", rating: 5, reviewCount: "Print", imageSrc: "http://img.b2bpic.net/free-photo/blank-open-folded-paper-brochure-template_9975-134356.jpg" },
|
||||
{ id: "5", brand: "Web", name: "E-commerce Site", price: "2023", rating: 5, reviewCount: "Web", imageSrc: "http://img.b2bpic.net/free-photo/notification-bell-left-side_187299-45258.jpg" },
|
||||
{ id: "6", brand: "Art", name: "Digital Concept", price: "2024", rating: 5, reviewCount: "Art", imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-illustration-graphic-designer_23-2151536981.jpg" }
|
||||
]}
|
||||
title="Selected Works"
|
||||
description="A showcase of recent professional projects."
|
||||
@@ -294,27 +139,9 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "50+",
|
||||
title: "Projects Completed",
|
||||
description: "Across diverse industries.",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "15+",
|
||||
title: "Satisfied Clients",
|
||||
description: "Long-term partnerships.",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "5Y",
|
||||
title: "Experience",
|
||||
description: "Of professional design.",
|
||||
icon: Award,
|
||||
},
|
||||
{ id: "m1", value: "50+", title: "Projects Completed", description: "Across diverse industries.", icon: CheckCircle },
|
||||
{ id: "m2", value: "15+", title: "Satisfied Clients", description: "Long-term partnerships.", icon: Users },
|
||||
{ id: "m3", value: "5Y", title: "Experience", description: "Of professional design.", icon: Award }
|
||||
]}
|
||||
title="Professional Impact"
|
||||
description="Measuring success through tangible results."
|
||||
@@ -326,46 +153,11 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
title: "Great Collaboration",
|
||||
quote: "Creative and professional.",
|
||||
name: "Sarah J.",
|
||||
role: "CEO",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-beautiful-woman-posing_23-2150725526.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
title: "Amazing Results",
|
||||
quote: "Top-notch design quality.",
|
||||
name: "Mark D.",
|
||||
role: "CTO",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-teenage-girl-sitting-cafe_1262-3048.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
title: "Total Transformation",
|
||||
quote: "Incredible digital insight.",
|
||||
name: "Elena R.",
|
||||
role: "Manager",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/two-business-people-using-laptop-meeting-coffee-shop-business-concept_58466-16024.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
title: "Very Reliable",
|
||||
quote: "Delivered on time and budget.",
|
||||
name: "David K.",
|
||||
role: "Director",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/upbeat-saleswoman-hired-explain-vehicle-pricing-options-clients_482257-118422.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
title: "Highly Recommend",
|
||||
quote: "A true design partner.",
|
||||
name: "Lucy M.",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-manager-enjoying-work-break_1262-20856.jpg",
|
||||
},
|
||||
{ id: "t1", title: "Great Collaboration", quote: "Creative and professional.", name: "Sarah J.", role: "CEO", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-beautiful-woman-posing_23-2150725526.jpg" },
|
||||
{ id: "t2", title: "Amazing Results", quote: "Top-notch design quality.", name: "Mark D.", role: "CTO", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-teenage-girl-sitting-cafe_1262-3048.jpg" },
|
||||
{ id: "t3", title: "Total Transformation", quote: "Incredible digital insight.", name: "Elena R.", role: "Manager", imageSrc: "http://img.b2bpic.net/free-photo/two-business-people-using-laptop-meeting-coffee-shop-business-concept_58466-16024.jpg" },
|
||||
{ id: "t4", title: "Very Reliable", quote: "Delivered on time and budget.", name: "David K.", role: "Director", imageSrc: "http://img.b2bpic.net/free-photo/upbeat-saleswoman-hired-explain-vehicle-pricing-options-clients_482257-118422.jpg" },
|
||||
{ id: "t5", title: "Highly Recommend", quote: "A true design partner.", name: "Lucy M.", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-manager-enjoying-work-break_1262-20856.jpg" }
|
||||
]}
|
||||
title="Client Feedback"
|
||||
description="What partners and clients say about working together."
|
||||
@@ -377,21 +169,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "What is your process?",
|
||||
content: "I follow a design-thinking process focused on research and iteration.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Do you work remotely?",
|
||||
content: "Yes, I am fully equipped to collaborate with teams globally.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "What tools do you use?",
|
||||
content: "I use industry-standard tools like Figma, Adobe CC, and Webflow.",
|
||||
},
|
||||
{ id: "q1", title: "What is your process?", content: "I follow a design-thinking process focused on research and iteration." },
|
||||
{ id: "q2", title: "Do you work remotely?", content: "Yes, I am fully equipped to collaborate with teams globally." },
|
||||
{ id: "q3", title: "What tools do you use?", content: "I use industry-standard tools like Figma, Adobe CC, and Webflow." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/group-businesspeople-watching-presentation-tablet_1262-20542.jpg"
|
||||
title="Common Inquiries"
|
||||
@@ -403,9 +183,7 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Contact"
|
||||
title="Let's Connect"
|
||||
description="Looking for a partner on your next project? Get in touch today."
|
||||
@@ -418,44 +196,12 @@ export default function LandingPage() {
|
||||
<FooterBaseCard
|
||||
logoText="Portfolio"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Portfolio",
|
||||
href: "#portfolio",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "GitHub",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Navigation", items: [{ label: "About", href: "#about" }, { label: "Portfolio", href: "#portfolio" }, { label: "Contact", href: "#contact" }] },
|
||||
{ title: "Social", items: [{ label: "LinkedIn", href: "#" }, { label: "Twitter", href: "#" }, { label: "GitHub", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user