Merge version_3 into main
Merge version_3 into main
This commit was merged in pull request #3.
This commit is contained in:
466
src/app/page.tsx
466
src/app/page.tsx
@@ -1,18 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import MediaSplitAbout from '@/components/sections/about/MediaSplitAbout';
|
||||
import FeatureCardEighteen from '@/components/sections/feature/FeatureCardEighteen';
|
||||
import MetricCardSix from '@/components/sections/metrics/MetricCardSix';
|
||||
import PricingCardSix from '@/components/sections/pricing/PricingCardSix';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import SplitAboutMetrics from '@/components/sections/about/SplitAboutMetrics';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { CheckCircle, Users, TrendingUp, Star } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -21,7 +9,7 @@ export default function LandingPage() {
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="sharp"
|
||||
contentWidth="large"
|
||||
sizing="small"
|
||||
sizing="medium"
|
||||
background="radialGradient"
|
||||
cardStyle="elevated-accent-light"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
@@ -29,369 +17,119 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{name: "Home", id: "hero"},
|
||||
{name: "Courses", id: "pricing"},
|
||||
{name: "About", id: "about"},
|
||||
{name: "Success", id: "testimonial"},
|
||||
{name: "Contact", id: "contact"}
|
||||
]}
|
||||
brandName="Rubyroid"
|
||||
bottomLeftText="Ruby Programming"
|
||||
bottomRightText="hello@rubyroid.io"
|
||||
/>
|
||||
<div className="text-center py-20">
|
||||
<h1 className="text-4xl font-bold mb-4">Rubyroid - Master Ruby Programming</h1>
|
||||
<p className="text-xl text-gray-600">Learn Ruby and Rails from industry experts</p>
|
||||
<nav className="mt-8">
|
||||
<ul className="flex justify-center space-x-6">
|
||||
<li><a href="#hero" className="hover:text-blue-600">Home</a></li>
|
||||
<li><a href="#pricing" className="hover:text-blue-600">Courses</a></li>
|
||||
<li><a href="#about" className="hover:text-blue-600">About</a></li>
|
||||
<li><a href="#testimonial" className="hover:text-blue-600">Success</a></li>
|
||||
<li><a href="#contact" className="hover:text-blue-600">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
title="Master Ruby Programming at Rubyroid"
|
||||
description="Learn professional-grade Ruby and Rails development from industry experts. Build real-world applications and launch your tech career with comprehensive hands-on training."
|
||||
kpis={[
|
||||
{value: "500+", label: "Successful Graduates"},
|
||||
{value: "95%", label: "Job Placement Rate"},
|
||||
{value: "12 Weeks", label: "Course Duration"}
|
||||
]}
|
||||
tag="Accepted into top tech companies"
|
||||
tagIcon={CheckCircle}
|
||||
buttons={[
|
||||
{text: "Enroll Now", href: "#contact"},
|
||||
{text: "Learn More", href: "#about"}
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492693670-lj7ueobz.png"
|
||||
imageAlt="Students learning Ruby programming"
|
||||
imagePosition="right"
|
||||
/>
|
||||
<div className="text-center py-20">
|
||||
<h2 className="text-3xl font-bold mb-6">Master Ruby Programming at Rubyroid</h2>
|
||||
<p className="text-lg text-gray-600 mb-8">Learn professional-grade Ruby and Rails development from industry experts. Build real-world applications and launch your tech career with comprehensive hands-on training.</p>
|
||||
<div className="flex justify-center space-x-8 mb-8">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold">500+</div>
|
||||
<div className="text-sm text-gray-600">Successful Graduates</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold">95%</div>
|
||||
<div className="text-sm text-gray-600">Job Placement Rate</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold">12 Weeks</div>
|
||||
<div className="text-sm text-gray-600">Course Duration</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-x-4">
|
||||
<a href="#contact" className="bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700">Enroll Now</a>
|
||||
<a href="#about" className="bg-gray-200 text-gray-800 px-6 py-3 rounded hover:bg-gray-300">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaSplitAbout
|
||||
title="Why Choose Rubyroid"
|
||||
description="Rubyroid is a premier IT school dedicated to transforming aspiring developers into industry-ready professionals. Our comprehensive Ruby and Rails curriculum combines theoretical knowledge with practical project experience. We focus on modern development practices, code quality, and real-world problem solving. With mentorship from experienced software engineers and a supportive learning community, students gain the skills and confidence needed to excel in today's competitive tech industry."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484693438-07rkdlqa.jpg"
|
||||
imageAlt="Collaborative learning environment"
|
||||
imagePosition="right"
|
||||
buttons={[
|
||||
{text: "View Curriculum", href: "#pricing"}
|
||||
]}
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEighteen
|
||||
title="Traditional vs Rubyroid Learning"
|
||||
description="See how our approach transforms programming education"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="noInvert"
|
||||
negativeCard={{
|
||||
title: "Traditional Learning",
|
||||
items: [
|
||||
"Outdated teaching materials",
|
||||
"Limited hands-on projects",
|
||||
"No industry mentorship",
|
||||
"Slow paced curriculum",
|
||||
"Generic certification"
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492694761-e96hadsf.jpg",
|
||||
imageAlt: "Traditional classroom setup"
|
||||
}}
|
||||
positiveCard={{
|
||||
title: "Rubyroid Method",
|
||||
items: [
|
||||
"Current industry standards",
|
||||
"Real-world production projects",
|
||||
"Mentorship from professionals",
|
||||
"Intensive accelerated learning",
|
||||
"Job-ready portfolio"
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492695669-hy749o3o.jpg",
|
||||
imageAlt: "Modern coding environment"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSix
|
||||
title="Our Impact"
|
||||
description="Transforming lives through tech education since 2020"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="noInvert"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "500+",
|
||||
tag: "Graduates",
|
||||
tagIcon: Users,
|
||||
title: "Skilled developers trained and deployed"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "95%",
|
||||
tag: "Success",
|
||||
tagIcon: TrendingUp,
|
||||
title: "Job placement rate within 3 months"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "4.9/5",
|
||||
tag: "Satisfaction",
|
||||
tagIcon: Star,
|
||||
title: "Average student satisfaction rating"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardSix
|
||||
title="Flexible Learning Plans"
|
||||
description="Choose the program that fits your schedule and goals"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="noInvert"
|
||||
plans={[
|
||||
{
|
||||
id: "foundation",
|
||||
price: "$1,499",
|
||||
subtitle: "Perfect for complete beginners in programming",
|
||||
features: [
|
||||
"12-week intensive course",
|
||||
"Ruby fundamentals and OOP",
|
||||
"Git and version control",
|
||||
"Community support",
|
||||
"Certificate of completion"
|
||||
],
|
||||
buttons: [
|
||||
{text: "Start Foundation", href: "#contact"}
|
||||
],
|
||||
bottomNotes: [
|
||||
"Flexible payment plans available",
|
||||
"Money-back guarantee"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "professional",
|
||||
price: "$2,999",
|
||||
subtitle: "Comprehensive program with job placement focus",
|
||||
features: [
|
||||
"16-week intensive bootcamp",
|
||||
"Ruby on Rails mastery",
|
||||
"Database design and SQL",
|
||||
"Full-stack web development",
|
||||
"1-on-1 mentorship",
|
||||
"Portfolio development",
|
||||
"Job preparation support"
|
||||
],
|
||||
buttons: [
|
||||
{text: "Enroll Professional", href: "#contact"}
|
||||
],
|
||||
bottomNotes: [
|
||||
"95% job placement guarantee",
|
||||
"Deferred payment options"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "advanced",
|
||||
price: "$4,499",
|
||||
subtitle: "Advanced program for career accelerators",
|
||||
features: [
|
||||
"20-week master program",
|
||||
"Advanced Rails patterns",
|
||||
"DevOps and deployment",
|
||||
"Performance optimization",
|
||||
"Unlimited mentorship",
|
||||
"Salary negotiation coaching",
|
||||
"6-month job guarantee"
|
||||
],
|
||||
buttons: [
|
||||
{text: "Start Advanced", href: "#contact"}
|
||||
],
|
||||
bottomNotes: [
|
||||
"Guaranteed minimum salary placement",
|
||||
"Career advancement support"
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardThirteen
|
||||
title="Success Stories"
|
||||
description="Hear from graduates who transformed their careers through Rubyroid"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="noInvert"
|
||||
showRating={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Chen",
|
||||
handle: "@sarahdev",
|
||||
rating: 5,
|
||||
testimonial: "Rubyroid completely transformed my career. The hands-on approach and mentorship from industry professionals made all the difference. I landed a job within 2 weeks of graduation at a top-tier company.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492697041-9adqfrju.jpg"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael Rodriguez",
|
||||
handle: "@mikerod",
|
||||
rating: 5,
|
||||
testimonial: "Coming from a non-tech background, I was skeptical about coding bootcamps. Rubyroid proved me wrong. The curriculum is practical, the instructors are amazing, and the community is incredibly supportive.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484714329-4i8nds16.jpg"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emma Thompson",
|
||||
handle: "@emmathompson",
|
||||
rating: 5,
|
||||
testimonial: "The job placement support at Rubyroid goes above and beyond. Not only did I learn Ruby and Rails, but I also gained confidence in interviews and negotiations. My salary doubled after graduation!",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492697891-iw1rgx1u.jpg"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "James Wilson",
|
||||
handle: "@jamescode",
|
||||
rating: 5,
|
||||
testimonial: "Best investment in my career. The mentorship and real-world projects prepared me for professional development like nothing else could. I highly recommend Rubyroid to anyone serious about tech.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492698706-udp5pns4.jpg"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
title="Common Questions"
|
||||
description="Find answers about our programs and enrollment process"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="noInvert"
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Do I need prior programming experience to enroll?",
|
||||
content: "No prior experience is required for our Foundation and Professional programs. We start from complete beginner level. Our Advanced program assumes some Ruby or programming knowledge. We offer a free assessment to help you choose the right program level."
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "What is the time commitment?",
|
||||
content: "Our programs are full-time intensive courses. Foundation requires 12 weeks, Professional requires 16 weeks, and Advanced requires 20 weeks. Classes run Monday through Friday, approximately 8-10 hours per week including lectures, labs, and projects."
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Do you offer job placement assistance?",
|
||||
content: "Yes! All our programs include comprehensive job placement support including resume review, interview coaching, salary negotiation help, and direct connections to hiring partners. Our Professional program has a 95% job placement rate within 3 months of graduation."
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "What payment options are available?",
|
||||
content: "We offer upfront payment, monthly installments, and deferred income share agreements for qualified students. We also partner with financing companies for flexible payment plans. Contact our enrollment team to discuss the best option for you."
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Is there a money-back guarantee?",
|
||||
content: "Yes! If you're not satisfied with your learning experience within the first 2 weeks, we offer a full refund. Additionally, our job guarantee ensures placement in a relevant role or a portion of tuition is refunded."
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
title: "What tools and technologies are covered?",
|
||||
content: "We cover Ruby, Rails, HTML, CSS, JavaScript, Git, PostgreSQL, and modern development workflows. You'll build real projects deployed to production and maintain GitHub portfolios. All tools and resources are included in tuition."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<div className="py-20">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold mb-6 text-center">Why Choose Rubyroid</h2>
|
||||
<p className="text-lg text-gray-600 text-center mb-8">Rubyroid is a premier IT school dedicated to transforming aspiring developers into industry-ready professionals. Our comprehensive Ruby and Rails curriculum combines theoretical knowledge with practical project experience.</p>
|
||||
<div className="text-center">
|
||||
<a href="#pricing" className="bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700">View Curriculum</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenterForm
|
||||
title="Start Your Journey"
|
||||
description="Enroll in Rubyroid today and transform your career. Our admissions team is ready to help you get started."
|
||||
useInvertedBackground="noInvert"
|
||||
buttonText="Submit"
|
||||
inputs={[
|
||||
{name: "fullName", type: "text", placeholder: "Full Name", required: true},
|
||||
{name: "email", type: "email", placeholder: "Email Address", required: true},
|
||||
{name: "phone", type: "tel", placeholder: "Phone Number", required: true},
|
||||
{name: "program", type: "text", placeholder: "Interested Program (Foundation/Professional/Advanced)", required: true}
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Tell us about your background and goals",
|
||||
rows: 5,
|
||||
required: false
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="split-about-metrics" data-section="split-about-metrics">
|
||||
<SplitAboutMetrics
|
||||
title="Why Rubyroid Stands Out"
|
||||
description="Our unique approach combines industry expertise with student success"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484693438-07rkdlqa.jpg"
|
||||
imageAlt="Rubyroid learning experience"
|
||||
imagePosition="left"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "500+",
|
||||
label: "Graduates"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "95%",
|
||||
label: "Job Placement"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "4.9/5",
|
||||
label: "Student Rating"
|
||||
}
|
||||
]}
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
<div className="py-20">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<h2 className="text-3xl font-bold mb-6 text-center">Start Your Journey</h2>
|
||||
<p className="text-lg text-gray-600 text-center mb-8">Enroll in Rubyroid today and transform your career. Our admissions team is ready to help you get started.</p>
|
||||
<form className="space-y-4">
|
||||
<input type="text" placeholder="Full Name" className="w-full p-3 border border-gray-300 rounded" required />
|
||||
<input type="email" placeholder="Email Address" className="w-full p-3 border border-gray-300 rounded" required />
|
||||
<input type="tel" placeholder="Phone Number" className="w-full p-3 border border-gray-300 rounded" required />
|
||||
<input type="text" placeholder="Interested Program (Foundation/Professional/Advanced)" className="w-full p-3 border border-gray-300 rounded" required />
|
||||
<textarea placeholder="Tell us about your background and goals" rows={5} className="w-full p-3 border border-gray-300 rounded"></textarea>
|
||||
<button type="submit" className="w-full bg-blue-600 text-white py-3 rounded hover:bg-blue-700">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Rubyroid"
|
||||
columns={[
|
||||
{
|
||||
title: "Programs",
|
||||
items: [
|
||||
{label: "Foundation Course", href: "#pricing"},
|
||||
{label: "Professional Bootcamp", href: "#pricing"},
|
||||
{label: "Advanced Program", href: "#pricing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{label: "About Us", href: "#about"},
|
||||
{label: "Success Stories", href: "#testimonial"},
|
||||
{label: "FAQ", href: "#faq"}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
{label: "hello@rubyroid.io", href: "mailto:hello@rubyroid.io"},
|
||||
{label: "Support", href: "#contact"},
|
||||
{label: "Careers", href: "#"}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{label: "Terms of Service", href: "#"},
|
||||
{label: "Privacy Policy", href: "#"}
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2024 Rubyroid. All rights reserved."
|
||||
/>
|
||||
<div className="bg-gray-800 text-white py-12">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h3 className="font-bold mb-4">Programs</h3>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="#pricing" className="hover:text-gray-300">Foundation Course</a></li>
|
||||
<li><a href="#pricing" className="hover:text-gray-300">Professional Bootcamp</a></li>
|
||||
<li><a href="#pricing" className="hover:text-gray-300">Advanced Program</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold mb-4">Company</h3>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="#about" className="hover:text-gray-300">About Us</a></li>
|
||||
<li><a href="#testimonial" className="hover:text-gray-300">Success Stories</a></li>
|
||||
<li><a href="#faq" className="hover:text-gray-300">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold mb-4">Contact</h3>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="mailto:hello@rubyroid.io" className="hover:text-gray-300">hello@rubyroid.io</a></li>
|
||||
<li><a href="#contact" className="hover:text-gray-300">Support</a></li>
|
||||
<li><a href="#" className="hover:text-gray-300">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold mb-4">Legal</h3>
|
||||
<ul className="space-y-2">
|
||||
<li><a href="#" className="hover:text-gray-300">Terms of Service</a></li>
|
||||
<li><a href="#" className="hover:text-gray-300">Privacy Policy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 pt-8 border-t border-gray-600 text-center">
|
||||
<div className="mb-4">
|
||||
<h2 className="text-2xl font-bold">Rubyroid</h2>
|
||||
</div>
|
||||
<p className="text-gray-400">© 2024 Rubyroid. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user