From 5c3d214b3ab117b3f4c397f94d26e6487d66dcfb Mon Sep 17 00:00:00 2001 From: parthratra11 Date: Thu, 16 Jan 2025 18:13:55 +0530 Subject: [PATCH 1/3] Landing Page Refactored --- .gitignore | 2 +- app/page.tsx | 262 +++++++++++++++++++++++++++++++----- app/title.css | 67 +++++++++ components/navbar.tsx | 26 ++-- components/ui/highlight.tsx | 193 ++++++++++++++++++++++++++ package-lock.json | 14 ++ package.json | 2 + 7 files changed, 518 insertions(+), 48 deletions(-) create mode 100644 app/title.css create mode 100644 components/ui/highlight.tsx diff --git a/.gitignore b/.gitignore index 5c6f0f2..1f1880d 100644 --- a/.gitignore +++ b/.gitignore @@ -40,4 +40,4 @@ yarn-error.log* *.tsbuildinfo next-env.d.ts -.vercel +/app/test \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 07652b2..9443d9c 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,7 +1,10 @@ "use client"; -import Image from "next/image"; -import Link from "next/link"; import { Button } from "@/components/ui/button"; +import { cn } from "@/lib/utils"; +import { motion } from "framer-motion"; +import Navbar1 from "@/components/navbar"; +import PricingCard from "@/components/LandingComponents/PriceCard"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@radix-ui/react-tabs"; import { Card, CardContent, @@ -9,48 +12,187 @@ import { CardHeader, CardTitle, } from "@/components/ui/card"; -import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; -import { Highlight } from "@/components/ui/hero-hihglight"; -import PricingCard from "@/components/LandingComponents/PriceCard"; -import Navbar1 from "@/components/navbar"; import Footer from "@/components/footer"; +import { useRouter } from "next/navigation"; // Changed this import + +//@ts-ignore +const Highlight = ({ children, className }) => { + const words = children.split(" "); + return ( + + + + {words.map((word, i) => ( + + {word} + + ))} + + ); +}; + +//@ts-ignore +const Star = ({ style }) => ( +
+ + + +
+); export default function LandingPage() { + const router = useRouter(); // Initialize router return ( -
+
+ {/* Header */} + + {/* Main Content */}
-
-
-
-
-

-

Master LeetCode

- - Track Your Progress - -

-

- LeetCode Journal helps you organize your problem-solving - journey, track your progress, and achieve your coding - interview goals. -

-
-
- - + {/* Hero Section */} +
+ {/* */} +
+

+
+ + LeetCodeJournal + + + + + +
+

+ + + Track Your Progress + + + + + & Master LeetCode + +
+ +

+ +

+ LeetCode Journal helps you organize your problem-solving journey, + track your progress, and achieve your coding interview goals. +

+ +
+ +
+

@@ -221,8 +363,58 @@ export default function LandingPage() {

+
-
); } + +const starStyles = ` + .star-wrapper { + display: flex; + align-items: center; + justify-content: center; + } + + .star { + animation: starPulse 2s ease-in-out infinite; + } + + @keyframes starPulse { + 0% { + opacity: 1; + transform: scale(1); + } + 50% { + opacity: 0.3; + transform: scale(0.7); + } + 100% { + opacity: 1; + transform: scale(1); + } + } + + .star-wrapper:nth-child(2) .star { + animation-delay: 0.3s; + } + + .star-wrapper:nth-child(3) .star { + animation-delay: 0.6s; + } + + .star-wrapper:nth-child(4) .star { + animation-delay: 0.9s; + } + + .star-wrapper:nth-child(5) .star { + animation-delay: 1.2s; + } +`; + +// Update style injection +if (typeof document !== "undefined") { + const style = document.createElement("style"); + style.textContent = starStyles; + document.head.appendChild(style); +} diff --git a/app/title.css b/app/title.css new file mode 100644 index 0000000..9825cf3 --- /dev/null +++ b/app/title.css @@ -0,0 +1,67 @@ +:root { + --index: calc(1vw + 1vh); + --transition: cubic-bezier(0.1, 0.7, 0, 1); +} + +.items { + display: flex; + gap: 0.1rem; /* Reduced from 0.4rem */ + perspective: calc(var(--index) * 35); + font-size: 5rem; /* Increased from 2.5rem */ + font-weight: bolder; +} + +.item { + cursor: pointer; + filter: brightness(0.5); + transition: transform 1.25s var(--transition), filter 2s var(--transition); + will-change: transform, filter, rotateY; + /* padding: 0.1rem; */ +} + +.items .item:hover { + filter: brightness(1); + transform: translateZ(calc(var(--index) * 5)); +} + +/*Right*/ +.items .item:hover + * { + filter: brightness(0.8); + transform: translateZ(calc(var(--index) * 4)) rotateY(35deg); + z-index: -1; +} + +.items .item:hover + * + * { + filter: brightness(0.7); + transform: translateZ(calc(var(--index) * 3)) rotateY(40deg); + z-index: -2; +} + +.items .item:hover + * + * + * { + filter: brightness(0.6); + transform: translateZ(calc(var(--index) * 2)) rotateY(30deg); + z-index: -3; +} + +/*Left*/ +.items .item:has(+ :hover) { + filter: brightness(0.8); + transform: translateZ(calc(var(--index) * 4)) rotateY(-35deg); +} + +.items .item:has(+ * + :hover) { + filter: brightness(0.7); + transform: translateZ(calc(var(--index) * 3)) rotateY(-40deg); +} + +.items .item:has(+ * + * + :hover) { + filter: brightness(0.6); + transform: translateZ(calc(var(--index) * 2)) rotateY(-30deg); +} + +.items .item:active, +.items .item:focus { + filter: brightness(1); + z-index: 100; + transform: translateZ(calc(var(--index) * 5)) scale(1.2); +} diff --git a/components/navbar.tsx b/components/navbar.tsx index ed75564..4a4229a 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -22,18 +22,20 @@ const Navbar1 = () => { const toggleMenu = () => setIsMenuOpen(!isMenuOpen); return ( -
-