Skip to content

Commit f203ff0

Browse files
w0wayushw0wayush
committed
Changes in whychoose section
1 parent 6c8eb48 commit f203ff0

File tree

4 files changed

+237
-85
lines changed

4 files changed

+237
-85
lines changed

‎index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
5+
<link rel="icon" type="image/svg+xml" href="/logos/magic_hat.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React</title>
7+
<title>MyMagic Fit</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎src/components/custom/whychoose/WhyChooseSection.jsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { AnimatedSection } from "@/home/Home";
2+
3+
export const WhyChooseSection = () => {
4+
return (
5+
<AnimatedSection className="py-24 bg-gray-900">
6+
<div className="container mx-auto px-4">
7+
<h2 className="text-4xl font-bold text-center text-white mb-12">
8+
Why Choose MagicFit?
9+
</h2>
10+
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
11+
{[
12+
{ title: "AI-Powered Styling", icon: "🧠" },
13+
{ title: "Perfect Fit Guarantee", icon: "✨" },
14+
{ title: "Sustainable Fashion", icon: "🌿" },
15+
].map((feature, index) => (
16+
<div
17+
key={index}
18+
className="bg-gray-800 p-6 rounded-lg shadow-lg text-center"
19+
>
20+
<div className="text-4xl mb-4">{feature.icon}</div>
21+
<h3 className="text-xl font-semibold text-white mb-2">
22+
{feature.title}
23+
</h3>
24+
<p className="text-gray-400">
25+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
26+
</p>
27+
</div>
28+
))}
29+
</div>
30+
</div>
31+
</AnimatedSection>
32+
);
33+
};

‎src/components/ui/infinite-moving-cards.jsx

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
"use client";
2+
3+
import { cn } from "@/lib/utils";
4+
import React, { useEffect, useState } from "react";
5+
6+
export const InfiniteMovingCards = ({
7+
items,
8+
direction = "left",
9+
speed = "fast",
10+
pauseOnHover = true,
11+
className,
12+
}) => {
13+
const containerRef = React.useRef(null);
14+
const scrollerRef = React.useRef(null);
15+
16+
useEffect(() => {
17+
addAnimation();
18+
}, []);
19+
const [start, setStart] = useState(false);
20+
function addAnimation() {
21+
if (containerRef.current && scrollerRef.current) {
22+
const scrollerContent = Array.from(scrollerRef.current.children);
23+
24+
scrollerContent.forEach((item) => {
25+
const duplicatedItem = item.cloneNode(true);
26+
if (scrollerRef.current) {
27+
scrollerRef.current.appendChild(duplicatedItem);
28+
}
29+
});
30+
31+
getDirection();
32+
getSpeed();
33+
setStart(true);
34+
}
35+
}
36+
const getDirection = () => {
37+
if (containerRef.current) {
38+
if (direction === "left") {
39+
containerRef.current.style.setProperty(
40+
"--animation-direction",
41+
"forwards"
42+
);
43+
} else {
44+
containerRef.current.style.setProperty(
45+
"--animation-direction",
46+
"reverse"
47+
);
48+
}
49+
}
50+
};
51+
const getSpeed = () => {
52+
if (containerRef.current) {
53+
if (speed === "fast") {
54+
containerRef.current.style.setProperty("--animation-duration", "20s");
55+
} else if (speed === "normal") {
56+
containerRef.current.style.setProperty("--animation-duration", "40s");
57+
} else {
58+
containerRef.current.style.setProperty("--animation-duration", "80s");
59+
}
60+
}
61+
};
62+
return (
63+
<div
64+
ref={containerRef}
65+
className={cn(
66+
"scroller relative z-20 max-w-7xl overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]",
67+
className
68+
)}
69+
>
70+
<ul
71+
ref={scrollerRef}
72+
className={cn(
73+
" flex min-w-full shrink-0 gap-4 py-4 w-max flex-nowrap",
74+
start && "animate-scroll ",
75+
pauseOnHover && "hover:[animation-play-state:paused]"
76+
)}
77+
>
78+
{items.map((item, idx) => (
79+
<li
80+
className="w-[350px] max-w-full relative rounded-2xl border border-b-0 flex-shrink-0 border-slate-700 px-8 py-6 md:w-[450px]"
81+
style={{
82+
background:
83+
"linear-gradient(180deg, var(--slate-800), var(--slate-900)",
84+
}}
85+
key={item.name}
86+
>
87+
<blockquote>
88+
<div
89+
aria-hidden="true"
90+
className="user-select-none -z-1 pointer-events-none absolute -left-0.5 -top-0.5 h-[calc(100%_+_4px)] w-[calc(100%_+_4px)]"
91+
></div>
92+
<span className=" relative z-20 text-sm leading-[1.6] text-gray-100 font-normal">
93+
{item.quote}
94+
</span>
95+
<div className="relative z-20 mt-6 flex flex-row items-center">
96+
<span className="flex flex-col gap-1">
97+
<span className=" text-sm leading-[1.6] text-gray-400 font-normal">
98+
{item.name}
99+
</span>
100+
<span className=" text-sm leading-[1.6] text-gray-400 font-normal">
101+
{item.title}
102+
</span>
103+
</span>
104+
</div>
105+
</blockquote>
106+
</li>
107+
))}
108+
</ul>
109+
</div>
110+
);
111+
};

‎src/index.css

+90-82
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,99 @@
11
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
2+
@tailwind components;
3+
@tailwind utilities;
44

5-
@layer base {
6-
:root {
7-
--background: 0 0% 100%;
8-
--foreground: 0 0% 3.9%;
9-
--card: 0 0% 100%;
10-
--card-foreground: 0 0% 3.9%;
11-
--popover: 0 0% 100%;
12-
--popover-foreground: 0 0% 3.9%;
13-
--primary: 0 0% 9%;
14-
--primary-foreground: 0 0% 98%;
15-
--secondary: 0 0% 96.1%;
16-
--secondary-foreground: 0 0% 9%;
17-
--muted: 0 0% 96.1%;
18-
--muted-foreground: 0 0% 45.1%;
19-
--accent: 0 0% 96.1%;
20-
--accent-foreground: 0 0% 9%;
21-
--destructive: 0 84.2% 60.2%;
22-
--destructive-foreground: 0 0% 98%;
23-
--border: 0 0% 89.8%;
24-
--input: 0 0% 89.8%;
25-
--ring: 0 0% 3.9%;
26-
--radius: 0.5rem;
27-
--chart-1: 12 76% 61%;
28-
--chart-2: 173 58% 39%;
29-
--chart-3: 197 37% 24%;
30-
--chart-4: 43 74% 66%;
31-
--chart-5: 27 87% 67%;
32-
}
5+
* {
6+
margin: 0;
7+
padding: 0;
8+
box-sizing: border-box;
9+
}
3310

34-
.dark {
35-
--background: 0 0% 3.9%;
36-
--foreground: 0 0% 98%;
37-
--card: 0 0% 3.9%;
38-
--card-foreground: 0 0% 98%;
39-
--popover: 0 0% 3.9%;
40-
--popover-foreground: 0 0% 98%;
41-
--primary: 0 0% 98%;
42-
--primary-foreground: 0 0% 9%;
43-
--secondary: 0 0% 14.9%;
44-
--secondary-foreground: 0 0% 98%;
45-
--muted: 0 0% 14.9%;
46-
--muted-foreground: 0 0% 63.9%;
47-
--accent: 0 0% 14.9%;
48-
--accent-foreground: 0 0% 98%;
49-
--destructive: 0 62.8% 30.6%;
50-
--destructive-foreground: 0 0% 98%;
51-
--border: 0 0% 14.9%;
52-
--input: 0 0% 14.9%;
53-
--ring: 0 0% 83.1%;
54-
--chart-1: 220 70% 50%;
55-
--chart-2: 160 60% 45%;
56-
--chart-3: 30 80% 55%;
57-
--chart-4: 280 65% 60%;
58-
--chart-5: 340 75% 55%;
59-
}
11+
body {
12+
overflow-x: hidden;
13+
}
14+
15+
@layer base {
16+
:root {
17+
--background: 0 0% 100%;
18+
--foreground: 0 0% 3.9%;
19+
--card: 0 0% 100%;
20+
--card-foreground: 0 0% 3.9%;
21+
--popover: 0 0% 100%;
22+
--popover-foreground: 0 0% 3.9%;
23+
--primary: 0 0% 9%;
24+
--primary-foreground: 0 0% 98%;
25+
--secondary: 0 0% 96.1%;
26+
--secondary-foreground: 0 0% 9%;
27+
--muted: 0 0% 96.1%;
28+
--muted-foreground: 0 0% 45.1%;
29+
--accent: 0 0% 96.1%;
30+
--accent-foreground: 0 0% 9%;
31+
--destructive: 0 84.2% 60.2%;
32+
--destructive-foreground: 0 0% 98%;
33+
--border: 0 0% 89.8%;
34+
--input: 0 0% 89.8%;
35+
--ring: 0 0% 3.9%;
36+
--radius: 0.5rem;
37+
--chart-1: 12 76% 61%;
38+
--chart-2: 173 58% 39%;
39+
--chart-3: 197 37% 24%;
40+
--chart-4: 43 74% 66%;
41+
--chart-5: 27 87% 67%;
6042
}
6143

62-
@layer base {
63-
* {
64-
@apply border-border;
65-
}
66-
body {
67-
@apply bg-background text-foreground;
68-
}
44+
.dark {
45+
--background: 0 0% 3.9%;
46+
--foreground: 0 0% 98%;
47+
--card: 0 0% 3.9%;
48+
--card-foreground: 0 0% 98%;
49+
--popover: 0 0% 3.9%;
50+
--popover-foreground: 0 0% 98%;
51+
--primary: 0 0% 98%;
52+
--primary-foreground: 0 0% 9%;
53+
--secondary: 0 0% 14.9%;
54+
--secondary-foreground: 0 0% 98%;
55+
--muted: 0 0% 14.9%;
56+
--muted-foreground: 0 0% 63.9%;
57+
--accent: 0 0% 14.9%;
58+
--accent-foreground: 0 0% 98%;
59+
--destructive: 0 62.8% 30.6%;
60+
--destructive-foreground: 0 0% 98%;
61+
--border: 0 0% 14.9%;
62+
--input: 0 0% 14.9%;
63+
--ring: 0 0% 83.1%;
64+
--chart-1: 220 70% 50%;
65+
--chart-2: 160 60% 45%;
66+
--chart-3: 30 80% 55%;
67+
--chart-4: 280 65% 60%;
68+
--chart-5: 340 75% 55%;
6969
}
70+
}
7071

72+
@layer base {
73+
* {
74+
@apply border-border;
75+
}
76+
body {
77+
@apply bg-background text-foreground;
78+
}
79+
}
7180

72-
73-
@keyframes scan {
74-
0% {
75-
top: -50%;
76-
}
77-
100% {
78-
top: 100%;
79-
}
81+
@keyframes scan {
82+
0% {
83+
top: -50%;
8084
}
81-
82-
.scanning::after {
83-
content: "";
84-
position: absolute;
85-
left: 0;
86-
width: 100%;
87-
height: 5px;
88-
background: linear-gradient(to right, transparent, #00ff00, transparent);
89-
filter: blur(4px);
90-
animation: scan 2s linear infinite;
91-
}
85+
100% {
86+
top: 100%;
87+
}
88+
}
89+
90+
.scanning::after {
91+
content: "";
92+
position: absolute;
93+
left: 0;
94+
width: 100%;
95+
height: 5px;
96+
background: linear-gradient(to right, transparent, #00ff00, transparent);
97+
filter: blur(4px);
98+
animation: scan 2s linear infinite;
99+
}

0 commit comments

Comments
 (0)