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/globals.css b/app/globals.css index 581d725..831c2e6 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,7 +1,7 @@ @tailwind base; @tailwind components; @tailwind utilities; - + @layer base { :root { --background: 0 0% 100%; @@ -84,7 +84,7 @@ --color-5: 90 100% 63%; } } - + @layer base { * { @apply border-border; @@ -92,4 +92,4 @@ body { @apply bg-background text-foreground; } -} \ No newline at end of file +} diff --git a/app/page.tsx b/app/page.tsx index 07652b2..45fe56c 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,188 @@ 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"; +import "./starStyles.css"; + +//@ts-ignore +const Highlight = ({ children, className }) => { + const words = children.split(" "); + return ( + + + + {words.map((word: any, i: any) => ( + + {word} + + ))} + + ); +}; + +//@ts-ignore +const Star = ({ style }) => ( +
+ + + +
+); export default function LandingPage() { + const router = useRouter(); 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 +364,14 @@ export default function LandingPage() {

+
-
); } + +// if (typeof document !== "undefined") { +// const style = document.createElement("style"); +// style.textContent = starStyles; +// document.head.appendChild(style); +// } diff --git a/app/starStyles.css b/app/starStyles.css new file mode 100644 index 0000000..ca98793 --- /dev/null +++ b/app/starStyles.css @@ -0,0 +1,40 @@ +.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; +} 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 3b04b59..6cae6de 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -5,7 +5,7 @@ import Link from "next/link"; import { usePathname } from "next/navigation"; import { Button } from "@/components/ui/button"; import { ThemeToggle } from "@/components/theme-toggle"; -import { Menu, X } from "lucide-react"; +import { BookOpen, Menu, X } from "lucide-react"; const navItems = [ { href: "/", label: "Home" }, @@ -22,18 +22,20 @@ const Navbar1 = () => { const toggleMenu = () => setIsMenuOpen(!isMenuOpen); return ( -
-