From be043389a556477de36d3087ef48629f5b9e487f Mon Sep 17 00:00:00 2001
From: Ankur Tyagi <tyaga001@live.com>
Date: Mon, 30 Sep 2024 11:26:30 +0200
Subject: [PATCH] let's go

---
 README.md                      |  4 +-
 package-lock.json              | 16 +++++++
 package.json                   |  1 +
 src/components/Testimonial.tsx | 80 ++++++++++++++--------------------
 4 files changed, 53 insertions(+), 48 deletions(-)

diff --git a/README.md b/README.md
index 3d761e5..3b6b997 100644
--- a/README.md
+++ b/README.md
@@ -82,7 +82,9 @@ Have questions or suggestions? Open an issue or reach out to me at [hello@theank
 ## 📄 License
 
 This project is licensed under the Creative Commons License - see the [LICENSE](LICENSE) file for details.
-
+- You are free to use this code as inspiration.
+- Please do not copy it directly.
+- Crediting the author is appreciated.
 ---
 
 Let's build the go-to resource for developer tool space, together 🚀
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 4189227..1de6650 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^5.2.1",
+        "react-intersection-observer": "^9.13.1",
         "react-type-animation": "^3.2.0",
         "rehype-highlight": "^7.0.0",
         "tailwind-merge": "^2.4.0",
@@ -7937,6 +7938,21 @@
         "react": "*"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.13.1.tgz",
+      "integrity": "sha512-tSzDaTy0qwNPLJHg8XZhlyHTgGW6drFKTtvjdL+p6um12rcnp8Z5XstE+QNBJ7c64n5o0Lj4ilUleA41bmDoMw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 44948a2..9822563 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
+    "react-intersection-observer": "^9.13.1",
     "react-type-animation": "^3.2.0",
     "rehype-highlight": "^7.0.0",
     "tailwind-merge": "^2.4.0",
diff --git a/src/components/Testimonial.tsx b/src/components/Testimonial.tsx
index 6e493cc..318cd81 100644
--- a/src/components/Testimonial.tsx
+++ b/src/components/Testimonial.tsx
@@ -1,19 +1,20 @@
 'use client';
 
-import Image from 'next/image'
-import { motion } from 'framer-motion'
-import { MessageSquare, Quote } from 'lucide-react'
+import React from 'react';
+import Image from 'next/image';
+import { motion } from 'framer-motion';
+import { MessageSquare, Quote, Star } from 'lucide-react';
 
 interface Testimonial {
-    quote: string
-    name: string
-    position: string
-    avatar: string
+    quote: string;
+    name: string;
+    position: string;
+    avatar: string;
 }
 
 const testimonials: Testimonial[] = [
     {
-        quote: "The article is great, and provide an amazing in-depth explanation :clap:\nThe summary on the bottom right is great too!\nDark mode is my favourite colour scheme\nI love the background you use for each-image!",
+        quote: "The article is great, and provides an amazing in-depth explanation :clap:\nThe summary on the bottom right is great too!\nDark mode is my favourite colour scheme\nI love the background you use for each image.",
         name: "Alberto Cubeddu",
         position: "Co-founder of SkillSociety",
         avatar: "/images/img_6.png"
@@ -30,41 +31,29 @@ const testimonials: Testimonial[] = [
         position: "Head of Marketing, Neon",
         avatar: "/images/img_7.png"
     }
-]
+];
 
 function TestimonialCard({ testimonial }: { testimonial: Testimonial }) {
     return (
         <motion.div
-            className="relative overflow-hidden bg-gradient-to-br from-purple-900 to-black rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-shadow duration-300"
-            initial={{ opacity: 0, y: 20 }}
+            className="relative overflow-hidden bg-gradient-to-br from-purple-900 to-black rounded-3xl p-8 shadow-xl transition-all duration-300 hover:shadow-2xl hover:scale-105"
+            initial={{ opacity: 0, y: 50 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
-            whileHover={{ scale: 1.05 }}
         >
             <motion.div
                 className="absolute top-4 right-4 text-purple-300 opacity-20"
-                initial={{ rotate: 0 }}
                 animate={{ rotate: 360 }}
                 transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
             >
                 <Quote size={48} />
             </motion.div>
 
-            <motion.p
-                className="text-xl text-white mb-6 relative z-10"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                transition={{ delay: 0.2, duration: 0.5 }}
-            >
+            <p className="text-xl text-white mb-6 relative z-10">
                 &ldquo;{testimonial.quote}&rdquo;
-            </motion.p>
+            </p>
 
-            <motion.div
-                className="flex items-center"
-                initial={{ opacity: 0, x: -20 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ delay: 0.4, duration: 0.5 }}
-            >
+            <div className="flex items-center">
                 <div className="relative mr-4">
                     <Image
                         src={testimonial.avatar}
@@ -83,7 +72,7 @@ function TestimonialCard({ testimonial }: { testimonial: Testimonial }) {
                     <p className="text-white font-semibold">{testimonial.name}</p>
                     <p className="text-purple-300 text-sm">{testimonial.position}</p>
                 </div>
-            </motion.div>
+            </div>
         </motion.div>
     );
 }
@@ -93,31 +82,28 @@ export function Testimonial() {
         <section className="py-16 bg-black bg-opacity-90 relative overflow-hidden">
             <div className="absolute inset-0 bg-[url('/stars-background.png')] opacity-50"></div>
             <div className="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl relative z-10">
-                <motion.div
-                    className="max-w-3xl mx-auto text-center mb-12"
-                    initial={{ opacity: 0, y: -20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5 }}
-                >
-                    <h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600 mb-4">
-                        Developers Love My Technical Content
+                <div className="max-w-3xl mx-auto text-center mb-12">
+                    <h2 className="text-5xl font-bold mb-4">
+                        <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
+                            Developers Insights
+                        </span>
                     </h2>
-                </motion.div>
+                    <p className="text-xl text-purple-300 mb-6">
+                        Developers across the globe loves DTA
+                    </p>
+                    <div className="flex justify-center space-x-2 mb-8">
+                        {[...Array(5)].map((_, i) => (
+                            <Star key={i} className="text-yellow-400 h-8 w-8 fill-current" />
+                        ))}
+                    </div>
+                </div>
 
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                    {testimonials.map((testimonial) => (
-                        <TestimonialCard key={testimonial.name} testimonial={testimonial} />
+                    {testimonials.map((testimonial, index) => (
+                        <TestimonialCard key={index} testimonial={testimonial} />
                     ))}
                 </div>
-
-                <motion.div
-                    className="mt-12 text-center"
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5, delay: 0.2 }}
-                >
-                </motion.div>
             </div>
         </section>
-    )
+    );
 }
\ No newline at end of file