1'use client';
2import { MoveLeft } from 'lucide-react';
3import React, { useEffect, useState } from 'react'
4import { motion } from 'framer-motion'
5const page = () => {
6 const [cards, setCards] = useState([
7 {
8 id: 1,
9 name: 'John',
10 role: 'Software Engineer at xyz',
11 review:
12 'This platform completely changed the way I learn. The UI is intuitive, and I love how interactive everything feels!',
13 },
14 {
15 id: 2,
16 name: 'Sebestian',
17 role: 'Data Analyst at xyz',
18 review:
19 'The experience has been seamless. Everything is well structured, and the support team is super responsive!',
20 },
21 {
22 id: 3,
23 name: 'Alex',
24 role: 'Full Stack Developer at xyz',
25 review:
26 'I loved how smooth the animations and performance are. Great attention to detail and user experience!',
27 },
28 {
29 id: 4,
30 name: 'Sarah',
31 role: 'UI/UX Designer at xyz',
32 review:
33 'The clean design and the flow make it stand out. It feels professional yet simple to use just perfect!',
34 },
35 {
36 id: 5,
37 name: 'Michael',
38 role: 'Product Manager at xyz',
39 review:
40 'Really impressed by the thoughtful features and smooth navigation. It genuinely saves me time every day!',
41 },
42 {
43 id: 6,
44 name: 'Emma',
45 role: 'AI Research Intern at xyz',
46 review:
47 'Everything feels modern and fast. The interactive elements are done so well definitely a top-tier experience.',
48
49 },
50 ]);
51 const [lastInteraction, setLastInteraction] = useState(Date.now());
52 const [visibleCount, setVisibleCount] = useState(0);
53
54 useEffect(() => {
55 const interval = setInterval(() => {
56 setVisibleCount((prev) => {
57 if (prev < cards.length) return prev + 1;
58 clearInterval(interval);
59 return prev;
60 });
61 }, 300);
62
63 return () => clearInterval(interval);
64 }, [cards.length]);
65 const handleNext = () => {
66
67 setCards((prev) => {
68 const newCards = [...prev];
69 const first = newCards.shift()!;
70 newCards.push(first);
71 return newCards;
72 });
73 };
74 const handlePrev = () => {
75
76 setCards((prev) => {
77 const newCards = [...prev];
78 const last = newCards.pop()!;
79 newCards.unshift(last);
80 return newCards;
81 });
82 };
83
84 useEffect(() => {
85 const interval = setInterval(() => {
86 const now = Date.now();
87 if (now - lastInteraction >= 5000) {
88 handleNext();
89 }
90 }, 5000);
91 return () => clearInterval(interval);
92 }, [lastInteraction, cards]);
93
94 return (
95 <div className='flex flex-col font-roboto justify-center items-center font-light rounded-lg bg-black'>
96 <div className='relative flex flex-col w-140 min-h-screen justify-center mt-20 items-center'>
97 {cards.slice(0, visibleCount).map((card, i) => (
98 <div key={card.id} className={`absolute h-50 w-90 rounded-xl font-medium shadow-lg transform transition-all duration-300 ease-in-out ${card.id % 2 == 0 ? "bg-[#d3b1b1] text-black" : "bg-[#cbb9d6] text-black"} animate-slideIn`}
99 style={{ top: `${(i + 1) * 40}px`, zIndex: `${(100 - i)}` }}>
100 {i === 0 && (<div className="flex flex-col">
101 <div className='flex justify-between p-4 pb-0'>
102 <div className='hover:scale-95 transition-transform'>
103 <button onClick={() => handlePrev()}>
104 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
105 <title>circle-arrow-left</title>
106 <g fill="none">
107 <path d="M16.0001 7.61319C15.9999 5.90661 13.9844 4.90601 12.5177 5.88467L5.94444 10.2714C4.68584 11.1112 4.68584 12.8886 5.94444 13.7284L12.5177 18.1151C13.9845 19.0939 16.0001 18.0934 16.0001 16.3866V13.4999H21.0001L21.1534 13.4921C21.9098 13.4153 22.5001 12.7766 22.5001 11.9999C22.5 11.2233 21.9098 10.5845 21.1534 10.5077L21.0001 10.4999H16.0001V7.61319Z" fill="url(#1752500502773-8525463_circle-arrow-left_existing_0_c468okw2b)" data-glass="origin" mask="url(#1752500502773-8525463_circle-arrow-left_mask_zmde5dzkd)"></path>
108 <path d="M16.0001 7.61319C15.9999 5.90661 13.9844 4.90601 12.5177 5.88467L5.94444 10.2714C4.68584 11.1112 4.68584 12.8886 5.94444 13.7284L12.5177 18.1151C13.9845 19.0939 16.0001 18.0934 16.0001 16.3866V13.4999H21.0001L21.1534 13.4921C21.9098 13.4153 22.5001 12.7766 22.5001 11.9999C22.5 11.2233 21.9098 10.5845 21.1534 10.5077L21.0001 10.4999H16.0001V7.61319Z" fill="url(#1752500502773-8525463_circle-arrow-left_existing_0_c468okw2b)" data-glass="clone" filter="url(#1752500502773-8525463_circle-arrow-left_filter_ysuhvj6ku)" clipPath="url(#1752500502773-8525463_circle-arrow-left_clipPath_bqundae1k)"></path>
109 <path fillRule="evenodd" clipRule="evenodd" d="M23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12ZM15 15.6387C15 17.0545 13.406 17.8842 12.2461 17.0723L7.04785 13.4336C6.05282 12.7369 6.05286 11.2631 7.04785 10.5664L12.2461 6.92773C13.406 6.11583 15 6.94554 15 8.36133V15.6387Z" fill="url(#1752500502773-8525463_circle-arrow-left_existing_1_ysch4osfc)" data-glass="blur"></path>
110 <path d="M22.25 12C22.25 6.33908 17.6609 1.75 12 1.75C6.33908 1.75 1.75 6.33908 1.75 12C1.75 17.6609 6.33908 22.25 12 22.25V23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1L12.5664 1.01465C18.3783 1.30945 23 6.11484 23 12L22.9854 12.5664C22.6906 18.3783 17.8852 23 12 23V22.25C17.6609 22.25 22.25 17.6609 22.25 12Z" fill="url(#1752500502773-8525463_circle-arrow-left_existing_2_rnhblp4so)"></path>
111 <defs>
112 <linearGradient id="1752500502773-8525463_circle-arrow-left_existing_0_c468okw2b" x1="13.75" y1="5.5" x2="13.75" y2="18.5" gradientUnits="userSpaceOnUse">
113 <stop stopColor="#575757"></stop>
114 <stop offset="1" stopColor="#151515"></stop>
115 </linearGradient>
116 <linearGradient id="1752500502773-8525463_circle-arrow-left_existing_1_ysch4osfc" x1="12" y1="1" x2="12" y2="23" gradientUnits="userSpaceOnUse">
117 <stop stopColor="#E3E3E5" stopOpacity=".6"></stop>
118 <stop offset="1" stopColor="#BBBBC0" stopOpacity=".6"></stop>
119 </linearGradient>
120 <linearGradient id="1752500502773-8525463_circle-arrow-left_existing_2_rnhblp4so" x1="12" y1="1" x2="12" y2="13.74" gradientUnits="userSpaceOnUse">
121 <stop stopColor="#fff"></stop>
122 <stop offset="1" stopColor="#fff" stopOpacity="0"></stop>
123 </linearGradient>
124 <filter id="1752500502773-8525463_circle-arrow-left_filter_ysuhvj6ku" x="-100%" y="-100%" width="400%" height="400%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">
125 <feGaussianBlur stdDeviation="2" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" edgeMode="none" result="blur"></feGaussianBlur>
126 </filter>
127 <clipPath id="1752500502773-8525463_circle-arrow-left_clipPath_bqundae1k">
128 <path fillRule="evenodd" clipRule="evenodd" d="M23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12ZM15 15.6387C15 17.0545 13.406 17.8842 12.2461 17.0723L7.04785 13.4336C6.05282 12.7369 6.05286 11.2631 7.04785 10.5664L12.2461 6.92773C13.406 6.11583 15 6.94554 15 8.36133V15.6387Z" fill="url(#1752500502773-8525463_circle-arrow-left_existing_1_ysch4osfc)"></path>
129 </clipPath>
130 <mask id="1752500502773-8525463_circle-arrow-left_mask_zmde5dzkd">
131 <rect width="100%" height="100%" fill="#FFF"></rect>
132 <path fillRule="evenodd" clipRule="evenodd" d="M23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12ZM15 15.6387C15 17.0545 13.406 17.8842 12.2461 17.0723L7.04785 13.4336C6.05282 12.7369 6.05286 11.2631 7.04785 10.5664L12.2461 6.92773C13.406 6.11583 15 6.94554 15 8.36133V15.6387Z" fill="#000"></path>
133 </mask>
134 </defs>
135 </g>
136 </svg>
137 </button>
138 </div>
139 <div>
140 <p className='text-2xl text-gray-800'>{card.name} </p>
141 </div>
142 <div className='hover:scale-95 transition-transform'>
143 <button onClick={() => handleNext()}>
144
145 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
146 <title>circle-arrow-right</title>
147 <g fill="none">
148 <path d="M8 7.61307C8.0002 5.90648 10.0157 4.90589 11.4824 5.88455L18.0557 10.2713C19.3143 11.1111 19.3143 12.8884 18.0557 13.7283L11.4824 18.115C10.0157 19.0938 8 18.0933 8 16.3865V13.4998H3L2.84668 13.492C2.09029 13.4152 1.5 12.7764 1.5 11.9998C1.50011 11.2232 2.09035 10.5844 2.84668 10.5076L3 10.4998H8V7.61307Z" fill="url(#1752500502774-2800238_circle-arrow-right_existing_0_0eu70w1bk)" data-glass="origin" mask="url(#1752500502774-2800238_circle-arrow-right_mask_ikxa2618m)"></path>
149 <path d="M8 7.61307C8.0002 5.90648 10.0157 4.90589 11.4824 5.88455L18.0557 10.2713C19.3143 11.1111 19.3143 12.8884 18.0557 13.7283L11.4824 18.115C10.0157 19.0938 8 18.0933 8 16.3865V13.4998H3L2.84668 13.492C2.09029 13.4152 1.5 12.7764 1.5 11.9998C1.50011 11.2232 2.09035 10.5844 2.84668 10.5076L3 10.4998H8V7.61307Z" fill="url(#1752500502774-2800238_circle-arrow-right_existing_0_0eu70w1bk)" data-glass="clone" filter="url(#1752500502774-2800238_circle-arrow-right_filter_csmysv27c)" clipPath="url(#1752500502774-2800238_circle-arrow-right_clipPath_i9q03945e)"></path>
150 <path fillRule="evenodd" clipRule="evenodd" d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM9 15.6387C9 17.0545 10.594 17.8842 11.7539 17.0723L16.9521 13.4336C17.9472 12.7369 17.9471 11.2631 16.9521 10.5664L11.7539 6.92773C10.594 6.11583 9 6.94554 9 8.36133V15.6387Z" fill="url(#1752500502774-2800238_circle-arrow-right_existing_1_q6dcy0lm4)" data-glass="blur"></path>
151 <path d="M22.25 12C22.25 6.33908 17.6609 1.75 12 1.75C6.33908 1.75 1.75 6.33908 1.75 12C1.75 17.6609 6.33908 22.25 12 22.25V23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1L12.5664 1.01465C18.3783 1.30945 23 6.11484 23 12L22.9854 12.5664C22.6906 18.3783 17.8852 23 12 23V22.25C17.6609 22.25 22.25 17.6609 22.25 12Z" fill="url(#1752500502774-2800238_circle-arrow-right_existing_2_qqvhgsoii)"></path>
152 <defs>
153 <linearGradient id="1752500502774-2800238_circle-arrow-right_existing_0_0eu70w1bk" x1="10.25" y1="5.5" x2="10.25" y2="18.5" gradientUnits="userSpaceOnUse">
154 <stop stopColor="#575757"></stop>
155 <stop offset="1" stopColor="#151515"></stop>
156 </linearGradient>
157 <linearGradient id="1752500502774-2800238_circle-arrow-right_existing_1_q6dcy0lm4" x1="12" y1="1" x2="12" y2="23" gradientUnits="userSpaceOnUse">
158 <stop stopColor="#E3E3E5" stopOpacity=".6"></stop>
159 <stop offset="1" stopColor="#BBBBC0" stopOpacity=".6"></stop>
160 </linearGradient>
161 <linearGradient id="1752500502774-2800238_circle-arrow-right_existing_2_qqvhgsoii" x1="12" y1="1" x2="12" y2="13.74" gradientUnits="userSpaceOnUse">
162 <stop stopColor="#fff"></stop>
163 <stop offset="1" stopColor="#fff" stopOpacity="0"></stop>
164 </linearGradient>
165 <filter id="1752500502774-2800238_circle-arrow-right_filter_csmysv27c" x="-100%" y="-100%" width="400%" height="400%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">
166 <feGaussianBlur stdDeviation="2" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" edgeMode="none" result="blur"></feGaussianBlur>
167 </filter>
168 <clipPath id="1752500502774-2800238_circle-arrow-right_clipPath_i9q03945e">
169 <path fillRule="evenodd" clipRule="evenodd" d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM9 15.6387C9 17.0545 10.594 17.8842 11.7539 17.0723L16.9521 13.4336C17.9472 12.7369 17.9471 11.2631 16.9521 10.5664L11.7539 6.92773C10.594 6.11583 9 6.94554 9 8.36133V15.6387Z" fill="url(#1752500502774-2800238_circle-arrow-right_existing_1_q6dcy0lm4)"></path>
170 </clipPath>
171 <mask id="1752500502774-2800238_circle-arrow-right_mask_ikxa2618m">
172 <rect width="100%" height="100%" fill="#FFF"></rect>
173 <path fillRule="evenodd" clipRule="evenodd" d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM9 15.6387C9 17.0545 10.594 17.8842 11.7539 17.0723L16.9521 13.4336C17.9472 12.7369 17.9471 11.2631 16.9521 10.5664L11.7539 6.92773C10.594 6.11583 9 6.94554 9 8.36133V15.6387Z" fill="#000"></path>
174 </mask>
175 </defs>
176 </g>
177 </svg>
178 </button>
179 </div>
180 </div>
181 <div className='flex flex-col p-3 pt-0'>
182 {
183 <>
184 <span className='text-sm pl-2 text-center pb-3'>{card.role}</span>
185 <div className='pl-2'>
186 <p>{card.review}</p>
187 </div>
188 </>
189 }
190 </div>
191 </div>
192 )}
193 </div>
194 ))}
195 </div>
196 </div>
197 )
198}
199
200export default page