Merge version_1 into main #6
@@ -11,8 +11,8 @@ import { DM_Serif_Display, Inter } from "next/font/google";
|
||||
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'AzaanUllah Khan | Premium Web Design Portfolio',
|
||||
description: 'Freelance web designer building premium, conversion-focused websites for US service businesses. High-performance design & development.',
|
||||
title: 'Home',
|
||||
description: 'Welcome to our website.',
|
||||
};
|
||||
|
||||
const dmSerif = DM_Serif_Display({ variable: "--font-dm-serif", subsets: ["latin"], weight: ["400"] }); const inter = Inter({ variable: "--font-inter", subsets: ["latin"] });
|
||||
|
||||
138
src/app/page.tsx
138
src/app/page.tsx
@@ -1,4 +1,4 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
@@ -12,149 +12,45 @@ import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
|
||||
const navItems = [{ name: "Home", id: "/" }];
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ThemeProvider>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" }
|
||||
]}
|
||||
brandName="AzaanUllah Khan"
|
||||
/>
|
||||
<NavbarStyleApple navItems={navItems} />
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Websites that win clients for you."
|
||||
description="I design and build premium websites for US service businesses — focused on conversions, not just aesthetics."
|
||||
tag="Available for new projects"
|
||||
buttons={[{ text: "View my work", href: "#work" }, { text: "Book a free call →", href: "#cta" }]}
|
||||
carouselItems={[
|
||||
{id: "c1", imageSrc: "http://img.b2bpic.net/free-photo/close-up-tidy-workspace-with-laptop_23-2148592296.jpg", imageAlt: "minimal web design office desk"},
|
||||
{id: "c2", imageSrc: "http://img.b2bpic.net/free-photo/webpage-content-design-website-icon_53876-120651.jpg", imageAlt: "web design project display screen"},
|
||||
{id: "c3", imageSrc: "http://img.b2bpic.net/free-photo/adult-businessman-sweater-intently-using-smartphone-while-working-laptop-city-cafe_574295-4320.jpg", imageAlt: "professional freelancer working on laptop"},
|
||||
{id: "c4", imageSrc: "http://img.b2bpic.net/free-photo/hobby-education-academic-knowledge-book-study-concept_53876-124406.jpg", imageAlt: "abstract minimalist graphic design background"},
|
||||
{id: "c5", imageSrc: "http://img.b2bpic.net/free-photo/side-view-hands-holding-paper_23-2149930960.jpg", imageAlt: "design mockup on professional screen"},
|
||||
{id: "c6", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-office-space-cartoon-style_23-2151043395.jpg", imageAlt: "modern studio interior minimalist"}
|
||||
]}
|
||||
title="Welcome"
|
||||
description="Experience the future."
|
||||
background={{ variant: "plain" }}
|
||||
carouselItems={Array.from({ length: 6 }).map((_, i) => ({ id: i.toString() }))}
|
||||
/>
|
||||
</div>
|
||||
<div id="trust" data-section="trust">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["TechCorp", "GrowthCo", "InnovateLab", "StartupXYZ", "AgencyFlow", "DigitalEdge", "PixelPerfect"]}
|
||||
title="Trusted by ambitious teams"
|
||||
description="Companies that demand exceptional digital results."
|
||||
/>
|
||||
<SocialProofOne names={["Company 1", "Company 2"]} title="Trusted By" />
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardMedia
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{id: "s1", title: "Web Design", description: "High-fidelity, conversion-focused interfaces tailored to your business goals.", tag: "Design", imageSrc: "http://img.b2bpic.net/free-photo/website-development-layout-sketch-drawing_53876-124188.jpg"},
|
||||
{id: "s2", title: "Web Development", description: "Blazing fast, secure, and responsive builds optimized for performance.", tag: "Development", imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884869.jpg"},
|
||||
{id: "s3", title: "Conversion Strategy", description: "Data-informed layout decisions to guide visitors toward specific actions.", tag: "Strategy", imageSrc: "http://img.b2bpic.net/free-photo/business-chart-visual-graphics-report-concept_53876-167093.jpg"}
|
||||
]}
|
||||
title="Services built for conversion"
|
||||
description="Premium design systems and high-converting web experiences."
|
||||
/>
|
||||
<FeatureCardMedia features={[{ id: "1", title: "Service", description: "Desc", tag: "Tag" }]} animationType="none" title="Services" />
|
||||
</div>
|
||||
<div id="work" data-section="work">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{id: "p1", name: "Law Firm Houston", price: "1.5x Leads", imageSrc: "http://img.b2bpic.net/free-photo/law-judgement-rights-weighing-legal-concept_53876-124060.jpg"},
|
||||
{id: "p2", name: "Tech Startup Platform", price: "20% Retention", imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-landing-page_52683-69728.jpg"},
|
||||
{id: "p3", name: "Clinic Web Portal", price: "100% Satisfaction", imageSrc: "http://img.b2bpic.net/free-photo/indian-physician-consulting-patient-medical-facility-chroma-key_482257-118431.jpg"},
|
||||
{id: "p4", name: "Luxury Real Estate", price: "30% Increase", imageSrc: "http://img.b2bpic.net/free-psd/real-estate-building-web-template_23-2149324968.jpg"},
|
||||
{id: "p5", name: "Fashion Storefront", price: "50% Conversion", imageSrc: "http://img.b2bpic.net/free-photo/woman-working-laptop-stairs-warm-light-home-office_169016-69174.jpg"},
|
||||
{id: "p6", name: "Analytics Software", price: "2x Speed", imageSrc: "http://img.b2bpic.net/free-photo/financial-application-ui-pc-screen-showing-company-revenue_482257-119232.jpg"}
|
||||
]}
|
||||
title="Selected projects"
|
||||
description="A collection of premium digital experiences."
|
||||
/>
|
||||
<ProductCardOne gridVariant="bento-grid" animationType="none" textboxLayout="default" title="Our Work" />
|
||||
</div>
|
||||
<div id="process" data-section="process">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{id: "m1", value: "Discovery", title: "Define & Research", description: "Deep dive into your business and audience needs.", imageSrc: "http://img.b2bpic.net/free-photo/two-espionage-agents-reviewing-confidential-documents-vintage-library_482257-113968.jpg"},
|
||||
{id: "m2", value: "Execution", title: "Design & Build", description: "Iterative design and development with full transparency.", imageSrc: "http://img.b2bpic.net/free-vector/professional-dashboard-user-panel_23-2148368370.jpg"},
|
||||
{id: "m3", value: "Delivery", title: "Launch & Optimize", description: "Deployment, testing, and continuous improvement cycles.", imageSrc: "http://img.b2bpic.net/free-photo/indian-medic-consulting-her-patient-medical-facility-copy-space_482257-118104.jpg"}
|
||||
]}
|
||||
title="My process"
|
||||
description="Strategic, iterative, and transparent."
|
||||
/>
|
||||
<MetricCardEleven metrics={[{ id: "1", value: "100", title: "Metric", description: "Desc", imageSrc: "/placeholder.jpg" }]} animationType="none" title="Process" />
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{id: "t1", name: "Sarah J.", role: "CEO", testimonial: "Exceptional vision and execution. Results exceeded expectations.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-fashionable-young-blonde-female-dressed-stylish-clothes-posing-isolated-looking-up-with-eyes-expressing-interest-curiosity-opening-mouth-human-facial-expressions_343059-4360.jpg"},
|
||||
{id: "t2", name: "Michael C.", role: "CTO", testimonial: "AzaanUllah delivers professional, high-impact results every single time.", imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-office-holding-tablet_23-2148356266.jpg"},
|
||||
{id: "t3", name: "Emily R.", role: "Marketing Dir", testimonial: "The best investment for our digital conversion strategy.", imageSrc: "http://img.b2bpic.net/free-photo/experienced-grey-haired-businessman-standing_74855-9871.jpg"},
|
||||
{id: "t4", name: "David K.", role: "Product Manager", testimonial: "Expert design sense paired with clean, reliable development.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg"},
|
||||
{id: "t5", name: "Jessica L.", role: "Founder", testimonial: "Professional, quick, and highly skilled. Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/female-employee-black-suit-looks-regretful_114579-15074.jpg"}
|
||||
]}
|
||||
title="Client feedback"
|
||||
description="Words from partners I've helped succeed."
|
||||
/>
|
||||
<TestimonialCardTwo testimonials={[{ id: "1", name: "Name", role: "Role", testimonial: "Testimonial" }]} animationType="none" title="Testimonials" textboxLayout="default" />
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{id: "f1", title: "How long does a project take?", content: "Typical project duration ranges from 3 to 6 weeks depending on scale."},
|
||||
{id: "f2", title: "Do you offer ongoing support?", content: "Yes, I offer monthly retainers for maintenance and growth optimization."},
|
||||
{id: "f3", title: "What tools do you use?", content: "Primarily Webflow, React, Next.js, and Framer for high-fidelity prototyping."}
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/fashionable-young-man-reading-e-book-his-generic-laptop-leaning-his-elbow-looking-interested-confident-freelancer-using-notebook-pc-remote-work-enjoying-rest-coffee-break_273609-1940.jpg"
|
||||
title="Common questions"
|
||||
description="Answers to get us started."
|
||||
faqsAnimation="slide-up"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
<FaqSplitMedia faqs={[{ id: "1", title: "Q", content: "A" }]} mediaAnimation="none" faqsAnimation="none" textboxLayout="default" title="FAQ" />
|
||||
</div>
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
text="Let's build something that works."
|
||||
buttons={[{ text: "Book my free call →", href: "#" }]}
|
||||
/>
|
||||
<ContactText text="Contact Us" background={{ variant: "plain" }} />
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{title: "Sitemap", items: [{label: "Services", href: "#services"}, {label: "Portfolio", href: "#work"}, {label: "Process", href: "#process"}]},
|
||||
{title: "Legal", items: [{label: "Privacy Policy", href: "#"}, {label: "Terms of Service", href: "#"}]}
|
||||
]}
|
||||
bottomLeftText="© 2024 AzaanUllah Khan."
|
||||
bottomRightText="Usually responds within 24 hours."
|
||||
/>
|
||||
<FooterSimple columns={[]} bottomLeftText="© 2024" bottomRightText="All Rights Reserved" />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user