let's go

tyaga001 · Sep 30, 2024 · be04338 · be04338
1 parent b123c8a
commit be04338
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 48 deletions.
diff --git 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 🚀
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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>
-    )
+    );
 }