عن طريق ال react.js اريد بناء لعبة عن طريق ال blockchain

README.md

@@ -1,10 +1,13 @@
 ---
-title: Crypto Snap Quest
-emoji: 🏃
-colorFrom: indigo
-colorTo: pink
+title: Crypto Snap Quest 🕹️
+colorFrom: red
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/client-logos.js

@@ -0,0 +1,67 @@
+class CustomClientLogos extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                }
+                
+                .logos-container {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    flex-wrap: wrap;
+                    gap: 3rem;
+                }
+                
+                .logo-item {
+                    opacity: 0.6;
+                    transition: opacity 0.3s ease;
+                    filter: grayscale(100%);
+                }
+                
+                .logo-item:hover {
+                    opacity: 1;
+                    filter: grayscale(0%);
+                }
+                
+                .logo-item img {
+                    height: 40px;
+                    width: auto;
+                    max-width: 150px;
+                    object-fit: contain;
+                }
+                
+                @media (max-width: 768px) {
+                    .logos-container {
+                        gap: 2rem;
+                    }
+                    
+                    .logo-item img {
+                        height: 30px;
+                    }
+                }
+            </style>
+            <div class="logos-container">
+                <div class="logo-item">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Wipro_Primary_Logo_Color_RGB.svg/1200px-Wipro_Primary_Logo_Color_RGB.svg.png" alt="Wipro">
+                </div>
+                <div class="logo-item">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1200px-Google_%22G%22_Logo.svg.png" alt="Google">
+                </div>
+                <div class="logo-item">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/1667px-Apple_logo_black.svg.png" alt="Apple">
+                </div>
+                <div class="logo-item">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/2560px-Amazon_logo.svg.png" alt="Amazon">
+                </div>
+                <div class="logo-item">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Microsoft_logo_%282012%29.svg/2560px-Microsoft_logo_%282012%29.svg.png" alt="Microsoft">
+                </div>
+            </div>
+        `;
+    }
+}
+
+customElements.define('custom-client-logos', CustomClientLogos);

components/footer.js

@@ -0,0 +1,175 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    background-color: #111827;
+                    color: #d1d5db;
+                }
+                
+                .footer-container {
+                    max-width: 1440px;
+                    margin: 0 auto;
+                    padding: 4rem 2rem;
+                    display: grid;
+                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+                    gap: 3rem;
+                }
+                
+                .footer-logo {
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    color: white;
+                    margin-bottom: 1.5rem;
+                    display: inline-block;
+                }
+                
+                .footer-logo span {
+                    color: #f59e0b;
+                }
+                
+                .footer-about p {
+                    margin-bottom: 1.5rem;
+                    line-height: 1.6;
+                }
+                
+                .social-links {
+                    display: flex;
+                    gap: 1rem;
+                }
+                
+                .social-links a {
+                    color: #d1d5db;
+                    transition: color 0.3s ease;
+                }
+                
+                .social-links a:hover {
+                    color: #f59e0b;
+                }
+                
+                .footer-links h3, .footer-contact h3 {
+                    color: white;
+                    font-size: 1.25rem;
+                    margin-bottom: 1.5rem;
+                    position: relative;
+                    padding-bottom: 0.5rem;
+                }
+                
+                .footer-links h3::after, .footer-contact h3::after {
+                    content: '';
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    width: 50px;
+                    height: 2px;
+                    background-color: #f59e0b;
+                }
+                
+                .footer-links ul {
+                    list-style: none;
+                }
+                
+                .footer-links li {
+                    margin-bottom: 0.75rem;
+                }
+                
+                .footer-links a {
+                    color: #d1d5db;
+                    text-decoration: none;
+                    transition: color 0.3s ease;
+                }
+                
+                .footer-links a:hover {
+                    color: #f59e0b;
+                }
+                
+                .contact-info {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 1rem;
+                }
+                
+                .contact-item {
+                    display: flex;
+                    align-items: flex-start;
+                    gap: 0.75rem;
+                }
+                
+                .contact-item i {
+                    color: #f59e0b;
+                    margin-top: 0.25rem;
+                }
+                
+                .copyright {
+                    text-align: center;
+                    padding: 1.5rem;
+                    border-top: 1px solid #374151;
+                    font-size: 0.875rem;
+                }
+                
+                @media (max-width: 768px) {
+                    .footer-container {
+                        grid-template-columns: 1fr;
+                    }
+                }
+            </style>
+            <div class="footer-container">
+                <div class="footer-about">
+                    <a href="/" class="footer-logo">Lens<span>Crafted</span></a>
+                    <p>Professional photography services to capture your most precious moments with creativity and passion.</p>
+                    <div class="social-links">
+                        <a href="#"><i data-feather="instagram"></i></a>
+                        <a href="#"><i data-feather="facebook"></i></a>
+                        <a href="#"><i data-feather="twitter"></i></a>
+                        <a href="#"><i data-feather="youtube"></i></a>
+                    </div>
+                </div>
+                <div class="footer-links">
+                    <h3>Quick Links</h3>
+                    <ul>
+                        <li><a href="#portfolio">Portfolio</a></li>
+                        <li><a href="#about">About Me</a></li>
+                        <li><a href="#services">Services</a></li>
+                        <li><a href="#contact">Contact</a></li>
+                        <li><a href="#">Blog</a></li>
+                    </ul>
+                </div>
+                <div class="footer-contact">
+                    <h3>Contact Info</h3>
+                    <div class="contact-info">
+                        <div class="contact-item">
+                            <i data-feather="map-pin"></i>
+                            <span>123 Photography Lane, Creative City, CC 90210</span>
+                        </div>
+                        <div class="contact-item">
+                            <i data-feather="mail"></i>
+                            <span>hello@lenscrafted.com</span>
+                        </div>
+                        <div class="contact-item">
+                            <i data-feather="phone"></i>
+                            <span>(555) 123-4567</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="copyright">
+                &copy; ${new Date().getFullYear()} LensCrafted. All rights reserved.
+            </div>
+        `;
+        
+        // Initialize Feather Icons within the shadow DOM
+        const featherScript = document.createElement('script');
+        featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
+        this.shadowRoot.appendChild(featherScript);
+        
+        featherScript.onload = () => {
+            const featherReplaceScript = document.createElement('script');
+            featherReplaceScript.textContent = 'feather.replace();';
+            this.shadowRoot.appendChild(featherReplaceScript);
+        };
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,161 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: fixed;
+                    width: 100%;
+                    top: 0;
+                    left: 0;
+                    z-index: 1000;
+                    transition: all 0.3s ease;
+                }
+                
+                .scrolled {
+                    background-color: rgba(17, 24, 39, 0.95);
+                    backdrop-filter: blur(10px);
+                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+                }
+                
+                nav {
+                    max-width: 1440px;
+                    margin: 0 auto;
+                    padding: 1.5rem 2rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                
+                .logo {
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    color: white;
+                    text-decoration: none;
+                    display: flex;
+                    align-items: center;
+                }
+                
+                .logo span {
+                    color: #f59e0b;
+                }
+                
+                .nav-links {
+                    display: flex;
+                    gap: 2rem;
+                }
+                
+                .nav-links a {
+                    color: white;
+                    text-decoration: none;
+                    font-weight: 500;
+                    transition: color 0.3s ease;
+                    position: relative;
+                }
+                
+                .nav-links a:hover {
+                    color: #f59e0b;
+                }
+                
+                .nav-links a::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -5px;
+                    left: 0;
+                    width: 0;
+                    height: 2px;
+                    background-color: #f59e0b;
+                    transition: width 0.3s ease;
+                }
+                
+                .nav-links a:hover::after {
+                    width: 100%;
+                }
+                
+                .mobile-menu-btn {
+                    display: none;
+                    background: none;
+                    border: none;
+                    color: white;
+                    cursor: pointer;
+                }
+                
+                @media (max-width: 768px) {
+                    .nav-links {
+                        position: fixed;
+                        top: 80px;
+                        left: 0;
+                        width: 100%;
+                        background-color: rgba(17, 24, 39, 0.98);
+                        flex-direction: column;
+                        align-items: center;
+                        padding: 2rem 0;
+                        gap: 1.5rem;
+                        transform: translateY(-150%);
+                        transition: transform 0.4s ease;
+                        z-index: 999;
+                    }
+                    
+                    .nav-links.open {
+                        transform: translateY(0);
+                    }
+                    
+                    .mobile-menu-btn {
+                        display: block;
+                    }
+                }
+            </style>
+            <nav>
+                <a href="/" class="logo">Lens<span>Crafted</span></a>
+                <div class="nav-links">
+                    <a href="#portfolio">Portfolio</a>
+                    <a href="#about">About</a>
+                    <a href="#services">Services</a>
+                    <a href="#contact">Contact</a>
+                    <a href="game.html">Game</a>
+</div>
+                <button class="mobile-menu-btn">
+                    <i data-feather="menu"></i>
+                </button>
+            </nav>
+        `;
+        
+        // Add scroll event listener for navbar effect
+        window.addEventListener('scroll', this.handleScroll.bind(this));
+        
+        // Mobile menu toggle
+        const mobileMenuBtn = this.shadowRoot.querySelector('.mobile-menu-btn');
+        const navLinks = this.shadowRoot.querySelector('.nav-links');
+        
+        mobileMenuBtn.addEventListener('click', () => {
+            navLinks.classList.toggle('open');
+            mobileMenuBtn.innerHTML = navLinks.classList.contains('open') 
+                ? '<i data-feather="x"></i>' 
+                : '<i data-feather="menu"></i>';
+            feather.replace();
+        });
+        
+        // Close mobile menu when clicking a link
+        this.shadowRoot.querySelectorAll('.nav-links a').forEach(link => {
+            link.addEventListener('click', () => {
+                if (navLinks.classList.contains('open')) {
+                    navLinks.classList.remove('open');
+                    mobileMenuBtn.innerHTML = '<i data-feather="menu"></i>';
+                    feather.replace();
+                }
+            });
+        });
+    }
+    
+    handleScroll() {
+        const nav = this.shadowRoot.querySelector('nav');
+        if (window.scrollY > 50) {
+            nav.parentElement.classList.add('scrolled');
+        } else {
+            nav.parentElement.classList.remove('scrolled');
+        }
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

game.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Crypto Snap Quest - Blockchain Game</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-900 text-white">
+    <custom-navbar></custom-navbar>
+
+    <main>
+        <div id="game-root" class="min-h-screen py-16 px-4 sm:px-6 lg:px-8"></div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <!-- Game React Component -->
+    <script type="text/babel" src="game.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>

game.js

@@ -0,0 +1,161 @@
+const { useState, useEffect } = React;
+
+function CryptoSnapGame() {
+    const [score, setScore] = useState(0);
+    const [isConnected, setIsConnected] = useState(false);
+    const [walletAddress, setWalletAddress] = useState('');
+    const [nfts, setNfts] = useState([]);
+    const [gameStarted, setGameStarted] = useState(false);
+    const [timeLeft, setTimeLeft] = useState(60);
+    const [targetNFT, setTargetNFT] = useState(null);
+    const [gameMessage, setGameMessage] = useState('');
+
+    // Connect to MetaMask
+    const connectWallet = async () => {
+        if (window.ethereum) {
+            try {
+                const provider = new ethers.providers.Web3Provider(window.ethereum);
+                const accounts = await provider.send("eth_requestAccounts", []);
+                setWalletAddress(accounts[0]);
+                setIsConnected(true);
+                fetchNFTs(accounts[0]);
+            } catch (error) {
+                console.error("Error connecting:", error);
+                setGameMessage("Failed to connect wallet");
+            }
+        } else {
+            setGameMessage("Please install MetaMask to play");
+        }
+    };
+
+    // Fetch user's NFTs (mock function)
+    const fetchNFTs = async (address) => {
+        // In a real app, you would query a blockchain API here
+        const mockNFTs = [
+            { id: 1, name: "Crypto Punk #1234", image: "http://static.photos/nft/200x200/1" },
+            { id: 2, name: "Bored Ape #5678", image: "http://static.photos/nft/200x200/2" },
+            { id: 3, name: "Art Blocks #9012", image: "http://static.photos/nft/200x200/3" }
+        ];
+        setNfts(mockNFTs);
+    };
+
+    // Start the game
+    const startGame = () => {
+        if (nfts.length === 0) {
+            setGameMessage("You need at least 1 NFT to play");
+            return;
+        }
+        setGameStarted(true);
+        setScore(0);
+        setTimeLeft(60);
+        setTargetNFT(nfts[Math.floor(Math.random() * nfts.length)]);
+        setGameMessage(`Find: ${targetNFT?.name}`);
+    };
+
+    // Handle NFT selection
+    const selectNFT = (nft) => {
+        if (!gameStarted) return;
+
+        if (nft.id === targetNFT.id) {
+            setScore(score + 10);
+            setGameMessage("Correct! +10 points");
+            setTargetNFT(nfts[Math.floor(Math.random() * nfts.length)]);
+            setTimeout(() => setGameMessage(`Find: ${targetNFT?.name}`), 1000);
+        } else {
+            setGameMessage("Wrong NFT! Try again");
+        }
+    };
+
+    // Game timer
+    useEffect(() => {
+        if (!gameStarted) return;
+
+        const timer = setInterval(() => {
+            setTimeLeft(prev => {
+                if (prev <= 1) {
+                    clearInterval(timer);
+                    setGameStarted(false);
+                    setGameMessage(`Game Over! Final Score: ${score}`);
+                    return 0;
+                }
+                return prev - 1;
+            });
+        }, 1000);
+
+        return () => clearInterval(timer);
+    }, [gameStarted, score]);
+
+    return (
+        <div className="max-w-4xl mx-auto text-center">
+            <h1 className="text-4xl md:text-5xl font-bold mb-8">Crypto Snap Quest</h1>
+            
+            {!isConnected ? (
+                <div className="bg-gray-800 p-8 rounded-xl shadow-lg max-w-md mx-auto">
+                    <h2 className="text-2xl font-bold mb-4">Connect Your Wallet</h2>
+                    <p className="mb-6">Connect your MetaMask wallet to play and earn crypto rewards!</p>
+                    <button 
+                        onClick={connectWallet}
+                        className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition"
+                    >
+                        Connect Wallet
+                    </button>
+                </div>
+            ) : (
+                <div className="space-y-8">
+                    <div className="bg-gray-800 p-6 rounded-xl shadow-lg">
+                        <div className="flex justify-between items-center mb-4">
+                            <div className="text-xl font-bold">Score: {score}</div>
+                            <div className="text-xl font-bold">Time: {timeLeft}s</div>
+                        </div>
+                        
+                        <div className="bg-gray-700 p-4 rounded-lg mb-4 min-h-16 flex items-center justify-center">
+                            {gameMessage || (gameStarted ? `Find: ${targetNFT?.name}` : "Ready to play?")}
+                        </div>
+                        
+                        {!gameStarted ? (
+                            <button 
+                                onClick={startGame}
+                                className="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg transition"
+                            >
+                                Start Game
+                            </button>
+                        ) : (
+                            <p className="text-sm text-gray-400">Click on the matching NFT below</p>
+                        )}
+                    </div>
+                    
+                    <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
+                        {nfts.map(nft => (
+                            <div 
+                                key={nft.id} 
+                                onClick={() => selectNFT(nft)}
+                                className={`bg-gray-800 p-4 rounded-lg cursor-pointer transition ${gameStarted ? 'hover:bg-gray-700' : ''}`}
+                            >
+                                <img 
+                                    src={nft.image} 
+                                    alt={nft.name} 
+                                    className="w-full h-32 object-cover rounded mb-2"
+                                />
+                                <p className="text-sm font-medium truncate">{nft.name}</p>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+            
+            <div className="mt-12 bg-gray-800 p-6 rounded-xl shadow-lg">
+                <h2 className="text-2xl font-bold mb-4">How to Play</h2>
+                <ul className="text-left max-w-md mx-auto space-y-2">
+                    <li>1. Connect your crypto wallet</li>
+                    <li>2. Start the game and find the matching NFT</li>
+                    <li>3. Click the correct NFT to earn points</li>
+                    <li>4. Score as much as you can in 60 seconds!</li>
+                </ul>
+                <p className="mt-4 text-blue-400">Coming Soon: Real crypto rewards for top scores!</p>
+            </div>
+        </div>
+    );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('game-root'));
+root.render(<CryptoSnapGame />);

index.html

@@ -1,19 +1,263 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LensCrafted | Professional Photography Portfolio</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/client-logos.js"></script>
+</head>
+<body class="bg-gray-50 text-gray-800 font-sans">
+    <custom-navbar></custom-navbar>
+
+    <main>
+        <!-- Hero Section -->
+        <section class="relative h-screen flex items-center justify-center bg-black overflow-hidden">
+            <div class="absolute inset-0 bg-black opacity-50"></div>
+            <video autoplay muted loop class="absolute min-w-full min-h-full object-cover">
+                <source src="https://static.videezy.com/system/resources/previews/000/050/246/original/4K_018.mp4" type="video/mp4">
+            </video>
+            <div class="relative z-10 text-center px-4">
+                <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6">Capture Moments <span class="text-yellow-400">Forever</span></h1>
+                <p class="text-xl md:text-2xl text-gray-200 mb-8 max-w-2xl mx-auto">Professional photography services to immortalize your most precious memories</p>
+                <a href="#contact" class="bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded-full transition duration-300 inline-flex items-center">
+                    Book a Session
+                    <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
+                </a>
+            </div>
+        </section>
+
+        <!-- Gallery Section -->
+        <section id="portfolio" class="py-20 px-4 sm:px-6 lg:px-8">
+            <div class="max-w-7xl mx-auto">
+                <div class="text-center mb-16">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-4">My Portfolio</h2>
+                    <p class="text-lg text-gray-600 max-w-2xl mx-auto">Explore my diverse photography projects across different categories</p>
+                </div>
+
+                <!-- Filter Buttons -->
+                <div class="flex flex-wrap justify-center gap-4 mb-12">
+                    <button class="filter-btn active px-6 py-2 rounded-full font-medium bg-yellow-400 text-gray-900" data-filter="all">All</button>
+                    <button class="filter-btn px-6 py-2 rounded-full font-medium bg-gray-200 hover:bg-gray-300 transition" data-filter="wedding">Wedding</button>
+                    <button class="filter-btn px-6 py-2 rounded-full font-medium bg-gray-200 hover:bg-gray-300 transition" data-filter="portrait">Portrait</button>
+                    <button class="filter-btn px-6 py-2 rounded-full font-medium bg-gray-200 hover:bg-gray-300 transition" data-filter="landscape">Landscape</button>
+                    <button class="filter-btn px-6 py-2 rounded-full font-medium bg-gray-200 hover:bg-gray-300 transition" data-filter="product">Product</button>
+                </div>
+
+                <!-- Masonry Gallery -->
+                <div class="masonry-grid gap-6">
+                    <!-- Images will be loaded via JavaScript -->
+                </div>
+            </div>
+        </section>
+
+        <!-- About Section -->
+        <section id="about" class="py-20 bg-gray-100">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex flex-col lg:flex-row items-center gap-12">
+                    <div class="lg:w-1/2">
+                        <img src="http://static.photos/people/640x360/10" alt="Photographer" class="rounded-lg shadow-xl w-full h-auto">
+                    </div>
+                    <div class="lg:w-1/2">
+                        <h2 class="text-3xl md:text-4xl font-bold mb-6">About Me</h2>
+                        <p class="text-gray-600 mb-4">Hi, I'm Sarah Johnson, a professional photographer with over 10 years of experience capturing life's beautiful moments.</p>
+                        <p class="text-gray-600 mb-4">My journey began when I received my first camera as a birthday gift, and since then, I've never looked back. Photography isn't just my profession—it's my passion and way of life.</p>
+                        <p class="text-gray-600 mb-6">I specialize in wedding, portrait, and commercial photography, but I'm always excited to take on new challenges and creative projects.</p>
+                        <div class="flex flex-wrap gap-4 mb-6">
+                            <span class="bg-gray-200 px-4 py-2 rounded-full text-sm font-medium">Canon EOS R5</span>
+                            <span class="bg-gray-200 px-4 py-2 rounded-full text-sm font-medium">Sony A7IV</span>
+                            <span class="bg-gray-200 px-4 py-2 rounded-full text-sm font-medium">Nikon Z7 II</span>
+                        </div>
+                        <a href="#contact" class="inline-flex items-center text-yellow-600 font-medium hover:text-yellow-700 transition">
+                            Let's Work Together
+                            <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Services Section -->
+        <section id="services" class="py-20">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="text-center mb-16">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-4">My Services</h2>
+                    <p class="text-lg text-gray-600 max-w-2xl mx-auto">Comprehensive photography services tailored to your needs</p>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    <!-- Service 1 -->
+                    <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">
+                        <img src="http://static.photos/wedding/640x360/1" alt="Wedding Photography" class="w-full h-48 object-cover">
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold mb-2">Wedding Photography</h3>
+                            <p class="text-gray-600 mb-4">Capture your special day with timeless, romantic imagery that tells your unique love story.</p>
+                            <div class="flex justify-between items-center">
+                                <span class="font-bold text-gray-900">$1,200+</span>
+                                <a href="#contact" class="text-yellow-600 hover:text-yellow-700 font-medium">Book Now</a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Service 2 -->
+                    <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">
+                        <img src="http://static.photos/portrait/640x360/2" alt="Portrait Photography" class="w-full h-48 object-cover">
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold mb-2">Portrait Photography</h3>
+                            <p class="text-gray-600 mb-4">Professional portraits for individuals, families, or business needs that showcase personality and professionalism.</p>
+                            <div class="flex justify-between items-center">
+                                <span class="font-bold text-gray-900">$350+</span>
+                                <a href="#contact" class="text-yellow-600 hover:text-yellow-700 font-medium">Book Now</a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Service 3 -->
+                    <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">
+                        <img src="http://static.photos/product/640x360/3" alt="Product Photography" class="w-full h-48 object-cover">
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold mb-2">Product Photography</h3>
+                            <p class="text-gray-600 mb-4">High-quality images of your products that boost sales and enhance your brand's visual appeal.</p>
+                            <div class="flex justify-between items-center">
+                                <span class="font-bold text-gray-900">$75/hr</span>
+                                <a href="#contact" class="text-yellow-600 hover:text-yellow-700 font-medium">Book Now</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Clients Section -->
+        <section class="py-16 bg-gray-100">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="text-center mb-12">
+                    <h2 class="text-2xl md:text-3xl font-bold mb-4">Trusted By</h2>
+                    <p class="text-gray-600">Brands and clients I've had the pleasure to work with</p>
+                </div>
+                <custom-client-logos></custom-client-logos>
+            </div>
+        </section>
+
+        <!-- Contact Section -->
+        <section id="contact" class="py-20 bg-gray-900 text-white">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+                    <div>
+                        <h2 class="text-3xl md:text-4xl font-bold mb-6">Get In Touch</h2>
+                        <p class="text-gray-300 mb-8">Ready to book a session or have questions about my services? Fill out the form or reach out directly.</p>
+                        <div class="space-y-6">
+                            <div class="flex items-start">
+                                <div class="flex-shrink-0 mt-1">
+                                    <i data-feather="mail" class="w-5 h-5 text-yellow-400"></i>
+                                </div>
+                                <div class="ml-4">
+                                    <h3 class="font-bold">Email</h3>
+                                    <p class="text-gray-300">hello@lenscrafted.com</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start">
+                                <div class="flex-shrink-0 mt-1">
+                                    <i data-feather="phone" class="w-5 h-5 text-yellow-400"></i>
+                                </div>
+                                <div class="ml-4">
+                                    <h3 class="font-bold">Phone</h3>
+                                    <p class="text-gray-300">(555) 123-4567</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start">
+                                <div class="flex-shrink-0 mt-1">
+                                    <i data-feather="map-pin" class="w-5 h-5 text-yellow-400"></i>
+                                </div>
+                                <div class="ml-4">
+                                    <h3 class="font-bold">Studio</h3>
+                                    <p class="text-gray-300">123 Photography Lane, Creative City, CC 90210</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mt-8">
+                            <h3 class="font-bold mb-4">Follow Me</h3>
+                            <div class="flex space-x-4">
+                                <a href="#" class="text-gray-300 hover:text-yellow-400 transition">
+                                    <i data-feather="instagram" class="w-6 h-6"></i>
+                                </a>
+                                <a href="#" class="text-gray-300 hover:text-yellow-400 transition">
+                                    <i data-feather="facebook" class="w-6 h-6"></i>
+                                </a>
+                                <a href="#" class="text-gray-300 hover:text-yellow-400 transition">
+                                    <i data-feather="twitter" class="w-6 h-6"></i>
+                                </a>
+                                <a href="#" class="text-gray-300 hover:text-yellow-400 transition">
+                                    <i data-feather="youtube" class="w-6 h-6"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <form class="bg-gray-800 p-8 rounded-lg shadow-lg">
+                            <div class="mb-6">
+                                <label for="name" class="block text-gray-300 mb-2">Your Name</label>
+                                <input type="text" id="name" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white">
+                            </div>
+                            <div class="mb-6">
+                                <label for="email" class="block text-gray-300 mb-2">Email Address</label>
+                                <input type="email" id="email" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white">
+                            </div>
+                            <div class="mb-6">
+                                <label for="service" class="block text-gray-300 mb-2">Service Interested In</label>
+                                <select id="service" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white">
+                                    <option value="">Select a service</option>
+                                    <option value="wedding">Wedding Photography</option>
+                                    <option value="portrait">Portrait Photography</option>
+                                    <option value="product">Product Photography</option>
+                                    <option value="other">Other</option>
+                                </select>
+                            </div>
+                            <div class="mb-6">
+                                <label for="message" class="block text-gray-300 mb-2">Your Message</label>
+                                <textarea id="message" rows="4" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white"></textarea>
+                            </div>
+                            <button type="submit" class="w-full bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-bold py-3 px-4 rounded transition duration-300">
+                                Send Message
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Lightbox Modal -->
+    <div id="lightbox" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center hidden">
+        <div class="relative max-w-6xl w-full">
+            <button id="close-lightbox" class="absolute -top-12 right-0 text-white hover:text-yellow-400 transition">
+                <i data-feather="x" class="w-8 h-8"></i>
+            </button>
+            <div class="flex items-center justify-center">
+                <button id="prev-btn" class="absolute left-0 ml-4 text-white hover:text-yellow-400 transition">
+                    <i data-feather="chevron-left" class="w-12 h-12"></i>
+                </button>
+                <img id="lightbox-img" src="" alt="" class="max-h-screen max-w-full">
+                <button id="next-btn" class="absolute right-0 mr-4 text-white hover:text-yellow-400 transition">
+                    <i data-feather="chevron-right" class="w-12 h-12"></i>
+                </button>
+            </div>
+            <div id="lightbox-caption" class="text-center text-white mt-4"></div>
+        </div>
+    </div>
+
+    <custom-footer></custom-footer>
+
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,154 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize Feather Icons
+    feather.replace();
+    
+    // Gallery data
+    const galleryData = [
+        { id: 1, category: 'wedding', src: 'http://static.photos/wedding/640x360/1', caption: 'Romantic wedding moment' },
+        { id: 2, category: 'portrait', src: 'http://static.photos/portrait/640x360/2', caption: 'Professional headshot' },
+        { id: 3, category: 'landscape', src: 'http://static.photos/landscape/640x360/3', caption: 'Mountain sunset' },
+        { id: 4, category: 'product', src: 'http://static.photos/product/640x360/4', caption: 'Luxury watch' },
+        { id: 5, category: 'wedding', src: 'http://static.photos/wedding/640x360/5', caption: 'First dance' },
+        { id: 6, category: 'portrait', src: 'http://static.photos/portrait/640x360/6', caption: 'Family portrait' },
+        { id: 7, category: 'landscape', src: 'http://static.photos/landscape/640x360/7', caption: 'Ocean view' },
+        { id: 8, category: 'product', src: 'http://static.photos/product/640x360/8', caption: 'Cosmetics line' },
+        { id: 9, category: 'wedding', src: 'http://static.photos/wedding/640x360/9', caption: 'Bride preparation' },
+        { id: 10, category: 'portrait', src: 'http://static.photos/portrait/640x360/10', caption: 'Corporate portrait' },
+        { id: 11, category: 'landscape', src: 'http://static.photos/landscape/640x360/11', caption: 'Forest path' },
+        { id: 12, category: 'product', src: 'http://static.photos/product/640x360/12', caption: 'Fashion accessories' }
+    ];
+
+    // Lightbox elements
+    const lightbox = document.getElementById('lightbox');
+    const lightboxImg = document.getElementById('lightbox-img');
+    const lightboxCaption = document.getElementById('lightbox-caption');
+    const closeLightbox = document.getElementById('close-lightbox');
+    const prevBtn = document.getElementById('prev-btn');
+    const nextBtn = document.getElementById('next-btn');
+
+    // Current image index for lightbox navigation
+    let currentImageIndex = 0;
+    let filteredImages = [];
+
+    // Initialize gallery
+    function initGallery() {
+        const galleryContainer = document.querySelector('.masonry-grid');
+        galleryContainer.innerHTML = '';
+
+        // Create gallery items
+        filteredImages.forEach((item, index) => {
+            const galleryItem = document.createElement('div');
+            galleryItem.className = 'gallery-item cursor-pointer';
+            galleryItem.dataset.category = item.category;
+            galleryItem.dataset.index = index;
+
+            galleryItem.innerHTML = `
+                <div class="category-label">${item.category}</div>
+                <img src="${item.src}" alt="${item.caption}" loading="lazy">
+            `;
+
+            galleryItem.addEventListener('click', () => openLightbox(index));
+            galleryContainer.appendChild(galleryItem);
+        });
+    }
+
+    // Filter gallery by category
+    function filterGallery(category) {
+        if (category === 'all') {
+            filteredImages = [...galleryData];
+        } else {
+            filteredImages = galleryData.filter(item => item.category === category);
+        }
+        initGallery();
+    }
+
+    // Open lightbox
+    function openLightbox(index) {
+        currentImageIndex = index;
+        lightboxImg.src = filteredImages[index].src;
+        lightboxCaption.textContent = filteredImages[index].caption;
+        lightbox.classList.add('show');
+        lightbox.classList.remove('hidden');
+        document.body.style.overflow = 'hidden';
+    }
+
+    // Close lightbox
+    function closeLightboxHandler() {
+        lightbox.classList.remove('show');
+        lightbox.classList.add('hidden');
+        document.body.style.overflow = '';
+    }
+
+    // Navigate to previous image
+    function prevImage() {
+        currentImageIndex = (currentImageIndex - 1 + filteredImages.length) % filteredImages.length;
+        lightboxImg.src = filteredImages[currentImageIndex].src;
+        lightboxCaption.textContent = filteredImages[currentImageIndex].caption;
+    }
+
+    // Navigate to next image
+    function nextImage() {
+        currentImageIndex = (currentImageIndex + 1) % filteredImages.length;
+        lightboxImg.src = filteredImages[currentImageIndex].src;
+        lightboxCaption.textContent = filteredImages[currentImageIndex].caption;
+    }
+
+    // Initialize filter buttons
+    function initFilterButtons() {
+        const filterButtons = document.querySelectorAll('.filter-btn');
+        filterButtons.forEach(button => {
+            button.addEventListener('click', function() {
+                // Remove active class from all buttons
+                filterButtons.forEach(btn => btn.classList.remove('active'));
+                // Add active class to clicked button
+                this.classList.add('active');
+                // Filter gallery
+                filterGallery(this.dataset.filter);
+            });
+        });
+    }
+
+    // Smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+            const targetId = this.getAttribute('href');
+            if (targetId === '#') return;
+            
+            const targetElement = document.querySelector(targetId);
+            if (targetElement) {
+                targetElement.scrollIntoView({
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+
+    // Initialize everything
+    filteredImages = [...galleryData];
+    initGallery();
+    initFilterButtons();
+
+    // Lightbox event listeners
+    closeLightbox.addEventListener('click', closeLightboxHandler);
+    prevBtn.addEventListener('click', prevImage);
+    nextBtn.addEventListener('click', nextImage);
+    lightbox.addEventListener('click', function(e) {
+        if (e.target === lightbox) {
+            closeLightboxHandler();
+        }
+    });
+
+    // Keyboard navigation for lightbox
+    document.addEventListener('keydown', function(e) {
+        if (!lightbox.classList.contains('hidden')) {
+            if (e.key === 'Escape') {
+                closeLightboxHandler();
+            } else if (e.key === 'ArrowLeft') {
+                prevImage();
+            } else if (e.key === 'ArrowRight') {
+                nextImage();
+            }
+        }
+    });
+});

style.css

@@ -1,28 +1,141 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Masonry Grid */
+.masonry-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-auto-rows: 10px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.masonry-grid .gallery-item {
+    margin-bottom: 20px;
+    break-inside: avoid;
+    position: relative;
+    overflow: hidden;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.masonry-grid .gallery-item:hover {
+    transform: scale(1.02);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.masonry-grid .gallery-item img {
+    width: 100%;
+    height: auto;
+    display: block;
+    transition: transform 0.5s ease;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.masonry-grid .gallery-item:hover img {
+    transform: scale(1.05);
 }
+
+.masonry-grid .gallery-item .category-label {
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    background-color: rgba(234, 179, 8, 0.9);
+    color: white;
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: capitalize;
+}
+
+/* Lightbox transitions */
+#lightbox {
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+#lightbox.show {
+    opacity: 1;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #d1d5db;
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #9ca3af;
+}
+
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Custom animation for hero section */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.hero-content {
+    animation: fadeInUp 1s ease forwards;
+}
+
+/* Responsive video background */
+video {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+    z-index: -1;
+}
+
+/* Filter button active state */
+.filter-btn.active {
+    background-color: #f59e0b !important;
+    color: #1f2937 !important;
+}
+/* Game NFT card effects */
+.nft-card {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.nft-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+/* Game UI styles */
+.game-message {
+    min-height: 4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #1f2937;
+    border-radius: 0.5rem;
+}
+
+/* Service card hover effect */
+.service-card:hover img {
+    transform: scale(1.1);
+    transition: transform 0.5s ease;
+}
+
+.service-card img {
+    transition: transform 0.5s ease;
+}