294 lines
20 KiB
TypeScript
294 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
|
|
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
|
|
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import FaqBase from "@/components/sections/faq/FaqBase";
|
|
import ContactText from "@/components/sections/contact/ContactText";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import { Sparkles, CheckCircle, Award, Zap, Star, HelpCircle, Twitter, Linkedin, Facebook, Instagram } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="CourseHub"
|
|
navItems={[
|
|
{ name: "होम", id: "hero" },
|
|
{ name: "कोर्सेज", id: "products" },
|
|
{ name: "प्राइसिंग", id: "pricing" },
|
|
{ name: "सवाल-जवाब", id: "faq" },
|
|
]}
|
|
button={{
|
|
text: "शुरुआत करें", href: "#contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
title="अपने कौशल को अगले स्तर तक ले जाएं"
|
|
description="हम आपको विश्वमानक कोर्सेज प्रदान करते हैं जो आपके कैरियर को नई ऊंचाइयों तक ले जाएंगे। लाखों विद्यार्थियों ने हमारे साथ सीखा है।"
|
|
tag="ऑनलाइन शिक्षा प्लेटफॉर्म"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/rear-view-young-college-student-paying-attention-listening-her-online-teacher-laptop-home_662251-2487.jpg", imageAlt: "ऑनलाइन कोर्स सीखने वाले विद्यार्थी"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/teleworker-using-headphones-home-watch-instructional-course-videos_482257-118863.jpg", imageAlt: "डिजिटल शिक्षा प्रशिक्षण"
|
|
},
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
rating={5}
|
|
ratingText="10,000+ संतुष्ट विद्यार्थी"
|
|
buttons={[
|
|
{ text: "अभी एनरोल करें", href: "#pricing" },
|
|
{ text: "विशेषताएं देखें", href: "#features" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSixteen
|
|
negativeCard={{
|
|
items: [
|
|
"समय की बर्बादी", "सीमित संसाधन", "कोई समर्थन नहीं", "अपूर्ण पाठ्यक्रम"
|
|
],
|
|
}}
|
|
positiveCard={{
|
|
items: [
|
|
"तेज सीखने की गति", "विस्तृत शिक्षण सामग्री", "24/7 समर्थन टीम", "प्रमाणपत्र प्राप्त करें"
|
|
],
|
|
}}
|
|
animationType="slide-up"
|
|
title="पारंपरिक शिक्षा vs. आधुनिक कोर्सेज"
|
|
description="हमारे कोर्सेज आपको सर्वोत्तम संसाधन और समर्थन प्रदान करते हैं।"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tag="क्यों हमें चुनें"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
title="लोकप्रिय कोर्सेज"
|
|
description="हमारे सबसे लोकप्रिय कोर्सेज जो हजारों विद्यार्थियों को प्रशिक्षित कर चुके हैं।"
|
|
tag="शीर्ष रेटेड"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "1", name: "वेब डेवलपमेंट मास्टरक्लास", price: "₹4,999", variant: "HTML, CSS, JavaScript", imageSrc: "http://img.b2bpic.net/free-photo/working-code_1098-19858.jpg", imageAlt: "वेब डेवलपमेंट कोर्स"
|
|
},
|
|
{
|
|
id: "2", name: "डेटा साइंस फंडामेंटल्स", price: "₹5,999", variant: "Python, Machine Learning", imageSrc: "http://img.b2bpic.net/free-photo/remote-worker-home-watching-business-conference-pc-monitor_482257-125192.jpg", imageAlt: "डेटा साइंस कोर्स"
|
|
},
|
|
{
|
|
id: "3", name: "डिजिटल मार्केटिंग प्रोफेशनल", price: "₹3,999", variant: "SEO, Content, Social Media", imageSrc: "http://img.b2bpic.net/free-photo/businessman-holding-digital-tablet-with-digital-marketing-graph_9975-22063.jpg", imageAlt: "डिजिटल मार्केटिंग कोर्स"
|
|
},
|
|
{
|
|
id: "4", name: "यूआई/यूएक्स डिजाइन कोर्स", price: "₹4,499", variant: "Figma, Design Systems", imageSrc: "http://img.b2bpic.net/free-vector/task-management-application_23-2148625868.jpg", imageAlt: "यूआई/यूएक्स डिजाइन कोर्स"
|
|
},
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
buttons={[{ text: "सभी कोर्सेज देखें", href: "#" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
title="सही प्लान चुनें"
|
|
description="आपकी जरूरत के अनुसार सर्वोत्तम प्रशिक्षण पैकेज।"
|
|
tag="प्राइसिंग"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
plans={[
|
|
{
|
|
id: "basic", badge: "शुरुआती के लिए", badgeIcon: Sparkles,
|
|
price: "₹999", subtitle: "एक कोर्स तक पहुंच", buttons: [{ text: "शुरुआत करें", href: "#" }],
|
|
features: [
|
|
"1 कोर्स तक पहुंच", "लाइफटाइम सपोर्ट", "डाउनलोडेबल संसाधन", "कम्युनिटी फोरम"
|
|
],
|
|
},
|
|
{
|
|
id: "pro", badge: "सर्वाधिक लोकप्रिय", badgeIcon: Sparkles,
|
|
price: "₹4,999", subtitle: " 10 कोर्सेज तक पहुंच", buttons: [{ text: "अभी खरीदें", href: "#" }],
|
|
features: [
|
|
"10 कोर्सेज तक पहुंच", "24/7 प्राथमिकता सहायता", "प्रमाणपत्र", "मेंटरशिप कार्यक्रम", "एक्सक्लूसिव वेबिनार"
|
|
],
|
|
},
|
|
{
|
|
id: "enterprise", badge: "संस्थान के लिए", badgeIcon: Sparkles,
|
|
price: "₹9,999", subtitle: "असीमित पहुंच", buttons: [{ text: "संपर्क करें", href: "#" }],
|
|
features: [
|
|
"सभी कोर्सेज की पहुंच", "डेडिकेटेड खाता प्रबंधक", "कस्टम कोर्स विकास", "एंटरप्राइज एसएसओ", "उन्नत विश्लेषिकी", "व्यक्तिगत प्रशिक्षण सत्र"
|
|
],
|
|
},
|
|
]}
|
|
carouselMode="buttons"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
title="हमारे विद्यार्थियों की सफलता"
|
|
description="हजारों विद्यार्थियों ने हमारे कोर्सेज से अपना कैरियर बदला है।"
|
|
tag="प्रशंसापत्र"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "राज कुमार", handle: "@rajkumar", testimonial: "इस कोर्स ने मेरा जीवन बदल दिया। मैंने 6 महीने में एक अच्छी नौकरी पा ली।", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg", imageAlt: "portrait man professional avatar"
|
|
},
|
|
{
|
|
id: "2", name: "प्रिया शर्मा", handle: "@priyasharma", testimonial: "शिक्षकों की गुणवत्ता और पाठ्यक्रम की संरचना बहुत अच्छी है।", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/real-professional-smiling-businesswoman-looking-confident-determined-face-expression-standing-suit-white-background_1258-123234.jpg", imageAlt: "woman professional portrait face"
|
|
},
|
|
{
|
|
id: "3", name: "अमित सिंह", handle: "@amitsingh", testimonial: "मेरे लिए यह कोर्स सबसे मूल्यवान निवेश साबित हुआ।", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg", imageAlt: "man portrait professional avatar"
|
|
},
|
|
{
|
|
id: "4", name: "निशा वर्मा", handle: "@nishaverm", testimonial: "शानदार सामग्री और अद्भुत समुदाय सहायता। सबको सुझाऊंगी।", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/real-professional-smiling-businesswoman-looking-confident-determined-face-expression-standing-suit-white-background_1258-123234.jpg", imageAlt: "woman face professional portrait"
|
|
},
|
|
{
|
|
id: "5", name: "विजय पटेल", handle: "@vijaypatel", testimonial: "व्यावहारिक ज्ञान और कौशल विकास पर ध्यान केंद्रित। बहुत प्रभावी।", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/confident-european-businessman-smiling-closeup-portrait-jobs-career-campaign_53876-128975.jpg", imageAlt: "man professional avatar portrait"
|
|
},
|
|
{
|
|
id: "6", name: "सीता चौधरी", handle: "@sitachoudh", testimonial: "यह कोर्स मेरी कैरियर यात्रा को पूरी तरह बदल गया है।", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", imageAlt: "woman professional face avatar"
|
|
},
|
|
]}
|
|
showRating={true}
|
|
carouselMode="buttons"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="शीर्ष कंपनियों द्वारा विश्वस्त"
|
|
description="दुनिया भर की प्रमुख कंपनियों के कर्मचारी हमारे कोर्सेज से सीखते हैं।"
|
|
tag="भागीदार"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
names={[
|
|
"Google", "Microsoft", "Amazon", "Meta", "Apple", "Netflix", "Uber", "Airbnb"
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="सबसे अधिक पूछे जाने वाले प्रश्न"
|
|
description="हमारे कोर्सेज के बारे में आपके सभी प्रश्नों का उत्तर।"
|
|
tag="सहायता"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "मैं कोर्स के लिए कैसे नामांकन कर सकता हूं?", content: "नामांकन बहुत सरल है। बस अपना पसंदीदा कोर्स चुनें, 'एनरोल करें' पर क्लिक करें, अपना विवरण भरें और भुगतान करें। तुरंत आपको पाठ्यक्रम सामग्री तक पहुंच मिल जाएगी।"
|
|
},
|
|
{
|
|
id: "2", title: "क्या मैं कोर्स को अपनी गति से सीख सकता हूं?", content: "हां, पूरी तरह से! सभी कोर्सेज सेल्फ-पेस्ड हैं। आप कभी भी, कहीं भी सीख सकते हैं। कोई समय सीमा नहीं है।"
|
|
},
|
|
{
|
|
id: "3", title: "क्या मुझे प्रमाणपत्र मिलेगा?", content: "हां, कोर्स पूरा करने के बाद आपको एक स्वीकृत प्रमाणपत्र मिलेगा जो आप अपने रिज्यूमे में शामिल कर सकते हैं।"
|
|
},
|
|
{
|
|
id: "4", title: "अगर मुझे कोर्स पसंद नहीं आया तो?", content: "हम 30 दिन की मनी-बैक गारंटी प्रदान करते हैं। यदि आप संतुष्ट नहीं हैं, तो पूरी राशि वापस कर दी जाएगी।"
|
|
},
|
|
{
|
|
id: "5", title: "क्या कोई समर्थन उपलब्ध है?", content: "हां, हमारी समर्पित समर्थन टीम 24/7 उपलब्ध है। आप ईमेल, चैट या फोन के माध्यम से हमसे संपर्क कर सकते हैं।"
|
|
},
|
|
{
|
|
id: "6", title: "क्या नए कोर्सेज नियमित रूप से जोड़े जाते हैं?", content: "हां, हम नियमित रूप से नए और अपडेट किए गए कोर्सेज जोड़ते हैं। प्रो सदस्य को सभी नए कोर्सेज तक स्वचालित पहुंच मिलती है।"
|
|
},
|
|
]}
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="आपका भविष्य अब शुरू होता है। आज ही हमारे साथ जुड़ें और अपने सपनों को हकीकत में बदलें।"
|
|
animationType="reveal-blur"
|
|
buttons={[
|
|
{ text: "अभी शुरुआत करें", href: "#pricing" },
|
|
{ text: "अधिक जानकारी", href: "#" },
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="CourseHub"
|
|
copyrightText="© 2025 | CourseHub. सर्वाधिकार सुरक्षित।"
|
|
socialLinks={[
|
|
{
|
|
icon: Twitter,
|
|
href: "https://twitter.com/coursehub", ariaLabel: "Twitter"
|
|
},
|
|
{
|
|
icon: Linkedin,
|
|
href: "https://linkedin.com/company/coursehub", ariaLabel: "LinkedIn"
|
|
},
|
|
{
|
|
icon: Facebook,
|
|
href: "https://facebook.com/coursehub", ariaLabel: "Facebook"
|
|
},
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com/coursehub", ariaLabel: "Instagram"
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|