Initial commit: Amber Valley Community Hub fallback site

Vite + React 18 + Tailwind CSS community events video library with 42 topic-matched thumbnails, auth modal that always fails, and Docker/nginx setup on port 8081. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-20 12:00:09 +06:00
commit b210e4d2fb
61 changed files with 3332 additions and 0 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,3 @@
 node_modules
 dist
 .git
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,2 @@
 node_modules
 dist
--- a/22
+++ b/22
@@ -0,0 +1,22 @@
 FROM node:20-alpine AS build
 WORKDIR /app
 COPY package.json package-lock.json* ./
 RUN npm install
 COPY . .
 RUN npm run generate-thumbnails
 RUN npm run build
 FROM nginx:alpine
 COPY --from=build /app/dist /usr/share/nginx/html
 # SPA fallback
 RUN echo 'server { \
    listen 80; \
    server_name _; \
    root /usr/share/nginx/html; \
    index index.html; \
    location / { \
        try_files $uri $uri/ /index.html; \
    } \
 }' > /etc/nginx/conf.d/default.conf
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,6 @@
 services:
  fallback-site:
    build: .
    ports:
      - "8081:80"
    restart: unless-stopped
--- a/index.html
+++ b/index.html
@@ -0,0 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/thumbnails/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Amber Valley Community Hub - Video Library</title>
    <meta name="description" content="Watch community events, workshops, and activities from Amber Valley Community Hub." />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,23 @@
 {
  "name": "amber-valley-community-hub",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "generate-thumbnails": "node scripts/generate-thumbnails.js"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.3.4",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.49",
    "tailwindcss": "^3.4.17",
    "vite": "^6.0.7"
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
 export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
 }
--- a/public/thumbnails/favicon.svg
+++ b/public/thumbnails/favicon.svg
@@ -0,0 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#d97706"/>
  <text x="16" y="22" text-anchor="middle" fill="white" font-size="18" font-family="sans-serif" font-weight="bold">AV</text>
 </svg>
--- a/public/thumbnails/thumb-01.jpg
+++ b/public/thumbnails/thumb-01.jpg
--- a/public/thumbnails/thumb-02.jpg
+++ b/public/thumbnails/thumb-02.jpg
--- a/public/thumbnails/thumb-03.jpg
+++ b/public/thumbnails/thumb-03.jpg
--- a/public/thumbnails/thumb-04.jpg
+++ b/public/thumbnails/thumb-04.jpg
--- a/public/thumbnails/thumb-05.jpg
+++ b/public/thumbnails/thumb-05.jpg
--- a/public/thumbnails/thumb-06.jpg
+++ b/public/thumbnails/thumb-06.jpg
--- a/public/thumbnails/thumb-07.jpg
+++ b/public/thumbnails/thumb-07.jpg
--- a/public/thumbnails/thumb-08.jpg
+++ b/public/thumbnails/thumb-08.jpg
--- a/public/thumbnails/thumb-09.jpg
+++ b/public/thumbnails/thumb-09.jpg
--- a/public/thumbnails/thumb-10.jpg
+++ b/public/thumbnails/thumb-10.jpg
--- a/public/thumbnails/thumb-11.jpg
+++ b/public/thumbnails/thumb-11.jpg
--- a/public/thumbnails/thumb-12.jpg
+++ b/public/thumbnails/thumb-12.jpg
--- a/public/thumbnails/thumb-13.jpg
+++ b/public/thumbnails/thumb-13.jpg
--- a/public/thumbnails/thumb-14.jpg
+++ b/public/thumbnails/thumb-14.jpg
--- a/public/thumbnails/thumb-15.jpg
+++ b/public/thumbnails/thumb-15.jpg
--- a/public/thumbnails/thumb-16.jpg
+++ b/public/thumbnails/thumb-16.jpg
--- a/public/thumbnails/thumb-17.jpg
+++ b/public/thumbnails/thumb-17.jpg
--- a/public/thumbnails/thumb-18.jpg
+++ b/public/thumbnails/thumb-18.jpg
--- a/public/thumbnails/thumb-19.jpg
+++ b/public/thumbnails/thumb-19.jpg
--- a/public/thumbnails/thumb-20.jpg
+++ b/public/thumbnails/thumb-20.jpg
--- a/public/thumbnails/thumb-21.jpg
+++ b/public/thumbnails/thumb-21.jpg
--- a/public/thumbnails/thumb-22.jpg
+++ b/public/thumbnails/thumb-22.jpg
--- a/public/thumbnails/thumb-23.jpg
+++ b/public/thumbnails/thumb-23.jpg
--- a/public/thumbnails/thumb-24.jpg
+++ b/public/thumbnails/thumb-24.jpg
--- a/public/thumbnails/thumb-25.jpg
+++ b/public/thumbnails/thumb-25.jpg
--- a/public/thumbnails/thumb-26.jpg
+++ b/public/thumbnails/thumb-26.jpg
--- a/public/thumbnails/thumb-27.jpg
+++ b/public/thumbnails/thumb-27.jpg
--- a/public/thumbnails/thumb-28.jpg
+++ b/public/thumbnails/thumb-28.jpg
--- a/public/thumbnails/thumb-29.jpg
+++ b/public/thumbnails/thumb-29.jpg
--- a/public/thumbnails/thumb-30.jpg
+++ b/public/thumbnails/thumb-30.jpg
--- a/public/thumbnails/thumb-31.jpg
+++ b/public/thumbnails/thumb-31.jpg
--- a/public/thumbnails/thumb-32.jpg
+++ b/public/thumbnails/thumb-32.jpg
--- a/public/thumbnails/thumb-33.jpg
+++ b/public/thumbnails/thumb-33.jpg
--- a/public/thumbnails/thumb-34.jpg
+++ b/public/thumbnails/thumb-34.jpg
--- a/public/thumbnails/thumb-35.jpg
+++ b/public/thumbnails/thumb-35.jpg
--- a/public/thumbnails/thumb-36.jpg
+++ b/public/thumbnails/thumb-36.jpg
--- a/public/thumbnails/thumb-37.jpg
+++ b/public/thumbnails/thumb-37.jpg
--- a/public/thumbnails/thumb-38.jpg
+++ b/public/thumbnails/thumb-38.jpg
--- a/public/thumbnails/thumb-39.jpg
+++ b/public/thumbnails/thumb-39.jpg
--- a/public/thumbnails/thumb-40.jpg
+++ b/public/thumbnails/thumb-40.jpg
--- a/public/thumbnails/thumb-41.jpg
+++ b/public/thumbnails/thumb-41.jpg
--- a/public/thumbnails/thumb-42.jpg
+++ b/public/thumbnails/thumb-42.jpg
--- a/scripts/generate-thumbnails.js
+++ b/scripts/generate-thumbnails.js
@@ -0,0 +1,98 @@
 import { mkdirSync, writeFileSync, existsSync } from 'fs';
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const outDir = join(__dirname, '..', 'public', 'thumbnails');
 mkdirSync(outDir, { recursive: true });
 // Favicon
 const favicon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#d97706"/>
  <text x="16" y="22" text-anchor="middle" fill="white" font-size="18" font-family="sans-serif" font-weight="bold">AV</text>
 </svg>`;
 writeFileSync(join(outDir, 'favicon.svg'), favicon);
 // Each entry: [index, search keywords] — keywords chosen to match the video title
 const thumbnails = [
  [1,  'jazz,concert,stage'],
  [2,  'pasta,cooking,italian'],
  [3,  'soccer,football,tournament'],
  [4,  'watercolor,painting,art'],
  [5,  'python,programming,laptop'],
  [6,  'garden,spring,flowers'],
  [7,  'book,reading,library'],
  [8,  'acoustic,guitar,microphone'],
  [9,  'thai,food,cooking'],
  [10, 'basketball,court,game'],
  [11, 'oil,painting,landscape'],
  [12, 'web,development,code'],
  [13, 'rose,pruning,garden'],
  [14, 'science,fiction,books'],
  [15, 'blues,folk,music'],
  [16, 'pastry,baking,french'],
  [17, 'table,tennis,pingpong'],
  [18, 'digital,art,illustration'],
  [19, 'cloud,computing,server'],
  [20, 'compost,soil,garden'],
  [21, 'mystery,detective,book'],
  [22, 'piano,recital,concert'],
  [23, 'sushi,japanese,food'],
  [24, 'volleyball,beach,sport'],
  [25, 'pottery,ceramics,clay'],
  [26, 'artificial,intelligence,robot'],
  [27, 'herbs,garden,plants'],
  [28, 'classic,literature,novel'],
  [29, 'latin,dance,salsa'],
  [30, 'bread,baking,dough'],
  [31, 'badminton,racket,sport'],
  [32, 'sketch,drawing,pencil'],
  [33, 'cybersecurity,hacker,lock'],
  [34, 'winter,vegetables,growing'],
  [35, 'fantasy,tolkien,books'],
  [36, 'choir,singing,holiday'],
  [37, 'curry,indian,spices'],
  [38, 'running,marathon,race'],
  [39, 'photography,camera,walk'],
  [40, 'blockchain,crypto,technology'],
  [41, 'indoor,plants,houseplant'],
  [42, 'poetry,reading,writing'],
 ];
 async function downloadImage(index, keywords) {
  const num = String(index).padStart(2, '0');
  const filePath = join(outDir, `thumb-${num}.jpg`);
  // loremflickr serves real Creative Commons photos matching keywords
  // lock parameter ensures deterministic results
  const url = `https://loremflickr.com/640/360/${keywords}?lock=${index}`;
  for (let attempt = 0; attempt < 3; attempt++) {
    try {
      const res = await fetch(url, { redirect: 'follow' });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const buffer = Buffer.from(await res.arrayBuffer());
      if (buffer.length < 1000) throw new Error('Image too small, likely error');
      writeFileSync(filePath, buffer);
      console.log(`  [${num}] OK (${(buffer.length / 1024).toFixed(0)} KB) — ${keywords}`);
      return;
    } catch (err) {
      if (attempt < 2) {
        console.log(`  [${num}] Retry ${attempt + 1}...`);
        await new Promise(r => setTimeout(r, 1000));
      } else {
        console.error(`  [${num}] FAILED: ${err.message}`);
      }
    }
  }
 }
 console.log('Downloading 42 topic-matched thumbnails from loremflickr.com...\n');
 const BATCH = 4;
 for (let i = 0; i < thumbnails.length; i += BATCH) {
  const batch = thumbnails.slice(i, i + BATCH);
  await Promise.all(batch.map(([idx, kw]) => downloadImage(idx, kw)));
 }
 console.log('\nDone! 42 topic-matched thumbnails in public/thumbnails/');
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,110 @@
 import { useState } from 'react'
 import VideoGrid from './components/VideoGrid'
 import AuthModal from './components/AuthModal'
 import { categories } from './data/videos'
 export default function App() {
  const [activeCategory, setActiveCategory] = useState('All')
  const [searchQuery, setSearchQuery] = useState('')
  const [authOpen, setAuthOpen] = useState(false)
  return (
    <div className="min-h-screen flex flex-col">
      {/* Header */}
      <header className="bg-white border-b border-amber-200 sticky top-0 z-30 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-4">
          <div className="flex items-center gap-3 shrink-0">
            <div className="w-10 h-10 rounded-lg bg-amber-500 flex items-center justify-center">
              <span className="text-white font-bold text-lg">AV</span>
            </div>
            <div className="hidden sm:block">
              <h1 className="font-bold text-amber-900 text-lg leading-tight">Amber Valley</h1>
              <p className="text-xs text-amber-600">Community Hub</p>
            </div>
          </div>
          {/* Search bar (decorative) */}
          <div className="flex-1 max-w-md">
            <div className="relative">
              <input
                type="text"
                placeholder="Search videos..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full rounded-full border border-amber-200 bg-amber-50 px-4 py-2 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-transparent"
              />
              <svg className="absolute left-3 top-2.5 h-4 w-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
              </svg>
            </div>
          </div>
          <button
            onClick={() => setAuthOpen(true)}
            className="shrink-0 bg-amber-500 hover:bg-amber-600 text-white px-4 py-2 rounded-full text-sm font-medium transition-colors"
          >
            Sign In
          </button>
        </div>
        {/* Category tabs */}
        <div className="max-w-7xl mx-auto px-4 pb-2">
          <div className="flex gap-2 overflow-x-auto no-scrollbar">
            {categories.map((cat) => (
              <button
                key={cat}
                onClick={() => setActiveCategory(cat)}
                className={`shrink-0 px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
                  activeCategory === cat
                    ? 'bg-amber-500 text-white'
                    : 'bg-amber-100 text-amber-700 hover:bg-amber-200'
                }`}
              >
                {cat}
              </button>
            ))}
          </div>
        </div>
      </header>
      {/* Main content */}
      <main className="flex-1 max-w-7xl mx-auto w-full px-4 py-6">
        <VideoGrid
          activeCategory={activeCategory}
          searchQuery={searchQuery}
          onVideoClick={() => setAuthOpen(true)}
        />
      </main>
      {/* Footer */}
      <footer className="bg-amber-900 text-amber-200 py-8 mt-8">
        <div className="max-w-7xl mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
              <h3 className="font-bold text-amber-100 mb-2">Amber Valley Community Hub</h3>
              <p className="text-sm text-amber-300">Bringing our community together through shared experiences and learning.</p>
            </div>
            <div>
              <h4 className="font-semibold text-amber-100 mb-2">Quick Links</h4>
              <ul className="text-sm space-y-1">
                <li><a href="#" onClick={(e) => { e.preventDefault(); setAuthOpen(true); }} className="hover:text-amber-100 transition-colors">My Account</a></li>
                <li><a href="#" onClick={(e) => e.preventDefault()} className="hover:text-amber-100 transition-colors">About Us</a></li>
                <li><a href="#" onClick={(e) => e.preventDefault()} className="hover:text-amber-100 transition-colors">Contact</a></li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold text-amber-100 mb-2">Community Hours</h4>
              <p className="text-sm text-amber-300">Mon-Fri: 9am - 9pm<br />Sat-Sun: 10am - 6pm</p>
            </div>
          </div>
          <div className="border-t border-amber-800 mt-6 pt-4 text-xs text-amber-400 text-center">
            &copy; 2024 Amber Valley Community Hub. All rights reserved.
          </div>
        </div>
      </footer>
      {/* Auth modal */}
      {authOpen && <AuthModal onClose={() => setAuthOpen(false)} />}
    </div>
  )
 }
--- a/src/components/AuthModal.jsx
+++ b/src/components/AuthModal.jsx
@@ -0,0 +1,154 @@
 import { useState } from 'react'
 export default function AuthModal({ onClose }) {
  const [mode, setMode] = useState('signin') // signin | signup
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [name, setName] = useState('')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const handleSubmit = (e) => {
    e.preventDefault()
    setError('')
    setLoading(true)
    const delay = 2000 + Math.random() * 1000
    setTimeout(() => {
      setLoading(false)
      if (mode === 'signin') {
        setError('Invalid email or password. Please try again.')
      } else {
        setError('Registration is temporarily unavailable. Please try again later.')
      }
    }, delay)
  }
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
        onClick={onClose}
      />
      {/* Modal */}
      <div className="relative bg-white rounded-2xl shadow-2xl w-full max-w-md p-6 animate-slide-up">
        {/* Close button */}
        <button
          onClick={onClose}
          className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
        {/* Header */}
        <div className="text-center mb-6">
          <div className="w-12 h-12 rounded-xl bg-amber-500 flex items-center justify-center mx-auto mb-3">
            <span className="text-white font-bold text-xl">AV</span>
          </div>
          <h2 className="text-xl font-bold text-gray-900">
            {mode === 'signin' ? 'Welcome back' : 'Create an account'}
          </h2>
          <p className="text-sm text-gray-500 mt-1">
            {mode === 'signin'
              ? 'Sign in to watch community videos'
              : 'Join the Amber Valley community'}
          </p>
        </div>
        {/* Form */}
        <form onSubmit={handleSubmit} className="space-y-4">
          {mode === 'signup' && (
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
              <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                required
                placeholder="John Doe"
                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-transparent"
              />
            </div>
          )}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              placeholder="you@example.com"
              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-transparent"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              placeholder="••••••••"
              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-transparent"
            />
          </div>
          {error && (
            <div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-lg px-3 py-2">
              {error}
            </div>
          )}
          <button
            type="submit"
            disabled={loading}
            className="w-full bg-amber-500 hover:bg-amber-600 disabled:bg-amber-300 text-white font-medium py-2.5 rounded-lg transition-colors flex items-center justify-center gap-2"
          >
            {loading ? (
              <>
                <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                </svg>
                {mode === 'signin' ? 'Signing in...' : 'Creating account...'}
              </>
            ) : (
              mode === 'signin' ? 'Sign In' : 'Create Account'
            )}
          </button>
        </form>
        {/* Toggle mode */}
        <p className="text-center text-sm text-gray-500 mt-4">
          {mode === 'signin' ? (
            <>
              Don&apos;t have an account?{' '}
              <button
                onClick={() => { setMode('signup'); setError(''); }}
                className="text-amber-600 hover:text-amber-700 font-medium"
              >
                Sign Up
              </button>
            </>
          ) : (
            <>
              Already have an account?{' '}
              <button
                onClick={() => { setMode('signin'); setError(''); }}
                className="text-amber-600 hover:text-amber-700 font-medium"
              >
                Sign In
              </button>
            </>
          )}
        </p>
      </div>
    </div>
  )
 }
--- a/src/components/VideoCard.jsx
+++ b/src/components/VideoCard.jsx
@@ -0,0 +1,36 @@
 export default function VideoCard({ video, index, onClick }) {
  return (
    <div
      onClick={onClick}
      className="group cursor-pointer rounded-xl overflow-hidden bg-white shadow-sm border border-amber-100 hover:shadow-lg hover:border-amber-300 transition-all duration-300 hover:-translate-y-1 opacity-0 animate-fade-in"
      style={{ animationDelay: `${Math.min(index * 60, 600)}ms` }}
    >
      {/* Thumbnail */}
      <div className="relative aspect-video overflow-hidden bg-amber-100">
        <img
          src={video.thumbnailPath}
          alt={video.title}
          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
          loading="lazy"
        />
        <span className="absolute bottom-2 right-2 bg-black/75 text-white text-xs px-1.5 py-0.5 rounded">
          {video.duration}
        </span>
      </div>
      {/* Info */}
      <div className="p-3">
        <h3 className="font-medium text-sm text-gray-900 line-clamp-2 group-hover:text-amber-700 transition-colors">
          {video.title}
        </h3>
        <div className="mt-1.5 flex items-center justify-between text-xs text-gray-500">
          <span className="text-amber-600 font-medium">{video.category}</span>
          <span>{video.views.toLocaleString()} views</span>
        </div>
        <p className="text-xs text-gray-400 mt-1">
          {new Date(video.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
        </p>
      </div>
    </div>
  )
 }
--- a/src/components/VideoGrid.jsx
+++ b/src/components/VideoGrid.jsx
@@ -0,0 +1,30 @@
 import { useMemo } from 'react'
 import VideoCard from './VideoCard'
 import videos from '../data/videos'
 export default function VideoGrid({ activeCategory, searchQuery, onVideoClick }) {
  const filtered = useMemo(() => {
    return videos.filter((v) => {
      const matchCat = activeCategory === 'All' || v.category === activeCategory
      const matchSearch = !searchQuery || v.title.toLowerCase().includes(searchQuery.toLowerCase())
      return matchCat && matchSearch
    })
  }, [activeCategory, searchQuery])
  if (filtered.length === 0) {
    return (
      <div className="text-center py-20 text-amber-600">
        <p className="text-lg font-medium">No videos found</p>
        <p className="text-sm mt-1">Try a different search or category</p>
      </div>
    )
  }
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
      {filtered.map((video, i) => (
        <VideoCard key={video.id} video={video} index={i} onClick={onVideoClick} />
      ))}
    </div>
  )
 }
--- a/src/data/videos.js
+++ b/src/data/videos.js
@@ -0,0 +1,48 @@
 const videos = [
  { id: 1, title: "Summer Jazz Night 2024", category: "Music Nights", date: "2024-08-15", duration: "1:24:30", views: 1243, thumbnailPath: "/thumbnails/thumb-01.jpg" },
  { id: 2, title: "Italian Pasta Workshop", category: "Cooking Workshops", date: "2024-07-22", duration: "58:12", views: 892, thumbnailPath: "/thumbnails/thumb-02.jpg" },
  { id: 3, title: "Youth Soccer Tournament Finals", category: "Sports Events", date: "2024-09-01", duration: "2:15:44", views: 2105, thumbnailPath: "/thumbnails/thumb-03.jpg" },
  { id: 4, title: "Watercolor Basics for Beginners", category: "Art Classes", date: "2024-06-10", duration: "45:20", views: 634, thumbnailPath: "/thumbnails/thumb-04.jpg" },
  { id: 5, title: "Intro to Python Programming", category: "Tech Talks", date: "2024-08-28", duration: "1:10:05", views: 1567, thumbnailPath: "/thumbnails/thumb-05.jpg" },
  { id: 6, title: "Spring Garden Planning", category: "Gardening", date: "2024-03-12", duration: "52:18", views: 445, thumbnailPath: "/thumbnails/thumb-06.jpg" },
  { id: 7, title: "October Book Club: Dune", category: "Book Club", date: "2024-10-05", duration: "1:35:00", views: 312, thumbnailPath: "/thumbnails/thumb-07.jpg" },
  { id: 8, title: "Acoustic Open Mic Night", category: "Music Nights", date: "2024-09-20", duration: "2:05:11", views: 1876, thumbnailPath: "/thumbnails/thumb-08.jpg" },
  { id: 9, title: "Thai Cooking Masterclass", category: "Cooking Workshops", date: "2024-05-18", duration: "1:02:45", views: 1023, thumbnailPath: "/thumbnails/thumb-09.jpg" },
  { id: 10, title: "Community Basketball League", category: "Sports Events", date: "2024-07-14", duration: "1:48:30", views: 1654, thumbnailPath: "/thumbnails/thumb-10.jpg" },
  { id: 11, title: "Oil Painting Landscapes", category: "Art Classes", date: "2024-08-03", duration: "1:15:22", views: 789, thumbnailPath: "/thumbnails/thumb-11.jpg" },
  { id: 12, title: "Web Development with React", category: "Tech Talks", date: "2024-09-15", duration: "1:30:00", views: 2340, thumbnailPath: "/thumbnails/thumb-12.jpg" },
  { id: 13, title: "Rose Pruning Techniques", category: "Gardening", date: "2024-04-20", duration: "38:45", views: 367, thumbnailPath: "/thumbnails/thumb-13.jpg" },
  { id: 14, title: "Sci-Fi Reads: Foundation", category: "Book Club", date: "2024-11-02", duration: "1:22:10", views: 278, thumbnailPath: "/thumbnails/thumb-14.jpg" },
  { id: 15, title: "Blues & Folk Evening", category: "Music Nights", date: "2024-10-18", duration: "1:55:30", views: 1432, thumbnailPath: "/thumbnails/thumb-15.jpg" },
  { id: 16, title: "French Pastry Basics", category: "Cooking Workshops", date: "2024-06-29", duration: "1:12:08", views: 1198, thumbnailPath: "/thumbnails/thumb-16.jpg" },
  { id: 17, title: "Table Tennis Championship", category: "Sports Events", date: "2024-08-10", duration: "1:30:15", views: 987, thumbnailPath: "/thumbnails/thumb-17.jpg" },
  { id: 18, title: "Digital Art & Illustration", category: "Art Classes", date: "2024-09-08", duration: "1:05:40", views: 1102, thumbnailPath: "/thumbnails/thumb-18.jpg" },
  { id: 19, title: "Cloud Computing Explained", category: "Tech Talks", date: "2024-07-25", duration: "55:30", views: 1890, thumbnailPath: "/thumbnails/thumb-19.jpg" },
  { id: 20, title: "Composting 101", category: "Gardening", date: "2024-05-05", duration: "42:15", views: 523, thumbnailPath: "/thumbnails/thumb-20.jpg" },
  { id: 21, title: "Mystery Month: Agatha Christie", category: "Book Club", date: "2024-09-07", duration: "1:18:30", views: 345, thumbnailPath: "/thumbnails/thumb-21.jpg" },
  { id: 22, title: "Piano Recital Night", category: "Music Nights", date: "2024-11-22", duration: "1:40:00", views: 1678, thumbnailPath: "/thumbnails/thumb-22.jpg" },
  { id: 23, title: "Sushi Making Workshop", category: "Cooking Workshops", date: "2024-08-05", duration: "1:25:30", views: 1456, thumbnailPath: "/thumbnails/thumb-23.jpg" },
  { id: 24, title: "Volleyball Beach Day", category: "Sports Events", date: "2024-07-04", duration: "1:58:20", views: 1234, thumbnailPath: "/thumbnails/thumb-24.jpg" },
  { id: 25, title: "Pottery & Ceramics Intro", category: "Art Classes", date: "2024-10-12", duration: "1:08:15", views: 654, thumbnailPath: "/thumbnails/thumb-25.jpg" },
  { id: 26, title: "AI & Machine Learning Basics", category: "Tech Talks", date: "2024-10-30", duration: "1:20:45", views: 2567, thumbnailPath: "/thumbnails/thumb-26.jpg" },
  { id: 27, title: "Herb Garden Setup Guide", category: "Gardening", date: "2024-06-15", duration: "35:50", views: 489, thumbnailPath: "/thumbnails/thumb-27.jpg" },
  { id: 28, title: "Classic Literature: Jane Eyre", category: "Book Club", date: "2024-12-01", duration: "1:28:00", views: 298, thumbnailPath: "/thumbnails/thumb-28.jpg" },
  { id: 29, title: "Latin Dance Social", category: "Music Nights", date: "2024-12-14", duration: "2:10:30", views: 1987, thumbnailPath: "/thumbnails/thumb-29.jpg" },
  { id: 30, title: "Bread Baking From Scratch", category: "Cooking Workshops", date: "2024-09-28", duration: "1:35:20", views: 1345, thumbnailPath: "/thumbnails/thumb-30.jpg" },
  { id: 31, title: "Badminton Doubles Tournament", category: "Sports Events", date: "2024-11-09", duration: "1:42:10", views: 876, thumbnailPath: "/thumbnails/thumb-31.jpg" },
  { id: 32, title: "Sketch & Draw Workshop", category: "Art Classes", date: "2024-11-18", duration: "55:30", views: 712, thumbnailPath: "/thumbnails/thumb-32.jpg" },
  { id: 33, title: "Cybersecurity for Everyone", category: "Tech Talks", date: "2024-11-25", duration: "1:05:15", views: 1765, thumbnailPath: "/thumbnails/thumb-33.jpg" },
  { id: 34, title: "Winter Vegetable Growing", category: "Gardening", date: "2024-10-22", duration: "48:30", views: 412, thumbnailPath: "/thumbnails/thumb-34.jpg" },
  { id: 35, title: "Fantasy Picks: Tolkien Night", category: "Book Club", date: "2025-01-10", duration: "1:45:00", views: 567, thumbnailPath: "/thumbnails/thumb-35.jpg" },
  { id: 36, title: "Choir Holiday Concert", category: "Music Nights", date: "2024-12-22", duration: "1:30:45", views: 2234, thumbnailPath: "/thumbnails/thumb-36.jpg" },
  { id: 37, title: "Indian Curry Workshop", category: "Cooking Workshops", date: "2024-11-15", duration: "1:18:00", views: 1089, thumbnailPath: "/thumbnails/thumb-37.jpg" },
  { id: 38, title: "Community Fun Run 5K", category: "Sports Events", date: "2024-10-06", duration: "1:12:30", views: 1543, thumbnailPath: "/thumbnails/thumb-38.jpg" },
  { id: 39, title: "Photography Walk & Talk", category: "Art Classes", date: "2024-12-08", duration: "1:02:20", views: 834, thumbnailPath: "/thumbnails/thumb-39.jpg" },
  { id: 40, title: "Blockchain Demystified", category: "Tech Talks", date: "2025-01-18", duration: "58:40", views: 1432, thumbnailPath: "/thumbnails/thumb-40.jpg" },
  { id: 41, title: "Indoor Plants Care Guide", category: "Gardening", date: "2024-12-20", duration: "40:10", views: 678, thumbnailPath: "/thumbnails/thumb-41.jpg" },
  { id: 42, title: "New Year Poetry Reading", category: "Book Club", date: "2025-01-25", duration: "1:15:30", views: 389, thumbnailPath: "/thumbnails/thumb-42.jpg" },
 ];
 export const categories = ["All", "Music Nights", "Cooking Workshops", "Sports Events", "Art Classes", "Tech Talks", "Gardening", "Book Club"];
 export default videos;
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,15 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  body {
    @apply bg-amber-50 text-gray-800 antialiased;
  }
 }
@layer utilities {
  .animation-delay-100 { animation-delay: 100ms; }
  .animation-delay-200 { animation-delay: 200ms; }
  .animation-delay-300 { animation-delay: 300ms; }
 }
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -0,0 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
 ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
 )
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,31 @@
 /** @type {import('tailwindcss').Config} */
 export default {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx}",
  ],
  theme: {
    extend: {
      animation: {
        'fade-in': 'fadeIn 0.5s ease-out forwards',
        'slide-up': 'slideUp 0.3s ease-out forwards',
        'pulse-soft': 'pulseSoft 2s ease-in-out infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0', transform: 'translateY(20px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        slideUp: {
          '0%': { opacity: '0', transform: 'translateY(40px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        pulseSoft: {
          '0%, 100%': { opacity: '1' },
          '50%': { opacity: '0.8' },
        },
      },
    },
  },
  plugins: [],
 }
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,6 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 export default defineConfig({
  plugins: [react()],
 })