Skip to content

Commit 9702aa2

Browse files
Sohan-RoutSohan-Rout
committed
added 3 card
1 parent dd4b44c commit 9702aa2

File tree

3 files changed

+87
-42
lines changed

3 files changed

+87
-42
lines changed

‎app/components/features.jsx‎

Lines changed: 84 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
2-
import React, { useEffect, useRef } from "react";
2+
import React, { useEffect, useRef, useState } from "react";
33
import gsap from "gsap";
4-
import { FaFile, FaCopy, FaPencilRuler, FaSearch } from "react-icons/fa";
4+
import { FaFile, FaCopy, FaPencilRuler } from "react-icons/fa";
55
import { IoMdCloseCircle } from "react-icons/io";
66
import { HiSparkles } from "react-icons/hi2";
77
import { RiTailwindCssFill } from "react-icons/ri";
@@ -16,45 +16,47 @@ const iconMap = {
1616
const features = [
1717
{
1818
title: "Clean Minimal Design",
19-
description : "Explore clean, minimal, and reusable components to build your ideas faster with StreamUI.",
19+
description:
20+
"Explore clean, minimal, and reusable components to build your ideas faster with StreamUI.",
2021
},
2122
{
2223
title: "Fully Tailwind Ready",
2324
},
2425
{
25-
title: "Copy the Code",
26+
title: "Copy Paste simplicity",
2627
description:
27-
"Click copy and paste directly into your project. No installation required.",
28+
"No installation needed, just copy and paste directly into your project.",
2829
icon: "FaCopy",
2930
},
3031
{
31-
title: "Paste & Customize",
32-
description:
33-
"Tweak text, colors, and structure easily to match your brand and needs.",
32+
title: "Dark Mode Compatible",
33+
description: "Seamless support for dark mode across all components.",
3434
icon: "FaPencilRuler",
3535
},
3636
{
37-
title: "Browse Components",
38-
description:
39-
"Explore a curated collection of clean, ready-to-use React + Tailwind components for modern projects.",
37+
title: "Animation Ready",
38+
description: "Components with GSAP/Framer Motion for subtle animations.",
4039
icon: "FaFile",
4140
},
4241
];
4342

4443
export default function Hero() {
45-
// Ref for the magnifying glass icon on the second card
46-
const magnifyRef = useRef(null);
44+
const copyButtonRef = useRef(null);
45+
const pointerRef = useRef(null);
46+
const [copyText, setCopyText] = useState("Copy");
4747

4848
useEffect(() => {
49-
if (magnifyRef.current) {
50-
gsap.to(magnifyRef.current, {
51-
x: 10,
52-
y: -10,
53-
duration: 2,
54-
yoyo: true,
55-
repeat: -1,
56-
ease: "power1.inOut",
57-
});
49+
if (copyButtonRef.current && pointerRef.current) {
50+
const tl = gsap.timeline({ repeat: -1, repeatDelay: 1 });
51+
52+
tl.to(pointerRef.current, { y: 0, duration: 0.3, ease: "power1.inOut" })
53+
.add(() => setCopyText("Copied"))
54+
.to(
55+
pointerRef.current,
56+
{ y: 10, duration: 0.3, ease: "power1.inOut" },
57+
"+=0.2"
58+
)
59+
.add(() => setCopyText("Copy"), "+=0.5");
5860
}
5961
}, []);
6062

@@ -71,7 +73,8 @@ export default function Hero() {
7173
Everything You Need to Build Fast
7274
</h2>
7375
<p className="mt-4 text-neutral-600 dark:text-neutral-400 max-w-xl mx-auto">
74-
Reusable, clean, and responsive components ready to copy-paste into your next project.
76+
Reusable, clean, and responsive components ready to copy-paste into
77+
your next project.
7578
</p>
7679
</div>
7780
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 auto-rows-[200px] gap-6 max-w-6xl mx-auto">
@@ -94,18 +97,33 @@ export default function Hero() {
9497
<div className="flex flex-col items-center justify-center flex-grow text-center gap-4 p-2">
9598
{/* Mini Navbar */}
9699
<div className="flex items-center justify-between w-full max-w-xs px-4 py-2 border border-neutral-200 rounded-lg shadow-sm bg-white">
97-
<div className="text-sm font-medium text-black">Stream<span className="px-1 py-1 bg-black text-white ml-[1px] rounded-md">UI</span></div>
100+
<div className="text-sm font-medium text-black">
101+
Stream
102+
<span className="px-1 py-1 bg-black text-white ml-[1px] rounded-md">
103+
UI
104+
</span>
105+
</div>
98106
<div className="flex gap-3 text-sm text-neutral-600">
99-
<span className="cursor-pointer hover:text-black transition">Home</span>
100-
<span className="cursor-pointer hover:text-black transition">Components</span>
101-
<span className="cursor-pointer hover:text-black transition">Docs</span>
107+
<span className="cursor-pointer hover:text-black transition">
108+
Home
109+
</span>
110+
<span className="cursor-pointer hover:text-black transition">
111+
Components
112+
</span>
113+
<span className="cursor-pointer hover:text-black transition">
114+
Docs
115+
</span>
102116
</div>
103117
</div>
104118

105119
{/* Minimalist Card Showcase */}
106120
<div className="border border-neutral-200 rounded-lg shadow-sm p-4 bg-white w-full max-w-xs">
107-
<h4 className="text-base font-semibold text-neutral-800 mb-1">Card Title</h4>
108-
<p className="text-sm text-neutral-600 mb-2">This is a clean, minimal card to showcase StreamUI design.</p>
121+
<h4 className="text-base font-semibold text-neutral-800 mb-1">
122+
Card Title
123+
</h4>
124+
<p className="text-sm text-neutral-600 mb-2">
125+
This is a clean, minimal card to showcase StreamUI design.
126+
</p>
109127
<button className="px-3 py-1 text-sm rounded-md border border-neutral-300 text-neutral-700 hover:bg-neutral-100 transition">
110128
Action
111129
</button>
@@ -125,11 +143,12 @@ export default function Hero() {
125143
</div>
126144

127145
{/* Title and Description */}
128-
<h3 className="text-lg font-medium text-neutral-800">{item.title}</h3>
146+
<h3 className="text-lg font-medium text-neutral-800">
147+
{item.title}
148+
</h3>
129149
<p className="text-sm text-neutral-600 max-w-xs">
130150
{item.description}
131151
</p>
132-
133152
</div>
134153
{/* Bottom icons */}
135154
<div className="flex justify-between mx-2 mb-2">
@@ -147,12 +166,9 @@ export default function Hero() {
147166
<>
148167
<div className="flex flex-col items-center justify-center flex-grow text-center gap-2 p-4 relative">
149168
{/* Tailwind Logo */}
150-
<RiTailwindCssFill className="text-6xl text-blue-500"/>
151-
{/* Magnifying Glass */}
152-
<FaSearch
153-
ref={magnifyRef}
154-
className="text-3xl text-black opacity-50 absolute top-8 right-8 rotate-12"
155-
/>
169+
<div className="animate-bounce">
170+
<RiTailwindCssFill className="text-6xl text-blue-500" />
171+
</div>
156172
{/* Title */}
157173
<h3 className="text-lg font-medium text-neutral-800 mt-2">
158174
{item.title}
@@ -161,15 +177,43 @@ export default function Hero() {
161177
</>
162178
) : (
163179
<div className="flex flex-col items-center text-center flex-grow justify-center">
164-
{iconMap[item.icon] &&
180+
{idx === 2 ? (
181+
// Replace icon with Copy Button UI
182+
<div className="relative mb-4">
183+
<button
184+
ref={copyButtonRef}
185+
className="px-4 py-2 text-sm rounded-lg border border-neutral-300 text-neutral-700 bg-white hover:bg-neutral-100 transition"
186+
>
187+
{copyText}
188+
</button>
189+
{/* Pointer Icon hovering and clicking */}
190+
<div
191+
ref={pointerRef}
192+
className="absolute top-6 left-1/2 -translate-x-1/2"
193+
>
194+
<svg
195+
xmlns="http://www.w3.org/2000/svg"
196+
x="0px"
197+
y="0px"
198+
width="25"
199+
height="25"
200+
viewBox="0 0 50 50"
201+
>
202+
<path d="M 29.699219 47 C 29.578125 47 29.457031 46.976563 29.339844 46.933594 C 29.089844 46.835938 28.890625 46.644531 28.78125 46.398438 L 22.945313 32.90625 L 15.683594 39.730469 C 15.394531 40.003906 14.96875 40.074219 14.601563 39.917969 C 14.238281 39.761719 14 39.398438 14 39 L 14 6 C 14 5.601563 14.234375 5.242188 14.601563 5.082031 C 14.964844 4.925781 15.390625 4.996094 15.683594 5.269531 L 39.683594 27.667969 C 39.972656 27.9375 40.074219 28.355469 39.945313 28.726563 C 39.816406 29.101563 39.480469 29.363281 39.085938 29.398438 L 28.902344 30.273438 L 35.007813 43.585938 C 35.117188 43.824219 35.128906 44.101563 35.035156 44.351563 C 34.941406 44.601563 34.757813 44.800781 34.515625 44.910156 L 30.113281 46.910156 C 29.980469 46.96875 29.84375 47 29.699219 47 Z"></path>
203+
</svg>
204+
</div>
205+
</div>
206+
) : (
207+
iconMap[item.icon] &&
165208
React.createElement(iconMap[item.icon], {
166209
className: "text-4xl mb-4",
167-
})}
210+
})
211+
)}
168212
<h3 className="font-medium text-neutral-800 text-lg">
169213
{item.title}
170214
</h3>
171215
{item.description && (
172-
<p className="text-sm text-neutral-600 max-w-xs mt-1">
216+
<p className="text-sm text-neutral-600 max-w-xs mt-1 px-1">
173217
{item.description}
174218
</p>
175219
)}

‎app/components/navbar.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,9 @@ const Navbar = () => {
4949
</ul>
5050
</nav>
5151
{/* Social links with icons */}
52-
<div className="hidden md:flex items-center gap-4 border border-neutral-300 dark:border-neutral-700 rounded-full px-3 py-2 bg-neutral-800">
52+
<div className="hidden md:flex items-center gap-4 border border-neutral-300 rounded-full px-3 py-2 bg-neutral-800">
5353
{social.map((item, index) => (
54-
<a key={index} href={item.links} className="text-neutral-700 dark:text-neutral-300 hover:text-blue-400 hover:duration-300 hover:scale-110 transition">
54+
<a key={index} href={item.links} className="text-neutral-300 hover:text-blue-400 hover:duration-300 hover:scale-110 transition">
5555
{item.icon}
5656
</a>
5757
))}

‎tailwind.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/** @type {import('tailwindcss').Config} */
22
module.exports = {
3+
darkMode: 'class',
34
content: [
45
"./app/**/*.{js,ts,jsx,tsx}",
56
"./pages/**/*.{js,ts,jsx,tsx}",

0 commit comments

Comments
 (0)