Skip to content

Commit dd4b44c

Browse files
Sohan-RoutSohan-Rout
committed
added features 2 cards
1 parent c953c39 commit dd4b44c

File tree

2 files changed

+193
-0
lines changed

2 files changed

+193
-0
lines changed

‎app/components/features.jsx‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
"use client";
2+
import React, { useEffect, useRef } from "react";
3+
import gsap from "gsap";
4+
import { FaFile, FaCopy, FaPencilRuler, FaSearch } from "react-icons/fa";
5+
import { IoMdCloseCircle } from "react-icons/io";
6+
import { HiSparkles } from "react-icons/hi2";
7+
import { RiTailwindCssFill } from "react-icons/ri";
8+
9+
// Map icon names to actual components
10+
const iconMap = {
11+
FaFile: FaFile,
12+
FaCopy: FaCopy,
13+
FaPencilRuler: FaPencilRuler,
14+
};
15+
16+
const features = [
17+
{
18+
title: "Clean Minimal Design",
19+
description : "Explore clean, minimal, and reusable components to build your ideas faster with StreamUI.",
20+
},
21+
{
22+
title: "Fully Tailwind Ready",
23+
},
24+
{
25+
title: "Copy the Code",
26+
description:
27+
"Click copy and paste directly into your project. No installation required.",
28+
icon: "FaCopy",
29+
},
30+
{
31+
title: "Paste & Customize",
32+
description:
33+
"Tweak text, colors, and structure easily to match your brand and needs.",
34+
icon: "FaPencilRuler",
35+
},
36+
{
37+
title: "Browse Components",
38+
description:
39+
"Explore a curated collection of clean, ready-to-use React + Tailwind components for modern projects.",
40+
icon: "FaFile",
41+
},
42+
];
43+
44+
export default function Hero() {
45+
// Ref for the magnifying glass icon on the second card
46+
const magnifyRef = useRef(null);
47+
48+
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+
});
58+
}
59+
}, []);
60+
61+
return (
62+
<section className="py-12 px-6">
63+
<div className="max-w-6xl mx-auto text-center mb-12">
64+
<span className="text-xs uppercase border border-black rounded-full bg-white px-6 py-2 tracking-widest text-black mb-4 inline-block">
65+
<div className="flex gap-2 items-center">
66+
<HiSparkles className="text-lg" />
67+
Features
68+
</div>
69+
</span>
70+
<h2 className="text-4xl md:text-4xl font-medium text-neutral-900">
71+
Everything You Need to Build Fast
72+
</h2>
73+
<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.
75+
</p>
76+
</div>
77+
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 auto-rows-[200px] gap-6 max-w-6xl mx-auto">
78+
{features.map((item, idx) => (
79+
<div
80+
key={idx}
81+
className={`rounded-xl bg-white shadow-lg flex flex-col justify-between ${
82+
idx === 0
83+
? "col-span-1 sm:col-span-2 md:col-span-2 md:row-span-2"
84+
: "p-0"
85+
}`}
86+
>
87+
{idx === 0 ? (
88+
<>
89+
{/* Top icons */}
90+
<div className="flex justify-between mx-2 my-2">
91+
<IoMdCloseCircle className="text-lg text-black opacity-50" />
92+
<IoMdCloseCircle className="text-lg text-black opacity-50" />
93+
</div>
94+
<div className="flex flex-col items-center justify-center flex-grow text-center gap-4 p-2">
95+
{/* Mini Navbar */}
96+
<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>
98+
<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>
102+
</div>
103+
</div>
104+
105+
{/* Minimalist Card Showcase */}
106+
<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>
109+
<button className="px-3 py-1 text-sm rounded-md border border-neutral-300 text-neutral-700 hover:bg-neutral-100 transition">
110+
Action
111+
</button>
112+
</div>
113+
114+
{/* Stacked Buttons */}
115+
<div className="flex flex-row gap-3 w-full max-w-xs">
116+
<button className="px-4 py-2 text-sm rounded-lg border border-neutral-300 text-neutral-700 hover:bg-neutral-100 transition">
117+
Button 1
118+
</button>
119+
<button className="px-4 py-2 text-sm rounded-lg border border-neutral-300 text-neutral-700 hover:bg-neutral-100 transition">
120+
Button 2
121+
</button>
122+
<button className="px-4 py-2 text-sm rounded-lg border border-neutral-300 text-neutral-700 hover:bg-neutral-100 transition">
123+
Button 3
124+
</button>
125+
</div>
126+
127+
{/* Title and Description */}
128+
<h3 className="text-lg font-medium text-neutral-800">{item.title}</h3>
129+
<p className="text-sm text-neutral-600 max-w-xs">
130+
{item.description}
131+
</p>
132+
133+
</div>
134+
{/* Bottom icons */}
135+
<div className="flex justify-between mx-2 mb-2">
136+
<IoMdCloseCircle className="text-lg text-black opacity-50" />
137+
<IoMdCloseCircle className="text-lg text-black opacity-50" />
138+
</div>
139+
</>
140+
) : (
141+
<>
142+
<div className="flex justify-between mx-2 my-2">
143+
<IoMdCloseCircle className="text-lg text-black opacity-50" />
144+
<IoMdCloseCircle className="text-lg text-black opacity-50" />
145+
</div>
146+
{idx === 1 ? (
147+
<>
148+
<div className="flex flex-col items-center justify-center flex-grow text-center gap-2 p-4 relative">
149+
{/* 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+
/>
156+
{/* Title */}
157+
<h3 className="text-lg font-medium text-neutral-800 mt-2">
158+
{item.title}
159+
</h3>
160+
</div>
161+
</>
162+
) : (
163+
<div className="flex flex-col items-center text-center flex-grow justify-center">
164+
{iconMap[item.icon] &&
165+
React.createElement(iconMap[item.icon], {
166+
className: "text-4xl mb-4",
167+
})}
168+
<h3 className="font-medium text-neutral-800 text-lg">
169+
{item.title}
170+
</h3>
171+
{item.description && (
172+
<p className="text-sm text-neutral-600 max-w-xs mt-1">
173+
{item.description}
174+
</p>
175+
)}
176+
</div>
177+
)}
178+
<div className="flex justify-between mx-2 my-2">
179+
<IoMdCloseCircle className="text-lg text-black opacity-50" />
180+
<IoMdCloseCircle className="text-lg text-black opacity-50" />
181+
</div>
182+
</>
183+
)}
184+
</div>
185+
))}
186+
</div>
187+
</section>
188+
);
189+
}

‎app/page.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Navbar from "@/app/components/navbar";
22
import Hero from "@/app/components/hero";
33
import Work from "@/app/components/work";
4+
import Features from "@/app/components/features";
45

56
export default function App() {
67
return (
@@ -14,6 +15,9 @@ export default function App() {
1415
<div className="border-t border-l border-r border-dashed border-neutral-400 p-1 md:p-1 mx-12">
1516
<Work/>
1617
</div>
18+
<div className="border-t border-l border-r border-dashed border-neutral-400 p-1 md:p-1 mx-12">
19+
<Features/>
20+
</div>
1721
</>
1822
);
1923
}

0 commit comments

Comments
 (0)