Skip to content

Commit 23ed921

Browse files
yashksaini-coderyashksaini-coder
authored
Merge pull request #99 from parthratra11/parth
Hero Component Refactored v2
2 parents 1198ab3 + a32d481 commit 23ed921

File tree

11 files changed

+655
-201
lines changed

11 files changed

+655
-201
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,4 @@ yarn-error.log*
4040
*.tsbuildinfo
4141
next-env.d.ts
4242

43-
.vercel
43+
/app/test

‎app/globals.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4-
4+
55
@layer base {
66
:root {
77
--background: 0 0% 100%;
@@ -84,12 +84,12 @@
8484
--color-5: 90 100% 63%;
8585
}
8686
}
87-
87+
8888
@layer base {
8989
* {
9090
@apply border-border;
9191
}
9292
body {
9393
@apply bg-background text-foreground;
9494
}
95-
}
95+
}

‎app/page.tsx‎

Lines changed: 183 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,199 @@
11
"use client";
2-
import Image from "next/image";
3-
import Link from "next/link";
42
import { Button } from "@/components/ui/button";
3+
import { cn } from "@/lib/utils";
4+
import { motion } from "framer-motion";
5+
import Navbar1 from "@/components/navbar";
6+
import PricingCard from "@/components/LandingComponents/PriceCard";
7+
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@radix-ui/react-tabs";
58
import {
69
Card,
710
CardContent,
811
CardDescription,
912
CardHeader,
1013
CardTitle,
1114
} from "@/components/ui/card";
12-
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
13-
import { Highlight } from "@/components/ui/hero-hihglight";
14-
import PricingCard from "@/components/LandingComponents/PriceCard";
15-
import Navbar1 from "@/components/navbar";
1615
import Footer from "@/components/footer";
16+
import { useRouter } from "next/navigation";
17+
import "./starStyles.css";
18+
19+
//@ts-ignore
20+
const Highlight = ({ children, className }) => {
21+
const words = children.split(" ");
22+
return (
23+
<motion.span
24+
initial={{ opacity: 0 }}
25+
animate={{ opacity: 1 }}
26+
transition={{ duration: 0.5 }}
27+
className={cn(
28+
"relative inline-block pb-1 px-1 py-2",
29+
"rounded-lg",
30+
className
31+
)}
32+
>
33+
<motion.div
34+
className="absolute inset-0 rounded-lg"
35+
initial={{ scaleX: 0 }}
36+
animate={{ scaleX: 1 }}
37+
transition={{ duration: 1, ease: "easeOut", delay: 0.3 }}
38+
style={{
39+
background:
40+
"linear-gradient(to right, rgb(129 140 248), rgb(192 132 252), rgb(244 114 182))",
41+
originX: 0,
42+
}}
43+
/>
44+
45+
{words.map((word: any, i: any) => (
46+
<motion.span
47+
key={i}
48+
initial={{ y: 20, opacity: 0 }}
49+
animate={{ y: 0, opacity: 1 }}
50+
transition={{
51+
duration: 0.5,
52+
delay: 0.4 + i * 0.1,
53+
ease: "easeOut",
54+
}}
55+
className="relative inline-block mx-1"
56+
>
57+
{word}
58+
</motion.span>
59+
))}
60+
</motion.span>
61+
);
62+
};
63+
64+
//@ts-ignore
65+
const Star = ({ style }) => (
66+
<div
67+
className="star-wrapper"
68+
style={{
69+
position: "absolute",
70+
...style,
71+
}}
72+
>
73+
<svg
74+
className="star"
75+
viewBox="0 0 24 24"
76+
width="100%"
77+
height="100%"
78+
fill="currentColor"
79+
>
80+
<path d="M12 2L7 12L12 22L17 12L12 2Z M2 12L12 7L22 12L12 17L2 12Z" />
81+
</svg>
82+
</div>
83+
);
1784

1885
export default function LandingPage() {
86+
const router = useRouter();
1987
return (
2088
<div className="flex flex-col min-h-screen bg-background">
89+
{/* Header */}
2190
<Navbar1 />
91+
92+
{/* Main Content */}
2293
<main className="flex-1">
23-
<section className="w-full py-12 md:py-24 lg:py-32 bg-secondary overflow-hidden">
24-
<div className="container mx-auto px-4 md:px-6 relative z-10">
25-
<div className="flex flex-col items-center space-y-4 text-center">
26-
<div className="space-y-2">
27-
<h1 className="text-3xl mb-9 font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
28-
<p className="mb-5">Master LeetCode</p>
29-
<Highlight className="dark:bg-primary/20 bg-primary/10">
30-
Track Your Progress
31-
</Highlight>
32-
</h1>
33-
<p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
34-
LeetCode Journal helps you organize your problem-solving
35-
journey, track your progress, and achieve your coding
36-
interview goals.
37-
</p>
38-
</div>
39-
<div className="space-x-4">
40-
<Button
41-
size="lg"
42-
className="bg-primary text-primary-foreground hover:bg-primary/90"
43-
>
44-
Get Started
45-
</Button>
46-
<Button variant="outline" size="lg">
47-
Learn More
48-
<a href=""></a>
49-
</Button>
94+
{/* Hero Section */}
95+
<section className="w-full min-h-[calc(100vh-3.5rem)] py-12 md:py-24 lg:py-32 relative overflow-hidden bg-background">
96+
{/* <NetworkBackground /> */}
97+
<div className="container mx-auto px-4 md:px-6 relative z-10 flex flex-col items-center justify-center h-full text-center">
98+
<h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-7xl/none">
99+
<div className="relative font-medium text-[3rem] sm:text-[4rem] md:text-[5rem] leading-none text-foreground">
100+
<span className="relative inline-block">
101+
LeetCodeJournal
102+
<Star
103+
style={{
104+
top: "-30px",
105+
left: "10%",
106+
width: "20px",
107+
height: "20px",
108+
color: "foreground",
109+
}}
110+
/>
111+
<Star
112+
style={{
113+
top: "20%",
114+
right: "-30px",
115+
width: "24px",
116+
height: "24px",
117+
color: "text-foreground",
118+
animationDelay: "0.3s",
119+
}}
120+
/>
121+
<Star
122+
style={{
123+
bottom: "-20px",
124+
left: "30%",
125+
width: "16px",
126+
height: "16px",
127+
color: "text-foreground",
128+
animationDelay: "0.6s",
129+
}}
130+
/>
131+
<Star
132+
style={{
133+
top: "40%",
134+
left: "-25px",
135+
width: "20px",
136+
height: "20px",
137+
color: "text-foreground",
138+
animationDelay: "0.9s",
139+
}}
140+
/>
141+
<Star
142+
style={{
143+
bottom: "30%",
144+
right: "20%",
145+
width: "18px",
146+
height: "18px",
147+
color: "text-foreground",
148+
animationDelay: "1.2s",
149+
}}
150+
/>
151+
</span>
50152
</div>
153+
<p></p>
154+
<span className="inline-block mt-4 text-2xl sm:text-3xl md:text-4xl lg:text-5xl/none">
155+
<Highlight className="px-2 sm:px-4 md:px-6 lg:px-10 py-3">
156+
Track Your Progress
157+
</Highlight>
158+
</span>
159+
<motion.p
160+
initial={{ opacity: 0, y: 20 }}
161+
animate={{ opacity: 1, y: 0 }}
162+
transition={{ duration: 1, delay: 0.5 }}
163+
className="text-2xl sm:text-3xl md:text-4xl lg:text-6xl/none relative"
164+
>
165+
<span className="bg-gradient-to-b from-transparent via-foreground to-foreground bg-clip-text text-transparent">
166+
& Master LeetCode
167+
</span>
168+
<div className="absolute inset-0 bg-gradient-to-b from-background via-transparent to-transparent" />
169+
</motion.p>
170+
</h1>
171+
172+
<p className="mx-auto max-w-[700px] text-muted-foreground text-xl mt-6">
173+
LeetCode Journal helps you organize your problem-solving journey,
174+
track your progress, and achieve your coding interview goals.
175+
</p>
176+
177+
<div className="flex flex-wrap justify-center gap-4 mt-8">
178+
<Button
179+
size="lg"
180+
className="rounded-full text-md px-10 py-6 font-bold transform transition-all duration-200 hover:scale-105 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600"
181+
onClick={() => router.push("/auth/register")}
182+
>
183+
Get Started
184+
</Button>
185+
<Button
186+
variant="outline"
187+
size="lg"
188+
className="rounded-full text-md px-10 py-6 font-bold transform transition-all duration-200 hover:scale-105 border-purple-500/50 hover:bg-purple-500/10"
189+
onClick={() => router.push("/learn-more")}
190+
>
191+
Learn More
192+
</Button>
51193
</div>
52194
</div>
53195
</section>
196+
54197
<section id="features" className="w-full abo py-12 md:py-20 lg:py-24">
55198
<div className="container mx-auto px-4 md:px-6">
56199
<h2 className="text-3xl font-bold tracking-tighter sm:text-5xl text-center mb-12">
@@ -221,8 +364,14 @@ export default function LandingPage() {
221364
</div>
222365
</div>
223366
</section>
367+
<Footer />
224368
</main>
225-
<Footer />
226369
</div>
227370
);
228371
}
372+
373+
// if (typeof document !== "undefined") {
374+
// const style = document.createElement("style");
375+
// style.textContent = starStyles;
376+
// document.head.appendChild(style);
377+
// }

‎app/starStyles.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.star-wrapper {
2+
display: flex;
3+
align-items: center;
4+
justify-content: center;
5+
}
6+
7+
.star {
8+
animation: starPulse 2s ease-in-out infinite;
9+
}
10+
11+
@keyframes starPulse {
12+
0% {
13+
opacity: 1;
14+
transform: scale(1);
15+
}
16+
50% {
17+
opacity: 0.3;
18+
transform: scale(0.7);
19+
}
20+
100% {
21+
opacity: 1;
22+
transform: scale(1);
23+
}
24+
}
25+
26+
.star-wrapper:nth-child(2) .star {
27+
animation-delay: 0.3s;
28+
}
29+
30+
.star-wrapper:nth-child(3) .star {
31+
animation-delay: 0.6s;
32+
}
33+
34+
.star-wrapper:nth-child(4) .star {
35+
animation-delay: 0.9s;
36+
}
37+
38+
.star-wrapper:nth-child(5) .star {
39+
animation-delay: 1.2s;
40+
}

‎app/title.css‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
:root {
2+
--index: calc(1vw + 1vh);
3+
--transition: cubic-bezier(0.1, 0.7, 0, 1);
4+
}
5+
6+
.items {
7+
display: flex;
8+
gap: 0.1rem; /* Reduced from 0.4rem */
9+
perspective: calc(var(--index) * 35);
10+
font-size: 5rem; /* Increased from 2.5rem */
11+
font-weight: bolder;
12+
}
13+
14+
.item {
15+
cursor: pointer;
16+
filter: brightness(0.5);
17+
transition: transform 1.25s var(--transition), filter 2s var(--transition);
18+
will-change: transform, filter, rotateY;
19+
/* padding: 0.1rem; */
20+
}
21+
22+
.items .item:hover {
23+
filter: brightness(1);
24+
transform: translateZ(calc(var(--index) * 5));
25+
}
26+
27+
/*Right*/
28+
.items .item:hover + * {
29+
filter: brightness(0.8);
30+
transform: translateZ(calc(var(--index) * 4)) rotateY(35deg);
31+
z-index: -1;
32+
}
33+
34+
.items .item:hover + * + * {
35+
filter: brightness(0.7);
36+
transform: translateZ(calc(var(--index) * 3)) rotateY(40deg);
37+
z-index: -2;
38+
}
39+
40+
.items .item:hover + * + * + * {
41+
filter: brightness(0.6);
42+
transform: translateZ(calc(var(--index) * 2)) rotateY(30deg);
43+
z-index: -3;
44+
}
45+
46+
/*Left*/
47+
.items .item:has(+ :hover) {
48+
filter: brightness(0.8);
49+
transform: translateZ(calc(var(--index) * 4)) rotateY(-35deg);
50+
}
51+
52+
.items .item:has(+ * + :hover) {
53+
filter: brightness(0.7);
54+
transform: translateZ(calc(var(--index) * 3)) rotateY(-40deg);
55+
}
56+
57+
.items .item:has(+ * + * + :hover) {
58+
filter: brightness(0.6);
59+
transform: translateZ(calc(var(--index) * 2)) rotateY(-30deg);
60+
}
61+
62+
.items .item:active,
63+
.items .item:focus {
64+
filter: brightness(1);
65+
z-index: 100;
66+
transform: translateZ(calc(var(--index) * 5)) scale(1.2);
67+
}

0 commit comments

Comments
 (0)