import React, { useState, useEffect } from 'react'; import { Menu, Search, Gamepad2, Coffee, HelpCircle, Layers } from 'lucide-react'; // Animated SpaceCard Component const SpaceCard = ({ icon, title, description }) => { const [isHovered, setIsHovered] = useState(false); return (
setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >
{icon}

{title}

{description}

); }; // Animated Button Component const AnimatedButton = ({ children, className, ...props }) => ( ); // Main Component // Product Card Component const ProductCard = ({ name, price, image }) => (
{name}

{name}

£{price.toFixed(2)}

Add to Cart
); // Pager Component const Pager = ({ currentPage, totalPages, onPageChange }) => { const pageNumbers = []; for (let i = 1; i <= totalPages; i++) { pageNumbers.push(i); } return (
onPageChange(currentPage - 1)} disabled={currentPage === 1} className={`px-4 py-2 rounded-md ${currentPage === 1 ? 'bg-gray-500 cursor-not-allowed' : 'bg-purple-600 hover:bg-purple-700'}`} > Previous {pageNumbers.map((number) => ( onPageChange(number)} className={`px-4 py-2 rounded-md ${currentPage === number ? 'bg-purple-600' : 'bg-slate-700 hover:bg-purple-500'}`} > {number} ))} onPageChange(currentPage + 1)} disabled={currentPage === totalPages} className={`px-4 py-2 rounded-md ${currentPage === totalPages ? 'bg-gray-500 cursor-not-allowed' : 'bg-purple-600 hover:bg-purple-700'}`} > Next
); }; export default function ModernGamesHaven() { const [scrolled, setScrolled] = useState(false); const [currentPage, setCurrentPage] = useState(1); const itemsPerPage = 8; useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 50); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); // Sample product data const products = [ { id: 1, name: "Warhammer 40,000 Starter Set", price: 99.99, image: "/api/placeholder/400/300" }, { id: 2, name: "Magic: The Gathering Booster Box", price: 89.99, image: "/api/placeholder/400/300" }, { id: 3, name: "Dungeons & Dragons Player's Handbook", price: 49.99, image: "/api/placeholder/400/300" }, { id: 4, name: "Catan Board Game", price: 44.99, image: "/api/placeholder/400/300" }, { id: 5, name: "Pandemic Legacy Season 1", price: 79.99, image: "/api/placeholder/400/300" }, { id: 6, name: "Gloomhaven", price: 139.99, image: "/api/placeholder/400/300" }, { id: 7, name: "Ticket to Ride Europe", price: 54.99, image: "/api/placeholder/400/300" }, { id: 8, name: "7 Wonders", price: 49.99, image: "/api/placeholder/400/300" }, { id: 9, name: "Arkham Horror: The Card Game", price: 39.99, image: "/api/placeholder/400/300" }, { id: 10, name: "Scythe", price: 89.99, image: "/api/placeholder/400/300" }, { id: 11, name: "Terraforming Mars", price: 69.99, image: "/api/placeholder/400/300" }, { id: 12, name: "Azul", price: 39.99, image: "/api/placeholder/400/300" }, ]; const totalPages = Math.ceil(products.length / itemsPerPage); const indexOfLastItem = currentPage * itemsPerPage; const indexOfFirstItem = indexOfLastItem - itemsPerPage; const currentItems = products.slice(indexOfFirstItem, indexOfLastItem); const handlePageChange = (pageNumber) => { setCurrentPage(pageNumber); }; return (
{/* Hero Section */}

Tabletop Gaming

Join us and become part of a thriving community where creativity knows no bounds, and the tools for success are always at your fingertips.

Join Our Community
{/* Gaming Spaces Section */}

Our Gaming Spaces

} title="Wargaming Place" description="Large, custom-built tables designed for wargaming and expansive strategy games. Whether you're leading a medieval army into battle or commanding futuristic forces, we've got the terrain, models, and space you need to bring your games to life." /> } title="CCG & Trading Area" description="A space dedicated to card slingers of all stripes—whether you're playing the latest competitive CCG, trading cards, or trying out a new deck strategy with friends and engaging in local tournaments." /> } title="RPG Zone" description="Private and communal areas available for role-playing game sessions, from one-shots to long campaigns. Bring your crew, roll your dice, and weave epic stories in an immersive setting designed for RPG storytelling." /> } title="Board Game Cafe" description="Access a diverse library of board games, tabletop games, and RPG manuals. Experiment with new systems, find inspiration, or just enjoy a casual game night and our boardgames space. Experienced staff and games nights available." />
{/* Shop Section */}

Our Shop

{currentItems.map((product) => ( ))}
{/* About Section */}

About Us

We're a group of gamers, ex-Games Workshop staff, business pros, education managers, CCG experts, digital media specialists, role-players, and tech enthusiasts, united by our love for gaming. Bringing together our expertise, we've created a space that's more than just a venue—it's a community hub built by people who truly understand tabletop gaming.

Our Address

GAMESHAVEN

Lennox House

Lennox St,

Hockley

Nottingham

NG1 1EX

{/* Footer */}
); } // Add these CSS classes to your global stylesheet or within a style tag ` @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; } .animation-delay-200 { animation-delay: 0.2s; } .animation-delay-400 { animation-delay: 0.4s; } `

Home