Update src/app/page.tsx
This commit is contained in:
131
src/app/page.tsx
131
src/app/page.tsx
@@ -13,7 +13,7 @@ import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import { BarChart, Search, Smartphone, Sparkles } from "lucide-react";
|
||||
import { BarChart, Search, Smartphone, Sparkles, PhoneCall } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -33,14 +33,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Projects", id: "#projects"},
|
||||
{
|
||||
name: "Results", id: "#metrics"},
|
||||
{
|
||||
name: "Testimonials", id: "#testimonials"},
|
||||
{
|
||||
name: "Contact", id: "#contact"},
|
||||
{ name: "Projects", id: "#projects" },
|
||||
{ name: "Results", id: "#metrics" },
|
||||
{ name: "Testimonials", id: "#testimonials" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Portfolio"
|
||||
/>
|
||||
@@ -48,26 +44,17 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
background={{ variant: "plain" }}
|
||||
title="Web Design That Drives Real Results"
|
||||
description="150 projects completed in 3 years. See how I've transformed businesses through thoughtful, conversion-focused design."
|
||||
tag="Expert Web Design"
|
||||
buttons={[
|
||||
{
|
||||
text: "View My Case Studies", href: "#projects"},
|
||||
{ text: "View My Case Studies", href: "#projects" },
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ddcay4", imageAlt: "web design landing page browser"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4jf1i7", imageAlt: "responsive web design mobile mockup"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dtgsk1", imageAlt: "web analytics conversion dashboard"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=m4oi9c", imageAlt: "web design project gallery grid"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1zfppc", imageAlt: "business growth and conversion concept"},
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ddcay4", imageAlt: "web design landing page browser" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4jf1i7", imageAlt: "responsive web design mobile mockup" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dtgsk1", imageAlt: "web analytics conversion dashboard" },
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
tagIcon={Sparkles}
|
||||
@@ -81,12 +68,9 @@ export default function LandingPage() {
|
||||
title="Strategic Design Methodology"
|
||||
description="My design process bridges the gap between visual aesthetics and tangible business outcomes. By prioritizing conversion metrics, I ensure every pixel serves your business goals."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Business Centric", description: "Design choices based on ROI and conversion metrics."},
|
||||
{
|
||||
title: "Diverse Experience", description: "150 projects across multiple industries."},
|
||||
{
|
||||
title: "Measurable Impact", description: "Trackable results that drive sales."},
|
||||
{ title: "Business Centric", description: "Design choices based on ROI and conversion metrics.", icon: Sparkles },
|
||||
{ title: "Diverse Experience", description: "150 projects across multiple industries.", icon: BarChart },
|
||||
{ title: "Measurable Impact", description: "Trackable results that drive sales.", icon: Smartphone },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xh007t"
|
||||
imageAlt="professional designer headshot"
|
||||
@@ -100,15 +84,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Data Driven", description: "UX based on user behavioral data.", bentoComponent: "reveal-icon", icon: BarChart,
|
||||
},
|
||||
{
|
||||
title: "Mobile First", description: "Seamless responsive experiences.", bentoComponent: "reveal-icon", icon: Smartphone,
|
||||
},
|
||||
{
|
||||
title: "SEO Optimized", description: "Designed for search visibility.", bentoComponent: "reveal-icon", icon: Search,
|
||||
},
|
||||
{ title: "Data Driven", description: "UX based on user behavioral data.", bentoComponent: "reveal-icon", icon: BarChart },
|
||||
{ title: "Mobile First", description: "Seamless responsive experiences.", bentoComponent: "reveal-icon", icon: Smartphone },
|
||||
{ title: "SEO Optimized", description: "Designed for search visibility.", bentoComponent: "reveal-icon", icon: Search },
|
||||
]}
|
||||
title="Our Approach to Excellence"
|
||||
description="We don't just design websites; we create engines for sustainable business growth."
|
||||
@@ -121,12 +99,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", value: "150+", title: "Projects Completed", description: "Successfully delivered in 3 years.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0yne44", imageAlt: "web design project count icon"},
|
||||
{
|
||||
id: "m2", value: "45%", title: "Avg Conversion Increase", description: "Documented improvement per site.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=o2h4es", imageAlt: "conversion rate optimization icon"},
|
||||
{
|
||||
id: "m3", value: "98%", title: "Client Retention", description: "Long-term partnership success rate.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x4jszh", imageAlt: "client satisfaction icon blue"},
|
||||
{ id: "m1", value: "150+", title: "Projects Completed", description: "Successfully delivered in 3 years.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0yne44", imageAlt: "web design project count icon" },
|
||||
{ id: "m2", value: "45%", title: "Avg Conversion Increase", description: "Documented improvement per site.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=o2h4es", imageAlt: "conversion rate optimization icon" },
|
||||
{ id: "m3", value: "98%", title: "Client Retention", description: "Long-term partnership success rate.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x4jszh", imageAlt: "client satisfaction icon blue" },
|
||||
]}
|
||||
title="Proven Results"
|
||||
description="Quantifiable outcomes across my portfolio projects."
|
||||
@@ -140,18 +115,9 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1", name: "SaaS Platform UI", price: "Case Study", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nnvksv", imageAlt: "saas dashboard ui design"},
|
||||
{
|
||||
id: "p2", name: "E-Commerce Launch", price: "Case Study", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=whnd2u", imageAlt: "ecommerce store landing page design"},
|
||||
{
|
||||
id: "p3", name: "Fintech Portal", price: "Case Study", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8ed60a", imageAlt: "fintech website landing page"},
|
||||
{
|
||||
id: "p4", name: "Education App", price: "Case Study", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0a4bff", imageAlt: "education course website layout"},
|
||||
{
|
||||
id: "p5", name: "Health Portal", price: "Case Study", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=og4geh", imageAlt: "health service website layout"},
|
||||
{
|
||||
id: "p6", name: "Agency Portfolio", price: "Case Study", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dn0fa9", imageAlt: "creative agency website design"},
|
||||
{ id: "p1", name: "SaaS Platform UI", price: "Case Study", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nnvksv", imageAlt: "saas dashboard ui design" },
|
||||
{ id: "p2", name: "E-Commerce Launch", price: "Case Study", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=whnd2u", imageAlt: "ecommerce store landing page design" },
|
||||
{ id: "p3", name: "Fintech Portal", price: "Case Study", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8ed60a", imageAlt: "fintech website landing page" },
|
||||
]}
|
||||
title="Featured Projects"
|
||||
description="Selected case studies from my portfolio."
|
||||
@@ -164,16 +130,8 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1", name: "Sarah Miller", role: "CEO", testimonial: "Excellent service and design sense.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4l9yic", imageAlt: "professional business headshot"},
|
||||
{
|
||||
id: "t2", name: "Mark Johnson", role: "CMO", testimonial: "Our conversions doubled after the redesign.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fmysy7", imageAlt: "professional business headshot"},
|
||||
{
|
||||
id: "t3", name: "Elena Rodriguez", role: "Founder", testimonial: "Highly recommended for SME businesses.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=81anus", imageAlt: "professional business headshot"},
|
||||
{
|
||||
id: "t4", name: "David Kim", role: "Marketing Manager", testimonial: "Professional, fast, and results-driven.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ked66q", imageAlt: "professional business headshot"},
|
||||
{
|
||||
id: "t5", name: "Alex Chen", role: "Director", testimonial: "Great attention to detail and UX.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mkruig", imageAlt: "professional business headshot"},
|
||||
{ id: "t1", name: "Sarah Miller", role: "CEO", testimonial: "Excellent service and design sense.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4l9yic", imageAlt: "professional business headshot" },
|
||||
{ id: "t2", name: "Mark Johnson", role: "CMO", testimonial: "Our conversions doubled after the redesign.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fmysy7", imageAlt: "professional business headshot" },
|
||||
]}
|
||||
title="Client Success"
|
||||
description="Hear from our partners."
|
||||
@@ -182,10 +140,7 @@ export default function LandingPage() {
|
||||
|
||||
<div id="socialproof" data-section="socialproof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"TechCorp", "InnovateLab", "GrowthCo", "StartupXYZ", "AgencyGroup", "MarketFlow", "BizSolutions"]}
|
||||
names={["TechCorp", "InnovateLab", "GrowthCo", "StartupXYZ", "AgencyGroup", "MarketFlow", "BizSolutions"]}
|
||||
title="Trusted Partners"
|
||||
description="Companies I have collaborated with."
|
||||
/>
|
||||
@@ -195,14 +150,10 @@ export default function LandingPage() {
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1", title: "How long does a project take?", content: "Depending on complexity, 2-6 weeks."},
|
||||
{
|
||||
id: "f2", title: "Do you offer maintenance?", content: "Yes, we offer ongoing support plans."},
|
||||
{
|
||||
id: "f3", title: "How do we get started?", content: "Schedule a discovery call via the contact form."},
|
||||
{
|
||||
id: "f4", title: "What is a Discovery Call?", content: "A brief 15-minute sync to discuss your business goals, project scope, and confirm we are a great fit before we dive in."},
|
||||
{ id: "f1", title: "How long does a project take?", content: "Depending on complexity, 2-6 weeks." },
|
||||
{ id: "f2", title: "Do you offer maintenance?", content: "Yes, we offer ongoing support plans." },
|
||||
{ id: "f3", title: "How do we get started?", content: "Schedule a discovery call via the contact form." },
|
||||
{ id: "f4", title: "What is a Discovery Call?", content: "A 15-minute sync to discuss your business goals, project scope, and confirm we are a fit before we dive in." },
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
faqsAnimation="slide-up"
|
||||
@@ -212,12 +163,10 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
background={{ variant: "plain" }}
|
||||
text="Ready to transform your business presence? Let's discuss your project goals."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Me", href: "#contact"},
|
||||
{ text: "Contact Me", href: "#contact" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -225,22 +174,8 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Links", items: [
|
||||
{
|
||||
label: "Projects", href: "#projects"},
|
||||
{
|
||||
label: "About", href: "#about"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{
|
||||
label: "Contact", href: "#contact"},
|
||||
{
|
||||
label: "FAQ", href: "#faq"},
|
||||
],
|
||||
},
|
||||
{ title: "Links", items: [{ label: "Projects", href: "#projects" }, { label: "About", href: "#about" }] },
|
||||
{ title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "FAQ", href: "#faq" }] },
|
||||
]}
|
||||
logoText="Portfolio"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user