4 Commits

Author SHA1 Message Date
a1cb5bb8be Merge version_6 into main
Merge version_6 into main
2025-12-23 15:01:44 +00:00
0f8d0fa330 Merge version_4 into main
Merge version_4 into main
2025-12-23 13:26:01 +00:00
907c70b877 Merge version_2 into main
Merge version_2 into main
2025-12-23 13:08:26 +00:00
5f6ba51bda Merge version_2 into main
Merge version_2 into main
2025-12-23 13:06:44 +00:00
2 changed files with 227 additions and 196 deletions

View File

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