bender/2f5f042b-a8fc-464c-bc4e-43e4b3c8be8b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #5

Merged
bender merged 8 commits from version_2 into main 2026-05-26 12:26:21 +00:00
Conversation 0 Commits 8 Files Changed 8 +534 -609
8 changed files with 534 additions and 609 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/app/client/welcome/page.tsx Normal file
View File

@@ -0,0 +1,116 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Layout, Palette, Globe, Search, Package } from "lucide-react";
export default function ClientWelcomePage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Packages", id: "/packages" },
{ name: "Contact", id: "/contact" },
{ name: "Client Area", id: "/client/welcome" },
]}
brandName="eXpand AD"
button={{ text: "Get a Quote", href: "/contact" }}
/>
</div>
<div id="welcome-hero" data-section="welcome-hero">
<HeroLogo
logoText="Welcome, Valued Client!"
description="Manage your services, track progress, and easily request new projects. Your digital success journey continues here."
buttons={[
{ text: "Request New Service", href: "#quick-actions" },
{ text: "View My Packages", href: "/packages" }
]}
buttonAnimation="opacity"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EGGCvVCm4u8utjw85nJMComrpQ/uploaded-1779798279956-g5hmrms3.png"
imageAlt="Abstract digital network illustration"
showDimOverlay={true}
/>
</div>
<div id="quick-actions" data-section="quick-actions">
<FeatureCardTwentySix
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Branding Service Request", description: "Initiate a new branding project or request updates to your existing brand assets.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345450.jpg", imageAlt: "Graphic design workspace with brand guideline document", buttonIcon: Palette,
buttonHref: "/client/request/branding"
},
{
title: "Website Service Request", description: "Submit a request for a new website design, development, or updates to your current site.", imageSrc: "http://img.b2bpic.net/free-photo/digital-transformation-concept-made-with-digital-tablet_23-2149176461.jpg", imageAlt: "Digital tablet showing website transformation", buttonIcon: Globe,
buttonHref: "/client/request/website"
},
{
title: "SEO Service Request", description: "Improve your search engine rankings and online visibility with a new SEO project.", imageSrc: "http://img.b2bpic.net/free-photo/tablet-with-graphics-blue-tones_1134-384.jpg", imageAlt: "Digital analytics dashboard showing SEO insights", buttonIcon: Search,
buttonHref: "/client/request/seo"
},
{
title: "View Current Packages", description: "Review details of your subscribed packages and explore available upgrades or add-ons.", imageSrc: "http://img.b2bpic.net/free-photo/online-marketing_53876-176744.jpg", imageAlt: "Online marketing strategy illustration", buttonIcon: Package,
buttonHref: "/packages"
}
]}
title="Your Service Hub"
description="Quickly access common actions and manage your digital marketing needs."
tag="Quick Actions"
tagIcon={Layout}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="eXpand AD"
columns={[
{
title: "Company", items: [
{ label: "About Us", href: "/#about" },
{ label: "Services", href: "/services" },
{ label: "Packages", href: "/packages" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Resources", items: [
{ label: "Client Area", href: "/client/welcome" },
{ label: "FAQ", href: "/contact#faq" },
{ label: "Blog", href: "/blog" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
],
},
]}
copyrightText="© 2024 eXpand AD. All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

220
src/app/contact/page.tsx
View File

@@ -2,13 +2,12 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import { Sparkles } from "lucide-react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Mail } from 'lucide-react';
export default function LandingPage() {
export default function ContactPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
@@ -23,152 +22,75 @@ export default function LandingPage() {
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home",
id: "/",
},
{
name: "Services",
id: "/services",
},
{
name: "Packages",
id: "/packages",
},
{
name: "Contact",
id: "/contact",
},
{
name: "Client Login",
id: "/login",
},
]}
brandName="eXpand AD"
button={{
text: "Get a Quote",
href: "/contact",
}}
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Packages", id: "/packages" },
{ name: "Contact", id: "/contact" },
{ name: "Client Login", id: "/login" }
]}
brandName="eXpand AD"
button={{ text: "Get a Quote", href: "/contact" }}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={true}
faqs={[
{
id: "q1",
title: "What social media platforms do you manage?",
content: "We manage a wide range of platforms including Facebook, Instagram, LinkedIn, X (formerly Twitter), TikTok, and Pinterest. We tailor our strategy based on your target audience and business goals.",
},
{
id: "q2",
title: "How do your pricing packages work?",
content: "Our pricing is tiered, offering Starter, Growth, and Enterprise solutions. Each package includes different levels of service, platforms, and reporting. Custom quotes are available for specific needs.",
},
{
id: "q3",
title: "Can I integrate my existing tools?",
content: "Yes, we aim for seamless integration with your existing marketing stack where possible. We'll discuss compatibility during the onboarding process to ensure smooth operations.",
},
{
id: "q4",
title: "What is the onboarding process like?",
content: "Our onboarding is streamlined. Once you choose a package, we'll schedule an initial consultation to understand your brand, goals, and audience. We'll then set up your accounts and launch within days.",
},
{
id: "q5",
title: "Do you offer custom brand design services?",
content: "Absolutely! Beyond our standard packages, we provide bespoke brand design services, including logo creation, visual identity guidelines, and comprehensive brand strategy development.",
},
]}
sideTitle="Frequently Asked Questions"
sideDescription="Find answers to common questions about our services, pricing, and onboarding process."
faqsAnimation="slide-up"
textPosition="left"
showCard={true}
/>
</div>
<div id="contact-form" data-section="contact-form">
<ContactSplitForm
useInvertedBackground={false}
title="Request a Custom Quote"
description="Tell us about your project and specific needs. Our team will get back to you with a tailored solution."
inputs={[
{ name: "name", type: "text", placeholder: "Your Name", required: true },
{ name: "email", type: "email", placeholder: "Your Email", required: true },
{ name: "company", type: "text", placeholder: "Company Name" },
{ name: "phone", type: "tel", placeholder: "Phone Number" }
]}
multiSelect={{
name: "services", label: "Interested Services", options: ["Social Media Management", "Influencer Marketing", "Brand Design", "Performance Analytics", "Custom Campaign"]
}}
textarea={{
name: "message", placeholder: "Tell us more about your project...", rows: 5
}}
buttonText="Submit Quote Request"
imageSrc="http://img.b2bpic.net/free-photo/side-view-man-writing-notes-working_23-2148767930.jpg"
imageAlt="Person working on a laptop, requesting a quote"
mediaPosition="right"
mediaAnimation="slide-up"
onSubmit={(data) => console.log('Quote Request Form Data:', data)}
/>
</div>
<div id="contact-page" data-section="contact-page">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "downward-rays-static",
}}
tag="Get in Touch"
title="We'd Love to Hear From You"
description="Have questions about our services or need a custom quote? Fill out the form below, and our team will get back to you promptly."
tagIcon={Sparkles}
inputPlaceholder="Your Name"
buttonText="Send Message"
termsText="By submitting this form, you agree to our Privacy Policy and Terms of Service."
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="eXpand AD"
columns={[
{
title: "Company",
items: [
{
label: "About Us",
href: "/#about",
},
{
label: "Services",
href: "/services",
},
{
label: "Packages",
href: "/packages",
},
{
label: "Contact",
href: "/contact",
},
],
},
{
title: "Resources",
items: [
{
label: "Client Login",
href: "/login",
},
{
label: "FAQ",
href: "/contact#faq",
},
{
label: "Blog",
href: "/blog",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
]}
copyrightText="© 2024 eXpand AD. All rights reserved."
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="eXpand AD"
columns={[
{
title: "Company", items: [
{ label: "About Us", href: "/#about" },
{ label: "Services", href: "/services" },
{ label: "Packages", href: "/packages" },
{ label: "Contact", href: "/contact" }
]
},
{
title: "Resources", items: [
{ label: "Client Login", href: "/login" },
{ label: "FAQ", href: "/contact#faq" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" }
]
}
]}
copyrightText="© 2024 eXpand AD. All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}

106
src/app/handover/page.tsx Normal file
View File

@@ -0,0 +1,106 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import LegalSection from '@/components/legal/LegalSection';
export default function HandoverPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Packages", id: "/packages" },
{ name: "Contact", id: "/contact" },
{ name: "Client Login", id: "/login" },
{ name: "Handover", id: "/handover" }
]}
brandName="eXpand AD"
button={{ text: "Get a Quote", href: "/contact" }}
/>
</div>
<div id="handover-documentation" data-section="handover-documentation">
<LegalSection
layout="page"
title="Handover Documentation for eXpand AD"
subtitle="Comprehensive guide for managing the eXpand AD website and backend operations."
sections={[
{
heading: "Content Updates", content: [
{ type: "paragraph", text: "This section details the process for updating content across the eXpand AD website, including text, images, and multimedia elements. Regular content audits and updates are crucial for maintaining relevance and engagement." },
{ type: "numbered-list", items: ["Accessing the content management system (CMS) via the provided credentials.", "Navigating to specific pages or sections to edit their content.", "Uploading and managing media files such as images and videos.", "Reviewing and publishing changes to make them live on the website.", "Best practices for SEO-friendly content creation and optimization."]}
]
},
{
heading: "Package Modifications", content: [
{ type: "paragraph", text: "Instructions for modifying existing service packages and adding new ones, ensuring all offerings are current and competitive. This includes updating descriptions, features, and pricing models."},
{ type: "numbered-list", items: ["Locating the service packages configuration within the backend system.", "Updating package descriptions to reflect new features or changes in scope.", "Adjusting pricing structures for individual packages or bundles.", "Configuring the availability and visibility of packages on the website.", "Procedures for archiving or deprecating old packages."]}
]
},
{
heading: "Pricing Adjustments", content: [
{ type: "paragraph", text: "Detailed procedures for making changes to service pricing, including applying discounts, managing promotions, and updating price tiers. Accurate pricing is key to revenue management."},
{ type: "numbered-list", items: ["Identifying the relevant pricing configurations for different services.", "Implementing temporary or permanent discounts and promotional offers.", "Updating price points for various service tiers or subscription levels.", "Ensuring consistency in pricing across all platforms and documentation.", "Analyzing the impact of pricing changes on customer acquisition and retention."]}
]
},
{
heading: "Stripe Payment Management", content: [
{ type: "paragraph", text: "An overview of the Stripe integration for payment processing, including monitoring transactions, handling refunds, and managing subscriptions. Proper payment management is vital for financial operations."},
{ type: "numbered-list", items: ["Accessing the Stripe Dashboard for transaction monitoring and reporting.", "Processing refunds for customer payments in accordance with company policy.", "Managing customer subscriptions, including upgrades, downgrades, and cancellations.", "Reconciling Stripe transactions with internal accounting records.", "Troubleshooting common payment processing issues and fraud prevention measures."]}
]
}
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="eXpand AD"
columns={[
{
title: "Company", items: [
{ label: "About Us", href: "/#about" },
{ label: "Services", href: "/services" },
{ label: "Packages", href: "/packages" },
{ label: "Contact", href: "/contact" }
]
},
{
title: "Resources", items: [
{ label: "Client Login", href: "/login" },
{ label: "FAQ", href: "/contact#faq" },
{ label: "Blog", href: "/blog" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Handover Docs", href: "/handover"}
]
}
]}
copyrightText="© 2024 eXpand AD. All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

186
src/app/login/page.tsx
View File

@@ -2,13 +2,12 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import { HelpCircle } from "lucide-react";
import HeroLogo from '@/components/sections/hero/HeroLogo';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { LogIn } from 'lucide-react';
export default function LandingPage() {
export default function LoginPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
@@ -23,129 +22,64 @@ export default function LandingPage() {
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home",
id: "/",
},
{
name: "Services",
id: "/services",
},
{
name: "Packages",
id: "/packages",
},
{
name: "Contact",
id: "/contact",
},
{
name: "Client Login",
id: "/login",
},
]}
brandName="eXpand AD"
button={{
text: "Get a Quote",
href: "/contact",
}}
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Packages", id: "/packages" },
{ name: "Contact", id: "/contact" },
{ name: "Client Login", id: "/login" }
]}
brandName="eXpand AD"
button={{ text: "Get a Quote", href: "/contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroLogo
logoText="eXpand AD"
description="Welcome back! Access your personalized dashboard, project updates, and resources. Securely manage your campaigns."
buttons={[
{
text: "Login to Account",
href: "#login-form",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/two-factor-authentication-enabled_23-2152004089.jpg"
imageAlt="A person logging into a secure digital portal"
/>
</div>
<div id="login-hero" data-section="login-hero">
<HeroLogo
logoText="Client Login"
description="Access your personalized dashboard and manage your services."
buttons={[
{ text: "Go to Dashboard", href: "#" },
{ text: "Register Now", href: "#" }
]}
buttonAnimation="opacity"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EGGCvVCm4u8utjw85nJMComrpQ/uploaded-1779798279956-g5hmrms3.png"
imageAlt="Login page background image"
showDimOverlay={true}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "plain",
}}
tag="Account Help"
title="Trouble Logging In?"
description="If you've forgotten your password, enter your email below to receive a reset link."
tagIcon={HelpCircle}
inputPlaceholder="Your email address"
buttonText="Send Reset Link"
termsText="By clicking Send Reset Link, you agree to our Privacy Policy."
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="eXpand AD"
columns={[
{
title: "Company",
items: [
{
label: "About Us",
href: "/#about",
},
{
label: "Services",
href: "/services",
},
{
label: "Packages",
href: "/packages",
},
{
label: "Contact",
href: "/contact",
},
],
},
{
title: "Resources",
items: [
{
label: "Client Login",
href: "/login",
},
{
label: "FAQ",
href: "/contact#faq",
},
{
label: "Blog",
href: "/blog",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
]}
copyrightText="© 2024 eXpand AD. All rights reserved."
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="eXpand AD"
columns={[
{
title: "Company", items: [
{ label: "About Us", href: "/#about" },
{ label: "Services", href: "/services" },
{ label: "Packages", href: "/packages" },
{ label: "Contact", href: "/contact" }
]
},
{
title: "Resources", items: [
{ label: "Client Login", href: "/login" },
{ label: "FAQ", href: "/contact#faq" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" }
]
}
]}
copyrightText="© 2024 eXpand AD. All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}

310
src/app/packages/page.tsx
View File

@@ -2,13 +2,12 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import { Award, CheckCircle, ShoppingCart, Sparkles, Star } from "lucide-react";
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { CheckCircle, Package } from 'lucide-react';
export default function LandingPage() {
export default function PackagesPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
@@ -23,233 +22,84 @@ export default function LandingPage() {
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home",
id: "/",
},
{
name: "Services",
id: "/services",
},
{
name: "Packages",
id: "/packages",
},
{
name: "Contact",
id: "/contact",
},
{
name: "Client Login",
id: "/login",
},
]}
brandName="eXpand AD"
button={{
text: "Get a Quote",
href: "/contact",
}}
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Packages", id: "/packages" },
{ name: "Contact", id: "/contact" },
{ name: "Client Login", id: "/login" }
]}
brandName="eXpand AD"
button={{ text: "Get a Quote", href: "/contact" }}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
plans={[
{
id: "starter",
badge: "Value",
badgeIcon: Sparkles,
price: "$500/mo",
name: "Starter Boost",
buttons: [
{
text: "Get Started",
href: "#",
},
],
features: [
"2 Social Platforms",
"8 Posts/Month",
"Basic Content Strategy",
"Community Engagement (Limited)",
"Monthly Performance Report",
],
},
{
id: "growth",
badge: "Most Popular",
badgeIcon: Star,
price: "$1200/mo",
name: "Growth Accelerator",
buttons: [
{
text: "Choose Plan",
href: "#",
},
],
features: [
"4 Social Platforms",
"16 Posts/Month",
"Advanced Content Strategy",
"Proactive Community Management",
"Influencer Outreach (Basic)",
"Bi-Weekly Performance Report",
"A/B Testing",
],
},
{
id: "enterprise",
badge: "Custom",
badgeIcon: Award,
price: "Custom Quote",
name: "Enterprise Solution",
buttons: [
{
text: "Contact Sales",
href: "/contact",
},
],
features: [
"Unlimited Platforms",
"Custom Post Volume",
"Dedicated Brand Strategist",
"Full Influencer Campaign Management",
"Complete Brand Design Services",
"Weekly Performance Meetings",
"24/7 Priority Support",
],
},
]}
title="Flexible Pricing Packages"
description="Choose the perfect plan for your business needs, from essential social media management to full-scale brand development."
tag="Our Packages"
tagIcon={ShoppingCart}
/>
</div>
<div id="pricing-packages" data-section="pricing-packages">
<PricingCardOne
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Social Media Management Packages"
description="Choose the perfect plan to boost your online presence and engage your audience."
tag="Our Packages"
tagIcon={Package}
plans={[
{
id: "basic", badge: "Starter", badgeIcon: CheckCircle,
price: "$499/month", subtitle: "Essential Social Media Presence", features: [
"2 platforms managed", "8 posts/month", "Basic content creation", "Monthly performance report", "Email support"
]
},
{
id: "pro", badge: "Professional", badgeIcon: CheckCircle,
price: "$999/month", subtitle: "Advanced Growth & Engagement", features: [
"3 platforms managed", "15 posts/month", "Advanced content creation", "Bi-weekly performance report", "Priority email & chat support", "Influencer outreach (basic)"
]
},
{
id: "enterprise", badge: "Enterprise", badgeIcon: CheckCircle,
price: "$1999/month", subtitle: "Customized & Comprehensive Solution", features: [
"4+ platforms managed", "30+ posts/month", "Premium content creation", "Weekly performance report", "Dedicated account manager", "Full influencer campaign management", "Paid ad campaign setup & management"
]
}
]}
buttons={[
{ text: "Get Started", href: "/checkout" }
]}
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "product1",
name: "Social Media Audit",
price: "$299",
imageSrc: "http://img.b2bpic.net/free-photo/online-marketing_53876-176744.jpg",
imageAlt: "Social media icons merging into a sphere",
},
{
id: "product2",
name: "Micro-Influencer Campaign",
price: "$750",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-holding-smartphone_23-2150208258.jpg",
imageAlt: "Hands reaching for a glowing orb",
},
{
id: "product3",
name: "Logo Redesign",
price: "$500",
imageSrc: "http://img.b2bpic.net/free-photo/designers-working-project_53876-94884.jpg",
imageAlt: "Logo being designed on a tablet",
},
{
id: "product4",
name: "Content Calendar Planning",
price: "$350",
imageSrc: "http://img.b2bpic.net/free-photo/modern-office-desk-composition-with-technological-device_23-2147915885.jpg",
imageAlt: "Calendar with scheduled social media content",
},
{
id: "product5",
name: "Ad Campaign Ideation",
price: "$400",
imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-illustration-graphic-designer_23-2151536940.jpg",
imageAlt: "Thought cloud with campaign slogans",
},
{
id: "product6",
name: "Monthly Analytics Report",
price: "$150",
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-flat-design-business-strategy-concept_23-2149190169.jpg",
imageAlt: "Upward trending graphs and analytics",
},
]}
title="Individual Service Add-ons"
description="Enhance your chosen package or select standalone services to meet specific project needs."
tag="Flexible Services"
tagIcon={CheckCircle}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="eXpand AD"
columns={[
{
title: "Company",
items: [
{
label: "About Us",
href: "/#about",
},
{
label: "Services",
href: "/services",
},
{
label: "Packages",
href: "/packages",
},
{
label: "Contact",
href: "/contact",
},
],
},
{
title: "Resources",
items: [
{
label: "Client Login",
href: "/login",
},
{
label: "FAQ",
href: "/contact#faq",
},
{
label: "Blog",
href: "/blog",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
]}
copyrightText="© 2024 eXpand AD. All rights reserved."
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="eXpand AD"
columns={[
{
title: "Company", items: [
{ label: "About Us", href: "/#about" },
{ label: "Services", href: "/services" },
{ label: "Packages", href: "/packages" },
{ label: "Contact", href: "/contact" }
]
},
{
title: "Resources", items: [
{ label: "Client Login", href: "/login" },
{ label: "FAQ", href: "/contact#faq" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" }
]
}
]}
copyrightText="© 2024 eXpand AD. All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}

4
src/app/page.tsx
View File

@@ -41,6 +41,8 @@ export default function LandingPage() {
name: "Contact", id: "/contact"},
{
name: "Client Login", id: "/login"},
{
name: "Handover", id: "/handover"},
]}
brandName="eXpand AD"
button={{
@@ -223,4 +225,4 @@ export default function LandingPage() {
</ReactLenis>
</ThemeProvider>
);
}
}

183
src/app/services/page.tsx
View File

@@ -1,112 +1,107 @@
"use client";
import { ThemeProvider, ThemeProviderProps } from "@/providers/themeProvider/ThemeProvider";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FeatureCardTwentySix, { FeatureCardTwentySixProps } from '@/components/sections/feature/FeatureCardTwentySix';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
// Import all necessary LucideIcons
import { Globe, Zap, Palette, BarChart, Layers, TrendingUp, Rocket, Award } from "lucide-react";
import { BarChart, Briefcase, Globe, Megaphone, Palette, Users } from 'lucide-react';
export default function ServicesPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Packages", id: "/packages" },
{ name: "Contact", id: "/contact" },
{ name: "Client Login", id: "/login" },
];
const themeProps: ThemeProviderProps = {
defaultButtonVariant: "elastic-effect", defaultTextAnimation: "reveal-blur", borderRadius: "pill", contentWidth: "mediumLarge", sizing: "largeSmallSizeMediumTitles", background: "circleGradient", cardStyle: "glass-elevated", primaryButtonStyle: "diagonal-gradient", secondaryButtonStyle: "radial-glow", headingFontWeight: "extrabold"
};
const pageSections = [
{
id: "detailed-services", Component: FeatureCardTwentySix,
props: {
textboxLayout: "default", useInvertedBackground: true,
features: [
{
title: "Social Media Management", description: "From content creation and scheduling to community engagement and analytics, we manage your social platforms for maximum impact. Includes platform-specific strategies for Facebook, Instagram, LinkedIn, and more.", imageSrc: "http://img.b2bpic.net/free-photo/social-media-communication-networking-online-concept_53876-133812.jpg", imageAlt: "Data flow and insights for social media analytics", buttonIcon: Globe,
},
{
title: "Influencer Marketing Campaigns", description: "Connect with your target audience through authentic voices. We identify, vet, and manage collaborations with influencers who resonate with your brand values. Includes campaign strategy, execution, and ROI reporting.", imageSrc: "http://img.b2bpic.net/free-photo/webinar-innovation-web-design-technology-concept_53876-133851.jpg", imageAlt: "Diverse micro-influencers collaborating", buttonIcon: Zap,
},
{
title: "Brand Design & Development", description: "Build a distinctive and memorable brand identity. Our services cover logo design, visual guidelines, typography, and color palettes to ensure a cohesive brand image across all touchpoints.", imageSrc: "http://img.b2bpic.net/free-photo/stationery-ice-cream-concept_23-2147803277.jpg", imageAlt: "Brand visual identity showcasing logo and color palette", buttonIcon: Palette,
},
{
title: "SEO & Content Strategy", description: "Improve your visibility on search engines and attract organic traffic with keyword-rich content and technical SEO optimizations. Our strategies ensure your brand is found by the right audience.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-business-woman-analysis-process_23-2148411851.jpg", imageAlt: "SEO analytics and content strategy", buttonIcon: BarChart,
},
],
title: "Comprehensive Digital Marketing Solutions", description: "eXpand AD provides a full spectrum of services designed to enhance your online presence and achieve your business objectives.", tag: "Our Expertise", tagIcon: Layers,
} as FeatureCardTwentySixProps,
},
{
id: "performance-insights", Component: MetricCardThree,
props: {
animationType: "slide-up", textboxLayout: "default", useInvertedBackground: false,
metrics: [
{ id: "m1", icon: BarChart, title: "Engagement Growth", value: "+35%" },
{ id: "m2", icon: TrendingUp, title: "Lead Generation", value: "+25%" },
{ id: "m3", icon: Rocket, title: "Brand Reach", value: "+60%" },
],
title: "Proven Performance, Guaranteed Results", description: "Our commitment to excellence translates into measurable success for every client, every campaign.", tag: "Impact", tagIcon: Award,
},
},
{
id: "footer", Component: FooterBaseCard,
props: {
logoText: "eXpand AD", columns: [
{
title: "Company", items: [
{ label: "About Us", href: "/#about" },
{ label: "Services", href: "/services" },
{ label: "Packages", href: "/packages" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Resources", items: [
{ label: "Client Login", href: "/login" },
{ label: "FAQ", href: "/contact#faq" },
{ label: "Blog", href: "/blog" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
],
},
],
copyrightText: "© 2024 eXpand AD. All rights reserved."
},
},
];
return (
<ThemeProvider {...themeProps}>
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={navItems}
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Packages", id: "/packages" },
{ name: "Contact", id: "/contact" },
{ name: "Client Login", id: "/login" }
]}
brandName="eXpand AD"
button={{
text: "Get a Quote", href: "/contact"
}}
button={{ text: "Get a Quote", href: "/contact" }}
/>
</div>
{pageSections.map((section) => (
<div id={section.id} key={section.id} data-section={section.id}>
<section.Component {...section.props} />
</div>
))}
<div id="services-list" data-section="services-list">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
title="Our Comprehensive Services"
description="From initial strategy to ongoing optimization, we provide end-to-end digital solutions."
tag="What We Offer"
features={[
{
icon: Globe,
title: "Social Media Strategy", description: "Develop a robust social media roadmap tailored to your brand's goals.", button: { text: "Learn More", href: "/contact" }
},
{
icon: Megaphone,
title: "Content Creation & Curation", description: "Craft engaging posts, visuals, and videos to captivate your audience.", button: { text: "Learn More", href: "/contact" }
},
{
icon: Users,
title: "Community Management", description: "Actively engage with your followers, respond to inquiries, and build loyalty.", button: { text: "Learn More", href: "/contact" }
},
{
icon: Briefcase,
title: "Influencer Campaign Management", description: "Connect with key influencers to amplify your brand message and reach new audiences.", button: { text: "Learn More", href: "/contact" }
},
{
icon: Palette,
title: "Brand Identity & Design", description: "Create a cohesive and memorable brand aesthetic across all digital touchpoints.", button: { text: "Learn More", href: "/contact" }
},
{
icon: BarChart,
title: "Performance Analytics & Reporting", description: "Gain actionable insights with detailed reports and continuous optimization.", button: { text: "Learn More", href: "/contact" }
}
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="eXpand AD"
columns={[
{
title: "Company", items: [
{ label: "About Us", href: "/#about" },
{ label: "Services", href: "/services" },
{ label: "Packages", href: "/packages" },
{ label: "Contact", href: "/contact" }
]
},
{
title: "Resources", items: [
{ label: "Client Login", href: "/login" },
{ label: "FAQ", href: "/contact#faq" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" }
]
}
]}
copyrightText="© 2024 eXpand AD. All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}

18
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #f6f0e9;
--card: #efe7dd;
--foreground: #2b180a;
--primary-cta: #2b180a;
--primary-cta-text: #f6f0e9;
--secondary-cta: #efe7dd;
--secondary-cta-text: #2b180a;
--accent: #94877c;
--background-accent: #afa094;
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #ffffff;
--primary-cta: #1f7cff;
--primary-cta-text: #ffffff;
--secondary-cta: #010101;
--secondary-cta-text: #ffffff;
--accent: #1f7cff;
--background-accent: #f96b2f;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);