feat: add landing page

docs/superpowers/specs/2026-04-26-landing-page-design.md

@@ -0,0 +1,46 @@
+# Learning Trade Landing Page Design
+
+## Architecture & Framework
+- Astro for structure (`src/pages/index.astro`).
+- UnoCSS for utility-first styling (already configured with DaisyUI preset).
+- Vanilla HTML/CSS structure within Astro.
+- No client-side JavaScript beyond what Astro/DaisyUI handles natively.
+
+## Visual Aesthetic (SaaS Minimalist)
+- **Colors**: Deep dark mode background (slate-900/gray-950) with high-contrast text and a singular accent color (e.g., emerald or indigo) for primary actions.
+- **Typography**: Clean, sans-serif fonts (Atkinson Hyperlegible / Alata from UnoCSS config) with generous line heights and tracking.
+- **Layout**: Centered, balanced grids with ample whitespace (padding/margin).
+- **Styling**: Soft, subtle borders (1px border-gray-800), rounded corners (rounded-xl/2xl), and muted text for secondary information.
+
+## Component Structure
+
+### 1. Hero Section
+- Bold, clear value proposition headline ("Hyper-Local Study Resources").
+- Subheadline explaining the personalization (College, Branch, Semester specific).
+- Primary Call to Action (CTA) button ("Get Started" or "Find Resources").
+- Secondary CTA or social proof ("Join X students").
+- Background: Subtle, dark gradient or very faint grid pattern to add depth without noise.
+
+### 2. Value Proposition / Features Grid
+- A 3-column grid (responsive: 1 col on mobile, 3 on desktop).
+- Each card highlights a core feature:
+  - **Hyper-Personalized**: Feed tailored to your exact academic context.
+  - **Resource Variety**: PYQs, Notes, Tips & Tricks.
+  - **Grow Your Profile**: Share resources, earn followers, build academic clout.
+- Icons: Tabler icons (`i-tabler:*`) for each feature.
+- Card Style: Dark gray background (bg-gray-800/50), subtle border, soft hover effect.
+
+### 3. "How it Works" / Feed Preview (Mockup)
+- A visual representation of the personalized feed.
+- A minimalist mockup of a feed item (e.g., "Data Structures PYQ 2023 - Submitted by @studentA").
+- Emphasizes the clean, SaaS-like UI the user will experience inside the app.
+
+### 4. Footer (Minimal)
+- Simple copyright.
+- Links to About, Privacy, Contact (placeholders if pages don't exist).
+- Minimalist design, low contrast text.
+
+## Technical Implementation Details
+- Use UnoCSS classes directly in Astro template.
+- Use `dark:bg-*` and `dark:text-*` classes if theme toggling is expected, or just hardcode the dark theme classes since dark mode is explicitly requested. We'll default to explicit dark shades (e.g., `bg-gray-950`, `text-white`) to guarantee the dark mode aesthetic.
+- Icons: `<div class="i-tabler:book text-3xl"></div>`

package.json

@@ -19,22 +19,23 @@
     "@astrojs/sitemap": "3.7.2",
     "@astrojs/svelte": "8.0.5",
     "astro": "6.1.9",
-    "astro-seo": "^0.8.4",
-    "daisyui": "^5.0.31",
-    "svelte": "^5.23.1",
+    "astro-seo": "^1.1.0",
+    "daisyui": "^5.5.19",
+    "svelte": "^5.55.5",
     "tiny-invariant": "^1.3.3",
-    "typescript": "^5.8.2",
+    "typescript": "^6.0.3",
     "unocss-preset-daisyui-next": "^0.1.2"
   },
   "devDependencies": {
-    "@iconify-json/tabler": "^1.2.17",
-    "@unocss/preset-icons": "^66.1.0-beta.6",
-    "@unocss/preset-mini": "^66.1.0-beta.6",
-    "@unocss/preset-web-fonts": "^66.1.0-beta.6",
-    "@unocss/reset": "^66.1.0-beta.6",
-    "@unocss/transformer-variant-group": "^66.1.0-beta.6",
-    "prettier": "^3.7.4",
+    "@iconify-json/tabler": "^1.2.33",
+    "@unocss/astro": "^66.6.8",
+    "@unocss/preset-icons": "^66.6.8",
+    "@unocss/preset-mini": "^66.6.8",
+    "@unocss/preset-web-fonts": "^66.6.8",
+    "@unocss/reset": "^66.6.8",
+    "@unocss/transformer-variant-group": "^66.6.8",
+    "prettier": "^3.8.3",
     "prettier-plugin-astro": "^0.14.1",
-    "unocss": "^66.5.10"
+    "unocss": "^66.6.8"
   }
 }

src/components/showcase/section1.astro

@@ -0,0 +1,9 @@
+---
+---
+<!-- 1. Ambient Background (Apple-like abstract mesh) -->
+    <div class="fixed inset-0 z-0 pointer-events-none bg-[#030303]">
+      <div class="absolute top-[-20%] left-[-10%] w-[60vw] h-[60vw] rounded-full bg-gradient-to-br from-indigo-600/15 to-purple-600/15 blur-[120px] mix-blend-screen animate-ambient"></div>
+      <div class="absolute bottom-[-10%] right-[-20%] w-[70vw] h-[70vw] rounded-full bg-gradient-to-tl from-blue-600/10 to-cyan-400/10 blur-[150px] mix-blend-screen animate-ambient [animation-delay:2s]"></div>
+      <!-- Noise texture overlay for premium feel -->
+      <div class="absolute inset-0 opacity-[0.04] mix-blend-overlay pointer-events-none" style="background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E');"></div>
+    </div>

src/components/showcase/section10.astro

@@ -0,0 +1,23 @@
+---
+---
+<!-- 10. Live Statistics Counters -->
+      <section class="border-y border-white/[0.05] bg-black/20 backdrop-blur-md py-16 reveal-up opacity-0">
+        <div class="max-w-6xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-8 text-center divide-x divide-white/5">
+          <div class="stat-item">
+            <div class="text-4xl md:text-5xl font-bold text-white mb-2 counter" data-target="500">0</div>
+            <div class="text-sm text-gray-500 uppercase tracking-widest font-medium">Universities</div>
+          </div>
+          <div class="stat-item">
+            <div class="text-4xl md:text-5xl font-bold text-white mb-2"><span class="counter" data-target="50">0</span>k+</div>
+            <div class="text-sm text-gray-500 uppercase tracking-widest font-medium">Resources</div>
+          </div>
+          <div class="stat-item">
+            <div class="text-4xl md:text-5xl font-bold text-white mb-2"><span class="counter" data-target="100">0</span>k+</div>
+            <div class="text-sm text-gray-500 uppercase tracking-widest font-medium">Students</div>
+          </div>
+          <div class="stat-item">
+            <div class="text-4xl md:text-5xl font-bold text-white mb-2"><span class="counter" data-target="4.8">0</span>/5</div>
+            <div class="text-sm text-gray-500 uppercase tracking-widest font-medium">Avg Rating</div>
+          </div>
+        </div>
+      </section>

src/components/showcase/section11.astro

@@ -0,0 +1,38 @@
+---
+---
+<!-- 11. FAQ Accordion -->
+      <section class="max-w-3xl mx-auto px-6 py-24 reveal-up opacity-0">
+        <h2 class="text-3xl md:text-5xl font-bold tracking-tighter mb-10 text-center text-white">Got questions?</h2>
+        <div class="space-y-4">
+          <!-- Accordion 1 -->
+          <div class="glass-panel border border-white/10 rounded-2xl overflow-hidden group">
+            <button class="w-full px-6 py-5 text-left flex justify-between items-center text-lg font-medium text-gray-200 hover:text-white transition-colors faq-btn">
+              Is Learning Trade free to use?
+              <div class="i-tabler:chevron-down text-gray-500 transition-transform duration-300 faq-icon"></div>
+            </button>
+            <div class="px-6 pb-5 text-gray-400 font-light hidden faq-content opacity-0 transition-opacity duration-300">
+              Absolutely. Accessing and uploading basic resources is completely free for all students.
+            </div>
+          </div>
+          <!-- Accordion 2 -->
+          <div class="glass-panel border border-white/10 rounded-2xl overflow-hidden group">
+            <button class="w-full px-6 py-5 text-left flex justify-between items-center text-lg font-medium text-gray-200 hover:text-white transition-colors faq-btn">
+              How do I know the PYQs are authentic?
+              <div class="i-tabler:chevron-down text-gray-500 transition-transform duration-300 faq-icon"></div>
+            </button>
+            <div class="px-6 pb-5 text-gray-400 font-light hidden faq-content opacity-0 transition-opacity duration-300">
+              Our community upvoting system ensures quality. Verified accounts from your university also help moderate the content.
+            </div>
+          </div>
+          <!-- Accordion 3 -->
+          <div class="glass-panel border border-white/10 rounded-2xl overflow-hidden group">
+            <button class="w-full px-6 py-5 text-left flex justify-between items-center text-lg font-medium text-gray-200 hover:text-white transition-colors faq-btn">
+              Can I request my university to be added?
+              <div class="i-tabler:chevron-down text-gray-500 transition-transform duration-300 faq-icon"></div>
+            </button>
+            <div class="px-6 pb-5 text-gray-400 font-light hidden faq-content opacity-0 transition-opacity duration-300">
+              Yes! Contact us and we will set up the taxonomy for your college within 48 hours.
+            </div>
+          </div>
+        </div>
+      </section>

src/components/showcase/section12.astro

@@ -0,0 +1,15 @@
+---
+---
+<!-- 12. Massive Glowing CTA -->
+      <section class="max-w-5xl mx-auto px-6 pt-10 pb-32 text-center reveal-up opacity-0 relative">
+        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80%] h-full bg-gradient-to-r from-blue-600/20 via-purple-600/20 to-cyan-600/20 blur-[100px] pointer-events-none rounded-full"></div>
+
+        <h2 class="text-5xl md:text-7xl font-extrabold tracking-tighter mb-8 relative z-10 leading-[1.1] text-white">
+          Stop searching.<br/>
+          <span class="text-transparent bg-clip-text bg-gradient-to-r from-white via-gray-300 to-gray-500">Start studying.</span>
+        </h2>
+        <a href="/signup" class="relative z-10 inline-flex px-12 py-5 bg-white text-black rounded-full font-bold hover:scale-105 transition-all duration-300 shadow-[0_0_40px_rgba(255,255,255,0.3)] hover:shadow-[0_0_60px_rgba(255,255,255,0.6)] text-xl items-center gap-3 group overflow-hidden">
+          <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-transparent via-black/10 to-transparent -translate-x-full group-hover:animate-shimmer"></span>
+          Create Free Account <div class="i-tabler:arrow-right group-hover:translate-x-2 transition-transform"></div>
+        </a>
+      </section>

src/components/showcase/section13.astro

@@ -0,0 +1,19 @@
+---
+---
+<!-- Minimal Footer -->
+      <footer class="max-w-6xl mx-auto px-6 py-12 mt-12 border-t border-white/[0.08] flex flex-col md:flex-row justify-between items-center gap-6 reveal-up opacity-0 relative z-10">
+        <div class="flex items-center gap-3 text-white font-bold text-lg tracking-tight">
+          <div class="w-8 h-8 rounded-full glass-panel flex items-center justify-center">
+            <div class="i-tabler:books text-sm"></div>
+          </div>
+          Learning Trade
+        </div>
+        <div class="flex gap-8 text-sm text-gray-400 font-medium">
+          <a href="/about" class="hover:text-white transition-colors">About</a>
+          <a href="/privacy" class="hover:text-white transition-colors">Privacy</a>
+          <a href="/terms" class="hover:text-white transition-colors">Terms</a>
+        </div>
+        <div class="text-sm text-gray-600 font-medium">
+          &copy; {new Date().getFullYear()} All rights reserved.
+        </div>
+      </footer>

src/components/showcase/section2.astro

@@ -0,0 +1,22 @@
+---
+---
+<!-- 2. Floating Glass Navbar -->
+    <nav class="fixed top-0 w-full z-50 transition-all duration-300 pt-6 px-6" id="navbar">
+      <div class="max-w-6xl mx-auto px-6 py-3 rounded-full glass-panel flex justify-between items-center reveal-up opacity-0">
+        <div class="flex items-center gap-3">
+          <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center border border-white/20 shadow-inner group cursor-pointer hover:bg-white/20 transition-colors">
+            <div class="i-tabler:books text-white text-xl group-hover:scale-110 transition-transform"></div>
+          </div>
+          <span class="text-xl font-bold tracking-tight text-white">Learning Trade</span>
+        </div>
+        <div class="hidden md:flex gap-8 text-sm font-medium text-gray-300">
+          <a href="#features" class="hover:text-white transition-colors duration-300">Features</a>
+          <a href="#experience" class="hover:text-white transition-colors duration-300">Experience</a>
+          <a href="#community" class="hover:text-white transition-colors duration-300">Community</a>
+        </div>
+        <div class="flex items-center gap-4">
+          <a href="/login" class="text-sm font-medium text-gray-300 hover:text-white transition-colors duration-300">Sign In</a>
+          <a href="/signup" class="text-sm font-medium bg-white text-black px-6 py-2.5 rounded-full hover:scale-105 hover:shadow-[0_0_20px_rgba(255,255,255,0.4)] transition-all duration-300 shadow-md">Get Started</a>
+        </div>
+      </div>
+    </nav>

src/components/showcase/section3.astro

@@ -0,0 +1,64 @@
+---
+import { base } from 'astro:config/server';
+---
+
+<!-- 3. Hero Section (Enhanced Typography) -->
+<section
+  class="max-w-5xl mx-auto px-6 text-center pt-20 pb-24"
+  id="hero-container"
+>
+  <div
+    class="reveal-up opacity-0 inline-flex items-center gap-3 px-5 py-2 rounded-full glass-panel text-sm font-medium text-gray-200 mb-10 hover:bg-white/10 transition-colors cursor-pointer group"
+  >
+    <span class="relative flex h-2 w-2">
+      <span
+        class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"
+      ></span>
+      <span
+        class="relative inline-flex rounded-full h-2 w-2 bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.8)]"
+      ></span>
+    </span>
+    Now live across 500+ university campuses
+    <div
+      class="i-tabler:arrow-right opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all w-0 group-hover:w-4"
+    >
+    </div>
+  </div>
+
+  <h1
+    class="reveal-up opacity-0 [animation-delay:100ms] text-5xl md:text-7xl lg:text-[6rem] font-extrabold tracking-tighter leading-[1.1] mb-8 text-white drop-shadow-2xl"
+  >
+    The cheat code for <br class="hidden md:block" />
+    <span
+      class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 animate-gradient-x bg-[length:200%_auto]"
+      >your semester.</span
+    >
+  </h1>
+
+  <p
+    class="reveal-up opacity-0 [animation-delay:200ms] text-lg md:text-2xl text-gray-300 max-w-3xl mx-auto mb-14 leading-relaxed font-light"
+  >
+    Your college. Your branch. Your exact semester. Access previous year papers
+    and curated notes, built and maintained by a community of students.
+  </p>
+
+  <div
+    class="reveal-up opacity-0 [animation-delay:300ms] flex flex-col sm:flex-row items-center justify-center gap-6"
+  >
+    <a
+      href=`${base}/explore`
+      class="w-full sm:w-auto px-10 py-4 bg-white text-black rounded-full font-bold transition-all duration-300 flex items-center justify-center gap-3 hover:scale-105 hover:shadow-[0_0_40px_rgba(255,255,255,0.3)] text-lg group"
+    >
+      Start Exploring <div
+        class="i-tabler:sparkles text-xl group-hover:rotate-12 transition-transform"
+      >
+      </div>
+    </a>
+    <a
+      href="#how-it-works"
+      class="w-full sm:w-auto px-10 py-4 glass-panel rounded-full font-semibold transition-all duration-300 hover:bg-white/10 hover:scale-105 text-lg flex items-center justify-center gap-2"
+    >
+      See how it works
+    </a>
+  </div>
+</section>

src/components/showcase/section4.astro

@@ -0,0 +1,28 @@
+---
+---
+<!-- 4. Infinite Marquee / Social Proof -->
+      <section class="w-full overflow-hidden py-8 border-y border-white/[0.05] bg-black/40 backdrop-blur-xl mb-32 reveal-up opacity-0">
+        <div class="flex whitespace-nowrap animate-marquee items-center text-gray-400 text-lg font-medium tracking-wider uppercase">
+          <!-- Set 1 -->
+          <span class="mx-12 flex items-center gap-3"><div class="i-tabler:building-bank text-gray-500"></div> MIT</span>
+          <span class="mx-12 text-gray-700 text-xs">✦</span>
+          <span class="mx-12 flex items-center gap-3"><div class="i-tabler:building-bank text-gray-500"></div> Stanford</span>
+          <span class="mx-12 text-gray-700 text-xs">✦</span>
+          <span class="mx-12 flex items-center gap-3"><div class="i-tabler:building-bank text-gray-500"></div> IIT Bombay</span>
+          <span class="mx-12 text-gray-700 text-xs">✦</span>
+          <span class="mx-12 flex items-center gap-3"><div class="i-tabler:building-bank text-gray-500"></div> BITS Pilani</span>
+          <span class="mx-12 text-gray-700 text-xs">✦</span>
+          <span class="mx-12 flex items-center gap-3"><div class="i-tabler:building-bank text-gray-500"></div> Harvard</span>
+          <span class="mx-12 text-gray-700 text-xs">✦</span>
+          <!-- Set 2 (Duplicate for loop) -->
+          <span class="mx-12 flex items-center gap-3"><div class="i-tabler:building-bank text-gray-500"></div> MIT</span>
+          <span class="mx-12 text-gray-700 text-xs">✦</span>
+          <span class="mx-12 flex items-center gap-3"><div class="i-tabler:building-bank text-gray-500"></div> Stanford</span>
+          <span class="mx-12 text-gray-700 text-xs">✦</span>
+          <span class="mx-12 flex items-center gap-3"><div class="i-tabler:building-bank text-gray-500"></div> IIT Bombay</span>
+          <span class="mx-12 text-gray-700 text-xs">✦</span>
+          <span class="mx-12 flex items-center gap-3"><div class="i-tabler:building-bank text-gray-500"></div> BITS Pilani</span>
+          <span class="mx-12 text-gray-700 text-xs">✦</span>
+          <span class="mx-12 flex items-center gap-3"><div class="i-tabler:building-bank text-gray-500"></div> Harvard</span>
+        </div>
+      </section>

src/components/showcase/section5.astro

@@ -0,0 +1,28 @@
+---
+---
+<!-- 5. Interactive Problem Statement Text -->
+      <section class="max-w-4xl mx-auto px-6 py-20 mb-20 text-center reveal-up opacity-0" id="problem-text">
+        <h2 class="text-3xl md:text-5xl font-bold leading-relaxed text-gray-500 hover-illuminate-container">
+          <span class="hover-word transition-colors duration-300">We</span>
+          <span class="hover-word transition-colors duration-300">were</span>
+          <span class="hover-word transition-colors duration-300">tired</span>
+          <span class="hover-word transition-colors duration-300">of</span>
+          <span class="hover-word transition-colors duration-300">sifting</span>
+          <span class="hover-word transition-colors duration-300">through</span>
+          <span class="hover-word transition-colors duration-300 text-white font-extrabold">thousands</span>
+          <span class="hover-word transition-colors duration-300">of</span>
+          <span class="hover-word transition-colors duration-300">irrelevant</span>
+          <span class="hover-word transition-colors duration-300">PDFs.</span>
+          <br/>
+          <span class="hover-word transition-colors duration-300">So</span>
+          <span class="hover-word transition-colors duration-300">we</span>
+          <span class="hover-word transition-colors duration-300">built</span>
+          <span class="hover-word transition-colors duration-300 text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-400 font-extrabold">a platform</span>
+          <span class="hover-word transition-colors duration-300">that</span>
+          <span class="hover-word transition-colors duration-300">knows</span>
+          <span class="hover-word transition-colors duration-300">exactly</span>
+          <span class="hover-word transition-colors duration-300">what</span>
+          <span class="hover-word transition-colors duration-300">you</span>
+          <span class="hover-word transition-colors duration-300">need.</span>
+        </h2>
+      </section>