bender/9ea51409-b89c-4c55-b714-ecf68b3b4664
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-05-28 21:12:06 +00:00
parent df952ccf8d
commit 0f9997f16c
1 changed files with 69 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

342
src/app/page.tsx
View File

@@ -7,7 +7,7 @@ import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
@@ -33,41 +33,25 @@ export default function LandingPage() {
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "#home",
},
name: "Home", id: "#home"},
{
name: "About",
id: "#about",
},
name: "About", id: "#about"},
{
name: "Services",
id: "#services",
},
name: "Services", id: "#services"},
{
name: "Portfolio",
id: "#portfolio",
},
name: "Portfolio", id: "#portfolio"},
{
name: "Clients",
id: "#clients",
},
name: "Clients", id: "#clients"},
{
name: "Testimonials",
id: "#testimonials",
},
name: "Testimonials", id: "#testimonials"},
{
name: "Contact",
id: "#contact",
},
name: "Contact", id: "#contact"},
]}
logoSrc="http://img.b2bpic.net/free-photo/minimalist-business-cards-qwerty-word-concept_23-2148500464.jpg"
logoAlt="Ali Ahmed Logo"
brandName="Ali Ahmed"
button={{
text: "Hire Me",
href: "#contact",
}}
text: "Hire Me", href: "#contact"}}
animateOnLoad={true}
/>
</div>
@@ -75,57 +59,36 @@ export default function LandingPage() {
<div id="home" data-section="home">
<HeroSplitKpi
background={{
variant: "radial-gradient",
}}
variant: "radial-gradient"}}
imagePosition="right"
title="Ali Ahmed: Crafting Visual Stories"
description="An amateur graphic designer specializing in branding, web design, and digital art. Bringing fresh ideas and creative solutions to every project that leaves a lasting impact."
kpis={[
{
value: "3+",
label: "Years Experience",
},
value: "3+", label: "Years Experience"},
{
value: "15+",
label: "Projects Completed",
},
value: "15+", label: "Projects Completed"},
{
value: "5-Star",
label: "Client Rating",
},
value: "5-Star", label: "Client Rating"},
]}
enableKpiAnimation={true}
buttons={[
{
text: "View Portfolio",
href: "#portfolio",
},
text: "View Portfolio", href: "#portfolio"},
{
text: "Get a Quote",
href: "#contact",
},
text: "Get a Quote", href: "#contact"},
]}
avatars={[
{
src: "http://img.b2bpic.net/free-photo/serious-muscular-african-american-model-wearing-blank-white-cotton-t-shirt_346278-995.jpg",
alt: "Client 1",
},
src: "http://img.b2bpic.net/free-photo/serious-muscular-african-american-model-wearing-blank-white-cotton-t-shirt_346278-995.jpg", alt: "Client 1"},
{
src: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-sitting-stairs_1262-3109.jpg",
alt: "Client 2",
},
src: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-sitting-stairs_1262-3109.jpg", alt: "Client 2"},
{
src: "http://img.b2bpic.net/free-photo/portrait-young-afro-businessman-wearing-shirt-black-suit-glasses-looking-front-while-standing-beige-wall_158595-7638.jpg",
alt: "Client 3",
},
src: "http://img.b2bpic.net/free-photo/portrait-young-afro-businessman-wearing-shirt-black-suit-glasses-looking-front-while-standing-beige-wall_158595-7638.jpg", alt: "Client 3"},
{
src: "http://img.b2bpic.net/free-photo/handsome-man-autumn-setting_23-2149056577.jpg",
alt: "Client 4",
},
src: "http://img.b2bpic.net/free-photo/handsome-man-autumn-setting_23-2149056577.jpg", alt: "Client 4"},
{
src: "http://img.b2bpic.net/free-photo/intrigued-handsome-man-cross-arms-chest-smiling-interested-what-happen_176420-26208.jpg",
alt: "Client 5",
},
src: "http://img.b2bpic.net/free-photo/intrigued-handsome-man-cross-arms-chest-smiling-interested-what-happen_176420-26208.jpg", alt: "Client 5"},
]}
avatarText="Trusted by creative businesses"
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-woman-creating-vision-board_23-2150061893.jpg"
@@ -133,57 +96,31 @@ export default function LandingPage() {
mediaAnimation="slide-up"
marqueeItems={[
{
type: "text-icon",
text: "Creative Design",
icon: Palette,
type: "text-icon", text: "Creative Design", icon: Palette,
},
{
type: "text-icon",
text: "Innovative Solutions",
icon: Lightbulb,
type: "text-icon", text: "Innovative Solutions", icon: Lightbulb,
},
{
type: "text-icon",
text: "Pixel Perfect",
icon: Sparkles,
type: "text-icon", text: "Pixel Perfect", icon: Sparkles,
},
{
type: "text-icon",
text: "User-Centric",
icon: Users,
type: "text-icon", text: "User-Centric", icon: Users,
},
{
type: "text-icon",
text: "Digital Artistry",
icon: Paintbrush,
type: "text-icon", text: "Digital Artistry", icon: Paintbrush,
},
]}
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
<TextSplitAbout
useInvertedBackground={false}
title="About Ali Ahmed"
description="Passionate about turning concepts into compelling visual experiences. With a keen eye for detail and a love for innovative design, I help clients bring their visions to life. My journey in graphic design is driven by a desire to learn, create, and deliver impactful results that exceed expectations."
metrics={[
{
value: "3+",
title: "Years of Experience",
},
{
value: "15+",
title: "Projects Successfully Delivered",
},
{
value: "100%",
title: "Client Satisfaction Rate",
},
description={[
"Passionate about turning concepts into compelling visual experiences. With a keen eye for detail and a love for innovative design, I help clients bring their visions to life.", "My journey in graphic design is driven by a desire to learn, create, and deliver impactful results that exceed expectations."
]}
imageSrc="http://img.b2bpic.net/free-photo/female-painter-her-art-studio_273609-12943.jpg"
imageAlt="Ali Ahmed at his design workstation"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
/>
</div>
@@ -194,71 +131,35 @@ export default function LandingPage() {
useInvertedBackground={false}
features={[
{
id: "branding",
label: "Visual Identity",
title: "Branding & Logo Design",
items: [
"Unique Logo Concepts",
"Brand Guidelines",
"Color Palettes",
"Typography Selection",
],
id: "branding", label: "Visual Identity", title: "Branding & Logo Design", items: [
"Unique Logo Concepts", "Brand Guidelines", "Color Palettes", "Typography Selection"],
buttons: [
{
text: "View Branding Projects",
href: "#portfolio",
},
text: "View Branding Projects", href: "#portfolio"},
],
},
{
id: "web-ui",
label: "Digital Presence",
title: "Web & UI/UX Design",
items: [
"Responsive Website Layouts",
"User Experience Flow",
"Intuitive Interface Design",
"Interactive Prototypes",
],
id: "web-ui", label: "Digital Presence", title: "Web & UI/UX Design", items: [
"Responsive Website Layouts", "User Experience Flow", "Intuitive Interface Design", "Interactive Prototypes"],
buttons: [
{
text: "View Web Projects",
href: "#portfolio",
},
text: "View Web Projects", href: "#portfolio"},
],
},
{
id: "print",
label: "Tangible Media",
title: "Print & Editorial Design",
items: [
"Brochures & Flyers",
"Magazine Layouts",
"Book Covers",
"Packaging Design",
],
id: "print", label: "Tangible Media", title: "Print & Editorial Design", items: [
"Brochures & Flyers", "Magazine Layouts", "Book Covers", "Packaging Design"],
buttons: [
{
text: "View Print Projects",
href: "#portfolio",
},
text: "View Print Projects", href: "#portfolio"},
],
},
{
id: "illustration",
label: "Artistic Flair",
title: "Digital Illustration",
items: [
"Custom Digital Art",
"Character Design",
"Iconography",
"Infographics",
],
id: "illustration", label: "Artistic Flair", title: "Digital Illustration", items: [
"Custom Digital Art", "Character Design", "Iconography", "Infographics"],
buttons: [
{
text: "View Illustrations",
href: "#portfolio",
},
text: "View Illustrations", href: "#portfolio"},
],
},
]}
@@ -276,53 +177,17 @@ export default function LandingPage() {
carouselMode="buttons"
products={[
{
id: "project-1",
name: "EcoBrand Logo Relaunch",
price: "Case Study",
variant: "Branding",
imageSrc: "http://img.b2bpic.net/free-photo/glossy-gradient-facebook-logo_23-2152009926.jpg",
imageAlt: "EcoBrand Logo Relaunch",
},
id: "project-1", name: "EcoBrand Logo Relaunch", price: "Case Study", variant: "Branding", imageSrc: "http://img.b2bpic.net/free-photo/glossy-gradient-facebook-logo_23-2152009926.jpg", imageAlt: "EcoBrand Logo Relaunch"},
{
id: "project-2",
name: "Wellness App UI/UX",
price: "View Project",
variant: "Web/UIUX",
imageSrc: "http://img.b2bpic.net/free-photo/protein-gummy-snacks-jar_23-2151119180.jpg",
imageAlt: "Wellness App UI/UX Design",
},
id: "project-2", name: "Wellness App UI/UX", price: "View Project", variant: "Web/UIUX", imageSrc: "http://img.b2bpic.net/free-photo/protein-gummy-snacks-jar_23-2151119180.jpg", imageAlt: "Wellness App UI/UX Design"},
{
id: "project-3",
name: "Artisan Coffee Packaging",
price: "Case Study",
variant: "Packaging",
imageSrc: "http://img.b2bpic.net/free-photo/coffee-bag_187299-47700.jpg",
imageAlt: "Artisan Coffee Packaging Design",
},
id: "project-3", name: "Artisan Coffee Packaging", price: "Case Study", variant: "Packaging", imageSrc: "http://img.b2bpic.net/free-photo/coffee-bag_187299-47700.jpg", imageAlt: "Artisan Coffee Packaging Design"},
{
id: "project-4",
name: "Music Festival Poster Series",
price: "View Series",
variant: "Print",
imageSrc: "http://img.b2bpic.net/free-psd/colorful-pinta-flores-festival-flyer-template_23-2152027992.jpg",
imageAlt: "Music Festival Poster Series",
},
id: "project-4", name: "Music Festival Poster Series", price: "View Series", variant: "Print", imageSrc: "http://img.b2bpic.net/free-psd/colorful-pinta-flores-festival-flyer-template_23-2152027992.jpg", imageAlt: "Music Festival Poster Series"},
{
id: "project-5",
name: "Adventure Magazine Layout",
price: "Case Study",
variant: "Editorial",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g9arm9",
imageAlt: "Adventure Magazine Layout",
},
id: "project-5", name: "Adventure Magazine Layout", price: "Case Study", variant: "Editorial", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g9arm9", imageAlt: "Adventure Magazine Layout"},
{
id: "project-6",
name: "Mascot Character Design",
price: "View Project",
variant: "Illustration",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-cartoon-woman-portrait_23-2151839663.jpg",
imageAlt: "Mascot Character Design",
},
id: "project-6", name: "Mascot Character Design", price: "View Project", variant: "Illustration", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-cartoon-woman-portrait_23-2151839663.jpg", imageAlt: "Mascot Character Design"},
]}
title="My Latest Projects"
description="A curated selection of my recent graphic design work, showcasing versatility, creative problem-solving, and a keen eye for aesthetics."
@@ -334,16 +199,7 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={false}
names={[
"CreativeCo Studios",
"BrandFlow Solutions",
"PixelPerfect Marketing",
"DesignHub Innovators",
"ArtisticLabs Ventures",
"VisionaryStudios Group",
"IdeaForge Agency",
"Evolve Digital",
"Synergy Creative",
]}
"CreativeCo Studios", "BrandFlow Solutions", "PixelPerfect Marketing", "DesignHub Innovators", "ArtisticLabs Ventures", "VisionaryStudios Group", "IdeaForge Agency", "Evolve Digital", "Synergy Creative"]}
title="Collaborated with Leading Innovators"
description="I've had the privilege of working with a diverse range of clients, from budding startups to established brands, helping them achieve their visual communication goals."
speed={40}
@@ -359,50 +215,20 @@ export default function LandingPage() {
carouselMode="buttons"
testimonials={[
{
id: "1",
name: "Sarah Johnson",
handle: "@sarahj",
testimonial: "Ali is an incredibly talented designer. He transformed our brand identity with fresh, modern concepts that perfectly captured our vision. Highly recommend his services!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-attractive-businesswoman-crossing-arms_1262-4724.jpg",
imageAlt: "Sarah Johnson",
},
id: "1", name: "Sarah Johnson", handle: "@sarahj", testimonial: "Ali is an incredibly talented designer. He transformed our brand identity with fresh, modern concepts that perfectly captured our vision. Highly recommend his services!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-attractive-businesswoman-crossing-arms_1262-4724.jpg", imageAlt: "Sarah Johnson"},
{
id: "2",
name: "Michael Chen",
handle: "@michaelc",
testimonial: "Working with Ali on our website UI was a breeze. He understood our needs, communicated clearly, and delivered an intuitive design that our users love.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/bearded-young-man-casual-shirt-standing-with-laptop-hands_93675-134479.jpg",
imageAlt: "Michael Chen",
},
id: "2", name: "Michael Chen", handle: "@michaelc", testimonial: "Working with Ali on our website UI was a breeze. He understood our needs, communicated clearly, and delivered an intuitive design that our users love.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/bearded-young-man-casual-shirt-standing-with-laptop-hands_93675-134479.jpg", imageAlt: "Michael Chen"},
{
id: "3",
name: "Emily Rodriguez",
handle: "@emilyr",
testimonial: "Ali designed a stunning brochure for our new product launch. His attention to detail and creative flair truly made it stand out. A true professional!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/business-woman-banner-concept-with-copy-space_23-2149601533.jpg",
imageAlt: "Emily Rodriguez",
},
id: "3", name: "Emily Rodriguez", handle: "@emilyr", testimonial: "Ali designed a stunning brochure for our new product launch. His attention to detail and creative flair truly made it stand out. A true professional!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/business-woman-banner-concept-with-copy-space_23-2149601533.jpg", imageAlt: "Emily Rodriguez"},
{
id: "4",
name: "David Kim",
handle: "@davidk",
testimonial: "I needed a unique illustration for my project, and Ali delivered beyond expectations. He captured the essence perfectly and was a pleasure to collaborate with.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-correcting-grammar-mistakes_23-2150171372.jpg",
imageAlt: "David Kim",
},
id: "4", name: "David Kim", handle: "@davidk", testimonial: "I needed a unique illustration for my project, and Ali delivered beyond expectations. He captured the essence perfectly and was a pleasure to collaborate with.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-correcting-grammar-mistakes_23-2150171372.jpg", imageAlt: "David Kim"},
{
id: "5",
name: "Jessica Lee",
handle: "@jessical",
testimonial: "Ali's branding work for my startup was exceptional. He created a cohesive visual identity that resonated with my target audience. I'm thrilled with the results!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/being-creative-with-textures-colours_329181-18136.jpg",
imageAlt: "Jessica Lee",
},
id: "5", name: "Jessica Lee", handle: "@jessical", testimonial: "Ali's branding work for my startup was exceptional. He created a cohesive visual identity that resonated with my target audience. I'm thrilled with the results!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/being-creative-with-textures-colours_329181-18136.jpg", imageAlt: "Jessica Lee"},
]}
showRating={true}
title="What My Clients Say"
@@ -416,30 +242,15 @@ export default function LandingPage() {
useInvertedBackground={false}
faqs={[
{
id: "q1",
title: "What is your typical design process?",
content: "My process usually involves initial consultation, concept development, client feedback rounds, revisions, and final delivery. Each project is tailored to specific needs.",
},
id: "q1", title: "What is your typical design process?", content: "My process usually involves initial consultation, concept development, client feedback rounds, revisions, and final delivery. Each project is tailored to specific needs."},
{
id: "q2",
title: "How long does a typical project take?",
content: "Project timelines vary greatly depending on complexity and scope. A logo design might take 2-3 weeks, while a full website UI could take 4-6 weeks or more. We'll establish a clear timeline during our initial consultation.",
},
id: "q2", title: "How long does a typical project take?", content: "Project timelines vary greatly depending on complexity and scope. A logo design might take 2-3 weeks, while a full website UI could take 4-6 weeks or more. We'll establish a clear timeline during our initial consultation."},
{
id: "q3",
title: "What are your payment terms?",
content: "Typically, I require a 50% upfront deposit to begin work, with the remaining 50% due upon project completion and before final file delivery. For larger projects, we can discuss milestone-based payments.",
},
id: "q3", title: "What are your payment terms?", content: "Typically, I require a 50% upfront deposit to begin work, with the remaining 50% due upon project completion and before final file delivery. For larger projects, we can discuss milestone-based payments."},
{
id: "q4",
title: "Do you offer revisions?",
content: "Yes, revisions are a standard part of my process. The number of revision rounds is specified in our project agreement to ensure we achieve the perfect result together.",
},
id: "q4", title: "Do you offer revisions?", content: "Yes, revisions are a standard part of my process. The number of revision rounds is specified in our project agreement to ensure we achieve the perfect result together."},
{
id: "q5",
title: "What file formats do you deliver?",
content: "Final deliverables depend on the project, but generally include common formats like AI, EPS, SVG (for logos), JPG, PNG (for web assets), and PDF (for print). Source files are always provided.",
},
id: "q5", title: "What file formats do you deliver?", content: "Final deliverables depend on the project, but generally include common formats like AI, EPS, SVG (for logos), JPG, PNG (for web assets), and PDF (for print). Source files are always provided."},
]}
title="Frequently Asked Questions"
description="Find answers to common questions about my design process, services, pricing, and how we can work together."
@@ -455,28 +266,17 @@ export default function LandingPage() {
description="Ready to discuss your next design project or just want to say hello? Fill out the form below, and I'll get back to you as soon as possible."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
required: true,
name: "name", type: "text", placeholder: "Your Name", required: true,
},
{
name: "email",
type: "email",
placeholder: "Your Email",
required: true,
name: "email", type: "email", placeholder: "Your Email", required: true,
},
{
name: "subject",
type: "text",
placeholder: "Subject",
required: false,
name: "subject", type: "text", placeholder: "Subject", required: false,
},
]}
textarea={{
name: "message",
placeholder: "Your Message",
rows: 5,
name: "message", placeholder: "Your Message", rows: 5,
required: true,
}}
imageSrc="http://img.b2bpic.net/free-photo/projected-clothes-fashion-week_329181-14338.jpg"
@@ -493,16 +293,12 @@ export default function LandingPage() {
logoAlt="Ali Ahmed Logo"
logoText="Ali Ahmed"
leftLink={{
text: "Privacy Policy",
href: "#",
}}
text: "Privacy Policy", href: "#"}}
rightLink={{
text: "Terms of Service",
href: "#",
}}
text: "Terms of Service", href: "#"}}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}