From be043389a556477de36d3087ef48629f5b9e487f Mon Sep 17 00:00:00 2001
From: Ankur Tyagi
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 (
-
+
“{testimonial.quote}”
-
+
-
+
{testimonial.name}
{testimonial.position}
-
+
);
}
@@ -93,31 +82,28 @@ export function Testimonial() {
-
-
- Developers Love My Technical Content
+
+
+
+ Developers Insights
+
-
+
+ Developers across the globe loves DTA
+
+
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+
+
- {testimonials.map((testimonial) => (
-
+ {testimonials.map((testimonial, index) => (
+
))}
-
-
-
- )
+ );
}
\ No newline at end of file