diff --git a/src/App.tsx b/src/App.tsx index ef966b0..e745995 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,12 @@ import { Routes, Route } from 'react-router-dom'; import HomePage from './pages/HomePage'; import PrivacyPage from './pages/PrivacyPage'; -import Testimonials from './components/sections/testimonials/Testimonials'; +import TestimonialsSlider from './components/sections/testimonials/TestimonialsSlider'; export default function App() { return ( - } /> + } /> } /> ); diff --git a/src/components/sections/testimonials/TestimonialsSlider.tsx b/src/components/sections/testimonials/TestimonialsSlider.tsx new file mode 100644 index 0000000..5e2d245 --- /dev/null +++ b/src/components/sections/testimonials/TestimonialsSlider.tsx @@ -0,0 +1,92 @@ +import { useCallback } from 'react'; +import useEmblaCarousel from 'embla-carousel-react'; +import { Quote, ArrowUp, ArrowDown } from 'lucide-react'; + +const testimonials = [ + { + quote: "The curriculum is top-notch, and the instructors are industry experts. I felt supported every step of the way.", + name: "Jane Smith", + role: "Full-Stack Developer", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d" + }, + { + quote: "I went from zero coding knowledge to building complex applications. This academy is the real deal.", + name: "Alex Johnson", + role: "Mobile App Developer", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026705d" + }, + { + quote: "The hands-on projects were invaluable. I built a portfolio that impressed employers and landed me a great job.", + name: "Emily White", + role: "Frontend Engineer", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026706d" + }, + { + quote: "A fantastic learning environment. The community is amazing, and I made lifelong connections.", + name: "Michael Brown", + role: "Backend Specialist", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026707d" + } +]; + +export default function TestimonialsSlider() { + const [emblaRef, emblaApi] = useEmblaCarousel({ + loop: true, + axis: 'y', + }); + + const scrollPrev = useCallback(() => { + if (emblaApi) emblaApi.scrollPrev(); + }, [emblaApi]); + + const scrollNext = useCallback(() => { + if (emblaApi) emblaApi.scrollNext(); + }, [emblaApi]); + + return ( +
+
+
+ Testimonials +

What Our Students Say

+

+ Hear from our graduates about their journey and success with our academy. +

+
+ +
+
+
+ {testimonials.map((testimonial, index) => ( +
+
+ +
+ "{testimonial.quote}" +
+
+ {testimonial.name} +
+

{testimonial.name}

+

{testimonial.role}

+
+
+
+
+ ))} +
+
+ +
+ + +
+
+
+
+ ); +} \ No newline at end of file diff --git a/src/data/testimonials.ts b/src/data/testimonials.ts index 8500711..8e0191e 100644 --- a/src/data/testimonials.ts +++ b/src/data/testimonials.ts @@ -1,22 +1,32 @@ -export const testimonials = [ +export interface Testimonial { + name: string; + course: string; + quote: string; +} + +export const testimonials: Testimonial[] = [ { - name: "John Doe", - quote: "This academy changed my life. The hands-on projects were incredibly valuable.", - course: "Full-Stack Web Development" + name: "Alex Johnson", + course: "Full-Stack Development Graduate", + quote: + "This program completely changed my career trajectory. The hands-on projects and mentorship were invaluable.", }, { - name: "Jane Smith", - quote: "The instructors are industry experts who are passionate about teaching. I landed a great job right after graduating.", - course: "Data Science & Machine Learning" + name: "Maria Garcia", + course: "Data Science Alumna", + quote: + "I went from knowing nothing about data to landing a job as a data analyst. The curriculum is top-notch and industry-relevant.", }, { - name: "Samuel Green", - quote: "I came in with zero coding experience and now I'm a confident software engineer. Highly recommended!", - course: "Cybersecurity" + name: "Sam Lee", + course: "UX/UI Design Certificate", + quote: + "The instructors are passionate and the community is incredibly supportive. I built a portfolio I'm proud of.", }, { - name: "Emily White", - quote: "The curriculum is up-to-date with the latest technologies. The career support team was also fantastic.", - course: "Full-Stack Web Development" - } + name: "Jessica Chen", + course: "Cybersecurity Bootcamp Finisher", + quote: + "The bootcamp was intense but so rewarding. I feel confident and prepared for the challenges of the cybersecurity field.", + }, ]; \ No newline at end of file diff --git a/src/styles/animations.css b/src/styles/animations.css index c10b577..3f419c0 100644 --- a/src/styles/animations.css +++ b/src/styles/animations.css @@ -119,6 +119,17 @@ } } +@keyframes slide-in-up { + from { + transform: translateY(100%); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} + /* Animation classes */ .animate-pulsate {