Update src/app/page.tsx

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,221 +17,221 @@ export default function LandingPage() {
       headingFontWeight="extrabold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered
+        <div className="text-center py-8">
-          brandName="Valera"
+          <h1 className="text-4xl font-bold mb-4">Valera Speak English</h1>
-          navItems={[
+          <nav className="flex justify-center space-x-6">
-            { name: "Home", id: "hero" },
+            <a href="#hero" className="hover:text-blue-600">Home</a>
-            { name: "About", id: "about" },
+            <a href="#about" className="hover:text-blue-600">About</a>
-            { name: "Courses", id: "features" },
+            <a href="#features" className="hover:text-blue-600">Courses</a>
-            { name: "Reviews", id: "testimonial" },
+            <a href="#testimonial" className="hover:text-blue-600">Reviews</a>
-            { name: "Contact", id: "contact" }
+            <a href="#contact" className="hover:text-blue-600">Contact</a>
-          ]}
+          </nav>
-          button={{
+        </div>
-            text: "Enroll Now",
-            href: "contact"
-          }}
-        />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroBillboardCarouselSplit
+        <div className="text-center py-16">
-          title="Master English with Valera Speak English"
+          <h1 className="text-6xl font-bold mb-6">Master English with Valera Speak English</h1>
-          mediaItems={[
+          <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" />
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484694244-h6z6ypcz.jpg",
+            <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" />
-              imageAlt: "English classroom with students"
+            <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" />
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484695254-p59fsyqd.jpg",
+          </div>
-              imageAlt: "English language lesson"
+          <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>
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484693438-07rkdlqa.jpg",
+          </div>
-              imageAlt: "Professional English training"
+        </div>
-            },
-            {
-              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>
 
       <div id="about" data-section="about">
-        <SplitAboutMetric
+        <div className="py-16">
-          title="About Valera Speak English"
+          <h2 className="text-4xl font-bold mb-6">About Valera Speak English</h2>
-          useInvertedBackground="noInvert"
+          <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>
-          description={[
+          <div className="grid grid-cols-2 gap-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."
+            <div className="text-center">
-          ]}
+              <div className="text-4xl font-bold text-blue-600">10+</div>
-          metrics={[
+              <div className="text-lg">Years of Excellence</div>
-            {
+            </div>
-              label: "Years of Excellence",
+            <div className="text-center">
-              value: "10+"
+              <div className="text-4xl font-bold text-blue-600">5000+</div>
-            },
+              <div className="text-lg">Students Enrolled</div>
-            {
+            </div>
-              label: "Students Enrolled",
+          </div>
-              value: "5000+"
+        </div>
-            }
-          ]}
-        />
       </div>
 
       <div id="features" data-section="features">
-        <FeatureCardFifteen
+        <div className="py-16">
-          title="Our Teaching Methods"
+          <div className="text-center mb-12">
-          description="Discover the core features that make Valera the premier choice for English education"
+            <span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Methods</span>
-          tag="Methods"
+            <h2 className="text-4xl font-bold mt-4 mb-4">Our Teaching Methods</h2>
-          features={[
+            <p className="text-lg">Discover the core features that make Valera the premier choice for English education</p>
-            {
+          </div>
-              id: "1",
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-              title: "Conversational English",
+            <div className="bg-white p-6 rounded-lg shadow-lg">
-              description: "Practice real-world speaking skills through dynamic group discussions and one-on-one interactions",
+              <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" />
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494975050-7ahm4emg.jpg",
+              <h3 className="text-2xl font-bold mb-2">Conversational English</h3>
-              imageAlt: "English conversation practice"
+              <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">
-              id: "2",
+              <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" />
-              title: "Grammar Mastery",
+              <h3 className="text-2xl font-bold mb-2">Grammar Mastery</h3>
-              description: "Build strong grammatical foundations with structured lessons and practical writing exercises",
+              <p>Build strong grammatical foundations with structured lessons and practical writing exercises</p>
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484690859-dcha1n3w.jpg",
+            </div>
-              imageAlt: "English writing and grammar"
+            <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>
-              id: "3",
+              <p>Develop comprehension abilities through authentic materials, podcasts, and audio exercises</p>
-              title: "Listening Skills",
+            </div>
-              description: "Develop comprehension abilities through authentic materials, podcasts, and audio exercises",
+            <div className="bg-white p-6 rounded-lg shadow-lg">
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494976181-onrupp9y.jpg",
+              <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" />
-              imageAlt: "Listening comprehension training"
+              <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>
-              id: "4",
+          </div>
-              title: "Interactive Learning",
+        </div>
-              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>
 
       <div id="testimonial" data-section="testimonial">
-        <TestimonialCardThirteen
+        <div className="py-16">
-          title="What Our Students Say"
+          <div className="text-center mb-12">
-          description="Hear from students who have transformed their English skills with Valera"
+            <span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Reviews</span>
-          tag="Reviews"
+            <h2 className="text-4xl font-bold mt-4 mb-4">What Our Students Say</h2>
-          testimonials={[
+            <p className="text-lg">Hear from students who have transformed their English skills with Valera</p>
-            {
+          </div>
-              id: "1",
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-              name: "Sarah Johnson",
+            <div className="bg-white p-6 rounded-lg shadow-lg">
-              handle: "@sarahj_english",
+              <div className="flex items-center mb-4">
-              testimonial: "The conversational classes at Valera transformed my confidence. I went from being nervous about speaking to leading meetings at work!",
+                <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" />
-              rating: 5,
+                <div>
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484712325-ocj12p51.jpg",
+                  <div className="font-bold">Sarah Johnson</div>
-              imageAlt: "Sarah Johnson"
+                  <div className="text-gray-500">@sarahj_english</div>
-            },
+                </div>
-            {
+              </div>
-              id: "2",
+              <div className="flex mb-2">
-              name: "Michael Chen",
+                <span className="text-yellow-400">★★★★★</span>
-              handle: "@mchen_learning",
+              </div>
-              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.",
+              <p>"The conversational classes at Valera transformed my confidence. I went from being nervous about speaking to leading meetings at work!"</p>
-              rating: 5,
+            </div>
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484716089-kpbfo3ho.jpg",
+            <div className="bg-white p-6 rounded-lg shadow-lg">
-              imageAlt: "Michael Chen"
+              <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>
-              id: "3",
+                  <div className="font-bold">Michael Chen</div>
-              name: "Emily Rodriguez",
+                  <div className="text-gray-500">@mchen_learning</div>
-              handle: "@emily_speaks",
+                </div>
-              testimonial: "Best investment I made in myself. The interactive methods and supportive environment made learning English enjoyable and effective.",
+              </div>
-              rating: 5,
+              <div className="flex mb-2">
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484718833-8686x51w.jpg",
+                <span className="text-yellow-400">★★★★★</span>
-              imageAlt: "Emily Rodriguez"
+              </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>
-              id: "4",
+            <div className="bg-white p-6 rounded-lg shadow-lg">
-              name: "David Kim",
+              <div className="flex items-center mb-4">
-              handle: "@david_fluent",
+                <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" />
-              testimonial: "I struggled with grammar for years. Valera's structured approach finally made everything click. Highly recommend to anyone serious about English!",
+                <div>
-              rating: 5,
+                  <div className="font-bold">Emily Rodriguez</div>
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494979130-y5xz3d1f.jpg",
+                  <div className="text-gray-500">@emily_speaks</div>
-              imageAlt: "David Kim"
+                </div>
-            }
+              </div>
-          ]}
+              <div className="flex mb-2">
-          showRating={true}
+                <span className="text-yellow-400">★★★★★</span>
-          animationType="slide-up"
+              </div>
-          textboxLayout="default"
+              <p>"Best investment I made in myself. The interactive methods and supportive environment made learning English enjoyable and effective."</p>
-          useInvertedBackground="noInvert"
+            </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
+        <div className="py-16">
-          tag="Newsletter"
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
-          title="Stay Updated"
+            <div>
-          description="Subscribe to our newsletter for course updates, learning tips, and exclusive offers for our community"
+              <span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Newsletter</span>
-          useInvertedBackground="noInvert"
+              <h2 className="text-4xl font-bold mt-4 mb-4">Stay Updated</h2>
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494977068-7yfz149c.jpg"
+              <p className="text-lg mb-6">Subscribe to our newsletter for course updates, learning tips, and exclusive offers for our community</p>
-          imageAlt="Newsletter subscription"
+              <form className="flex flex-col space-y-4">
-          mediaPosition="right"
+                <input type="email" placeholder="Enter your email" className="px-4 py-3 border rounded-lg" />
-          inputPlaceholder="Enter your email"
+                <button type="submit" className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">Subscribe</button>
-          buttonText="Subscribe"
+                <p className="text-sm text-gray-500">We respect your privacy. Unsubscribe anytime.</p>
-          termsText="We respect your privacy. Unsubscribe anytime."
+              </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">
+        <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
+        <div className="py-16">
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494978042-wcefq63v.jpg"
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
-          imageAlt="Library and books"
+            <div>
-          logoText="Valera Speak English"
+              <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" />
-          copyrightText="© 2025 Valera Speak English. All rights reserved."
+              <h3 className="text-2xl font-bold mb-2">Valera Speak English</h3>
-          columns={[
+              <p className="text-gray-600">© 2025 Valera Speak English. All rights reserved.</p>
-            {
+            </div>
-              title: "Courses",
+            <div>
-              items: [
+              <h4 className="font-bold mb-4">Courses</h4>
-                { label: "Beginner", href: "#" },
+              <ul className="space-y-2">
-                { label: "Intermediate", href: "#" },
+                <li><a href="#" className="hover:text-blue-600">Beginner</a></li>
-                { label: "Advanced", href: "#" },
+                <li><a href="#" className="hover:text-blue-600">Intermediate</a></li>
-                { label: "Business English", href: "#" }
+                <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>
-              title: "Company",
+            <div>
-              items: [
+              <h4 className="font-bold mb-4">Company</h4>
-                { label: "About Us", href: "#about" },
+              <ul className="space-y-2">
-                { label: "Contact", href: "#contact" },
+                <li><a href="#about" className="hover:text-blue-600">About Us</a></li>
-                { label: "Blog", href: "#" },
+                <li><a href="#contact" className="hover:text-blue-600">Contact</a></li>
-                { label: "Careers", href: "#" }
+                <li><a href="#" className="hover:text-blue-600">Blog</a></li>
-              ]
+                <li><a href="#" className="hover:text-blue-600">Careers</a></li>
-            },
+              </ul>
-            {
+            </div>
-              title: "Legal",
+            <div>
-              items: [
+              <h4 className="font-bold mb-4">Legal</h4>
-                { label: "Terms of Service", href: "#" },
+              <ul className="space-y-2">
-                { label: "Privacy Policy", href: "#" },
+                <li><a href="#" className="hover:text-blue-600">Terms of Service</a></li>
-                { label: "Cookie Policy", href: "#" }
+                <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>
   );