From 64b946f342f22f7dcbb8fc29abb2b76bf59681d6 Mon Sep 17 00:00:00 2001 From: kudindmitriy Date: Fri, 17 Apr 2026 15:01:51 +0300 Subject: [PATCH 1/3] Bob AI: Add a new vertical slider component to the page, populated w --- src/App.tsx | 4 +- .../testimonials/TestimonialsSlider.tsx | 81 +++++++++++++++++++ src/data/testimonials.ts | 38 +++++---- src/styles/animations.css | 11 +++ 4 files changed, 118 insertions(+), 16 deletions(-) create mode 100644 src/components/sections/testimonials/TestimonialsSlider.tsx 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..5607122 --- /dev/null +++ b/src/components/sections/testimonials/TestimonialsSlider.tsx @@ -0,0 +1,81 @@ +import useEmblaCarousel from "embla-carousel-react"; +import { testimonials } from "@/data/testimonials"; +import { useCarouselControls } from "@/hooks/useCarouselControls"; +import { ChevronUp, ChevronDown } from "lucide-react"; +import { motion } from "motion/react"; + +const TestimonialsSlider = () => { + const [emblaRef, emblaApi] = useEmblaCarousel({ + axis: "y", + loop: true, + }); + const { scrollPrev, scrollNext } = useCarouselControls(emblaApi); + + return ( +
+
+ +

What Our Students Say

+

+ Real stories from the people who have transformed their careers with us. +

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

{testimonial.name}

+

+ {testimonial.role} +

+
+
+
+ ))} +
+
+
+ + +
+ +
+
+ ); +}; + +export default TestimonialsSlider; \ No newline at end of file diff --git a/src/data/testimonials.ts b/src/data/testimonials.ts index 8500711..804fc35 100644 --- a/src/data/testimonials.ts +++ b/src/data/testimonials.ts @@ -1,22 +1,32 @@ -export const testimonials = [ +export interface Testimonial { + name: string; + role: 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", + role: "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", + role: "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", + role: "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", + role: "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 { -- 2.49.1 From 4aefd3609efef7501072ab27928bd73389fc4d7c Mon Sep 17 00:00:00 2001 From: kudindmitriy Date: Fri, 17 Apr 2026 15:03:13 +0300 Subject: [PATCH 2/3] Bob AI: fix build errors (attempt 1) --- .../sections/testimonials/TestimonialsSlider.tsx | 2 +- src/data/testimonials.ts | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/sections/testimonials/TestimonialsSlider.tsx b/src/components/sections/testimonials/TestimonialsSlider.tsx index 5607122..96cc5a0 100644 --- a/src/components/sections/testimonials/TestimonialsSlider.tsx +++ b/src/components/sections/testimonials/TestimonialsSlider.tsx @@ -48,7 +48,7 @@ const TestimonialsSlider = () => {

{testimonial.name}

- {testimonial.role} + {testimonial.course}

diff --git a/src/data/testimonials.ts b/src/data/testimonials.ts index 804fc35..8e0191e 100644 --- a/src/data/testimonials.ts +++ b/src/data/testimonials.ts @@ -1,31 +1,31 @@ export interface Testimonial { name: string; - role: string; + course: string; quote: string; } export const testimonials: Testimonial[] = [ { name: "Alex Johnson", - role: "Full-Stack Development Graduate", + course: "Full-Stack Development Graduate", quote: "This program completely changed my career trajectory. The hands-on projects and mentorship were invaluable.", }, { name: "Maria Garcia", - role: "Data Science Alumna", + 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: "Sam Lee", - role: "UX/UI Design Certificate", + 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: "Jessica Chen", - role: "Cybersecurity Bootcamp Finisher", + course: "Cybersecurity Bootcamp Finisher", quote: "The bootcamp was intense but so rewarding. I feel confident and prepared for the challenges of the cybersecurity field.", }, -- 2.49.1 From 93721ace303d0142c814c5de2387e54dfe9cacb9 Mon Sep 17 00:00:00 2001 From: kudindmitriy Date: Fri, 17 Apr 2026 15:06:10 +0300 Subject: [PATCH 3/3] Bob AI: Apply styling to the newly added vertical testimonial slider --- .../testimonials/TestimonialsSlider.tsx | 165 ++++++++++-------- 1 file changed, 88 insertions(+), 77 deletions(-) diff --git a/src/components/sections/testimonials/TestimonialsSlider.tsx b/src/components/sections/testimonials/TestimonialsSlider.tsx index 96cc5a0..5e2d245 100644 --- a/src/components/sections/testimonials/TestimonialsSlider.tsx +++ b/src/components/sections/testimonials/TestimonialsSlider.tsx @@ -1,81 +1,92 @@ -import useEmblaCarousel from "embla-carousel-react"; -import { testimonials } from "@/data/testimonials"; -import { useCarouselControls } from "@/hooks/useCarouselControls"; -import { ChevronUp, ChevronDown } from "lucide-react"; -import { motion } from "motion/react"; +import { useCallback } from 'react'; +import useEmblaCarousel from 'embla-carousel-react'; +import { Quote, ArrowUp, ArrowDown } from 'lucide-react'; -const TestimonialsSlider = () => { - const [emblaRef, emblaApi] = useEmblaCarousel({ - axis: "y", - loop: true, - }); - const { scrollPrev, scrollNext } = useCarouselControls(emblaApi); +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" + } +]; - return ( -
-
- -

What Our Students Say

-

- Real stories from the people who have transformed their careers with us. -

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

{testimonial.name}

-

- {testimonial.course} -

-
-
+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. +

- ))} -
-
-
- - -
- -
-
- ); -}; -export default TestimonialsSlider; \ No newline at end of file +
+
+
+ {testimonials.map((testimonial, index) => ( +
+
+ +
+ "{testimonial.quote}" +
+
+ {testimonial.name} +
+

{testimonial.name}

+

{testimonial.role}

+
+
+
+
+ ))} +
+
+ +
+ + +
+
+ + + ); +} \ No newline at end of file -- 2.49.1