Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -1,6 +1,17 @@
-"use client";
+"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 { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { CheckCircle, Users, TrendingUp, Star } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -9,7 +20,7 @@ export default function LandingPage() {
       defaultTextAnimation="reveal-blur"
       borderRadius="sharp"
       contentWidth="large"
-      sizing="medium"
+      sizing="small"
       background="radialGradient"
       cardStyle="elevated-accent-light"
       primaryButtonStyle="diagonal-gradient"
@@ -17,119 +28,341 @@ export default function LandingPage() {
       headingFontWeight="semibold"
     >
       <div id="nav" data-section="nav">
-        <div className="text-center py-20">
+        <NavbarStyleFullscreen
-          <h1 className="text-4xl font-bold mb-4">Rubyroid - Master Ruby Programming</h1>
+          navItems={[
-          <p className="text-xl text-gray-600">Learn Ruby and Rails from industry experts</p>
+            {name: "Home", id: "hero"},
-          <nav className="mt-8">
+            {name: "Courses", id: "pricing"},
-            <ul className="flex justify-center space-x-6">
+            {name: "About", id: "about"},
-              <li><a href="#hero" className="hover:text-blue-600">Home</a></li>
+            {name: "Success", id: "testimonial"},
-              <li><a href="#pricing" className="hover:text-blue-600">Courses</a></li>
+            {name: "Contact", id: "contact"}
-              <li><a href="#about" className="hover:text-blue-600">About</a></li>
+          ]}
-              <li><a href="#testimonial" className="hover:text-blue-600">Success</a></li>
+          brandName="Rubyroid"
-              <li><a href="#contact" className="hover:text-blue-600">Contact</a></li>
+          bottomLeftText="Ruby Programming"
-            </ul>
+          bottomRightText="hello@rubyroid.io"
-          </nav>
+        />
-        </div>
       </div>
 
       <div id="hero" data-section="hero">
-        <div className="text-center py-20">
+        <HeroSplitKpi
-          <h2 className="text-3xl font-bold mb-6">Master Ruby Programming at Rubyroid</h2>
+          title="Master Ruby Programming at Rubyroid"
-          <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>
+          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."
-          <div className="flex justify-center space-x-8 mb-8">
+          kpis={[
-            <div className="text-center">
+            {value: "500+", label: "Successful Graduates"},
-              <div className="text-2xl font-bold">500+</div>
+            {value: "95%", label: "Job Placement Rate"},
-              <div className="text-sm text-gray-600">Successful Graduates</div>
+            {value: "12 Weeks", label: "Course Duration"}
-            </div>
+          ]}
-            <div className="text-center">
+          tag="Accepted into top tech companies"
-              <div className="text-2xl font-bold">95%</div>
+          tagIcon={CheckCircle}
-              <div className="text-sm text-gray-600">Job Placement Rate</div>
+          buttons={[
-            </div>
+            {text: "Enroll Now", href: "#contact"},
-            <div className="text-center">
+            {text: "Learn More", href: "#about"}
-              <div className="text-2xl font-bold">12 Weeks</div>
+          ]}
-              <div className="text-sm text-gray-600">Course Duration</div>
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492693670-lj7ueobz.png"
-            </div>
+          imageAlt="Students learning Ruby programming"
-          </div>
+          imagePosition="right"
-          <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">
-        <div className="py-20">
+        <MediaSplitAbout
-          <div className="max-w-4xl mx-auto">
+          title="Why Choose Rubyroid"
-            <h2 className="text-3xl font-bold mb-6 text-center">Why Choose Rubyroid</h2>
+          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."
-            <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>
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484693438-07rkdlqa.jpg"
-            <div className="text-center">
+          imageAlt="Collaborative learning environment"
-              <a href="#pricing" className="bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700">View Curriculum</a>
+          imagePosition="right"
-            </div>
+          buttons={[
-          </div>
+            {text: "View Curriculum", href: "#pricing"}
-        </div>
+          ]}
+          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>
 
       <div id="contact" data-section="contact">
-        <div className="py-20">
+        <ContactCenterForm
-          <div className="max-w-2xl mx-auto">
+          title="Start Your Journey"
-            <h2 className="text-3xl font-bold mb-6 text-center">Start Your Journey</h2>
+          description="Enroll in Rubyroid today and transform your career. Our admissions team is ready to help you get started."
-            <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>
+          useInvertedBackground="noInvert"
-            <form className="space-y-4">
+          buttonText="Submit"
-              <input type="text" placeholder="Full Name" className="w-full p-3 border border-gray-300 rounded" required />
+          inputs={[
-              <input type="email" placeholder="Email Address" className="w-full p-3 border border-gray-300 rounded" required />
+            {name: "fullName", type: "text", placeholder: "Full Name", required: true},
-              <input type="tel" placeholder="Phone Number" className="w-full p-3 border border-gray-300 rounded" required />
+            {name: "email", type: "email", placeholder: "Email Address", required: true},
-              <input type="text" placeholder="Interested Program (Foundation/Professional/Advanced)" className="w-full p-3 border border-gray-300 rounded" required />
+            {name: "phone", type: "tel", placeholder: "Phone Number", required: true},
-              <textarea placeholder="Tell us about your background and goals" rows={5} className="w-full p-3 border border-gray-300 rounded"></textarea>
+            {name: "program", type: "text", placeholder: "Interested Program (Foundation/Professional/Advanced)", required: true}
-              <button type="submit" className="w-full bg-blue-600 text-white py-3 rounded hover:bg-blue-700">Submit</button>
+          ]}
-            </form>
+          textarea={{
-          </div>
+            name: "message",
-        </div>
+            placeholder: "Tell us about your background and goals",
+            rows: 5,
+            required: false
+          }}
+        />
       </div>
 
       <div id="footer" data-section="footer">
-        <div className="bg-gray-800 text-white py-12">
+        <FooterBaseCard
-          <div className="max-w-6xl mx-auto">
+          logoText="Rubyroid"
-            <div className="grid grid-cols-4 gap-8">
+          columns={[
-              <div>
+            {
-                <h3 className="font-bold mb-4">Programs</h3>
+              title: "Programs",
-                <ul className="space-y-2">
+              items: [
-                  <li><a href="#pricing" className="hover:text-gray-300">Foundation Course</a></li>
+                {label: "Foundation Course", href: "#pricing"},
-                  <li><a href="#pricing" className="hover:text-gray-300">Professional Bootcamp</a></li>
+                {label: "Professional Bootcamp", href: "#pricing"},
-                  <li><a href="#pricing" className="hover:text-gray-300">Advanced Program</a></li>
+                {label: "Advanced Program", href: "#pricing"}
-                </ul>
+              ]
-              </div>
+            },
-              <div>
+            {
-                <h3 className="font-bold mb-4">Company</h3>
+              title: "Company",
-                <ul className="space-y-2">
+              items: [
-                  <li><a href="#about" className="hover:text-gray-300">About Us</a></li>
+                {label: "About Us", href: "#about"},
-                  <li><a href="#testimonial" className="hover:text-gray-300">Success Stories</a></li>
+                {label: "Success Stories", href: "#testimonial"},
-                  <li><a href="#faq" className="hover:text-gray-300">FAQ</a></li>
+                {label: "FAQ", href: "#faq"}
-                </ul>
+              ]
-              </div>
+            },
-              <div>
+            {
-                <h3 className="font-bold mb-4">Contact</h3>
+              title: "Contact",
-                <ul className="space-y-2">
+              items: [
-                  <li><a href="mailto:hello@rubyroid.io" className="hover:text-gray-300">hello@rubyroid.io</a></li>
+                {label: "hello@rubyroid.io", href: "mailto:hello@rubyroid.io"},
-                  <li><a href="#contact" className="hover:text-gray-300">Support</a></li>
+                {label: "Support", href: "#contact"},
-                  <li><a href="#" className="hover:text-gray-300">Careers</a></li>
+                {label: "Careers", href: "#"}
-                </ul>
+              ]
-              </div>
+            },
-              <div>
+            {
-                <h3 className="font-bold mb-4">Legal</h3>
+              title: "Legal",
-                <ul className="space-y-2">
+              items: [
-                  <li><a href="#" className="hover:text-gray-300">Terms of Service</a></li>
+                {label: "Terms of Service", href: "#"},
-                  <li><a href="#" className="hover:text-gray-300">Privacy Policy</a></li>
+                {label: "Privacy Policy", href: "#"}
-                </ul>
+              ]
-              </div>
+            }
-            </div>
+          ]}
-            <div className="mt-8 pt-8 border-t border-gray-600 text-center">
+          copyrightText="© 2024 Rubyroid. All rights reserved."
-              <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>
   );