Merge version_1 into main #6

Merged
bender merged 2 commits from version_1 into main 2026-04-22 16:29:35 +00:00
2 changed files with 19 additions and 123 deletions

View File

@@ -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"] });

View File

@@ -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>
);