Merge version_2 into main #1
298
src/app/page.tsx
298
src/app/page.tsx
@@ -2,14 +2,14 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
||||
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
|
||||
@@ -22,60 +22,34 @@ export default function LandingPage() {
|
||||
contentWidth="medium"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="blurBottom"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "portfolio",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Portfolio", id: "portfolio" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Grafik Tee Studio"
|
||||
button={{
|
||||
text: "Order Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
button={{ text: "Order Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Professional Graphic Design That Makes Your Brand Stand Out"
|
||||
description="High-converting designs for social media, clothing brands, ads, packaging, and online stores."
|
||||
buttons={[
|
||||
{
|
||||
text: "Order Now",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "View Portfolio",
|
||||
href: "#portfolio",
|
||||
},
|
||||
{ text: "Order Now", href: "#contact" },
|
||||
{ text: "View Portfolio", href: "#portfolio" },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6v6oo3"
|
||||
imageAlt="graphic design studio dark aesthetic"
|
||||
@@ -87,26 +61,8 @@ export default function LandingPage() {
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Low-quality designs",
|
||||
"Generic templates",
|
||||
"Delayed delivery",
|
||||
"Hidden fees",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Logo Design",
|
||||
"Product Packaging",
|
||||
"Social Media Posts",
|
||||
"T-Shirt Design",
|
||||
"Shopify Banner Design",
|
||||
"TikTok Ad Creatives",
|
||||
"Etsy Listing Images",
|
||||
"Thumbnail Design",
|
||||
],
|
||||
}}
|
||||
negativeCard={{ items: ["Low-quality designs", "Generic templates", "Delayed delivery", "Hidden fees"] }}
|
||||
positiveCard={{ items: ["Logo Design", "Product Packaging", "Social Media Posts", "T-Shirt Design", "Shopify Banner Design", "TikTok Ad Creatives", "Etsy Listing Images", "Thumbnail Design"] }}
|
||||
title="Our Professional Services"
|
||||
description="We specialize in crafting visual identities that capture attention and drive sales."
|
||||
/>
|
||||
@@ -119,42 +75,12 @@ export default function LandingPage() {
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Luxury Logo Design",
|
||||
price: "Featured",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hvs1uf",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "TikTok Ad Creative",
|
||||
price: "Featured",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zx584g",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Apparel Design",
|
||||
price: "Featured",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z2dndp",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Packaging Mockup",
|
||||
price: "Featured",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qce8c2",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Shopify Banners",
|
||||
price: "Featured",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=915wec",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Brand Identity",
|
||||
price: "Featured",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wai4ax",
|
||||
},
|
||||
{ id: "p1", name: "Luxury Logo Design", price: "Featured", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hvs1uf" },
|
||||
{ id: "p2", name: "TikTok Ad Creative", price: "Featured", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zx584g" },
|
||||
{ id: "p3", name: "Apparel Design", price: "Featured", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z2dndp" },
|
||||
{ id: "p4", name: "Packaging Mockup", price: "Featured", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qce8c2" },
|
||||
{ id: "p5", name: "Shopify Banners", price: "Featured", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=915wec" },
|
||||
{ id: "p6", name: "Brand Identity", price: "Featured", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wai4ax" },
|
||||
]}
|
||||
title="Portfolio Gallery"
|
||||
description="A glimpse into our recent design work."
|
||||
@@ -167,26 +93,10 @@ export default function LandingPage() {
|
||||
title="Why Choose Grafik Tee Studio"
|
||||
tag="Advantages"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "24h",
|
||||
description: "Fast Delivery",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "100%",
|
||||
description: "Unique Designs",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "Unlimited",
|
||||
description: "Revisions",
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
value: "Commercial",
|
||||
description: "Rights Included",
|
||||
},
|
||||
{ id: "m1", value: "24h", description: "Fast Delivery" },
|
||||
{ id: "m2", value: "100%", description: "Unique Designs" },
|
||||
{ id: "m3", value: "Unlimited", description: "Revisions" },
|
||||
{ id: "m4", value: "Commercial", description: "Rights Included" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -198,41 +108,11 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah Miller",
|
||||
handle: "@sarah_fashion",
|
||||
testimonial: "The best design work I have received. High quality and fast turnaround.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ff1iao",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "James Chen",
|
||||
handle: "@chen_ecom",
|
||||
testimonial: "Increased my Shopify conversion rate immediately with their banners.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=t1x9lh",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena Rodriguez",
|
||||
handle: "@elena_brand",
|
||||
testimonial: "Amazing packaging design. My products look professional now.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ty6xp0",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Mike Davis",
|
||||
handle: "@davis_tiktok",
|
||||
testimonial: "Their TikTok ad creatives are absolute game changers for my brand.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g83mby",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Lisa Wang",
|
||||
handle: "@lisa_etsy",
|
||||
testimonial: "Stunning visuals for my Etsy listings. Increased my sales significantly.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g2wjuv",
|
||||
},
|
||||
{ id: "t1", name: "Sarah Miller", handle: "@sarah_fashion", testimonial: "The best design work I have received. High quality and fast turnaround.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ff1iao" },
|
||||
{ id: "t2", name: "James Chen", handle: "@chen_ecom", testimonial: "Increased my Shopify conversion rate immediately with their banners.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=t1x9lh" },
|
||||
{ id: "t3", name: "Elena Rodriguez", handle: "@elena_brand", testimonial: "Amazing packaging design. My products look professional now.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ty6xp0" },
|
||||
{ id: "t4", name: "Mike Davis", handle: "@davis_tiktok", testimonial: "Their TikTok ad creatives are absolute game changers for my brand.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g83mby" },
|
||||
{ id: "t5", name: "Lisa Wang", handle: "@lisa_etsy", testimonial: "Stunning visuals for my Etsy listings. Increased my sales significantly.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g2wjuv" },
|
||||
]}
|
||||
title="Loved By Creators"
|
||||
description="See what our clients say about our design services."
|
||||
@@ -240,64 +120,14 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
<PricingCardNine
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "starter",
|
||||
badge: "Entry",
|
||||
price: "$99",
|
||||
subtitle: "Perfect for starters",
|
||||
features: [
|
||||
"1 Logo Concept",
|
||||
"2 Social Posts",
|
||||
"3 Days Delivery",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Select",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Popular",
|
||||
price: "$299",
|
||||
subtitle: "Best for growth",
|
||||
features: [
|
||||
"3 Concepts",
|
||||
"10 Social Posts",
|
||||
"Shopify Banners",
|
||||
"24h Delivery",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Select",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "premium",
|
||||
badge: "Ultimate",
|
||||
price: "$599",
|
||||
subtitle: "Total brand overhaul",
|
||||
features: [
|
||||
"All Concepts",
|
||||
"Full Packaging",
|
||||
"TikTok Ads",
|
||||
"Priority Support",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Select",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ id: "starter", title: "Entry", price: "$99", period: "/ project", features: ["1 Logo Concept", "2 Social Posts", "3 Days Delivery"], button: { text: "Select", href: "#contact" } },
|
||||
{ id: "pro", title: "Popular", price: "$299", period: "/ project", features: ["3 Concepts", "10 Social Posts", "Shopify Banners", "24h Delivery"], button: { text: "Select", href: "#contact" } },
|
||||
{ id: "premium", title: "Ultimate", price: "$599", period: "/ project", features: ["All Concepts", "Full Packaging", "TikTok Ads", "Priority Support"], button: { text: "Select", href: "#contact" } },
|
||||
]}
|
||||
title="Pricing Packages"
|
||||
description="Simple, transparent pricing for your design needs."
|
||||
@@ -305,60 +135,36 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "How fast is delivery?",
|
||||
content: "Most orders are delivered within 24-48 hours depending on complexity.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Are unlimited revisions included?",
|
||||
content: "Yes, we work until you are satisfied with your design.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Can I use designs commercially?",
|
||||
content: "Absolutely. Full commercial usage rights are included in all packages.",
|
||||
},
|
||||
{ id: "q1", title: "How fast is delivery?", content: "Most orders are delivered within 24-48 hours depending on complexity." },
|
||||
{ id: "q2", title: "Are unlimited revisions included?", content: "Yes, we work until you are satisfied with your design." },
|
||||
{ id: "q3", title: "Can I use designs commercially?", content: "Absolutely. Full commercial usage rights are included in all packages." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Common questions about our design process."
|
||||
faqsAnimation="blur-reveal"
|
||||
mediaPosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Get In Touch"
|
||||
title="Let's Start Your Design Project"
|
||||
description="Send us a message or reach out via social channels to get started today."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=d6hmql"
|
||||
inputPlaceholder="Enter your email for a consultation"
|
||||
buttonText="Start Project"
|
||||
imageAlt="abstract dark blue light"
|
||||
mediaAnimation="slide-up"
|
||||
buttons={[{ text: "Start Project", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
<FooterCard
|
||||
logoText="Grafik Tee Studio"
|
||||
leftLink={{
|
||||
text: "© 2024 Grafik Tee Studio",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
copyrightText="© 2025 | Grafik Tee Studio"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user