Skip to content

Commit 5c3d214

Browse files
parthratra11parthratra11
committed
Landing Page Refactored
1 parent 9862fa1 commit 5c3d214

File tree

7 files changed

+518
-48
lines changed

7 files changed

+518
-48
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/page.tsx

Lines changed: 227 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,198 @@
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"; // Changed this import
17+
18+
//@ts-ignore
19+
const Highlight = ({ children, className }) => {
20+
const words = children.split(" ");
21+
return (
22+
<motion.span
23+
initial={{ opacity: 0 }}
24+
animate={{ opacity: 1 }}
25+
transition={{ duration: 0.5 }}
26+
className={cn(
27+
"relative inline-block pb-1 px-1 py-2",
28+
"rounded-lg",
29+
className
30+
)}
31+
>
32+
<motion.div
33+
className="absolute inset-0 rounded-lg"
34+
initial={{ scaleX: 0 }}
35+
animate={{ scaleX: 1 }}
36+
transition={{ duration: 1, ease: "easeOut", delay: 0.3 }}
37+
style={{
38+
background:
39+
"linear-gradient(to right, rgb(129 140 248), rgb(192 132 252), rgb(244 114 182))",
40+
originX: 0,
41+
}}
42+
/>
43+
44+
{words.map((word, i) => (
45+
<motion.span
46+
key={i}
47+
initial={{ y: 20, opacity: 0 }}
48+
animate={{ y: 0, opacity: 1 }}
49+
transition={{
50+
duration: 0.5,
51+
delay: 0.4 + i * 0.1,
52+
ease: "easeOut",
53+
}}
54+
className="relative inline-block mx-1"
55+
>
56+
{word}
57+
</motion.span>
58+
))}
59+
</motion.span>
60+
);
61+
};
62+
63+
//@ts-ignore
64+
const Star = ({ style }) => (
65+
<div
66+
className="star-wrapper"
67+
style={{
68+
position: "absolute",
69+
...style,
70+
}}
71+
>
72+
<svg
73+
className="star"
74+
viewBox="0 0 24 24"
75+
width="100%"
76+
height="100%"
77+
fill="currentColor"
78+
>
79+
<path d="M12 2L7 12L12 22L17 12L12 2Z M2 12L12 7L22 12L12 17L2 12Z" />
80+
</svg>
81+
</div>
82+
);
1783

1884
export default function LandingPage() {
85+
const router = useRouter(); // Initialize router
1986
return (
20-
<div className="flex flex-col min-h-screen bg-background">
87+
<div className="flex flex-col min-h-screen bg-black">
88+
{/* Header */}
2189
<Navbar1 />
90+
91+
{/* Main Content */}
2292
<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>
93+
{/* Hero Section */}
94+
<section className="w-full min-h-[calc(100vh-3.5rem)] py-12 md:py-24 lg:py-32 relative overflow-hidden bg-black">
95+
{/* <NetworkBackground /> */}
96+
<div className="container mx-auto px-4 md:px-6 relative z-10 flex flex-col items-center justify-center h-full text-center">
97+
<h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-7xl/none">
98+
<div className="relative font-medium text-[3rem] sm:text-[4rem] md:text-[5rem] leading-none text-white">
99+
<span className="relative inline-block">
100+
LeetCodeJournal
101+
<Star
102+
style={{
103+
top: "-30px",
104+
left: "10%",
105+
width: "20px",
106+
height: "20px",
107+
color: "white",
108+
}}
109+
/>
110+
<Star
111+
style={{
112+
top: "20%",
113+
right: "-30px",
114+
width: "24px",
115+
height: "24px",
116+
color: "white",
117+
animationDelay: "0.3s",
118+
}}
119+
/>
120+
<Star
121+
style={{
122+
bottom: "-20px",
123+
left: "30%",
124+
width: "16px",
125+
height: "16px",
126+
color: "white",
127+
animationDelay: "0.6s",
128+
}}
129+
/>
130+
<Star
131+
style={{
132+
top: "40%",
133+
left: "-25px",
134+
width: "20px",
135+
height: "20px",
136+
color: "white",
137+
animationDelay: "0.9s",
138+
}}
139+
/>
140+
<Star
141+
style={{
142+
bottom: "30%",
143+
right: "20%",
144+
width: "18px",
145+
height: "18px",
146+
color: "white",
147+
animationDelay: "1.2s",
148+
}}
149+
/>
150+
</span>
50151
</div>
152+
<p></p>
153+
<span className="inline-block mt-4 text-2xl sm:text-3xl md:text-4xl lg:text-5xl/none">
154+
<Highlight className="px-2 sm:px-4 md:px-6 lg:px-10 py-3">
155+
Track Your Progress
156+
</Highlight>
157+
</span>
158+
<motion.p
159+
initial={{ opacity: 0, y: 20 }}
160+
animate={{ opacity: 1, y: 0 }}
161+
transition={{ duration: 1, delay: 0.5 }}
162+
className="text-2xl sm:text-3xl md:text-4xl lg:text-6xl/none relative"
163+
>
164+
<span className="bg-gradient-to-b from-transparent via-white to-white bg-clip-text text-transparent">
165+
& Master LeetCode
166+
</span>
167+
<div className="absolute inset-0 bg-gradient-to-b from-black via-transparent to-transparent" />
168+
</motion.p>
169+
</h1>
170+
171+
<p className="mx-auto max-w-[700px] text-muted-foreground text-xl mt-6">
172+
LeetCode Journal helps you organize your problem-solving journey,
173+
track your progress, and achieve your coding interview goals.
174+
</p>
175+
176+
<div className="flex flex-wrap justify-center gap-4 mt-8">
177+
<Button
178+
size="lg"
179+
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"
180+
onClick={() => router.push("/auth/register")}
181+
>
182+
Get Started
183+
</Button>
184+
<Button
185+
variant="outline"
186+
size="lg"
187+
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"
188+
onClick={() => router.push("/learn-more")}
189+
>
190+
Learn More
191+
</Button>
51192
</div>
52193
</div>
53194
</section>
195+
54196
<section id="features" className="w-full abo py-12 md:py-20 lg:py-24">
55197
<div className="container mx-auto px-4 md:px-6">
56198
<h2 className="text-3xl font-bold tracking-tighter sm:text-5xl text-center mb-12">
@@ -221,8 +363,58 @@ export default function LandingPage() {
221363
</div>
222364
</div>
223365
</section>
366+
<Footer />
224367
</main>
225-
<Footer />
226368
</div>
227369
);
228370
}
371+
372+
const starStyles = `
373+
.star-wrapper {
374+
display: flex;
375+
align-items: center;
376+
justify-content: center;
377+
}
378+
379+
.star {
380+
animation: starPulse 2s ease-in-out infinite;
381+
}
382+
383+
@keyframes starPulse {
384+
0% {
385+
opacity: 1;
386+
transform: scale(1);
387+
}
388+
50% {
389+
opacity: 0.3;
390+
transform: scale(0.7);
391+
}
392+
100% {
393+
opacity: 1;
394+
transform: scale(1);
395+
}
396+
}
397+
398+
.star-wrapper:nth-child(2) .star {
399+
animation-delay: 0.3s;
400+
}
401+
402+
.star-wrapper:nth-child(3) .star {
403+
animation-delay: 0.6s;
404+
}
405+
406+
.star-wrapper:nth-child(4) .star {
407+
animation-delay: 0.9s;
408+
}
409+
410+
.star-wrapper:nth-child(5) .star {
411+
animation-delay: 1.2s;
412+
}
413+
`;
414+
415+
// Update style injection
416+
if (typeof document !== "undefined") {
417+
const style = document.createElement("style");
418+
style.textContent = starStyles;
419+
document.head.appendChild(style);
420+
}

‎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)