Merge version_1 into main #2
380
src/app/page.tsx
380
src/app/page.tsx
@@ -16,273 +16,139 @@ import { Layout, Palette, Printer } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Shakir Graphics"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Shakir Graphics"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
logoText="Shakir Graphics"
|
||||
description="Professional graphic design services located in the heart of Talagang. We bring your creative vision to life with precision and expertise."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get in Touch",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "Our Services",
|
||||
href: "#features",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2151273064.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{ variant: "gradient-bars" }}
|
||||
logoText="Shakir Graphics"
|
||||
description="Professional graphic design services located in the heart of Talagang. We bring your creative vision to life with precision and expertise."
|
||||
buttons={[
|
||||
{ text: "Get in Touch", href: "#contact" },
|
||||
{ text: "Our Services", href: "#features" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2151273064.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="About Shakir Graphics"
|
||||
description={[
|
||||
"Serving the Talagang community with top-tier graphic design solutions. We specialize in creative branding, professional print graphics, and customized designs to meet your business needs.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="About Shakir Graphics"
|
||||
description={[
|
||||
"Serving the Talagang community with top-tier graphic design solutions. We specialize in creative branding, professional print graphics, and customized designs to meet your business needs."
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Palette,
|
||||
title: "Custom Branding",
|
||||
description: "Unique logos and brand identities created to stand out.",
|
||||
},
|
||||
{
|
||||
icon: Printer,
|
||||
title: "Print Design",
|
||||
description: "High-quality business cards, brochures, and flyers.",
|
||||
},
|
||||
{
|
||||
icon: Layout,
|
||||
title: "Marketing Collateral",
|
||||
description: "Social media graphics and marketing material layouts.",
|
||||
},
|
||||
]}
|
||||
title="Our Professional Services"
|
||||
description="Expert design solutions tailored for local businesses and individuals."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Palette, title: "Custom Branding", description: "Unique logos and brand identities created to stand out." },
|
||||
{ icon: Printer, title: "Print Design", description: "High-quality business cards, brochures, and flyers." },
|
||||
{ icon: Layout, title: "Marketing Collateral", description: "Social media graphics and marketing material layouts." }
|
||||
]}
|
||||
title="Our Professional Services"
|
||||
description="Expert design solutions tailored for local businesses and individuals."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "500+",
|
||||
title: "Projects Completed",
|
||||
items: [
|
||||
"Branding",
|
||||
"Print",
|
||||
"Digital",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "100%",
|
||||
title: "Client Satisfaction",
|
||||
items: [
|
||||
"Reliable",
|
||||
"Creative",
|
||||
"Professional",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "24/7",
|
||||
title: "Support Ready",
|
||||
items: [
|
||||
"Always",
|
||||
"Available",
|
||||
"Responsive",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Trusted Experience"
|
||||
description="Years of service delivering high-quality design solutions to Talagang."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "500+", title: "Projects Completed", items: ["Branding", "Print", "Digital"] },
|
||||
{ id: "m2", value: "100%", title: "Client Satisfaction", items: ["Reliable", "Creative", "Professional"] },
|
||||
{ id: "m3", value: "24/7", title: "Support Ready", items: ["Always", "Available", "Responsive"] }
|
||||
]}
|
||||
title="Trusted Experience"
|
||||
description="Years of service delivering high-quality design solutions to Talagang."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Ali Hassan",
|
||||
date: "Jan 2024",
|
||||
title: "Business Owner",
|
||||
quote: "Shakir Graphics delivered exactly what I needed for my brand identity. Very professional.",
|
||||
tag: "Branding",
|
||||
avatarSrc: "asset://avatar-1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photographer-using-graphic-tablet-perform-editing-operations-correct-images-creative-agency_482257-82275.jpg",
|
||||
imageAlt: "graphic designer working on computer",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Sara Khan",
|
||||
date: "Feb 2024",
|
||||
title: "Entrepreneur",
|
||||
quote: "Excellent print quality and fast turnaround time in Talagang.",
|
||||
tag: "Print",
|
||||
avatarSrc: "asset://avatar-2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2151273064.jpg?_wi=2",
|
||||
imageAlt: "graphic designer working on computer",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Kamran Malik",
|
||||
date: "Mar 2024",
|
||||
title: "Local Store",
|
||||
quote: "Professional, reliable, and very creative with design layouts.",
|
||||
tag: "Marketing",
|
||||
avatarSrc: "asset://avatar-3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-items-redecorating-house-with-copy-space_23-2148815771.jpg?_wi=1",
|
||||
imageAlt: "graphic designer working on computer",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Fatima Noor",
|
||||
date: "Apr 2024",
|
||||
title: "Student",
|
||||
quote: "Great service and very friendly staff. Highly recommended.",
|
||||
tag: "Design",
|
||||
avatarSrc: "asset://avatar-4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164872.jpg",
|
||||
imageAlt: "graphic designer working on computer",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Zeeshan Ahmed",
|
||||
date: "May 2024",
|
||||
title: "Agency Lead",
|
||||
quote: "Top-tier design services that truly capture the client's intent.",
|
||||
tag: "Professional",
|
||||
avatarSrc: "asset://avatar-5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/nobody-artwork-studio-with-creativity-equipment_482257-27218.jpg",
|
||||
imageAlt: "graphic designer working on computer",
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="We take pride in building lasting relationships with our clients."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Ali Hassan", date: "Jan 2024", title: "Business Owner", quote: "Shakir Graphics delivered exactly what I needed for my brand identity. Very professional.", tag: "Branding", avatarSrc: "asset://avatar-1", imageSrc: "http://img.b2bpic.net/free-photo/photographer-using-graphic-tablet-perform-editing-operations-correct-images-creative-agency_482257-82275.jpg", imageAlt: "graphic designer working on computer" },
|
||||
{ id: "t2", name: "Sara Khan", date: "Feb 2024", title: "Entrepreneur", quote: "Excellent print quality and fast turnaround time in Talagang.", tag: "Print", avatarSrc: "asset://avatar-2", imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2151273064.jpg", imageAlt: "graphic designer working on computer" },
|
||||
{ id: "t3", name: "Kamran Malik", date: "Mar 2024", title: "Local Store", quote: "Professional, reliable, and very creative with design layouts.", tag: "Marketing", avatarSrc: "asset://avatar-3", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-items-redecorating-house-with-copy-space_23-2148815771.jpg", imageAlt: "graphic designer working on computer" },
|
||||
{ id: "t4", name: "Fatima Noor", date: "Apr 2024", title: "Student", quote: "Great service and very friendly staff. Highly recommended.", tag: "Design", avatarSrc: "asset://avatar-4", imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164872.jpg", imageAlt: "graphic designer working on computer" },
|
||||
{ id: "t5", name: "Zeeshan Ahmed", date: "May 2024", title: "Agency Lead", quote: "Top-tier design services that truly capture the client's intent.", tag: "Professional", avatarSrc: "asset://avatar-5", imageSrc: "http://img.b2bpic.net/free-photo/nobody-artwork-studio-with-creativity-equipment_482257-27218.jpg", imageAlt: "graphic designer working on computer" }
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="We take pride in building lasting relationships with our clients."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "How do I start a project?",
|
||||
content: "Just visit us or contact us via our form to start the process.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "What is the turnaround time?",
|
||||
content: "Most projects are completed within 48-72 hours.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Do you offer printing?",
|
||||
content: "Yes, we specialize in high-quality professional printing.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Common questions about our design services."
|
||||
faqsAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-woman-digital-designer-working-tablet-computer_1303-32097.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "How do I start a project?", content: "Just visit us or contact us via our form to start the process." },
|
||||
{ id: "q2", title: "What is the turnaround time?", content: "Most projects are completed within 48-72 hours." },
|
||||
{ id: "q3", title: "Do you offer printing?", content: "Yes, we specialize in high-quality professional printing." }
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Common questions about our design services."
|
||||
faqsAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-woman-digital-designer-working-tablet-computer_1303-32097.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Contact Us"
|
||||
description="Visit Shakir Graphics in Talagang or reach out through our online form for any design inquiries."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Tell us about your project",
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/flat-lay-items-redecorating-house-with-copy-space_23-2148815771.jpg?_wi=2"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Contact Us"
|
||||
description="Visit Shakir Graphics in Talagang or reach out through our online form for any design inquiries."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Tell us about your project", required: true }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/flat-lay-items-redecorating-house-with-copy-space_23-2148815771.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Shakir Graphics"
|
||||
leftLink={{
|
||||
text: "© 2024 Shakir Graphics",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Location: Talagang, Pakistan",
|
||||
href: "https://maps.app.goo.gl/6AxqEqipmkmhRJT6A",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Shakir Graphics"
|
||||
leftLink={{ text: "© 2024 Shakir Graphics", href: "#" }}
|
||||
rightLink={{ text: "Location: Talagang, Pakistan", href: "https://maps.app.goo.gl/6AxqEqipmkmhRJT6A" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user