feat: Complete visual redesign with indigo/Swiss glassmorphism theme

REDESIGN_PROMPT.md

@@ -0,0 +1,83 @@
+# Redesign Prompt - Prep Interview Platform
+
+## Project Context
+
+This is "Prep" - an interview preparation platform for multiple positions and levels of experience and skills. It is built with **Next.js 16 (App Router)**, **React 19**, **TypeScript**, **Tailwind CSS v4**, and **Bun**. The current design uses a dark-first theme with glass morphism effects, yellow accent colors, and an ambient background.
+
+## Task
+
+Your task is to completely redesign the styling and visual identity of this website. Create an incredible, creative, and unique design that pushes the limits of modern web design capabilities. The goal is to transform this from a basic study resource into a visually stunning, professional interview prep platform.
+
+## Requirements
+
+### Tech Stack (already configured - do NOT reinitialize)
+
+- Next.js 16 with App Router (Turbopack)
+- Tailwind CSS v4 (using `@theme` directive in `globals.css`, no separate config file)
+- React 19
+- TypeScript
+- Bun
+- Framer Motion (already installed for animations)
+- Lucide React (icons)
+
+### Design Specifications
+
+Create **A COMPLETE REDESIGN of the entire website** that replaces the current styling and layout. This includes the homepage, content pages, and shared layout elements.
+
+The redesign should include:
+
+1. **A cohesive visual system** applied across all pages (homepage, topic pages, documentation views)
+2. **A unique color palette and typography** that feels fresh and professional
+3. **Creative layout and visual hierarchy** - experiment with grids, asymmetry, overlapping elements, scroll effects
+4. **Smooth animations** using Framer Motion - page transitions, hover effects, scroll-triggered reveals
+5. **Responsive design** that works on mobile, tablet, and desktop
+6. **Dark mode support**
+
+### Design Direction
+
+Pick the most compelling direction (or blend ideas) from the following:
+
+- Minimalist/Swiss design - clean grids, strong typography, lots of whitespace
+- Glassmorphism/Neomorphism - frosted glass cards, depth effects, layered surfaces
+- Bold/Brutalist - raw typography, harsh contrasts, unconventional layouts
+
+### Content to Showcase
+
+- Hero section with platform name and value proposition
+- Topics covered: HTML & CSS, JavaScript, React, API Integration
+- Study features: Code examples, interactive notes, table of contents navigation
+- Call-to-action for getting started
+
+### Technical Constraints
+
+- Use the existing `src/app/` directory structure
+- Reuse existing components from `src/components/` where appropriate, or create new ones
+- All styles should use Tailwind utility classes and CSS variables defined in `globals.css`
+- Maintain accessibility standards (focus states, semantic HTML, ARIA labels)
+- Keep Framer Motion animations respectful of `prefers-reduced-motion`
+- Dev server runs on the default Next.js port (use `bun run dev`)
+
+### What NOT to Do
+
+- Do NOT reinitialize the project or change the build system
+- Do NOT remove existing pages or components (add new ones alongside)
+- Do NOT install unnecessary dependencies - use what's already available
+
+## Evaluation Criteria
+
+After creating the redesign, review it by:
+
+1. Opening the dev server (`bun run dev`)
+2. Navigating to `/`
+3. Checking responsive behavior
+4. Verifying animations work smoothly
+5. Ensuring no console errors
+
+Iterate and refine until satisfied with the quality.
+
+## Delivery
+
+When the redesign is complete and verified:
+
+1. Commit all changes to the current branch
+2. Create a pull request to `main` with a summary of the redesign

src/app/(main)/home.tsx

@@ -1,4 +1,7 @@
 'use client';
+
+import { motion } from 'framer-motion';
+import { ArrowRight, BookOpen, Code2, Layers } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import type { Section } from '@/types';
 
@@ -13,76 +16,157 @@ const sections: Section[] = [
   },
 ];
 
-export default function HomeComponent() {
-  const router = useRouter();
+const features = [
+  {
+    icon: Code2,
+    title: 'Code Examples',
+    description: 'Real-world code snippets with syntax highlighting',
+  },
+  {
+    icon: BookOpen,
+    title: 'Interactive Notes',
+    description: 'Structured study notes organized by topic',
+  },
+  {
+    icon: Layers,
+    title: 'Progressive Learning',
+    description: 'Topics build on each other from basics to advanced',
+  },
+];
 
-  const totalItems = sections.length;
-  const columns = 3;
+const container = {
+  hidden: { opacity: 0 },
+  show: {
+    opacity: 1,
+    transition: { staggerChildren: 0.1, delayChildren: 0.2 },
+  },
+};
 
-  const colSpanClasses: { [key: number]: string } = {
-    2: 'md:col-span-2',
-    3: 'md:col-span-3',
-    6: 'md:col-span-6',
-  };
+const item = {
+  hidden: { opacity: 0, y: 20 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.5, ease: 'easeOut' as const },
+  },
+};
 
-  return (
-    <div className='flex min-h-screen flex-col items-center gap-8 py-8 md:justify-center lg:justify-center'>
-      <div className='max-w-6xl px-4 text-center'>
-        <h1 className='text-balance font-bold font-sans text-2xl md:text-3xl lg:text-4xl'>
-          Any interview prep
-        </h1>
-      </div>
-      <div className='grid max-w-6xl grid-cols-1 gap-6 px-4 md:grid-cols-6'>
-        {sections.map((section, index) => {
-          const rowNumber = Math.floor(index / columns);
-          const isLastRow =
-            rowNumber === Math.floor((totalItems - 1) / columns);
+export default function HomeComponent() {
+  const router = useRouter();
 
-          const itemsOnLastRow = totalItems % columns;
-          const itemsOnThisRow =
-            isLastRow && itemsOnLastRow > 0 ? itemsOnLastRow : columns;
+  return (
+    <div className='flex min-h-screen flex-col'>
+      {/* Hero */}
+      <motion.section
+        animate={{ opacity: 1 }}
+        className='flex flex-1 flex-col items-center justify-center px-4 py-20 text-center sm:py-32'
+        initial={{ opacity: 0 }}
+        transition={{ duration: 0.6 }}
+      >
+        <motion.div
+          animate={{ opacity: 1, y: 0 }}
+          initial={{ opacity: 0, y: 30 }}
+          transition={{ duration: 0.7, ease: 'easeOut' }}
+        >
+          <span className='mb-4 inline-block rounded-full border border-[var(--border-accent)] bg-[var(--accent-glow)] px-4 py-1.5 font-mono text-[var(--accent)] text-xs uppercase tracking-widest'>
+            Interview Prep Platform
+          </span>
+        </motion.div>
 
-          const colSpan = Math.round(6 / itemsOnThisRow);
+        <motion.h1
+          animate={{ opacity: 1, y: 0 }}
+          className='mb-6 max-w-3xl font-bold text-4xl leading-tight sm:text-5xl md:text-7xl'
+          initial={{ opacity: 0, y: 30 }}
+          transition={{ duration: 0.7, delay: 0.1, ease: 'easeOut' }}
+        >
+          <span className='text-gradient'>Prepare</span>
+          <br />
+          <span className='text-[var(--foreground)]'>for any interview</span>
+        </motion.h1>
 
-          const className = `rounded-lg border border-zinc-800 bg-zinc-900/90 p-6 shadow-sm transition-colors duration-200 hover:border-zinc-600 ${
-            colSpanClasses[colSpan]
-          }`;
+        <motion.p
+          animate={{ opacity: 1, y: 0 }}
+          className='mb-10 max-w-xl text-[var(--foreground-muted)] text-lg leading-relaxed'
+          initial={{ opacity: 0, y: 20 }}
+          transition={{ duration: 0.6, delay: 0.2, ease: 'easeOut' }}
+        >
+          Structured study notes, code examples, and hands-on practice for
+          frontend developer interviews.
+        </motion.p>
 
-          return (
-            <button
-              className={`${className} flex flex-col text-left`}
+        {/* Topic Cards */}
+        <motion.div
+          animate='show'
+          className='grid w-full max-w-3xl gap-4 px-4 sm:grid-cols-1'
+          initial='hidden'
+          variants={container}
+        >
+          {sections.map((section) => (
+            <motion.button
+              className='surface-card-hover group flex items-center gap-6 p-6 text-left sm:p-8'
               disabled={section.inProgress}
               key={`${section.title}-${section.level}`}
               onClick={() => router.push(section.href)}
               type='button'
+              variants={item}
+              whileHover={{ scale: 1.01 }}
+              whileTap={{ scale: 0.99 }}
             >
-              <div className='flex-grow'>
-                <div className='mb-2'>
-                  <h2 className='font-bold text-xl text-zinc-100'>
+              <div className='flex-1'>
+                <div className='mb-1 flex items-center gap-3'>
+                  <h2 className='font-bold text-[var(--foreground)] text-xl sm:text-2xl'>
                     {section.title}
                   </h2>
                   {section.level && (
-                    <span className='font-medium text-sm text-yellow-500'>
+                    <span className='rounded-full bg-[var(--accent-glow)] px-2.5 py-0.5 font-mono text-[var(--accent)] text-xs'>
                       {section.level}
                     </span>
                   )}
-                  {section.inProgress && (
-                    <span className='ml-2 text-red-400 text-sm'>
-                      (in progress)
-                    </span>
-                  )}
                 </div>
-                <p className='mb-4 text-sm text-zinc-400 leading-relaxed'>
+                <p className='text-[var(--foreground-muted)] text-sm leading-relaxed sm:text-base'>
                   {section.description}
                 </p>
               </div>
-              <div className='flex items-center font-medium text-sm text-zinc-500'>
-                {section.inProgress ? 'Coming soon...' : 'Start learning →'}
+              <ArrowRight
+                className='shrink-0 text-[var(--foreground-muted)] transition-transform group-hover:translate-x-1 group-hover:text-[var(--accent)]'
+                size={24}
+              />
+            </motion.button>
+          ))}
+        </motion.div>
+      </motion.section>
+
+      {/* Features */}
+      <motion.section
+        className='border-[var(--border)] border-t py-16 sm:py-24'
+        initial={{ opacity: 0 }}
+        transition={{ duration: 0.6 }}
+        viewport={{ once: true, margin: '-100px' }}
+        whileInView={{ opacity: 1 }}
+      >
+        <div className='mx-auto grid max-w-4xl gap-8 px-4 sm:grid-cols-3'>
+          {features.map((feature, i) => (
+            <motion.div
+              className='text-center'
+              initial={{ opacity: 0, y: 20 }}
+              key={feature.title}
+              transition={{ duration: 0.5, delay: i * 0.1 }}
+              viewport={{ once: true }}
+              whileInView={{ opacity: 1, y: 0 }}
+            >
+              <div className='mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--surface-2)]'>
+                <feature.icon className='text-[var(--accent)]' size={24} />
               </div>
-            </button>
-          );
-        })}
-      </div>
+              <h3 className='mb-2 font-semibold text-[var(--foreground)]'>
+                {feature.title}
+              </h3>
+              <p className='text-[var(--foreground-muted)] text-sm'>
+                {feature.description}
+              </p>
+            </motion.div>
+          ))}
+        </div>
+      </motion.section>
     </div>
   );
 }