Merge version_1 into main #1

Merged
bender merged 1 commits from version_1 into main 2026-04-21 09:37:20 +00:00

View File

@@ -2,368 +2,184 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import { Shield, Bell, Activity, Globe, FileText, Zap, Clock } from "lucide-react";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Activity, Bell, Clock, FileText, Globe, Shield, Zap } from "lucide-react";
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterMedia from '@/components/sections/footer/FooterMedia';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Dashboard",
id: "hero",
},
{
name: "Features",
id: "features",
},
{
name: "Monitoring",
id: "product",
},
{
name: "Support",
id: "faq",
},
]}
brandName="HealthMonitor"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Dashboard", id: "hero" },
{ name: "Features", id: "features" },
{ name: "Monitoring", id: "product" },
{ name: "Support", id: "faq" }
]}
brandName="HealthMonitor"
button={{ text: "Get Started", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
background={{
variant: "sparkles-gradient",
}}
title="Website Health Monitor"
description="Enterprise-grade uptime monitoring, real-time performance analytics, and instant downtime alerts for your web infrastructure."
avatars={[
{
src: "http://img.b2bpic.net/free-photo/young-handsome-successful-businessman-smiling-holding-tablet-office_176420-918.jpg",
alt: "User",
},
{
src: "http://img.b2bpic.net/free-photo/close-up-unshaven-executive-with-glasses_1098-4104.jpg",
alt: "User",
},
{
src: "http://img.b2bpic.net/free-photo/sad-dismissed-man-holding-box-with-belongings-after-being-fired-while-his-collegues-looking-hom-working-startup-office-businesspeople-brainstorming-ideas-developing-marketing-project_482257-40109.jpg",
alt: "User",
},
{
src: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg",
alt: "User",
},
{
src: "http://img.b2bpic.net/free-photo/authentic-small-youthful-marketing-agency_23-2150167457.jpg",
alt: "User",
},
]}
buttons={[
{
text: "Start Monitoring",
href: "#product",
},
]}
marqueeItems={[
{
type: "text-icon",
text: "99.9% Uptime",
icon: Shield,
},
{
type: "text-icon",
text: "Real-time Alerts",
icon: Bell,
},
{
type: "text-icon",
text: "Latency Tracking",
icon: Activity,
},
{
type: "text-icon",
text: "Global Monitoring",
icon: Globe,
},
{
type: "text-icon",
text: "Detailed Reports",
icon: FileText,
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
background={{ variant: "sparkles-gradient" }}
title="Website Health Monitor"
description="Enterprise-grade uptime monitoring, real-time performance analytics, and instant downtime alerts for your web infrastructure."
avatars={[
{ src: "http://img.b2bpic.net/free-photo/young-handsome-successful-businessman-smiling-holding-tablet-office_176420-918.jpg", alt: "User" },
{ src: "http://img.b2bpic.net/free-photo/close-up-unshaven-executive-with-glasses_1098-4104.jpg", alt: "User" },
{ src: "http://img.b2bpic.net/free-photo/sad-dismissed-man-holding-box-with-belongings-after-being-fired-while-his-collegues-looking-hom-working-startup-office-businesspeople-brainstorming-ideas-developing-marketing-project_482257-40109.jpg", alt: "User" },
{ src: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg", alt: "User" },
{ src: "http://img.b2bpic.net/free-photo/authentic-small-youthful-marketing-agency_23-2150167457.jpg", alt: "User" }
]}
buttons={[{ text: "Start Monitoring", href: "#product" }]}
marqueeItems={[
{ type: "text-icon", text: "99.9% Uptime", icon: Shield },
{ type: "text-icon", text: "Real-time Alerts", icon: Bell },
{ type: "text-icon", text: "Latency Tracking", icon: Activity },
{ type: "text-icon", text: "Global Monitoring", icon: Globe },
{ type: "text-icon", text: "Detailed Reports", icon: FileText }
]}
/>
</div>
<div id="about" data-section="about">
<SplitAbout
textboxLayout="split"
useInvertedBackground={false}
title="Why Monitor Your Health?"
description="Every second counts in the digital world. Our health monitor provides you with granular insights into your uptime, response times, and server performance, allowing you to react instantly to any outages."
bulletPoints={[
{
title: "Real-time Tracking",
description: "Continuous ping checks to ensure your services remain accessible 24/7.",
},
{
title: "Performance Analytics",
description: "Detailed graphs visualizing your server response trends over time.",
},
{
title: "Instant Notifications",
description: "Get alerted via dashboard whenever your site hits performance degradation.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/cloud-computing-storage-data-network_53876-120080.jpg"
/>
</div>
<div id="about" data-section="about">
<SplitAbout
textboxLayout="split"
useInvertedBackground={false}
title="Why Monitor Your Health?"
description="Every second counts in the digital world. Our health monitor provides you with granular insights into your uptime, response times, and server performance, allowing you to react instantly to any outages."
bulletPoints={[
{ title: "Real-time Tracking", description: "Continuous ping checks to ensure your services remain accessible 24/7." },
{ title: "Performance Analytics", description: "Detailed graphs visualizing your server response trends over time." },
{ title: "Instant Notifications", description: "Get alerted via dashboard whenever your site hits performance degradation." }
]}
imageSrc="http://img.b2bpic.net/free-photo/cloud-computing-storage-data-network_53876-120080.jpg"
/>
</div>
<div id="features" data-section="features">
<FeatureCardEight
textboxLayout="default"
useInvertedBackground={true}
features={[
{
title: "Auto-Refresh",
description: "Monitoring checks run automatically every 10 seconds for updated stats.",
imageSrc: "http://img.b2bpic.net/free-vector/bell-social-media-icon-isolated_24640-134159.jpg",
},
{
title: "Visual Insights",
description: "Chart.js integrated graphs reveal your latency patterns clearly.",
imageSrc: "http://img.b2bpic.net/free-photo/teleworker-home-office-gathering-information-from-internet-seminar_482257-119301.jpg",
},
{
title: "Status Indicators",
description: "Color-coded healthy, slow, and down thresholds for quick scanning.",
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-planet-mars-broadband-internet-system-meet-needs-consumers_181624-59316.jpg",
},
]}
title="Advanced Monitoring Suite"
description="Comprehensive tools designed for developers and server admins."
/>
</div>
<div id="features" data-section="features">
<FeatureCardEight
textboxLayout="default"
useInvertedBackground={true}
features={[
{ title: "Auto-Refresh", description: "Monitoring checks run automatically every 10 seconds for updated stats.", imageSrc: "http://img.b2bpic.net/free-vector/bell-social-media-icon-isolated_24640-134159.jpg" },
{ title: "Visual Insights", description: "Chart.js integrated graphs reveal your latency patterns clearly.", imageSrc: "http://img.b2bpic.net/free-photo/teleworker-home-office-gathering-information-from-internet-seminar_482257-119301.jpg" },
{ title: "Status Indicators", description: "Color-coded healthy, slow, and down thresholds for quick scanning.", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-planet-mars-broadband-internet-system-meet-needs-consumers_181624-59316.jpg" }
]}
title="Advanced Monitoring Suite"
description="Comprehensive tools designed for developers and server admins."
/>
</div>
<div id="product" data-section="product">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Dashboard Index",
price: "Active",
imageSrc: "http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-122738.jpg",
},
{
id: "p2",
name: "Analytics Engine",
price: "Active",
imageSrc: "http://img.b2bpic.net/free-photo/office-workers-using-finance-graphs_23-2150408681.jpg",
},
{
id: "p3",
name: "API Service",
price: "Active",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-worker-fixing-errors-affecting-servers-performance_482257-115381.jpg",
},
{
id: "p4",
name: "Log Service",
price: "Active",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-code-running-computer-screens-modern-server-room_482257-114724.jpg",
},
{
id: "p5",
name: "Mobile Sync",
price: "Active",
imageSrc: "http://img.b2bpic.net/free-photo/woman-sits-mat-uses-smartphone-online-workout-concept_169016-47282.jpg",
},
{
id: "p6",
name: "Testing Agent",
price: "Active",
imageSrc: "http://img.b2bpic.net/free-photo/executive-manager-modern-office-engaged-infographics-analysis_482257-122660.jpg",
},
]}
title="Live Status Dashboard"
description="See the latest statistics for our managed endpoints."
/>
</div>
<div id="product" data-section="product">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{ id: "p1", name: "Dashboard Index", price: "Active", imageSrc: "http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-122738.jpg" },
{ id: "p2", name: "Analytics Engine", price: "Active", imageSrc: "http://img.b2bpic.net/free-photo/office-workers-using-finance-graphs_23-2150408681.jpg" },
{ id: "p3", name: "API Service", price: "Active", imageSrc: "http://img.b2bpic.net/free-photo/close-up-worker-fixing-errors-affecting-servers-performance_482257-115381.jpg" }
]}
title="Live Status Dashboard"
description="See the latest statistics for our managed endpoints."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
metrics={[
{
id: "m1",
value: "99.9%",
title: "Uptime",
description: "Reliable track record",
icon: Shield,
},
{
id: "m2",
value: "10s",
title: "Refresh Rate",
description: "Fast data updates",
icon: Zap,
},
{
id: "m3",
value: "24/7",
title: "Monitoring",
description: "Always vigilant",
icon: Clock,
},
]}
title="Monitoring at Scale"
description="Key statistics for our platform performance."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
metrics={[
{ id: "m1", value: "99.9%", title: "Uptime", description: "Reliable track record", icon: Shield },
{ id: "m2", value: "10s", title: "Refresh Rate", description: "Fast data updates", icon: Zap },
{ id: "m3", value: "24/7", title: "Monitoring", description: "Always vigilant", icon: Clock }
]}
title="Monitoring at Scale"
description="Key statistics for our platform performance."
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardTwelve
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Sarah Chen",
imageSrc: "http://img.b2bpic.net/free-photo/young-dark-haired-man-glasses-is-working-with-computer-his-desktop-office-he-wears-blue-shirt-smiles-camera-view-from-side_197531-561.jpg",
},
{
id: "t2",
name: "John Doe",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-posing-photography_1098-17657.jpg",
},
{
id: "t3",
name: "Maria Garcia",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-senior-man-using-laptop_23-2147859779.jpg",
},
{
id: "t4",
name: "David Smith",
imageSrc: "http://img.b2bpic.net/free-photo/development-agency-office-worker-analyzing-project-sales-fintech-startup-businessperson-sitting-desk-marketing-company-office-developing-financial-strategy-accounting-management_482257-40323.jpg",
},
{
id: "t5",
name: "Emily Chen",
imageSrc: "http://img.b2bpic.net/free-photo/executive-assistant-multinational-company-work-big-business-project_482257-113916.jpg",
},
]}
cardTitle="Loved by Developers"
cardTag="Testimonials"
cardAnimation="slide-up"
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardTwelve
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "Sarah Chen", imageSrc: "http://img.b2bpic.net/free-photo/young-dark-haired-man-glasses-is-working-with-computer-his-desktop-office-he-wears-blue-shirt-smiles-camera-view-from-side_197531-561.jpg" },
{ id: "t2", name: "John Doe", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-posing-photography_1098-17657.jpg" },
{ id: "t3", name: "Maria Garcia", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-senior-man-using-laptop_23-2147859779.jpg" },
{ id: "t4", name: "David Smith", imageSrc: "http://img.b2bpic.net/free-photo/development-agency-office-worker-analyzing-project-sales-fintech-startup-businessperson-sitting-desk-marketing-company-office-developing-financial-strategy-accounting-management_482257-40323.jpg" },
{ id: "t5", name: "Emily Chen", imageSrc: "http://img.b2bpic.net/free-photo/executive-assistant-multinational-company-work-big-business-project_482257-113916.jpg" }
]}
cardTitle="Loved by Developers"
cardTag="Testimonials"
cardAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="default"
useInvertedBackground={true}
faqs={[
{
id: "f1",
title: "How does it monitor?",
content: "It sends a GET request every 10 seconds to your URL.",
},
{
id: "f2",
title: "Can I add many sites?",
content: "Yes, our dashboard supports batch monitoring.",
},
{
id: "f3",
name: "Is data stored?",
content: "Yes, logs are cached for the last 10 entries.",
},
]}
title="Frequently Asked Questions"
description="Common questions about our website health monitoring platform."
faqsAnimation="blur-reveal"
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="default"
useInvertedBackground={true}
faqs={[
{ id: "f1", title: "How does it monitor?", content: "It sends a GET request every 10 seconds to your URL." },
{ id: "f2", title: "Can I add many sites?", content: "Yes, our dashboard supports batch monitoring." },
{ id: "f3", title: "Is data stored?", content: "Yes, logs are cached for the last 10 entries." }
]}
title="Frequently Asked Questions"
description="Common questions about our website health monitoring platform."
faqsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Get In Touch"
description="Have questions about integration or pricing? Reach out to our team."
inputs={[
{
name: "name",
type: "text",
placeholder: "Name",
required: true,
},
{
name: "email",
type: "email",
placeholder: "Email",
required: true,
},
]}
imageSrc="http://img.b2bpic.net/free-photo/glowing-futuristic-digital-design-network-server-generated-by-ai_188544-27277.jpg"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Get In Touch"
description="Have questions about integration or pricing? Reach out to our team."
inputs={[
{ name: "name", type: "text", placeholder: "Name", required: true },
{ name: "email", type: "email", placeholder: "Email", required: true }
]}
imageSrc="http://img.b2bpic.net/free-photo/glowing-futuristic-digital-design-network-server-generated-by-ai_188544-27277.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/medical-icon-pulse-wave-cross-symbol_23-2152013364.jpg"
logoText="HealthMonitor"
columns={[
{
title: "Product",
items: [
{
label: "Dashboard",
href: "#",
},
{
label: "Features",
href: "#",
},
],
},
{
title: "Company",
items: [
{
label: "About",
href: "#",
},
{
label: "Contact",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/medical-icon-pulse-wave-cross-symbol_23-2152013364.jpg"
logoText="HealthMonitor"
columns={[
{ title: "Product", items: [{ label: "Dashboard", href: "#" }, { label: "Features", href: "#" }] },
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#" }] }
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);