Merge version_6 into main

Merge version_6 into main

src/app/page.tsx

@@ -1,13 +1,6 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import HeroBillboardCarouselSplit from '@/components/sections/hero/HeroBillboardCarouselSplit';
-import SplitAboutMetric from '@/components/sections/about/SplitAboutMetric';
-import FeatureCardFifteen from '@/components/sections/feature/FeatureCardFifteen';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
 
 export default function LandingPage() {
   return (
@@ -24,241 +17,221 @@ export default function LandingPage() {
       headingFontWeight="extrabold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered
-          brandName="Valera"
-          navItems={[
-            { name: "Home", id: "hero" },
-            { name: "About", id: "about" },
-            { name: "Courses", id: "features" },
-            { name: "Reviews", id: "testimonial" },
-            { name: "Contact", id: "contact" }
-          ]}
-          button={{
-            text: "Enroll Now",
-            href: "contact"
-          }}
-        />
+        <div className="text-center py-8">
+          <h1 className="text-4xl font-bold mb-4">Valera Speak English</h1>
+          <nav className="flex justify-center space-x-6">
+            <a href="#hero" className="hover:text-blue-600">Home</a>
+            <a href="#about" className="hover:text-blue-600">About</a>
+            <a href="#features" className="hover:text-blue-600">Courses</a>
+            <a href="#testimonial" className="hover:text-blue-600">Reviews</a>
+            <a href="#contact" className="hover:text-blue-600">Contact</a>
+          </nav>
+        </div>
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroBillboardCarouselSplit
-          title="Master English with Valera Speak English"
-          mediaItems={[
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484694244-h6z6ypcz.jpg",
-              imageAlt: "English classroom with students"
-            },
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484695254-p59fsyqd.jpg",
-              imageAlt: "English language lesson"
-            },
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484693438-07rkdlqa.jpg",
-              imageAlt: "Professional English training"
-            },
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484689467-d854773z.jpg",
-              imageAlt: "English conversation group"
-            },
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494973168-mwn1lqco.jpg",
-              imageAlt: "English speaking practice"
-            }
-          ]}
-          buttons={[
-            {
-              text: "Start Learning",
-              href: "contact"
-            },
-            {
-              text: "Learn More",
-              href: "about"
-            }
-          ]}
-        />
+        <div className="text-center py-16">
+          <h1 className="text-6xl font-bold mb-6">Master English with Valera Speak English</h1>
+          <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
+            <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484694244-h6z6ypcz.jpg" alt="English classroom with students" className="w-full h-48 object-cover rounded" />
+            <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484695254-p59fsyqd.jpg" alt="English language lesson" className="w-full h-48 object-cover rounded" />
+            <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484693438-07rkdlqa.jpg" alt="Professional English training" className="w-full h-48 object-cover rounded" />
+            <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484689467-d854773z.jpg" alt="English conversation group" className="w-full h-48 object-cover rounded" />
+            <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494973168-mwn1lqco.jpg" alt="English speaking practice" className="w-full h-48 object-cover rounded" />
+          </div>
+          <div className="flex justify-center space-x-4">
+            <a href="#contact" className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">Start Learning</a>
+            <a href="#about" className="border border-blue-600 text-blue-600 px-6 py-3 rounded-lg hover:bg-blue-50">Learn More</a>
+          </div>
+        </div>
       </div>
 
       <div id="about" data-section="about">
-        <SplitAboutMetric
-          title="About Valera Speak English"
-          useInvertedBackground="noInvert"
-          description={[
-            "At Valera Speak English, we believe that language learning should be engaging, practical, and transformative. Our dedicated team of experienced educators is committed to helping students master English through interactive lessons, real-world conversation practice, and personalized learning paths tailored to each student's goals and pace."
-          ]}
-          metrics={[
-            {
-              label: "Years of Excellence",
-              value: "10+"
-            },
-            {
-              label: "Students Enrolled",
-              value: "5000+"
-            }
-          ]}
-        />
+        <div className="py-16">
+          <h2 className="text-4xl font-bold mb-6">About Valera Speak English</h2>
+          <p className="text-lg mb-8">At Valera Speak English, we believe that language learning should be engaging, practical, and transformative. Our dedicated team of experienced educators is committed to helping students master English through interactive lessons, real-world conversation practice, and personalized learning paths tailored to each student's goals and pace.</p>
+          <div className="grid grid-cols-2 gap-8">
+            <div className="text-center">
+              <div className="text-4xl font-bold text-blue-600">10+</div>
+              <div className="text-lg">Years of Excellence</div>
+            </div>
+            <div className="text-center">
+              <div className="text-4xl font-bold text-blue-600">5000+</div>
+              <div className="text-lg">Students Enrolled</div>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="features" data-section="features">
-        <FeatureCardFifteen
-          title="Our Teaching Methods"
-          description="Discover the core features that make Valera the premier choice for English education"
-          tag="Methods"
-          features={[
-            {
-              id: "1",
-              title: "Conversational English",
-              description: "Practice real-world speaking skills through dynamic group discussions and one-on-one interactions",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494975050-7ahm4emg.jpg",
-              imageAlt: "English conversation practice"
-            },
-            {
-              id: "2",
-              title: "Grammar Mastery",
-              description: "Build strong grammatical foundations with structured lessons and practical writing exercises",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484690859-dcha1n3w.jpg",
-              imageAlt: "English writing and grammar"
-            },
-            {
-              id: "3",
-              title: "Listening Skills",
-              description: "Develop comprehension abilities through authentic materials, podcasts, and audio exercises",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494976181-onrupp9y.jpg",
-              imageAlt: "Listening comprehension training"
-            },
-            {
-              id: "4",
-              title: "Interactive Learning",
-              description: "Engage with modern educational technology and interactive classroom activities for better retention",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484691610-pealshm9.jpg",
-              imageAlt: "Interactive learning environment"
-            }
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground="noInvert"
-        />
+        <div className="py-16">
+          <div className="text-center mb-12">
+            <span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Methods</span>
+            <h2 className="text-4xl font-bold mt-4 mb-4">Our Teaching Methods</h2>
+            <p className="text-lg">Discover the core features that make Valera the premier choice for English education</p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div className="bg-white p-6 rounded-lg shadow-lg">
+              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494975050-7ahm4emg.jpg" alt="English conversation practice" className="w-full h-48 object-cover rounded mb-4" />
+              <h3 className="text-2xl font-bold mb-2">Conversational English</h3>
+              <p>Practice real-world speaking skills through dynamic group discussions and one-on-one interactions</p>
+            </div>
+            <div className="bg-white p-6 rounded-lg shadow-lg">
+              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484690859-dcha1n3w.jpg" alt="English writing and grammar" className="w-full h-48 object-cover rounded mb-4" />
+              <h3 className="text-2xl font-bold mb-2">Grammar Mastery</h3>
+              <p>Build strong grammatical foundations with structured lessons and practical writing exercises</p>
+            </div>
+            <div className="bg-white p-6 rounded-lg shadow-lg">
+              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494976181-onrupp9y.jpg" alt="Listening comprehension training" className="w-full h-48 object-cover rounded mb-4" />
+              <h3 className="text-2xl font-bold mb-2">Listening Skills</h3>
+              <p>Develop comprehension abilities through authentic materials, podcasts, and audio exercises</p>
+            </div>
+            <div className="bg-white p-6 rounded-lg shadow-lg">
+              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484691610-pealshm9.jpg" alt="Interactive learning environment" className="w-full h-48 object-cover rounded mb-4" />
+              <h3 className="text-2xl font-bold mb-2">Interactive Learning</h3>
+              <p>Engage with modern educational technology and interactive classroom activities for better retention</p>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="testimonial" data-section="testimonial">
-        <TestimonialCardThirteen
-          title="What Our Students Say"
-          description="Hear from students who have transformed their English skills with Valera"
-          tag="Reviews"
-          testimonials={[
-            {
-              id: "1",
-              name: "Sarah Johnson",
-              handle: "@sarahj_english",
-              testimonial: "The conversational classes at Valera transformed my confidence. I went from being nervous about speaking to leading meetings at work!",
-              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484712325-ocj12p51.jpg",
-              imageAlt: "Sarah Johnson"
-            },
-            {
-              id: "2",
-              name: "Michael Chen",
-              handle: "@mchen_learning",
-              testimonial: "The teachers are incredibly patient and knowledgeable. They tailored the lessons to my specific needs, and I achieved my fluency goals faster than expected.",
-              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484716089-kpbfo3ho.jpg",
-              imageAlt: "Michael Chen"
-            },
-            {
-              id: "3",
-              name: "Emily Rodriguez",
-              handle: "@emily_speaks",
-              testimonial: "Best investment I made in myself. The interactive methods and supportive environment made learning English enjoyable and effective.",
-              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484718833-8686x51w.jpg",
-              imageAlt: "Emily Rodriguez"
-            },
-            {
-              id: "4",
-              name: "David Kim",
-              handle: "@david_fluent",
-              testimonial: "I struggled with grammar for years. Valera's structured approach finally made everything click. Highly recommend to anyone serious about English!",
-              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494979130-y5xz3d1f.jpg",
-              imageAlt: "David Kim"
-            }
-          ]}
-          showRating={true}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground="noInvert"
-        />
+        <div className="py-16">
+          <div className="text-center mb-12">
+            <span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Reviews</span>
+            <h2 className="text-4xl font-bold mt-4 mb-4">What Our Students Say</h2>
+            <p className="text-lg">Hear from students who have transformed their English skills with Valera</p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div className="bg-white p-6 rounded-lg shadow-lg">
+              <div className="flex items-center mb-4">
+                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484712325-ocj12p51.jpg" alt="Sarah Johnson" className="w-12 h-12 rounded-full mr-4" />
+                <div>
+                  <div className="font-bold">Sarah Johnson</div>
+                  <div className="text-gray-500">@sarahj_english</div>
+                </div>
+              </div>
+              <div className="flex mb-2">
+                <span className="text-yellow-400">★★★★★</span>
+              </div>
+              <p>"The conversational classes at Valera transformed my confidence. I went from being nervous about speaking to leading meetings at work!"</p>
+            </div>
+            <div className="bg-white p-6 rounded-lg shadow-lg">
+              <div className="flex items-center mb-4">
+                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484716089-kpbfo3ho.jpg" alt="Michael Chen" className="w-12 h-12 rounded-full mr-4" />
+                <div>
+                  <div className="font-bold">Michael Chen</div>
+                  <div className="text-gray-500">@mchen_learning</div>
+                </div>
+              </div>
+              <div className="flex mb-2">
+                <span className="text-yellow-400">★★★★★</span>
+              </div>
+              <p>"The teachers are incredibly patient and knowledgeable. They tailored the lessons to my specific needs, and I achieved my fluency goals faster than expected."</p>
+            </div>
+            <div className="bg-white p-6 rounded-lg shadow-lg">
+              <div className="flex items-center mb-4">
+                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484718833-8686x51w.jpg" alt="Emily Rodriguez" className="w-12 h-12 rounded-full mr-4" />
+                <div>
+                  <div className="font-bold">Emily Rodriguez</div>
+                  <div className="text-gray-500">@emily_speaks</div>
+                </div>
+              </div>
+              <div className="flex mb-2">
+                <span className="text-yellow-400">★★★★★</span>
+              </div>
+              <p>"Best investment I made in myself. The interactive methods and supportive environment made learning English enjoyable and effective."</p>
+            </div>
+            <div className="bg-white p-6 rounded-lg shadow-lg">
+              <div className="flex items-center mb-4">
+                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494979130-y5xz3d1f.jpg" alt="David Kim" className="w-12 h-12 rounded-full mr-4" />
+                <div>
+                  <div className="font-bold">David Kim</div>
+                  <div className="text-gray-500">@david_fluent</div>
+                </div>
+              </div>
+              <div className="flex mb-2">
+                <span className="text-yellow-400">★★★★★</span>
+              </div>
+              <p>"I struggled with grammar for years. Valera's structured approach finally made everything click. Highly recommend to anyone serious about English!"</p>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactSplit
-          tag="Newsletter"
-          title="Stay Updated"
-          description="Subscribe to our newsletter for course updates, learning tips, and exclusive offers for our community"
-          useInvertedBackground="noInvert"
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494977068-7yfz149c.jpg"
-          imageAlt="Newsletter subscription"
-          mediaPosition="right"
-          inputPlaceholder="Enter your email"
-          buttonText="Subscribe"
-          termsText="We respect your privacy. Unsubscribe anytime."
-        />
+        <div className="py-16">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
+            <div>
+              <span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Newsletter</span>
+              <h2 className="text-4xl font-bold mt-4 mb-4">Stay Updated</h2>
+              <p className="text-lg mb-6">Subscribe to our newsletter for course updates, learning tips, and exclusive offers for our community</p>
+              <form className="flex flex-col space-y-4">
+                <input type="email" placeholder="Enter your email" className="px-4 py-3 border rounded-lg" />
+                <button type="submit" className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">Subscribe</button>
+                <p className="text-sm text-gray-500">We respect your privacy. Unsubscribe anytime.</p>
+              </form>
+            </div>
+            <div>
+              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494977068-7yfz149c.jpg" alt="Newsletter subscription" className="w-full h-96 object-cover rounded-lg" />
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="metrics" data-section="metrics">
-        <SplitAboutMetric
-          title="Our Impact and Reach"
-          useInvertedBackground="noInvert"
-          description={[
-            "Valera Speak English has established itself as a leading language education provider, with thousands of satisfied students achieving their English fluency goals. Our commitment to excellence and personalized instruction continues to drive success across diverse learning backgrounds."
-          ]}
-          metrics={[
-            {
-              label: "Global Students",
-              value: "8500+"
-            },
-            {
-              label: "Success Rate",
-              value: "94%"
-            }
-          ]}
-        />
+        <div className="py-16">
+          <h2 className="text-4xl font-bold mb-6">Our Impact and Reach</h2>
+          <p className="text-lg mb-8">Valera Speak English has established itself as a leading language education provider, with thousands of satisfied students achieving their English fluency goals. Our commitment to excellence and personalized instruction continues to drive success across diverse learning backgrounds.</p>
+          <div className="grid grid-cols-2 gap-8">
+            <div className="text-center">
+              <div className="text-4xl font-bold text-blue-600">8500+</div>
+              <div className="text-lg">Global Students</div>
+            </div>
+            <div className="text-center">
+              <div className="text-4xl font-bold text-blue-600">94%</div>
+              <div className="text-lg">Success Rate</div>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterMedia
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494978042-wcefq63v.jpg"
-          imageAlt="Library and books"
-          logoText="Valera Speak English"
-          copyrightText="© 2025 Valera Speak English. All rights reserved."
-          columns={[
-            {
-              title: "Courses",
-              items: [
-                { label: "Beginner", href: "#" },
-                { label: "Intermediate", href: "#" },
-                { label: "Advanced", href: "#" },
-                { label: "Business English", href: "#" }
-              ]
-            },
-            {
-              title: "Company",
-              items: [
-                { label: "About Us", href: "#about" },
-                { label: "Contact", href: "#contact" },
-                { label: "Blog", href: "#" },
-                { label: "Careers", href: "#" }
-              ]
-            },
-            {
-              title: "Legal",
-              items: [
-                { label: "Terms of Service", href: "#" },
-                { label: "Privacy Policy", href: "#" },
-                { label: "Cookie Policy", href: "#" }
-              ]
-            }
-          ]}
-        />
+        <div className="py-16">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div>
+              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494978042-wcefq63v.jpg" alt="Library and books" className="w-full h-48 object-cover rounded mb-4" />
+              <h3 className="text-2xl font-bold mb-2">Valera Speak English</h3>
+              <p className="text-gray-600">© 2025 Valera Speak English. All rights reserved.</p>
+            </div>
+            <div>
+              <h4 className="font-bold mb-4">Courses</h4>
+              <ul className="space-y-2">
+                <li><a href="#" className="hover:text-blue-600">Beginner</a></li>
+                <li><a href="#" className="hover:text-blue-600">Intermediate</a></li>
+                <li><a href="#" className="hover:text-blue-600">Advanced</a></li>
+                <li><a href="#" className="hover:text-blue-600">Business English</a></li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="font-bold mb-4">Company</h4>
+              <ul className="space-y-2">
+                <li><a href="#about" className="hover:text-blue-600">About Us</a></li>
+                <li><a href="#contact" className="hover:text-blue-600">Contact</a></li>
+                <li><a href="#" className="hover:text-blue-600">Blog</a></li>
+                <li><a href="#" className="hover:text-blue-600">Careers</a></li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="font-bold mb-4">Legal</h4>
+              <ul className="space-y-2">
+                <li><a href="#" className="hover:text-blue-600">Terms of Service</a></li>
+                <li><a href="#" className="hover:text-blue-600">Privacy Policy</a></li>
+                <li><a href="#" className="hover:text-blue-600">Cookie Policy</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
       </div>
     </ThemeProvider>
   );