Volunteer and Development

src/components/DeveloperLinks.tsx

@@ -0,0 +1,38 @@
+import { developerLinks } from '@/constants/VolunteerAndDev/Links';
+
+const DeveloperLinks = () => {
+  return (
+    <section className="container mx-auto text-center p-6">
+      <div className="mt-6 flex flex-col items-center gap-4 w-full max-w-3xl mx-auto">
+        {developerLinks.map((link, index) => (
+          <a
+            key={index}
+            href={link.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="relative w-full flex items-center justify-between border border-gray-400 px-6 py-4 rounded-full 
+            overflow-hidden transition-all group"
+          >
+            {/* Expanding Oval Background Effect */}
+            <span className="absolute inset-0 bg-black rounded-full scale-0 group-hover:scale-150 transition-transform duration-300 origin-center"></span>
+
+            {/* Link Content (Ensuring text/icons stay above the background) */}
+            <div className="relative flex items-center gap-3 transition-all group-hover:text-white">
+              <img
+                src={link.icon}
+                alt={link.name}
+                className="w-6 h-6 transition-all group-hover:invert"
+              />
+              <span className="text-lg font-medium">{link.name}</span>
+            </div>
+            <span className="relative text-xl transition-all group-hover:text-white">
+              →
+            </span>
+          </a>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default DeveloperLinks;

src/components/DeveloperTestimonials.tsx

@@ -0,0 +1,168 @@
+import { motion } from 'framer-motion';
+import { Marquee } from '@/components/magicui/Marquee'; // Marquee for scrolling effect
+import { developertestimonials } from '@/constants/VolunteerAndDev/DeveloperTestimonials';
+import { stats } from '@/constants/Stats';
+import {
+  testimonialCard,
+  testimonialHeading,
+  decorativeElement,
+  testimonialText,
+  avatarReveal,
+  marqueeContainer,
+} from '@/styles/Animations';
+
+const ReviewCard = ({
+  img,
+  name,
+  username,
+  body,
+  delay = 0,
+}: {
+  img: string;
+  name: string;
+  username: string;
+  body: string;
+  delay?: number;
+}) => {
+  return (
+    <motion.div
+      className="bg-white dark:bg-gray-900 rounded-xl p-6 flex flex-col items-center text-center min-h-[250px] h-auto w-[350px] shadow-lg border border-gray-200 dark:border-gray-700 mx-2"
+      variants={testimonialCard}
+      initial="hidden"
+      whileInView="visible"
+      whileHover="hover"
+      viewport={{ once: true, amount: 0.1 }}
+      transition={{ delay }}
+    >
+      {/* Quote Icon */}
+      <motion.img
+        src={stats.apostrophie}
+        alt="double-quotes"
+        className="w-10 h-10 self-start opacity-70"
+        variants={decorativeElement}
+      />
+
+      {/* Feedback Text */}
+      <motion.p
+        className="text-gray-700 dark:text-gray-300 mt-2"
+        variants={testimonialText}
+      >
+        {body}
+      </motion.p>
+
+      {/* User Info */}
+      <div className="flex items-center mt-4 space-x-3">
+        <motion.img
+          src={img}
+          alt={name}
+          className="w-12 h-12 rounded-full border border-gray-300"
+          variants={avatarReveal}
+        />
+        <motion.div variants={testimonialText}>
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+            {name}
+          </h3>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            @{username}
+          </p>
+        </motion.div>
+      </div>
+    </motion.div>
+  );
+};
+
+export function DeveloperTestimonials() {
+  const firstRow = developertestimonials.slice(
+    0,
+    Math.ceil(developertestimonials.length / 2),
+  );
+
+  return (
+    <div className="w-full p-6">
+      {/* Heading Section with Hearts */}
+      <motion.div
+        className="flex items-center justify-center gap-4 md:gap-6 mb-12"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, amount: 0.6 }}
+        variants={marqueeContainer}
+      >
+        {/* Left Heart */}
+        <motion.img
+          src={stats.leftHeart}
+          alt="Heart Left"
+          className="w-8 md:w-12 lg:w-16 fill-current text-red-500 border-none shadow-none"
+          variants={decorativeElement}
+          animate="float"
+          custom={1}
+        />
+
+        <div className="relative flex items-center justify-center gap-4 md:gap-6 lg:gap-8">
+          {/* Left Apostrophe (Hidden Below 400px) */}
+          <motion.img
+            src={stats.apostrophie}
+            alt="Apostrophe Left"
+            className="w-8 md:w-12 lg:w-16 -translate-y-2 block max-[400px]:hidden"
+            variants={decorativeElement}
+            custom={2}
+          />
+
+          {/* Heading */}
+          <motion.h2
+            className="font-bold tracking-wider font-Caveat text-3xl md:text-5xl lg:text-6xl text-gray-800 text-center"
+            variants={testimonialHeading}
+          >
+            <h2 className="text-5xl font-bold font-[Caveat] ">
+              What our developers say
+              <br />
+              about their journey??
+            </h2>
+            <hr className="w-32 border-t-2 border-gray-400 mx-auto mt-2" />
+          </motion.h2>
+
+          {/* Right Apostrophe (Flipped, Hidden Below 400px) */}
+          <motion.img
+            src={stats.apostrophie}
+            alt="Apostrophe Right"
+            className="w-8 md:w-12 lg:w-16 -translate-y-2 scale-x-[-1] block max-[400px]:hidden"
+            variants={decorativeElement}
+            custom={3}
+          />
+        </div>
+
+        {/* Right Heart */}
+        <motion.img
+          src={stats.rightHeart}
+          alt="Heart Right"
+          className="w-8 md:w-12 lg:w-16 fill-current text-red-500 border-none shadow-none"
+          variants={decorativeElement}
+          animate="float"
+          custom={4}
+        />
+      </motion.div>
+
+      {/* Testimonials Section */}
+      <motion.div
+        className="relative flex flex-col items-center justify-center w-full overflow-hidden mt-6"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, amount: 0.1 }}
+        variants={marqueeContainer}
+      >
+        {/* First Row (left to right) */}
+        <Marquee pauseOnHover className="w-full">
+          {firstRow.map((review, index) => (
+            <ReviewCard
+              key={review.username}
+              {...review}
+              delay={index * 0.05}
+            />
+          ))}
+        </Marquee>
+
+        <div className="pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r from-background"></div>
+        <div className="pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-gradient-to-l from-background"></div>
+      </motion.div>
+    </div>
+  );
+}