Okay, let's start building the structure for your Suits fan wiki and merchandise store. We'll use React with Vite for the frontend framework and Tailwind CSS for styling to achieve that sleek, professional look. This initial setup will create the basic project structure, routing, and placeholder components for the main sections. { "name": "suits-wiki-store", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.23.1" }, "devDependencies": { "@types/react": "^18.2.66", "@types/react-dom": "^18.2.22", "@vitejs/plugin-react": "^4.2.1", "autoprefixer": "^10.4.19", "eslint": "^8.57.0", "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", "postcss": "^8.4.38", "tailwindcss": "^3.4.3", "vite": "^5.2.0" } } import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { // Required for WebContainer environment hmr: { clientPort: 443, }, }, }) /** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: { colors: { 'firm-dark': '#1a1a1a', // Very dark grey/off-black 'firm-wood': '#4a3c31', // Dark wood tone 'firm-glass': 'rgba(200, 200, 200, 0.1)', // Subtle glass effect 'firm-accent': '#b3a18a', // Elegant beige/gold accent 'firm-text': '#e0e0e0', // Light grey text for dark backgrounds 'firm-heading': '#ffffff', // White for main headings }, fontFamily: { 'sans': ['Helvetica Neue', 'Arial', 'sans-serif'], // Clean, professional sans-serif 'serif': ['Times New Roman', 'serif'], // Classic serif for accents }, backgroundImage: { // Placeholder - replace with actual image URLs later 'wood-texture': "url('/img/dark-wood.jpg')", 'glass-texture': "url('/img/glass-texture.png')", } }, }, plugins: [], } export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, } Pearson Specter Litt: The Ultimate Suits Archive

import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.jsx' import './index.css' import { BrowserRouter } from 'react-router-dom' ReactDOM.createRoot(document.getElementById('root')).render( , ) @tailwind base; @tailwind components; @tailwind utilities; body { @apply font-sans; /* Apply base font */ } h1, h2, h3, h4, h5, h6 { @apply text-firm-heading mb-4; /* Style headings */ } /* Add more base styles or component styles here */ .legal-pad-search { @apply bg-yellow-100 border-l-4 border-red-500 p-2 text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-firm-accent rounded-sm; } .gavel-rating svg { width: 1.2em; height: 1.2em; fill: currentColor; display: inline-block; margin-right: 0.2em; } import React from 'react'; import { Routes, Route } from 'react-router-dom'; import Header from './components/Layout/Header'; import Footer from './components/Layout/Footer'; import HomePage from './pages/HomePage'; import SeriesOverview from './pages/Wiki/SeriesOverview'; import EpisodeGuide from './pages/Wiki/EpisodeGuide'; import EpisodeDetail from './pages/Wiki/EpisodeDetail'; // Placeholder import CharacterProfiles from './pages/Wiki/CharacterProfiles'; import CharacterDetail from './pages/Wiki/CharacterDetail'; // Placeholder import BehindTheScenes from './pages/Wiki/BehindTheScenes'; import BoutiqueHome from './pages/Store/BoutiqueHome'; import ProductDetail from './pages/Store/ProductDetail'; // Placeholder import NotFound from './pages/NotFound'; // Placeholder for 404 function App() { return (

} /> {/* Wiki Routes ("The Case Files") */} } /> {/* Default wiki page */} } /> } /> } /> } /> } /> } /> {/* Store Routes ("Pearson Specter Litt Boutique") */} } /> } /> {/* Fallback Route */} } />

); } export default App; import React from 'react'; import { Link, NavLink } from 'react-router-dom'; function Header() { // Basic active link styling const activeClassName = "text-firm-accent border-b-2 border-firm-accent"; const inactiveClassName = "hover:text-firm-accent transition-colors duration-200"; return (

{/* Logo */} SUITS {/* Placeholder Logo Text */} {/* Navigation Links */}

isActive ? activeClassName : inactiveClassName} > The Case Files (Wiki) isActive ? activeClassName : inactiveClassName} > The Boutique (Store) isActive ? activeClassName : inactiveClassName} > Depositions (BTS) {/* Add more links as needed */}

{/* Search Bar */}

{/* Mobile Menu Button (Placeholder) */}

{/* Mobile menu dropdown would go here */}

); } export default Header; import React from 'react'; function Footer() { return ( ); } export default Footer; import React from 'react'; import { Link } from 'react-router-dom'; function HomePage() { return (

{/* Hero Section */}

{/* Placeholder for dynamic slideshow */}

{/* Dark overlay */}

Pearson Specter Litt HQ

"Welcome to Pearson Specter Litt: The Ultimate Suits Archive."

{/* Quick Links integrated into Hero */}

The Case Files (Wiki) The Boutique (Store) Depositions (BTS)

{/* Featured Content */}

{/* Today's Exhibit */}

Today’s Exhibit

(Randomly highlighted episode or character)

{/* Placeholder Content */}

Character Spotlight: Harvey Specter

Known as the best closer in the city. Famous for his wit, confidence, and impeccable suits.

View Profile

{/* Limited Edition Settlement */}

Limited Edition Settlement

(Promotional section for exclusive merchandise)

{/* Placeholder Content */}

Exclusive: "Get Litt Up" Engraved Mug

Start your morning like Louis Litt. Limited quantities available now in The Boutique.

Shop Now

); } export default HomePage; {/* --- Wiki Section Placeholders --- */} import React from 'react'; import { Link } from 'react-router-dom'; function SeriesOverview() { return (

{/* Left Sidebar: Timeline (Case Docket) */} {/* Main Content: Synopsis (Legal Briefs) */}

The Case Summary: Suits Overview

{/* Tabbed Sections Placeholder */}

{/* Content for selected tab */}

Suits delves into the fast-paced, high-stakes world of a top Manhattan corporate law firm where hotshot lawyer Harvey Specter takes a gamble by hiring Mike Ross, a brilliant but unmotivated college dropout, as his associate. The catch? Mike doesn't have a law degree. Together, they navigate complex cases while hiding Mike's secret.

{/* More content here */}

{/* Right Sidebar: Key Witnesses (Characters) */}

); } export default SeriesOverview; import React from 'react'; import { Link, useSearchParams } from 'react-router-dom'; // Placeholder Gavel Icon SVG const GavelIcon = () => ( ); // Placeholder Data const episodes = [ { season: 1, episode: 1, title: "Pilot", airDate: "2011-06-23", rating: 4 }, { season: 1, episode: 2, title: "Errors and Omissions", airDate: "2011-06-30", rating: 5 }, // ... more episodes { season: 9, episode: 10, title: "One Last Con", airDate: "2019-09-25", rating: 5 }, ]; function EpisodeGuide() { const [searchParams] = useSearchParams(); const selectedSeason = searchParams.get('season'); const filteredEpisodes = selectedSeason ? episodes.filter(ep => ep.season === parseInt(selectedSeason)) : episodes; return (

The Docket: Episode Guide

{/* Filter Controls Placeholder */}

Filter by Season (Case Number): {/* Add more filters if needed */}

{/* Episode Table */}

{filteredEpisodes.map((ep) => ( ))}

Case No. (Season)	Exhibit (Episode)	Title	Filing Date (Air Date)	Jury Verdict (Rating)	Actions
{ep.season}	{ep.episode}	{ep.title}	{ep.airDate}	{[...Array(5)].map((_, i) => ( ))}	View Case File

); } export default EpisodeGuide; import React from 'react'; import { useParams, Link } from 'react-router-dom'; // Placeholder Gavel Icon SVG (reuse if needed or import from shared component) const GavelIcon = () => ( ); function EpisodeDetail() { const { season, episodeNum } = useParams(); // In a real app, fetch episode data based on season and episodeNum const episodeData = { title: "Pilot", // Placeholder summary: "A brilliant college dropout with a photographic memory, Mike Ross, accidentally lands an interview with Harvey Specter, one of New York City's best lawyers.", trivia: ["This is the first episode.", "Filmed primarily in Toronto.", "Introduces the core cast."], rating: 4, // Placeholder }; const handleObjection = () => { alert('Objection Noted! Your concern about this content has been flagged for review. (Admin review simulation)'); // In a real app, this would trigger an API call to log the objection. } return (

← Back to The Docket

Case File: Season {season}, Exhibit {episodeNum}

"{episodeData.title}"

Opening Statement (Summary)

{episodeData.summary}

Evidence (Trivia)

{item}

Jury Verdict (Fan Rating)

{[...Array(5)].map((_, i) => ( ))} ({episodeData.rating} out of 5 Gavels)

{/* Add rating submission form here if desired */}

{/* Objection Button */}

); } export default EpisodeDetail; import React from 'react'; import { Link } from 'react-router-dom'; // Placeholder Data const characters = [ { slug: "harvey-specter", name: "Harvey Specter", title: "The Closer", img: "https://via.placeholder.com/150x150.png?text=HS" }, { slug: "mike-ross", name: "Mike Ross", title: "The Prodigy", img: "https://via.placeholder.com/150x150.png?text=MR" }, { slug: "louis-litt", name: "Louis Litt", title: "The Specialist", img: "https://via.placeholder.com/150x150.png?text=LL" }, { slug: "donna-paulsen", name: "Donna Paulsen", title: "The Oracle", img: "https://via.placeholder.com/150x150.png?text=DP" }, { slug: "jessica-pearson", name: "Jessica Pearson", title: "The Boss", img: "https://via.placeholder.com/150x150.png?text=JP" }, { slug: "rachel-zane", name: "Rachel Zane", title: "The Paralegal", img: "https://via.placeholder.com/150x150.png?text=RZ" }, // Add more characters ]; function CharacterProfiles() { return (

Witness Database: Character Profiles

{characters.map((char) => (

{char.name}

{char.title}

))}

); } export default CharacterProfiles; import React from 'react'; import { useParams, Link } from 'react-router-dom'; function CharacterDetail() { const { characterSlug } = useParams(); // In a real app, fetch character data based on slug const characterData = { // Placeholder Data name: "Harvey Specter", title: "The Closer", img: "https://via.placeholder.com/250x250.png?text=HS", bio: "Harvey Reginald Specter is a former corporate attorney, one of the founding name partners of Specter Litt Wheeler Williams, the managing partner of Specter Litt, and a former Assistant District Attorney for the New York County District Attorney's Office. He is widely regarded as one of the best closers in New York City.", quotes: [ "Winners don't make excuses.", "I don't play the odds, I play the man.", "Life is this... I like this.", ], relationships: [ { name: "Mike Ross", relation: "Protégé, Friend" }, { name: "Donna Paulsen", relation: "Executive Assistant, Confidante, Wife" }, { name: "Jessica Pearson", relation: "Mentor, Partner" }, { name: "Louis Litt", relation: "Rival, Partner, Friend" }, ], scenes: [ "Closing the impossible deal.", "Verbal sparring with Louis.", "High-stakes poker games.", ] }; return (

← Back to Witness Database

{characterData.name}

{characterData.title}

Biography

{characterData.bio}

Testimony (Notable Quotes)

"{quote}"

Cross-Examination (Relationships)

{rel.name}: {rel.relation}

Exhibits (Memorable Scenes)

{scene}

); } export default CharacterDetail; import React from 'react'; // Simple Redacted Text Component const Redacted = ({ children }) => ( {children} ); function BehindTheScenes() { return (

Depositions: Behind the Scenes CONFIDENTIAL

{/* Video Gallery Placeholder */}

Video Evidence (Interviews, Bloopers)

{/* Placeholder Video Cards */}

Video Thumbnail

Cast Interview: Season 5

Video Thumbnail

Gag Reel Highlights

Video Thumbnail

Set Tour with Patrick J. Adams

{/* Easter Eggs Section */}

Redacted Files (Easter Eggs)

Document ID: PSL-EE-001

Subject: Hidden References

Details:

- The pineapple that appears in almost every episode is a nod to the show 'Psych', also on USA Network.

- Harvey's middle name, Reginald, is the same as Elton John's birth name, reflecting his love for music.

- Mike Ross's fake Harvard diploma lists several crew members' names as signatories.

- The can opener ritual between Harvey and Donna originated from a real-life inside joke between Gabriel Macht and Sarah Rafferty.

Status: CLASSIFIED

); } export default BehindTheScenes; {/* --- Store Section Placeholders --- */} import React from 'react'; import { Link } from 'react-router-dom'; // Placeholder Data const products = [ { id: "suit-001", name: "Classic Navy Suit", category: "Apparel", price: "$1,200.00", img: "https://via.placeholder.com/300x400.png?text=Suit" }, { id: "mug-001", name: "\"Get Litt Up\" Mug", category: "Accessories", price: "$25.00", img: "https://via.placeholder.com/300x400.png?text=Mug" }, { id: "poster-001", name: "Pearson Specter Litt Logo Poster", category: "Documents", price: "$40.00", img: "https://via.placeholder.com/300x400.png?text=Poster" }, { id: "watch-001", name: "Executive Timepiece", category: "Accessories", price: "$850.00", img: "https://via.placeholder.com/300x400.png?text=Watch" }, ]; function BoutiqueHome() { return (

Pearson Specter Litt Boutique

{/* Filters Placeholder (Could be a sidebar or dropdown) */}

Filter Exhibits:

{/* Product Listings */}

{products.map((product, index) => (

Exhibit {String.fromCharCode(65 + index)} {/* A, B, C... */}

{product.name}

{product.category}

{product.price} Details

))}

{/* Exclusive Drops Section Placeholder */}

Exclusive Settlements & Pre-Orders

Be the first to acquire limited-time offers and upcoming exclusive merchandise.

); } export default BoutiqueHome; import React, { useState } from 'react'; import { useParams, Link } from 'react-router-dom'; function ProductDetail() { const { productId } = useParams(); const [quantity, setQuantity] = useState(1); const [engraving, setEngraving] = useState(''); // In a real app, fetch product data based on productId const productData = { // Placeholder Data id: "mug-001", name: "\"Get Litt Up\" Mug", category: "Accessories", price: 25.00, description: "Start your day the Louis Litt way with this premium ceramic mug. Perfect for coffee, tea, or contemplating your next mudding session. Holds 11oz.", images: [ "https://via.placeholder.com/400x400.png?text=Mug+Front", "https://via.placeholder.com/400x400.png?text=Mug+Side", "https://via.placeholder.com/400x400.png?text=Mug+Handle", ], allowPersonalization: true, // Example: This mug can be personalized }; const handleAddToCart = () => { alert(`Added ${quantity} x ${productData.name} ${engraving ? `(Engraved: "${engraving}")` : ''} to settlement (cart). Total: $${(productData.price * quantity).toFixed(2)}`); // In real app, update cart state/context } return (

← Back to The Boutique

{/* Image Gallery */}

{/* Main Image */} {productData.name}

{/* Thumbnails */}

{productData.images.map((img, index) => ( ))}

{/* Product Info & Actions */}

{productData.category}

{productData.name}

${productData.price.toFixed(2)}

Exhibit Details

{productData.description}

{/* Personalization */} {productData.allowPersonalization && (

Personalization (Optional Engraving) setEngraving(e.target.value)} placeholder="e.g., As per Harvey's request." maxLength={50} className="w-full bg-firm-dark border border-gray-600 rounded p-2 focus:outline-none focus:ring-1 focus:ring-firm-accent focus:border-firm-accent" />

Max 50 characters.

)} {/* Quantity & Add to Cart */}

Quantity: setQuantity(Math.max(1, parseInt(e.target.value) || 1))} className="w-16 bg-firm-dark border border-gray-600 rounded p-2 text-center focus:outline-none focus:ring-1 focus:ring-firm-accent focus:border-firm-accent" />

); } export default ProductDetail; import React from 'react'; import { Link } from 'react-router-dom'; function NotFound() { return (

404

Case Not Found

It seems the document you requested has been misplaced or permanently redacted.

Return to HQ

); } export default NotFound; This sets up the project with React, React Router, and Tailwind CSS. It includes: 1. **Basic Project Files:** `package.json`, `vite.config.js`, `tailwind.config.js`, `postcss.config.js`, `index.html`, `src/main.jsx`, `src/index.css`. 2. **Core Layout:** `Header` and `Footer` components. 3. **Routing:** `App.jsx` defines routes for the homepage, wiki sections (overview, episodes, characters, BTS), store sections (home, product detail), and a 404 page. 4. **Page Components:** Placeholder components for each route (`HomePage`, `SeriesOverview`, `EpisodeGuide`, `CharacterProfiles`, `BehindTheScenes`, `BoutiqueHome`, `ProductDetail`, `NotFound`, etc.) with basic structure and styling according to your specifications. 5. **Styling:** Initial Tailwind configuration with a custom theme (`firm-dark`, `firm-wood`, `firm-accent`, etc.) and some basic global styles. Custom classes like `legal-pad-search` are included. 6. **Placeholders:** Includes placeholders for dynamic content (slideshows, video galleries, character/product data, IEEE logo image) and interactive elements ("Objection!" button functionality, badges). Next steps would involve: * Populating components with actual data (likely from static JSON files initially or an API). * Implementing dynamic features like the homepage slideshow, filters, and interactive elements. * Refining the Tailwind CSS classes and potentially adding custom CSS for more complex visual effects (like glass partitions or specific textures). * Implementing mobile responsiveness more thoroughly using Tailwind's responsive modifiers. * Adding state management for features like the shopping cart.