Merge version_1 into main #2
267
src/app/page.tsx
267
src/app/page.tsx
@@ -32,22 +32,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Work",
|
||||
id: "#projects",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "Work", id: "#projects" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="DesignerName"
|
||||
/>
|
||||
@@ -55,53 +43,19 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardDashboard
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
title="Crafting Digital Experiences"
|
||||
description="I transform ideas into exceptional digital products. Elevating brands through thoughtful design and seamless code."
|
||||
dashboard={{
|
||||
title: "Portfolio Performance",
|
||||
stats: [
|
||||
{
|
||||
title: "Projects",
|
||||
values: [
|
||||
120,
|
||||
5,
|
||||
10,
|
||||
],
|
||||
description: "Successful Launches",
|
||||
},
|
||||
{
|
||||
title: "Clients",
|
||||
values: [
|
||||
80,
|
||||
2,
|
||||
5,
|
||||
],
|
||||
description: "Global Brands",
|
||||
},
|
||||
{
|
||||
title: "Years",
|
||||
values: [
|
||||
7,
|
||||
1,
|
||||
1,
|
||||
],
|
||||
description: "Professional Experience",
|
||||
},
|
||||
title: "Portfolio Performance", stats: [
|
||||
{ title: "Projects", values: [120, 5, 10], description: "Successful Launches" },
|
||||
{ title: "Clients", values: [80, 2, 5], description: "Global Brands" },
|
||||
{ title: "Years", values: [7, 1, 1], description: "Professional Experience" },
|
||||
],
|
||||
logoIcon: Zap,
|
||||
sidebarItems: [
|
||||
{
|
||||
icon: LayoutDashboard,
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
icon: Layers,
|
||||
},
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdBkwCIn1mUe7Y59ZEDpn23a5c/professional-web-design-portfolio-hero-b-1774809433574-ef97d379.png?_wi=1",
|
||||
sidebarItems: [{ icon: LayoutDashboard, active: true }, { icon: Layers }],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdBkwCIn1mUe7Y59ZEDpn23a5c/professional-web-design-portfolio-hero-b-1774809433574-ef97d379.png", buttons: [],
|
||||
listItems: []
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -111,33 +65,13 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "UI/UX Design",
|
||||
description: "User-centric interfaces that convert.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: MousePointer,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdBkwCIn1mUe7Y59ZEDpn23a5c/professional-web-design-portfolio-hero-b-1774809433574-ef97d379.png?_wi=2",
|
||||
imageAlt: "Professional web design portfolio hero background with an elegant, modern dark UI dashboard interfac",
|
||||
},
|
||||
{
|
||||
title: "Web Development",
|
||||
description: "Robust, scalable codebases.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Code,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdBkwCIn1mUe7Y59ZEDpn23a5c/abstract-geometric-shapes-for-creative-w-1774809433543-c2a13352.png",
|
||||
imageAlt: "Abstract geometric shapes for creative web design, soft lighting, professional dark studio photograp",
|
||||
},
|
||||
{
|
||||
title: "Brand Identity",
|
||||
description: "Cohesive brand visual languages.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Palette,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdBkwCIn1mUe7Y59ZEDpn23a5c/minimalist-digital-design-concept-vector-1774809432934-e1532685.png",
|
||||
imageAlt: "Minimalist digital design concept, vector art, sophisticated dark mode UI.",
|
||||
},
|
||||
{ title: "UI/UX Design", description: "User-centric interfaces that convert.", bentoComponent: "reveal-icon", icon: MousePointer },
|
||||
{ title: "Web Development", description: "Robust, scalable codebases.", bentoComponent: "reveal-icon", icon: Code },
|
||||
{ title: "Brand Identity", description: "Cohesive brand visual languages.", bentoComponent: "reveal-icon", icon: Palette },
|
||||
]}
|
||||
title="Core Expertise"
|
||||
description="Comprehensive design solutions tailored to your business needs."
|
||||
animationType="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -147,21 +81,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "SaaS Platform",
|
||||
description: "Optimized dashboard for enterprise analytics.",
|
||||
icon: LineChart,
|
||||
},
|
||||
{
|
||||
title: "E-Commerce",
|
||||
description: "High-conversion shop for luxury goods.",
|
||||
icon: ShoppingBag,
|
||||
},
|
||||
{
|
||||
title: "Mobile App",
|
||||
description: "Native fintech application design.",
|
||||
icon: Smartphone,
|
||||
},
|
||||
{ title: "SaaS Platform", description: "Optimized dashboard for enterprise analytics.", icon: LineChart },
|
||||
{ title: "E-Commerce", description: "High-conversion shop for luxury goods.", icon: ShoppingBag },
|
||||
{ title: "Mobile App", description: "Native fintech application design.", icon: Smartphone },
|
||||
]}
|
||||
title="Selected Works"
|
||||
description="A collection of recent projects showcasing my design range."
|
||||
@@ -174,14 +96,8 @@ export default function LandingPage() {
|
||||
title="Meet Your Designer"
|
||||
description="With over 7 years of experience, I blend artistic vision with technical precision to build products people love."
|
||||
metrics={[
|
||||
{
|
||||
value: "7+",
|
||||
title: "Years Experience",
|
||||
},
|
||||
{
|
||||
value: "120+",
|
||||
title: "Successful Projects",
|
||||
},
|
||||
{ value: "7+", title: "Years Experience" },
|
||||
{ value: "120+", title: "Successful Projects" },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdBkwCIn1mUe7Y59ZEDpn23a5c/professional-portrait-of-a-web-designer--1774809433711-cefea62d.png"
|
||||
mediaAnimation="slide-up"
|
||||
@@ -193,42 +109,13 @@ export default function LandingPage() {
|
||||
<TestimonialCardSix
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
animationType="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Miller",
|
||||
handle: "@sarah-corp",
|
||||
testimonial: "Exceptional eye for detail and seamless workflow.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdBkwCIn1mUe7Y59ZEDpn23a5c/professional-client-testimonial-headshot-1774809432876-811408ee.png?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "James Smith",
|
||||
handle: "@jsmith",
|
||||
testimonial: "Transformed our digital presence completely.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdBkwCIn1mUe7Y59ZEDpn23a5c/professional-client-testimonial-headshot-1774809433960-2b45940b.png",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena Ross",
|
||||
handle: "@eross",
|
||||
testimonial: "Very professional and highly communicative.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdBkwCIn1mUe7Y59ZEDpn23a5c/professional-client-testimonial-headshot-1774809433000-e363ac6f.png",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Mark D.",
|
||||
handle: "@mdigital",
|
||||
testimonial: "Best design experience I have had so far.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdBkwCIn1mUe7Y59ZEDpn23a5c/professional-client-testimonial-headshot-1774809433240-d6e0f913.png",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jessica Lee",
|
||||
handle: "@jlee-design",
|
||||
testimonial: "A true visionary in the UI design space.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdBkwCIn1mUe7Y59ZEDpn23a5c/professional-client-testimonial-headshot-1774809432876-811408ee.png?_wi=2",
|
||||
},
|
||||
{ id: "1", name: "Sarah Miller", handle: "@sarah-corp", testimonial: "Exceptional eye for detail and seamless workflow.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdBkwCIn1mUe7Y59ZEDpn23a5c/professional-client-testimonial-headshot-1774809432876-811408ee.png" },
|
||||
{ id: "2", name: "James Smith", handle: "@jsmith", testimonial: "Transformed our digital presence completely.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdBkwCIn1mUe7Y59ZEDpn23a5c/professional-client-testimonial-headshot-1774809433960-2b45940b.png" },
|
||||
{ id: "3", name: "Elena Ross", handle: "@eross", testimonial: "Very professional and highly communicative.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdBkwCIn1mUe7Y59ZEDpn23a5c/professional-client-testimonial-headshot-1774809433000-e363ac6f.png" },
|
||||
{ id: "4", name: "Mark D.", handle: "@mdigital", testimonial: "Best design experience I have had so far.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdBkwCIn1mUe7Y59ZEDpn23a5c/professional-client-testimonial-headshot-1774809433240-d6e0f913.png" },
|
||||
{ id: "5", name: "Jessica Lee", handle: "@jlee-design", testimonial: "A true visionary in the UI design space.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdBkwCIn1mUe7Y59ZEDpn23a5c/professional-client-testimonial-headshot-1774809432876-811408ee.png" },
|
||||
]}
|
||||
title="Client Success"
|
||||
description="What partners say about our collaborative process."
|
||||
@@ -242,49 +129,16 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "starter",
|
||||
name: "Starter",
|
||||
price: "$1,500",
|
||||
buttons: [
|
||||
{
|
||||
text: "Get Started",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"1 Landing Page",
|
||||
"Design System Basics",
|
||||
"Responsive Fixes",
|
||||
],
|
||||
id: "starter", name: "Starter", price: "$1,500", buttons: [{ text: "Get Started" }],
|
||||
features: ["1 Landing Page", "Design System Basics", "Responsive Fixes"],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
name: "Professional",
|
||||
price: "$3,500",
|
||||
buttons: [
|
||||
{
|
||||
text: "Get Started",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Full Website",
|
||||
"Brand Strategy",
|
||||
"Priority Support",
|
||||
],
|
||||
id: "pro", name: "Professional", price: "$3,500", buttons: [{ text: "Get Started" }],
|
||||
features: ["Full Website", "Brand Strategy", "Priority Support"],
|
||||
},
|
||||
{
|
||||
id: "enterprise",
|
||||
name: "Enterprise",
|
||||
price: "Custom",
|
||||
buttons: [
|
||||
{
|
||||
text: "Contact Us",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Unlimited Pages",
|
||||
"Custom Dev Support",
|
||||
"Advanced Analytics",
|
||||
],
|
||||
id: "enterprise", name: "Enterprise", price: "Custom", buttons: [{ text: "Contact Us" }],
|
||||
features: ["Unlimited Pages", "Custom Dev Support", "Advanced Analytics"],
|
||||
},
|
||||
]}
|
||||
title="Simple Packages"
|
||||
@@ -297,21 +151,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How do we start?",
|
||||
content: "Book a discovery call so we can discuss your goals.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "How long is a project?",
|
||||
content: "Average projects take 4-8 weeks depending on scope.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Do you provide code?",
|
||||
content: "I provide production-ready, clean source code.",
|
||||
},
|
||||
{ id: "1", title: "How do we start?", content: "Book a discovery call so we can discuss your goals." },
|
||||
{ id: "2", title: "How long is a project?", content: "Average projects take 4-8 weeks depending on scope." },
|
||||
{ id: "3", title: "Do you provide code?", content: "I provide production-ready, clean source code." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Clear answers to help you get started."
|
||||
@@ -322,18 +164,11 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Get In Touch"
|
||||
title="Ready to Build Together?"
|
||||
description="Let's bring your next project to life."
|
||||
buttons={[
|
||||
{
|
||||
text: "Send Email",
|
||||
href: "mailto:hello@designer.com",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Send Email", href: "mailto:hello@designer.com" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -342,29 +177,15 @@ export default function LandingPage() {
|
||||
logoText="DesignerName"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Blog",
|
||||
href: "#",
|
||||
},
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Blog", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
title: "Support", items: [
|
||||
{ label: "Contact", href: "#contact" },
|
||||
{ label: "Privacy", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user