diff --git a/next.config.ts b/next.config.ts index e9ffa30..c500721 100644 --- a/next.config.ts +++ b/next.config.ts @@ -2,6 +2,22 @@ import type { NextConfig } from "next"; const nextConfig: NextConfig = { /* config options here */ + images: { + remotePatterns: [ + { + protocol: "https", + hostname: "api.dicebear.com", + port: "", + pathname: "/**", + }, + { + protocol: "https", + hostname: "static.wikia.nocookie.net", + port: "", + pathname: "/**", + }, + ], + }, }; export default nextConfig; diff --git a/package-lock.json b/package-lock.json index 60b0219..38a3c35 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@radix-ui/react-switch": "^1.1.3", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", - "framer-motion": "^12.4.7", + "framer-motion": "^12.23.22", "lucide-react": "^0.476.0", "next": "15.1.7", "next-sitemap": "^4.2.3", @@ -3217,13 +3217,13 @@ } }, "node_modules/framer-motion": { - "version": "12.4.7", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.7.tgz", - "integrity": "sha512-VhrcbtcAMXfxlrjeHPpWVu2+mkcoR31e02aNSR7OUS/hZAciKa8q6o3YN2mA1h+jjscRsSyKvX6E1CiY/7OLMw==", + "version": "12.23.22", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.22.tgz", + "integrity": "sha512-ZgGvdxXCw55ZYvhoZChTlG6pUuehecgvEAJz0BHoC5pQKW1EC5xf1Mul1ej5+ai+pVY0pylyFfdl45qnM1/GsA==", "license": "MIT", "dependencies": { - "motion-dom": "^12.4.5", - "motion-utils": "^12.0.0", + "motion-dom": "^12.23.21", + "motion-utils": "^12.23.6", "tslib": "^2.4.0" }, "peerDependencies": { @@ -4348,18 +4348,18 @@ } }, "node_modules/motion-dom": { - "version": "12.4.5", - "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.4.5.tgz", - "integrity": "sha512-Q2xmhuyYug1CGTo0jdsL05EQ4RhIYXlggFS/yPhQQRNzbrhjKQ1tbjThx5Plv68aX31LsUQRq4uIkuDxdO5vRQ==", + "version": "12.23.21", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.21.tgz", + "integrity": "sha512-5xDXx/AbhrfgsQmSE7YESMn4Dpo6x5/DTZ4Iyy4xqDvVHWvFVoV+V2Ri2S/ksx+D40wrZ7gPYiMWshkdoqNgNQ==", "license": "MIT", "dependencies": { - "motion-utils": "^12.0.0" + "motion-utils": "^12.23.6" } }, "node_modules/motion-utils": { - "version": "12.0.0", - "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz", - "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==", + "version": "12.23.6", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz", + "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==", "license": "MIT" }, "node_modules/ms": { diff --git a/package.json b/package.json index 64e9f67..cf94622 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "@radix-ui/react-switch": "^1.1.3", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", - "framer-motion": "^12.4.7", + "framer-motion": "^12.23.22", "lucide-react": "^0.476.0", "next": "15.1.7", "next-sitemap": "^4.2.3", diff --git a/public/assets/images/testimonial/Abdus-Salam-Jomadder.webp b/public/assets/images/testimonial/Abdus-Salam-Jomadder.webp new file mode 100644 index 0000000..6366cf1 Binary files /dev/null and b/public/assets/images/testimonial/Abdus-Salam-Jomadder.webp differ diff --git a/public/assets/images/testimonial/business-women.jpg b/public/assets/images/testimonial/business-women.jpg new file mode 100644 index 0000000..573646a Binary files /dev/null and b/public/assets/images/testimonial/business-women.jpg differ diff --git a/public/assets/images/testimonial/mahmudulhasan.webp b/public/assets/images/testimonial/mahmudulhasan.webp new file mode 100644 index 0000000..836f6ef Binary files /dev/null and b/public/assets/images/testimonial/mahmudulhasan.webp differ diff --git a/src/app/page.tsx b/src/app/page.tsx index b5b6e84..a017dc0 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -4,6 +4,7 @@ import FeatureSection from "@/components/FeatureSection"; import HeroSection from "@/components/HeroSection"; import PricingSection from "@/components/PricingSection"; import SocialSection from "@/components/SocialSection"; +import TestimonialSection from "@/components/TestimonialSection"; import React from "react"; const Home = () => { @@ -238,6 +239,7 @@ const Home = () => { + ); diff --git a/src/components/TestimonialSection.tsx b/src/components/TestimonialSection.tsx new file mode 100644 index 0000000..577b4ff --- /dev/null +++ b/src/components/TestimonialSection.tsx @@ -0,0 +1,186 @@ +"use client"; + +import { ChevronLeft, ChevronRight, Star } from "lucide-react"; +import * as React from "react"; +import { motion, AnimatePresence } from "framer-motion"; +import Image from "next/image"; + +interface Testimonial { + id: string; + name: string; + role: string; + company: string; + image: string; + rating: number; + content: string; +} + +const testimonials: Testimonial[] = [ + { + id: "1", + name: "Mahmud Hasan – ", + role: "Marketer", + company: "Freelancer", + image: "/assets/images/testimonial/mahmudulhasan.webp", + rating: 5, + content: + "I used to spend 50-60 hours every week managing my client's social media content and scheduling. With PlanPost AI, I now finish everything in just 2 hours! This has saved me huge amounts of time and allowed me to take on more clients—boosting both my productivity and income.", + }, + { + id: "2", + name: "Abdus Salam Jomadder", + role: "E-commerce Entrepreneu", + company: "ফ্লাভিয়া", + image: "/assets/images/testimonial/Abdus-Salam-Jomadder.webp", + rating: 5, + content: + "My product images improved significantly with PlanPost AI. They look more professional and eye-catching, which directly helped me increase sales. The best part? I don’t need any design skills—it’s simple, fast, and effective!", + }, + { + id: "3", + name: "Farhana Akter", + role: "Owner", + company: "Small Business", + image: "/assets/images/testimonial/business-women.jpg", + rating: 5, + content: + "Staying consistent on social media was always tough. With PlanPost AI’s bulk generation, I now create a month’s content in minutes and schedule it instantly. My brand engagement has grown by 3x, and I can focus more on scaling my business.", + }, +]; + +export default function TestimonialSection() { + const [currentIndex, setCurrentIndex] = React.useState(0); + const [direction, setDirection] = React.useState(0); + + const slidesPerView = 3; + const maxIndex = Math.max(0, testimonials.length - slidesPerView); + + const handlePrevious = () => { + setDirection(-1); + setCurrentIndex((prev) => Math.max(0, prev - 1)); + }; + + const handleNext = () => { + setDirection(1); + setCurrentIndex((prev) => Math.min(maxIndex, prev + 1)); + }; + + const visibleTestimonials = testimonials.slice( + currentIndex, + currentIndex + slidesPerView + ); + + return ( +
+
+
+

+ What Our Customers Say +

+

+ Join thousands of satisfied customers who have transformed their + social media presence with Planpost AI +

+
+ +
+
+ + 0 ? 100 : -100 }} + animate={{ opacity: 1, x: 0 }} + exit={{ opacity: 0, x: direction > 0 ? -100 : 100 }} + transition={{ + duration: 0.4, + ease: [0.4, 0, 0.2, 1], + }} + className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" + > + {visibleTestimonials.map((testimonial) => ( + +
+ {[...Array(testimonial.rating)].map((_, i) => ( + + ))} +
+ +

+ {testimonial.content} +

+ +
+ {testimonial.name} +
+

+ {testimonial.name} +

+

+ {testimonial.role} at {testimonial.company} +

+
+
+ + ))} + + +
+ +
+ + + + +
+ {[...Array(maxIndex + 1)].map((_, index) => ( +
+ + + + +
+
+
+
+ ); +}