COMIC VERSE ░▒▓

Explore a vast collection of digital comics, from timeless classics to the latest indie hits — all wrapped in a cinematic, grunge comic‑book UI.

“BEST COMIC BOOK STORE YOU’VE EVER SEEN.”
Built with Next.js 14, Tailwind v4, Framer Motion, and a lot of love for panels & pixels.

---

🔗 Live & Repo

• GitHub: https://github.com/noisyboy08/COMIC-VERSE
• Local Dev: http://localhost:3000 (or the port shown in your terminal)

---

✨ Highlights

• Grunge Comic Aesthetic
  • Torn paper edges, crumpled textures, neon cyan strokes, hard‑edged cards.
  • Anton headlines, Roboto Mono body, Permanent Marker graffiti details.
• Full Shopping Flow
  • Global cart (add / remove / quantity / totals).
  • Cart page, multi‑step checkout (Shipping → Payment → Review), animated order confirmation.
• Deep Browsing Experience
  • Dedicated pages for NEW, SALES, BLOG, and COMICS.
  • Detail pages for every comic and blog article with rich content and motion.
• Production‑Ready UX
  • Fully responsive layouts (mobile → ultra‑wide).
  • Smooth scroll, hover + tilt animations, sticky nav, mobile drawer.

---

🧱 Tech Stack

• Framework: Next.js 14+ (App Router, TypeScript)
• Styling: Tailwind CSS v4 (@theme tokens in globals.css)
• Animations: Framer Motion
• Icons: Lucide React
• Fonts: Anton, Roboto Mono, Permanent Marker (next/font)
• Utilities: clsx, tailwind-merge (cn helper)

---

🗺️ Routes & Screens

• / — Hero, Merch, Wide Selection, Pricing, Media peek
• /new — New Releases grid (tagged NEW / HOT)
• /sales — Discounted titles with bold orange sale banner
• /blog — Editorial hub with featured article hero
• /blog/[id] — Full article (hero image, author, content, related posts)
• /comics — Catalog with search, filters, grid/list toggle
• /comics/[id] — Comic detail (meta, rating, description, related titles)
• /cart — Cart with quantity controls, summary, free shipping
• /checkout — Shipping → Payment → Review (animated stepper)
• /order-confirmation — Confetti + order ID success screen

---

📦 Project Layout

src/
  app/
    page.tsx                Landing page composition
    layout.tsx              Root layout + fonts + CartProvider
    new/                    /new – New Releases
    sales/                  /sales – Sales & Deals
    blog/                   /blog – Blog index
      [id]/page.tsx         /blog/[id] – Article detail
    comics/                 /comics – Catalog
      [id]/page.tsx         /comics/[id] – Comic detail
    cart/page.tsx           /cart – Cart & summary
    checkout/page.tsx       /checkout – Multi‑step checkout
    order-confirmation/     /order-confirmation – success state
  components/
    Navbar.tsx              Sticky nav with cart badge
    HeroSection.tsx         Hero layout + hero comics
    MerchSection.tsx        Crumpled paper merch section
    WideSelection.tsx       Product grid + torn paper
    PricingPlans.tsx        Pricing tier cards
    TornPaper.tsx           SVG torn‑edge helper
    Footer.tsx              Global footer
    FooterPeek.tsx          “READ OUR MEDIA” peek
  constants/
    data.ts                 Products, plans, blog posts, helpers
  context/
    CartContext.tsx         Global cart state & helpers
public/
  design/                   Design reference images
  poster/                   Comic/poster artwork

---

🛒 User Journey

1. Browse
   Landing page, NEW, SALES, BLOG, or COMICS.
2. Inspect
   Click a comic → /comics/[id] (full details, price, meta, related).
3. Add to Cart
   Use ADD / ADDED buttons on grids, or ADD TO CART / BUY NOW on detail pages.
4. Review
   /cart — adjust quantities, remove items, see live subtotal/tax/total.
5. Checkout
   /checkout — complete Shipping → Payment → Review with animated stepper.
6. Celebrate
   /order-confirmation — confetti, order number, and next‑step CTAs.

---

🎨 Design System

• Colors
  • comic-orange — #FF4400 (primary orange/red)
  • comic-black — #111111
  • comic-white — #F4F4F4
  • comic-teal — #00E5FF
  • comic-gray — #1A1A1A
• Custom Utilities
  • .text-outline / .text-outline-white — neon‑stroke hollow text
  • .crumpled-paper — layered gradient + SVG noise
  • Torn edges via the TornPaper SVG component

Drop your own art into public/design and public/poster to reskin the entire experience without changing layout logic.

---

🚀 Run Locally

npm install
npm run dev

Open http://localhost:3000 (or the port shown in your terminal).

---

✅ Lint & Build

npm run lint
npm run build

---

🧭 Next Ideas

• Real auth & user libraries (favorites, reading history)
• Real payment integration (Stripe)
• Persistent server‑side cart + orders
• Ratings & reviews per comic

---

Made with ink, pixels, and way too many comics.