From 7a6341a9e14596761f91a57385bbf02c3eb3823e Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Sun, 29 Jun 2025 22:30:31 +0530
Subject: [PATCH] Refactor: Update CommunitySpotlight and AnimatedTestimonials
 components for improved layout and styling consistency

---
 components/home/CommunitySpotlight.tsx  |  4 ++--
 components/ui/animated-testimonials.tsx | 20 ++++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/components/home/CommunitySpotlight.tsx b/components/home/CommunitySpotlight.tsx
index 105e9c3b..04633098 100644
--- a/components/home/CommunitySpotlight.tsx
+++ b/components/home/CommunitySpotlight.tsx
@@ -4,7 +4,7 @@ import { Megaphone } from "lucide-react"
 export function CommunitySpotlight() {
   const testimonials = [
     {
-      quote: "Codeunia is not just another platform — it’s a movement. A new-age community that's bringing hackathons and innovation culture right down to the grassroots. It’s inspiring to see this kind of impact in real time!",
+      quote: "Codeunia is not just another platform — it's a movement. A new-age community that's bringing hackathons and innovation culture right down to the grassroots. It's inspiring to see this kind of impact in real time!",
       name: "Ankul Kumar",
       designation: "President at Rotaract Club of Chandigarh University",
       src: "/images/testimonials/anshul.jpeg"
@@ -21,7 +21,7 @@ export function CommunitySpotlight() {
       <section className="py-16 relative overflow-hidden">
           <div className="absolute inset-0 bg-gradient-to-r from-primary/10 via-transparent to-primary/10"></div>
           <div className="container px-4 relative z-10 mx-auto">
-              <div className="text-center space-y-4 mb-12">
+              <div className="text-center space-y-4 mb-4 md:mb-12">
                   <div className="flex flex-col items-center justify-center gap-2">
                       <button className="bg-slate-800 no-underline group relative shadow-2xl shadow-zinc-900 rounded-full p-px text-sm font-semibold leading-6 text-white inline-block">
                           <span className="absolute inset-0 overflow-hidden rounded-full">
diff --git a/components/ui/animated-testimonials.tsx b/components/ui/animated-testimonials.tsx
index 38d3e13e..6e681208 100644
--- a/components/ui/animated-testimonials.tsx
+++ b/components/ui/animated-testimonials.tsx
@@ -45,10 +45,10 @@ export const AnimatedTestimonials = ({
   };
 
   return (
-    <div className="mx-auto max-w-sm px-4 py-20 font-sans antialiased md:max-w-4xl md:px-8 lg:px-12">
-      <div className="relative grid grid-cols-1 gap-20 md:grid-cols-2">
-        <div>
-          <div className="relative h-80 w-full">
+    <div className="mx-auto max-w-sm px-2 py-8 font-sans antialiased md:max-w-4xl md:px-8 lg:px-12">
+      <div className="relative flex flex-col gap-8 md:grid md:grid-cols-2 md:gap-20">
+        <div className="mb-4 md:mb-0">
+          <div className="relative aspect-[1/1] md:aspect-[4/3] w-full md:h-80">
             <AnimatePresence>
               {testimonials.map((testimonial, index) => (
                 <motion.div
@@ -88,7 +88,7 @@ export const AnimatedTestimonials = ({
                       width={500}
                       height={500}
                       draggable={false}
-                      className="h-full w-full object-cover object-center transition-transform duration-500 hover:scale-110"
+                      className="h-full w-full object-contain md:object-cover object-center transition-transform duration-500 hover:scale-110"
                     />
                   </div>
                 </motion.div>
@@ -96,7 +96,7 @@ export const AnimatedTestimonials = ({
             </AnimatePresence>
           </div>
         </div>
-        <div className="flex flex-col justify-between py-4">
+        <div className="flex flex-col justify-between py-2 md:py-4">
           <motion.div
             key={active}
             initial={{
@@ -118,13 +118,13 @@ export const AnimatedTestimonials = ({
             className="relative"
           >
             <div className="absolute -left-4 top-0 h-12 w-1 bg-gradient-to-b from-primary to-purple-500 rounded-full" />
-            <h3 className="text-2xl font-bold bg-gradient-to-r from-primary to-purple-500 bg-clip-text text-transparent">
+            <h3 className="text-xl md:text-2xl font-bold bg-gradient-to-r from-primary to-purple-500 bg-clip-text text-transparent">
               {testimonials[active].name}
             </h3>
-            <p className="text-sm text-muted-foreground">
+            <p className="text-xs md:text-sm text-muted-foreground">
               {testimonials[active].designation}
             </p>
-            <motion.p className="mt-8 text-lg text-muted-foreground">
+            <motion.p className="mt-4 md:mt-8 text-base md:text-lg text-muted-foreground">
               {testimonials[active].quote.split(" ").map((word, index) => (
                 <motion.span
                   key={index}
@@ -150,7 +150,7 @@ export const AnimatedTestimonials = ({
               ))}
             </motion.p>
           </motion.div>
-          <div className="flex gap-4 pt-12 md:pt-0">
+          <div className="flex gap-4 pt-4 md:pt-0">
             <motion.button
               onClick={handlePrev}
               whileHover={{ scale: 1.1 }}