Skip to content

Commit e91d4af

Browse files
Sohan-RoutSohan-Rout
committed
added features card 4
1 parent 9702aa2 commit e91d4af

File tree

2 files changed

+68
-16
lines changed

2 files changed

+68
-16
lines changed

‎app/components/features.jsx‎

Lines changed: 67 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22
import React, { useEffect, useRef, useState } from "react";
33
import gsap from "gsap";
44
import { FaFile, FaCopy, FaPencilRuler } from "react-icons/fa";
5-
import { IoMdCloseCircle } from "react-icons/io";
5+
import { IoMdCloseCircle, IoMdMoon } from "react-icons/io";
66
import { HiSparkles } from "react-icons/hi2";
77
import { RiTailwindCssFill } from "react-icons/ri";
8+
import { MdSunny } from "react-icons/md";
89

910
// Map icon names to actual components
1011
const iconMap = {
@@ -44,6 +45,7 @@ export default function Hero() {
4445
const copyButtonRef = useRef(null);
4546
const pointerRef = useRef(null);
4647
const [copyText, setCopyText] = useState("Copy");
48+
const [isCardDarkMode, setIsCardDarkMode] = useState(true);
4749

4850
useEffect(() => {
4951
if (copyButtonRef.current && pointerRef.current) {
@@ -81,11 +83,11 @@ export default function Hero() {
8183
{features.map((item, idx) => (
8284
<div
8385
key={idx}
84-
className={`rounded-xl bg-white shadow-lg flex flex-col justify-between ${
86+
className={`rounded-xl shadow-lg flex flex-col justify-between ${
8587
idx === 0
8688
? "col-span-1 sm:col-span-2 md:col-span-2 md:row-span-2"
8789
: "p-0"
88-
}`}
90+
} ${idx === 3 && isCardDarkMode ? "bg-neutral-900 text-white" : "bg-white"}`}
8991
>
9092
{idx === 0 ? (
9193
<>
@@ -122,7 +124,7 @@ export default function Hero() {
122124
Card Title
123125
</h4>
124126
<p className="text-sm text-neutral-600 mb-2">
125-
This is a clean, minimal card to showcase StreamUI design.
127+
This is a clean, minimal card.
126128
</p>
127129
<button className="px-3 py-1 text-sm rounded-md border border-neutral-300 text-neutral-700 hover:bg-neutral-100 transition">
128130
Action
@@ -159,8 +161,17 @@ export default function Hero() {
159161
) : (
160162
<>
161163
<div className="flex justify-between mx-2 my-2">
162-
<IoMdCloseCircle className="text-lg text-black opacity-50" />
163-
<IoMdCloseCircle className="text-lg text-black opacity-50" />
164+
{idx === 3 ? (
165+
<>
166+
<IoMdCloseCircle className={`text-lg ${isCardDarkMode ? "text-white" : "text-black"} opacity-50`} />
167+
<IoMdCloseCircle className={`text-lg ${isCardDarkMode ? "text-white" : "text-black"} opacity-50`} />
168+
</>
169+
) : (
170+
<>
171+
<IoMdCloseCircle className="text-lg text-black opacity-50" />
172+
<IoMdCloseCircle className="text-lg text-black opacity-50" />
173+
</>
174+
)}
164175
</div>
165176
{idx === 1 ? (
166177
<>
@@ -203,25 +214,66 @@ export default function Hero() {
203214
</svg>
204215
</div>
205216
</div>
217+
) : idx === 3 ? (
218+
<>
219+
{/* Toggle Switch */}
220+
<label className="relative inline-flex items-center cursor-pointer mb-4">
221+
<input
222+
type="checkbox"
223+
checked={isCardDarkMode}
224+
onChange={() => setIsCardDarkMode(!isCardDarkMode)}
225+
className="sr-only peer"
226+
/>
227+
<div className="w-14 h-8 bg-gray-200 rounded-full flex items-center px-1 peer-checked:bg-neutral-700 transition relative">
228+
<span className="text-xs"><MdSunny/></span>
229+
<div className={`absolute top-1 left-1 w-6 h-6 bg-white rounded-full transition-transform flex items-center justify-center text-xs
230+
${isCardDarkMode ? "translate-x-6" : ""}`}>
231+
{isCardDarkMode ? <IoMdMoon className="text-black"/> : <MdSunny/>}
232+
</div>
233+
<span className="text-xs ml-auto"><IoMdMoon/></span>
234+
</div>
235+
</label>
236+
<h3 className="font-medium text-lg">
237+
{item.title}
238+
</h3>
239+
{item.description && (
240+
<p className="text-sm max-w-xs mt-1 px-1 dark:text-white opacity-75">
241+
{item.description}
242+
</p>
243+
)}
244+
</>
206245
) : (
207246
iconMap[item.icon] &&
208247
React.createElement(iconMap[item.icon], {
209248
className: "text-4xl mb-4",
210249
})
211250
)}
212-
<h3 className="font-medium text-neutral-800 text-lg">
213-
{item.title}
214-
</h3>
215-
{item.description && (
216-
<p className="text-sm text-neutral-600 max-w-xs mt-1 px-1">
217-
{item.description}
218-
</p>
251+
{idx !== 3 && (
252+
<>
253+
<h3 className="font-medium text-neutral-800 text-lg">
254+
{item.title}
255+
</h3>
256+
{item.description && (
257+
<p className="text-sm text-neutral-600 max-w-xs mt-1 px-1">
258+
{item.description}
259+
</p>
260+
)}
261+
</>
219262
)}
220263
</div>
221264
)}
222265
<div className="flex justify-between mx-2 my-2">
223-
<IoMdCloseCircle className="text-lg text-black opacity-50" />
224-
<IoMdCloseCircle className="text-lg text-black opacity-50" />
266+
{idx === 3 ? (
267+
<>
268+
<IoMdCloseCircle className={`text-lg ${isCardDarkMode ? "text-white" : "text-black"} opacity-50`} />
269+
<IoMdCloseCircle className={`text-lg ${isCardDarkMode ? "text-white" : "text-black"} opacity-50`} />
270+
</>
271+
) : (
272+
<>
273+
<IoMdCloseCircle className="text-lg text-black opacity-50" />
274+
<IoMdCloseCircle className="text-lg text-black opacity-50" />
275+
</>
276+
)}
225277
</div>
226278
</>
227279
)}

‎app/components/navbar.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { FaGithub, FaLinkedin, FaProductHunt } from "react-icons/fa";
55
const navlinks = [
66
{ "title" : "Features", "links" : "#features" },
77
{ "title" : "Components", "links" : "#components" },
8+
{ "title" : "Documentation", "links" : "#documentation" },
89
{ "title" : "Reviews", "links" : "#reviews" },
9-
{ "title" : "FAQs", "links" : "#faqs" },
1010
];
1111

1212
const social = [

0 commit comments

Comments
 (0)