195 lines
9.0 KiB
TypeScript
195 lines
9.0 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
|
|
export default function LandingPage() {
|
|
const processPayment = (price: string) => {
|
|
const script = document.createElement("script");
|
|
script.src = "https://checkout.razorpay.com/v1/checkout.js";
|
|
script.onload = () => {
|
|
const options = {
|
|
key: "YOUR_RAZORPAY_KEY", amount: 2100, // 21 Rupees
|
|
currency: "INR", name: "TechPlatform", description: "Purchase of 21 units", handler: async (response: any) => {
|
|
try {
|
|
await fetch("/api/submit-lead", {
|
|
method: "POST", headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
paymentId: response.razorpay_payment_id,
|
|
units: 21,
|
|
status: 'success'
|
|
}),
|
|
});
|
|
alert("Payment Successful! Thank you for your order.");
|
|
} catch (e) {
|
|
console.error("Error submitting lead", e);
|
|
}
|
|
},
|
|
theme: { color: "#3b82f6" },
|
|
};
|
|
const rzp = new (window as any).Razorpay(options);
|
|
rzp.open();
|
|
};
|
|
document.body.appendChild(script);
|
|
};
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="fluid"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="TechPlatform"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
background={{ variant: "gradient-bars" }}
|
|
logoText="TechPlatform"
|
|
description="The ultimate solution for scaling your digital infrastructure with ease."
|
|
buttons={[
|
|
{ text: "Get Started", href: "#pricing" },
|
|
{ text: "Learn More", href: "#features" },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/technology-abstract-background-with-particle-lines_53876-104054.jpg"
|
|
imageAlt="modern tech dashboard UI"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
useInvertedBackground={false}
|
|
title="Driving Innovation"
|
|
description="We are dedicated to building high-performance tools that help your team work smarter, not harder."
|
|
imageSrc="http://img.b2bpic.net/free-photo/african-man-guy-black-suit-students-with-laptop-girl-white-blouse_1157-41602.jpg"
|
|
imageAlt="modern professional office team"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardMedia
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{ id: "f1", title: "Real-time Analytics", description: "Monitor your data with precision and clarity.", tag: "Speed", imageSrc: "http://img.b2bpic.net/free-vector/navigation-banner-set_1284-13444.jpg" },
|
|
{ id: "f2", title: "Seamless Integration", description: "Works perfectly with your existing tech stack.", tag: "Unified", imageSrc: "http://img.b2bpic.net/free-vector/20-ux-ui-blue-color-icon-pack-like-list-vision-parameters-monitoring-volume_1142-24669.jpg" },
|
|
{ id: "f3", title: "Cloud Scale", description: "Grow without limits, powered by reliable architecture.", tag: "Scale", imageSrc: "http://img.b2bpic.net/free-photo/modern-living-room-interior-with-smart-home-control-panel_9975-33223.jpg" },
|
|
]}
|
|
title="Core Features"
|
|
description="Powerful capabilities to streamline your workflow."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{ id: "basic", price: "₹21", name: "Basic", buttons: [{ text: "Pay ₹21", onClick: () => processPayment("21") }], features: ["1 User", "Basic Analytics", "Email Support"] },
|
|
{ id: "pro", price: "₹21", name: "Pro", badge: "Popular", buttons: [{ text: "Pay ₹21", onClick: () => processPayment("21") }], features: ["5 Users", "Advanced Analytics", "24/7 Support"] },
|
|
{ id: "enterprise", price: "₹21", name: "Enterprise", buttons: [{ text: "Pay ₹21", onClick: () => processPayment("21") }], features: ["Unlimited Users", "Full API Access", "Dedicated Manager"] },
|
|
]}
|
|
title="Flexible Plans"
|
|
description="Get access to our platform for just 21 Rupees."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{ id: "m1", value: "99.9%", title: "Uptime", items: ["Always on", "Reliability guaranteed"] },
|
|
{ id: "m2", value: "500+", title: "Customers", items: ["Global presence", "Trusted leaders"] },
|
|
{ id: "m3", value: "100M+", title: "API Calls", items: ["High throughput", "Robust handling"] },
|
|
]}
|
|
title="Proven Results"
|
|
description="Numbers that define our impact."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{ id: "1", title: "Game changer", quote: "This platform transformed our daily productivity.", name: "Jane Doe", role: "CTO", imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-hipster-male-dressed-suit-sunglasses-dark-grey-background_613910-12487.jpg" },
|
|
{ id: "2", title: "Excellent service", quote: "I've never experienced such smooth integration.", name: "John Smith", role: "CEO", imageSrc: "http://img.b2bpic.net/free-photo/confident-cheerful-businesswoman_1262-21021.jpg" },
|
|
{ id: "3", title: "Invaluable tool", quote: "A must-have for any serious tech startup.", name: "Alice Wang", role: "Lead Dev", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-man-black-shirt-poses-against-dark-background-standing-studio_613910-15100.jpg" },
|
|
{ id: "4", title: "Pure efficiency", quote: "Reliability like no other in the industry.", name: "Bob Chen", role: "Engineer", imageSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman_74855-1573.jpg" },
|
|
{ id: "5", title: "Highly recommended", quote: "Best platform investment we have made.", name: "Charlie Lee", role: "Founder", imageSrc: "http://img.b2bpic.net/free-photo/business-woman-standing_1187-1543.jpg" },
|
|
]}
|
|
title="Client Success"
|
|
description="Hear what our partners have to say."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{ id: "q1", title: "Is my data secure?", content: "Yes, we prioritize security with enterprise-grade encryption." },
|
|
{ id: "q2", title: "Can I upgrade anytime?", content: "Absolutely, plans are flexible and can be modified." },
|
|
{ id: "q3", title: "Do you offer support?", content: "Our support team is available 24/7 to help you." },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/wireless-router-with-copy-space_23-2148295822.jpg"
|
|
title="Common Questions"
|
|
description="Get quick answers about our services."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
tag="Get in touch"
|
|
title="Ready to get started?"
|
|
description="Our team is ready to help you hit the ground running."
|
|
buttons={[{ text: "Contact Support", href: "mailto:hello@techplatform.com" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="TechPlatform"
|
|
leftLink={{ text: "Privacy Policy", href: "#" }}
|
|
rightLink={{ text: "Terms of Service", href: "#" }}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |