303 lines
19 KiB
TypeScript
303 lines
19 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactText from '@/components/sections/contact/ContactText';
|
||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||
import { Activity, AlertCircle, Calendar, CheckCircle, Globe, HardDrive, Headphones, LayoutDashboard, Mail, RotateCcw, Server, Shield, Sparkles, Wallet, Facebook, Twitter, Instagram } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="expand-hover"
|
||
defaultTextAnimation="entrance-slide"
|
||
borderRadius="pill"
|
||
contentWidth="mediumSmall"
|
||
sizing="large"
|
||
background="floatingGradient"
|
||
cardStyle="gradient-bordered"
|
||
primaryButtonStyle="shadow"
|
||
secondaryButtonStyle="radial-glow"
|
||
headingFontWeight="extrabold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleFullscreen
|
||
navItems={[
|
||
{
|
||
name: "Dashboard", id: "#hero"},
|
||
{
|
||
name: "Overview", id: "#overview-metrics"},
|
||
{
|
||
name: "My Services", id: "#services-product"},
|
||
{
|
||
name: "Quick Actions", id: "#actions-features"},
|
||
{
|
||
name: "Billing", id: "#billing-pricing"},
|
||
{
|
||
name: "Support", id: "#support-faq"},
|
||
{
|
||
name: "Profile", id: "#profile-contact"},
|
||
]}
|
||
logoSrc="http://img.b2bpic.net/free-photo/recycle-symbol-3d-icon_460848-7999.jpg"
|
||
logoAlt="Swismax Solutions Logo"
|
||
brandName="Swismax Solutions"
|
||
button={{
|
||
text: "Logout", href: "#"}}
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroSplit
|
||
background={{
|
||
variant: "sparkles-gradient"}}
|
||
title="Welcome to Your Swismax Solutions Dashboard, Ahmed!"
|
||
description="Here's everything about your Swismax services — all in one place. Your ultimate portal for domains, hosting, emails, and billing management."
|
||
buttons={[
|
||
{
|
||
text: "View Services", href: "#services-product"},
|
||
{
|
||
text: "Renew Domains", href: "#actions-features"},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-122738.jpg"
|
||
imageAlt="Modern dashboard interface with data visualizations"
|
||
mediaAnimation="slide-up"
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", alt: "Customer Avatar 1"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/people-beauty-lifestyle-successful-businessman-white-shirt-doing-morning-routine-posing-isolated-eye-patches-reduce-puffiness-before-important-business-meeting_343059-4584.jpg", alt: "Customer Avatar 2"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/portrait-man-with-glasses-blue-suit-with-tie-lights-with-blurry-background_181624-17456.jpg", alt: "Customer Avatar 3"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg", alt: "Customer Avatar 4"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg", alt: "Customer Avatar 5"},
|
||
]}
|
||
avatarText="Trusted by 1000+ businesses"
|
||
marqueeItems={[
|
||
{
|
||
type: "text-icon", text: "New Features Live!", icon: Sparkles,
|
||
},
|
||
{
|
||
type: "text-icon", text: "Enhanced Security Updates", icon: Shield,
|
||
},
|
||
{
|
||
type: "text-icon", text: "24/7 Premium Support", icon: Headphones,
|
||
},
|
||
{
|
||
type: "text-icon", text: "Personalized Dashboard Views", icon: LayoutDashboard,
|
||
},
|
||
{
|
||
type: "text-icon", text: "Seamless Domain Transfers", icon: RotateCcw,
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="overview-metrics" data-section="overview-metrics">
|
||
<MetricCardOne
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="uniform-all-items-equal"
|
||
useInvertedBackground={true}
|
||
metrics={[
|
||
{
|
||
id: "m1", value: "3", title: "Total Domains", description: "All domains registered under your account.", icon: Globe,
|
||
},
|
||
{
|
||
id: "m2", value: "2", title: "Active Hostings", description: "Your current running hosting packages.", icon: Server,
|
||
},
|
||
{
|
||
id: "m3", value: "4/10", title: "Email Accounts", description: "Business emails provisioned and available.", icon: Mail,
|
||
},
|
||
{
|
||
id: "m4", value: "99.9%", title: "Uptime", description: "Guaranteed monthly service availability.", icon: Activity,
|
||
},
|
||
{
|
||
id: "m5", value: "68%", title: "Storage Used", description: "Combined usage across all hosting plans.", icon: HardDrive,
|
||
},
|
||
{
|
||
id: "m6", value: "PKR 0", title: "Unpaid Balance", description: "All outstanding invoices are cleared.", icon: Wallet,
|
||
},
|
||
]}
|
||
title="Your Service Overview"
|
||
description="A snapshot of your active services, performance, and important updates across all Swismax products."
|
||
/>
|
||
</div>
|
||
|
||
<div id="services-product" data-section="services-product">
|
||
<ProductCardThree
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{
|
||
id: "p1", name: "technestpk.com", price: "Expires in 18 days", imageSrc: "http://img.b2bpic.net/free-photo/top-view-ripped-paper-with-keyboard-plant-cyber-monday_23-2148657617.jpg", imageAlt: "Domain technestpk.com card"},
|
||
{
|
||
id: "p2", name: "technest.pk", price: "Active - Expires: May 15, 2026", imageSrc: "http://img.b2bpic.net/free-photo/programming-background-collage_23-2149901784.jpg", imageAlt: "Domain technest.pk card"},
|
||
{
|
||
id: "p3", name: "techneststore.com", price: "Active - Expires: Jan 10, 2026", imageSrc: "http://img.b2bpic.net/free-photo/laptop-blank-screen-hopping-cart-full-gifts-with-copyspace-online-shopping-concept_1423-89.jpg", imageAlt: "Domain techneststore.com card"},
|
||
{
|
||
id: "p4", name: "Business Pro Hosting", price: "20 GB Storage - 68% Used", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ca1jl5", imageAlt: "Business Pro Hosting card"},
|
||
{
|
||
id: "p5", name: "Ecommerce Hosting", price: "30 GB Storage - 14% Used", imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-celebration_23-2151835516.jpg", imageAlt: "Ecommerce Hosting card"},
|
||
{
|
||
id: "p6", name: "ahmed.khan@technest.pk", price: "Primary Admin Account - 1.2 GB Used", imageSrc: "http://img.b2bpic.net/free-photo/address-sign-email-communication-concept_53876-133827.jpg", imageAlt: "Ahmed Khan Email card"},
|
||
{
|
||
id: "p7", name: "support@technestpk.com", price: "Forwarder/Inbox - 820 MB Used", imageSrc: "http://img.b2bpic.net/free-photo/person-writing-sticky-notes-with-pen-white-workspace_23-2148041876.jpg", imageAlt: "Support Email card"},
|
||
{
|
||
id: "p8", name: "sales@techneststore.com", price: "Standard Inbox - 410 MB Used", imageSrc: "http://img.b2bpic.net/free-photo/person-choosing-where-they-work-from-hybrid-working-model_23-2149483822.jpg", imageAlt: "Sales Email card"},
|
||
]}
|
||
title="Your Active Swismax Services"
|
||
description="Manage your registered domains, hosting packages, and email accounts all in one consolidated view."
|
||
/>
|
||
</div>
|
||
|
||
<div id="actions-features" data-section="actions-features">
|
||
<FeatureCardSixteen
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
negativeCard={{
|
||
items: [
|
||
"technestpk.com expires in 18 days – Renew Now!", "Review insecure configurations if any found.", "Update billing information for auto-renewal."],
|
||
}}
|
||
positiveCard={{
|
||
items: [
|
||
"Register New Domain for your business.", "Transfer Existing Domain to Swismax.", "Manage DNS Records for your sites.", "Configure SSL Certificates for security.", "Utilize WHOIS Lookup for domain info."],
|
||
}}
|
||
title="Quick Actions & Important Alerts"
|
||
description="Take immediate action on expiring services or quickly access tools to manage your Swismax solutions."
|
||
/>
|
||
</div>
|
||
|
||
<div id="billing-pricing" data-section="billing-pricing">
|
||
<PricingCardThree
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
plans={[
|
||
{
|
||
id: "pr1", badge: "Action Required", badgeIcon: AlertCircle,
|
||
price: "PKR 2,500", name: "technestpk.com Renewal", buttons: [
|
||
{
|
||
text: "Renew Now", href: "#"},
|
||
{
|
||
text: "View Details", href: "#"},
|
||
],
|
||
features: [
|
||
"Due: Jun 24, 2025 (18 Days Left)", "Service: Domain Registration", "Status: Pending Renewal", "Auto-renew: OFF"],
|
||
},
|
||
{
|
||
id: "pr2", badge: "Upcoming", badgeIcon: Calendar,
|
||
price: "PKR 3,200", name: "techneststore.com Renewal", buttons: [
|
||
{
|
||
text: "View Invoice", href: "#"},
|
||
{
|
||
text: "Manage Auto-Renew", href: "#"},
|
||
],
|
||
features: [
|
||
"Due: Jan 10, 2026 (7 Months Left)", "Service: Domain Registration", "Status: Active", "Auto-renew: ON"],
|
||
},
|
||
{
|
||
id: "pr3", badge: "Active", badgeIcon: CheckCircle,
|
||
price: "PKR 18,000", name: "Business Pro Hosting", buttons: [
|
||
{
|
||
text: "View Invoice", href: "#"},
|
||
{
|
||
text: "Upgrade Plan", href: "#"},
|
||
],
|
||
features: [
|
||
"Due: Dec 01, 2025 (Annual Plan)", "Service: Web Hosting", "Status: Paid", "Auto-renew: ON"],
|
||
},
|
||
]}
|
||
title="Billing History & Upcoming Renewals"
|
||
description="Access your past invoices and plan for future renewals to ensure continuous service with Swismax Solutions."
|
||
/>
|
||
</div>
|
||
|
||
<div id="client-stories" data-section="client-stories">
|
||
<TestimonialCardFive
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
testimonials={[
|
||
{
|
||
id: "t1", name: "Sarah Johnson", date: "May 22, 2024", title: "Seamless Domain Management", quote: "Swismax Solutions has simplified our domain and hosting management incredibly. The dashboard is intuitive, and support is always there when we need it. Highly recommend their services!", tag: "Domains & Hosting", avatarSrc: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg", avatarAlt: "Sarah Johnson avatar", imageSrc: "http://img.b2bpic.net/free-photo/particle-lines-futuristic-network-background_53876-129729.jpg", imageAlt: "Abstract tech background"},
|
||
{
|
||
id: "t2", name: "Michael Chen", date: "April 15, 2024", title: "Reliable Hosting & Uptime", quote: "Our website's performance and uptime significantly improved after switching to Swismax. Their hosting plans are robust, and the detailed analytics in the dashboard are a huge plus.", tag: "Web Hosting", avatarSrc: "http://img.b2bpic.net/free-photo/person-working-animation-porject_23-2149269929.jpg", avatarAlt: "Michael Chen avatar", imageSrc: "http://img.b2bpic.net/free-photo/close-up-pentagon-specks-light_23-2147785948.jpg", imageAlt: "Abstract tech background"},
|
||
{
|
||
id: "t3", name: "Emily Rodriguez", date: "March 8, 2024", title: "Excellent Email Solutions", quote: "Managing our business emails through Swismax is incredibly easy. The interface is clean, and setting up new accounts is straightforward. A truly professional email service.", tag: "Business Email", avatarSrc: "http://img.b2bpic.net/free-photo/happy-senior-person-fooling-around_23-2149114892.jpg", avatarAlt: "Emily Rodriguez avatar", imageSrc: "http://img.b2bpic.net/free-photo/green-abstract-fiber-glass-light_23-2148241345.jpg", imageAlt: "Abstract tech background"},
|
||
{
|
||
id: "t4", name: "David Kim", date: "February 20, 2024", title: "Transparent Billing & Support", quote: "The billing section is very clear, with all invoices easily accessible. Any questions we had were promptly answered by their knowledgeable support team. A pleasure to work with!", tag: "Billing & Support", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-sitting-stairs_1262-3109.jpg", avatarAlt: "David Kim avatar", imageSrc: "http://img.b2bpic.net/free-photo/artistic-blurry-colorful-wallpaper-background_58702-8467.jpg", imageAlt: "Abstract tech background"},
|
||
{
|
||
id: "t5", name: "Jessica Lee", date: "January 10, 2024", title: "Integrated Service Management", quote: "Having all our digital services—domains, hosting, and emails—under one Swismax dashboard is fantastic. It saves us so much time and keeps everything organized.", tag: "Integrated Services", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-employee-happy-be-back-work_23-2148727616.jpg", avatarAlt: "Jessica Lee avatar", imageSrc: "http://img.b2bpic.net/free-photo/blurred-lights-background_23-2148164843.jpg", imageAlt: "Abstract tech background"},
|
||
]}
|
||
title="Hear From Our Happy Clients"
|
||
description="See how Swismax Solutions empowers businesses like yours with reliable services and exceptional support. Their success is our priority."
|
||
/>
|
||
</div>
|
||
|
||
<div id="support-faq" data-section="support-faq">
|
||
<FaqDouble
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
faqs={[
|
||
{
|
||
id: "fq1", title: "How do I renew my domain with Swismax Solutions?", content: "You can easily renew your domain directly from the 'My Services' section of your dashboard. Look for the expiring domain and click the 'Renew Now' button. We'll guide you through the process step-by-step."},
|
||
{
|
||
id: "fq2", title: "What are the different types of hosting plans available?", content: "Swismax offers a range of hosting solutions including Business Pro Hosting for corporate sites and Ecommerce Hosting for online stores. Details on storage, bandwidth, and features can be found in the 'My Services' section."},
|
||
{
|
||
id: "fq3", title: "How can I configure my business email accounts?", content: "Email account management is accessible via the 'My Services' area. Here, you can create new accounts, adjust space, and set up forwarding rules. Detailed guides are also available in our knowledge base."},
|
||
{
|
||
id: "fq4", title: "How can I pay my invoices via manual bank transfer?", content: "For manual bank transfers, you can use the details provided in the 'Billing & Renewals' section. We offer accounts with Standard Chartered Bank and Meezan Bank Limited. Please ensure to include your Invoice ID in the transaction details."},
|
||
{
|
||
id: "fq5", title: "Where can I find my website panel credentials (e.g., WordPress admin)?", content: "Your website access credentials for platforms like WordPress admin or cPanel can be found in a secure area within the 'My Services' section. For security, passwords are masked but can be copied securely."},
|
||
{
|
||
id: "fq6", title: "What is Swismax Solutions' uptime guarantee for hosting?", content: "We pride ourselves on providing highly reliable hosting services. Our current uptime is 99.9% as shown in your 'Dashboard Overview', ensuring your websites are always accessible to your visitors."},
|
||
]}
|
||
title="Frequently Asked Questions & Payment Info"
|
||
description="Find quick answers to common questions about your services or learn more about our secure payment options. We're here to help!"
|
||
faqsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="profile-contact" data-section="profile-contact">
|
||
<ContactText
|
||
useInvertedBackground={true}
|
||
background={{
|
||
variant: "plain"}}
|
||
text="Account Settings: Keep your personal and company information, including billing address, up-to-date for seamless service management and accurate invoicing."
|
||
buttons={[
|
||
{
|
||
text: "Save Changes", onClick: () => console.log("Profile changes saved!"), // Placeholder for actual save logic
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterCard
|
||
logoText="Swismax Solutions"
|
||
copyrightText="© 2025 Swismax Solutions. All rights reserved."
|
||
socialLinks={[
|
||
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
|
||
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
|
||
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
||
]}
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|