कंप्यूटर मार्केटप्लेस: लैपटॉप, डेस्कटॉप और अन्य चीज़ें खरीदें

13 Metehan

संपादक में खोलें अपना कोड प्रकाशित करें

कंप्यूटर मार्केटप्लेस: लैपटॉप, डेस्कटॉप और अन्य चीज़ें खरीदें

अनुशंसित

22 August 2025

ब्लॉगियम: प्रौद्योगिकी, डिज़ाइन और जीवन ब्लॉग HTML टेम्पलेट

22 June 2025

क्रिएटिव ब्लॉग: डिज़ाइन, पॉडकास्ट और पोर्टफोलियो HTML

14 March 2025

मूल्य निर्धारण इंटरैक्शन (HTML, CSS और JS)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PowerTech - Premium Computer Marketplace</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* Custom animations */
        .oa {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s ease;
        }
        .oated {
            opacity: 1;
            transform: translateY(0);
        }
        .zemin-show {
            animation: fadeInUp 0.8s ease forwards;
        }
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Hero slider animation */
        @keyframes slide {
            0% { transform: translateX(0); }
            25% { transform: translateX(0); }
            33% { transform: translateX(-100%); }
            58% { transform: translateX(-100%); }
            66% { transform: translateX(-200%); }
            91% { transform: translateX(-200%); }
            100% { transform: translateX(0); }
        }
        .vitrin-slider {
            animation: slide 12s infinite;
        }
        
        /* Video module overlay */
        .video-overlay {
            background: rgba(0,0,0,0.5);
        }
        
        /* Custom product card hover */
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        
        /* Testimonial carousel */
        .testimonial-carousel {
            scroll-snap-type: x mandatory;
        }
        .testimonial-slide {
            scroll-snap-align: start;
        }
    </style>
</head>
<body class="font-sans antialiased text-gray-800">
    
    <div class="bg-gray-900 text-white text-sm py-2 px-4 sticky top-0 z-50">
        <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
            <div class="flex items-center space-x-4 mb-2 md:mb-0">
                <div class="flex items-center">
                    <i class="fas fa-phone-alt mr-2 text-blue-400"></i>
                    <span>24/7 Support: <a href="tel:+18005551234" class="font-semibold hover:text-blue-400">1-800-555-1234</a></span>
                </div>
                <div class="hidden md:flex items-center">
                    <i class="fas fa-truck mr-2 text-green-400"></i>
                    <span>FREE Shipping on Orders Over $999</span>
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <a href="#" class="hover:text-blue-400"><i class="fas fa-sign-in-alt mr-1"></i> Login</a>
                <a href="#" class="hover:text-blue-400"><i class="fas fa-user-plus mr-1"></i> Register</a>
                <a href="#" class="hover:text-blue-400"><i class="fas fa-heart mr-1"></i> Wishlist</a>
            </div>
        </div>
    </div>

<header class="bg-white shadow-sm sticky top-10 z-40">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center py-4">
                <div class="flex items-center">
                    <a href="#" class="text-2xl font-bold text-gray-900">
                        <span class="text-blue-600">Power</span>Tech
                    </a>
                </div>
                
                <nav class="hidden lg:flex space-x-8">
                    <a href="#" class="font-medium hover:text-blue-600">Home</a>
                    <a href="#" class="font-medium hover:text-blue-600">Laptops</a>
                    <a href="#" class="font-medium hover:text-blue-600">Desktops</a>
                    <a href="#" class="font-medium hover:text-blue-600">Components</a>
                    <a href="#" class="font-medium hover:text-blue-600">Accessories</a>
                    <a href="#" class="font-medium hover:text-blue-600">Deals</a>
                </nav>
                
                <div class="flex items-center space-x-4">
                    <div class="relative hidden md:block">
                        <input type="text" placeholder="Search products..." class="pl-10 pr-4 py-2 border rounded-full w-64 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                    </div>
                    <a href="#" class="relative p-2 hover:text-blue-600">
                        <i class="fas fa-shopping-cart text-xl"></i>
                        <span class="absolute -top-1 -right-1 bg-blue-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
                    </a>
                    <button class="lg:hidden p-2 focus:outline-none">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>

<section class="relative overflow-hidden bg-gray-900 text-white">
        <div class="vitrin-slider flex w-full" style="width: 300%;">
            
            <div class="w-full flex-shrink-0 relative" style="width: 33.3333%;">
                <div class="container mx-auto px-4 py-20 md:py-32 flex flex-col md:flex-row items-center">
                    <div class="md:w-1/2 mb-10 md:mb-0 zemin-show">
                        <h1 class="text-4xl md:text-5xl font-bold mb-4">Ultimate Gaming Rigs</h1>
                        <p class="text-xl mb-6 text-gray-300">Experience next-level performance with our RTX 4090 powered systems</p>
                        <div class="flex space-x-4">
                            <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded font-medium">Shop Now</a>
                            <a href="#" class="border border-white hover:bg-white hover:text-gray-900 text-white px-6 py-3 rounded font-medium">Learn More</a>
                        </div>
                    </div>
                    <div class="md:w-1/2 flex justify-center oa">
                        <img src="https://images.unsplash.com/photo-1591488320449-011701bb6704?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Gaming PC" class="rounded-lg shadow-2xl max-h-96 object-contain">
                    </div>
                </div>
            </div>
            
            
            <div class="w-full flex-shrink-0 relative" style="width: 33.3333%;">
                <div class="container mx-auto px-4 py-20 md:py-32 flex flex-col md:flex-row items-center">
                    <div class="md:w-1/2 mb-10 md:mb-0 zemin-show">
                        <h1 class="text-4xl md:text-5xl font-bold mb-4">Premium Laptops</h1>
                        <p class="text-xl mb-6 text-gray-300">Thin, light, and powerful - perfect for work and play</p>
                        <div class="flex space-x-4">
                            <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded font-medium">Shop Now</a>
                            <a href="#" class="border border-white hover:bg-white hover:text-gray-900 text-white px-6 py-3 rounded font-medium">Compare Models</a>
                        </div>
                    </div>
                    <div class="md:w-1/2 flex justify-center oa">
                        <img src="https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Premium Laptop" class="rounded-lg shadow-2xl max-h-96 object-contain">
                    </div>
                </div>
            </div>
            
            
            <div class="w-full flex-shrink-0 relative" style="width: 33.3333%;">
                <div class="container mx-auto px-4 py-20 md:py-32 flex flex-col md:flex-row items-center">
                    <div class="md:w-1/2 mb-10 md:mb-0 zemin-show">
                        <h1 class="text-4xl md:text-5xl font-bold mb-4">Professional Workstations</h1>
                        <p class="text-xl mb-6 text-gray-300">Engineered for creators, developers, and professionals</p>
                        <div class="flex space-x-4">
                            <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded font-medium">Shop Now</a>
                            <a href="#" class="border border-white hover:bg-white hover:text-gray-900 text-white px-6 py-3 rounded font-medium">Customize</a>
                        </div>
                    </div>
                    <div class="md:w-1/2 flex justify-center oa">
                        <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Workstation" class="rounded-lg shadow-2xl max-h-96 object-contain">
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="absolute bottom-8 left-0 right-0 flex justify-center space-x-2">
            <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 focus:outline-none slider-dot" data-slide="0"></button>
            <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 focus:outline-none slider-dot" data-slide="1"></button>
            <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 focus:outline-none slider-dot" data-slide="2"></button>
        </div>
    </section>

<section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12">Shop by Category</h2>
            
            <div class="zengin grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                
                <a href="#" class="category-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 group">
                    <div class="relative pt-[100%]">
                        <img src="https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Laptops" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-lg mb-1">Laptops</h3>
                        <p class="text-gray-600 text-sm">From ultrabooks to gaming laptops</p>
                    </div>
                </a>
                
                
                <a href="#" class="category-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 group">
                    <div class="relative pt-[100%]">
                        <img src="https://images.unsplash.com/photo-1591488320449-011701bb6704?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Desktops" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-lg mb-1">Desktops</h3>
                        <p class="text-gray-600 text-sm">Powerful PCs for every need</p>
                    </div>
                </a>
                
                
                <a href="#" class="category-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 group">
                    <div class="relative pt-[100%]">
                        <img src="https://images.unsplash.com/photo-1587202372775-e2293e4f4d05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Gaming" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-lg mb-1">Gaming</h3>
                        <p class="text-gray-600 text-sm">High-performance gaming gear</p>
                    </div>
                </a>
                
                
                <a href="#" class="category-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 group">
                    <div class="relative pt-[100%]">
                        <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Workstations" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-lg mb-1">Workstations</h3>
                        <p class="text-gray-600 text-sm">For professionals and creators</p>
                    </div>
                </a>
                
                
                <a href="#" class="category-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 group">
                    <div class="relative pt-[100%]">
                        <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Apple" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-lg mb-1">Apple</h3>
                        <p class="text-gray-600 text-sm">MacBooks, iMacs, and more</p>
                    </div>
                </a>
                
                
                <a href="#" class="category-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 group">
                    <div class="relative pt-[100%]">
                        <img src="https://images.unsplash.com/photo-1629131726692-1accd0c53ce0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="ASUS" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-lg mb-1">ASUS</h3>
                        <p class="text-gray-600 text-sm">Innovative computing solutions</p>
                    </div>
                </a>
                
                
                <a href="#" class="category-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 group">
                    <div class="relative pt-[100%]">
                        <img src="https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Lenovo" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-lg mb-1">Lenovo</h3>
                        <p class="text-gray-600 text-sm">Reliable business machines</p>
                    </div>
                </a>
                
                
                <a href="#" class="category-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 group">
                    <div class="relative pt-[100%]">
                        <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Dell" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-lg mb-1">Dell</h3>
                        <p class="text-gray-600 text-sm">Premium computing solutions</p>
                    </div>
                </a>
            </div>
        </div>
    </section>

<section class="relative py-20">
        <div class="video-container w-full h-full absolute inset-0 overflow-hidden">
            <video autoplay muted loop class="w-full h-full object-cover">
                <source src="https://assets.mixkit.co/videos/preview/mixkit-close-up-of-computer-chip-12253-large.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <div class="video-overlay absolute inset-0"></div>
        </div>
        
        <div class="container mx-auto px-4 relative z-10 text-center text-white">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">Built for Performance</h2>
            <p class="text-xl mb-8 max-w-3xl mx-auto">Watch how our experts assemble premium computers with the latest components for unmatched performance.</p>
            <button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-medium flex items-center mx-auto">
                <i class="fas fa-play mr-2"></i> Watch Video
            </button>
        </div>
    </section>

<section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center mb-8">
                <h2 class="text-3xl font-bold">New Arrivals</h2>
                <div class="flex space-x-2">
                    <button class="new-arrivals-prev p-2 rounded-full bg-gray-100 hover:bg-gray-200">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="new-arrivals-next p-2 rounded-full bg-gray-100 hover:bg-gray-200">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
            
            <div class="relative overflow-hidden">
                <div class="sutun flex space-x-6 overflow-x-auto pb-6 -mx-4 px-4 scrollbar-hide testimonial-carousel">
                    
                    <div class="item flex-shrink-0 w-64 bg-white rounded-lg shadow-md overflow-hidden product-card transition-all duration-300">
                        <div class="relative pt-[70%]">
                            <img src="https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Product" class="absolute inset-0 w-full h-full object-contain p-4">
                            <div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">NEW</div>
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold mb-1">ASUS ROG Zephyrus G14</h3>
                            <p class="text-gray-600 text-sm mb-2">14" Gaming Laptop - Ryzen 9 - RTX 4060</p>
                            <div class="flex items-center justify-between">
                                <span class="font-bold text-lg">$1,499.99</span>
                                <button class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full">
                                    <i class="fas fa-shopping-cart"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="item flex-shrink-0 w-64 bg-white rounded-lg shadow-md overflow-hidden product-card transition-all duration-300">
                        <div class="relative pt-[70%]">
                            <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Product" class="absolute inset-0 w-full h-full object-contain p-4">
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold mb-1">MacBook Pro 16" M2 Max</h3>
                            <p class="text-gray-600 text-sm mb-2">32GB RAM - 1TB SSD - 38-core GPU</p>
                            <div class="flex items-center justify-between">
                                <span class="font-bold text-lg">$3,299.00</span>
                                <button class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full">
                                    <i class="fas fa-shopping-cart"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="item flex-shrink-0 w-64 bg-white rounded-lg shadow-md overflow-hidden product-card transition-all duration-300">
                        <div class="relative pt-[70%]">
                            <img src="https://images.unsplash.com/photo-1591488320449-011701bb6704?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Product" class="absolute inset-0 w-full h-full object-contain p-4">
                            <div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">-15%</div>
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold mb-1">Alienware Aurora R15</h3>
                            <p class="text-gray-600 text-sm mb-2">Gaming Desktop - i9-13900KF - RTX 4090</p>
                            <div class="flex items-center justify-between">
                                <div>
                                    <span class="font-bold text-lg text-red-500">$3,199.99</span>
                                    <span class="text-gray-400 text-sm line-through ml-2">$3,749.99</span>
                                </div>
                                <button class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full">
                                    <i class="fas fa-shopping-cart"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="item flex-shrink-0 w-64 bg-white rounded-lg shadow-md overflow-hidden product-card transition-all duration-300">
                        <div class="relative pt-[70%]">
                            <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Product" class="absolute inset-0 w-full h-full object-contain p-4">
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold mb-1">HP Z8 G4 Workstation</h3>
                            <p class="text-gray-600 text-sm mb-2">Dual Xeon - 128GB RAM - Quadro RTX 8000</p>
                            <div class="flex items-center justify-between">
                                <span class="font-bold text-lg">$8,499.99</span>
                                <button class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full">
                                    <i class="fas fa-shopping-cart"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="item flex-shrink-0 w-64 bg-white rounded-lg shadow-md overflow-hidden product-card transition-all duration-300">
                        <div class="relative pt-[70%]">
                            <img src="https://images.unsplash.com/photo-1629131726692-1accd0c53ce0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Product" class="absolute inset-0 w-full h-full object-contain p-4">
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold mb-1">ASUS ProArt PA32UCX</h3>
                            <p class="text-gray-600 text-sm mb-2">32" 4K HDR Professional Monitor</p>
                            <div class="flex items-center justify-between">
                                <span class="font-bold text-lg">$3,999.99</span>
                                <button class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full">
                                    <i class="fas fa-shopping-cart"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                
                <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 text-center">
                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-truck text-blue-600 text-2xl"></i>
                    </div>
                    <h3 class="font-semibold text-lg mb-2">Free Delivery</h3>
                    <p class="text-gray-600">On all orders over $999 with our premium shipping service</p>
                </div>
                
                
                <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 text-center">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-shield-alt text-green-600 text-2xl"></i>
                    </div>
                    <h3 class="font-semibold text-lg mb-2">2-Year Warranty</h3>
                    <p class="text-gray-600">Comprehensive protection for your investment</p>
                </div>
                
                
                <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 text-center">
                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-headset text-purple-600 text-2xl"></i>
                    </div>
                    <h3 class="font-semibold text-lg mb-2">24/7 Support</h3>
                    <p class="text-gray-600">Our experts are always available to help you</p>
                </div>
                
                
                <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 text-center">
                    <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-exchange-alt text-yellow-600 text-2xl"></i>
                    </div>
                    <h3 class="font-semibold text-lg mb-2">Easy Returns</h3>
                    <p class="text-gray-600">30-day return policy for your peace of mind</p>
                </div>
            </div>
        </div>
    </section>

<section class="py-12 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12">Our Partners</h2>
            
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8">
                <div class="flex items-center justify-center p-4 grayscale hover:grayscale-0 transition-all duration-300">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg" alt="Apple" class="h-12">
                </div>
                <div class="flex items-center justify-center p-4 grayscale hover:grayscale-0 transition-all duration-300">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/ASUS_Logo.svg" alt="ASUS" class="h-8">
                </div>
                <div class="flex items-center justify-center p-4 grayscale hover:grayscale-0 transition-all duration-300">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Lenovo_logo_2015.svg" alt="Lenovo" class="h-8">
                </div>
                <div class="flex items-center justify-center p-4 grayscale hover:grayscale-0 transition-all duration-300">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/1/18/Dell_logo_2016.svg" alt="Dell" class="h-8">
                </div>
                <div class="flex items-center justify-center p-4 grayscale hover:grayscale-0 transition-all duration-300">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/a/ad/HP_logo_2012.svg" alt="HP" class="h-8">
                </div>
                <div class="flex items-center justify-center p-4 grayscale hover:grayscale-0 transition-all duration-300">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/1/17/MSI_logo.svg" alt="MSI" class="h-8">
                </div>
            </div>
        </div>
    </section>

<section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12">What Our Customers Say</h2>
            
            <div class="relative">
                <div class="testimonial-carousel flex space-x-6 overflow-x-auto pb-6 -mx-4 px-4 scrollbar-hide">
                    
                    <div class="testimonial-slide flex-shrink-0 w-full md:w-1/2 lg:w-1/3 px-4">
                        <div class="bg-white p-6 rounded-lg shadow-sm h-full">
                            <div class="flex items-center mb-4">
                                <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4">
                                    <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Customer" class="w-full h-full object-cover">
                                </div>
                                <div>
                                    <h4 class="font-semibold">Sarah Johnson</h4>
                                    <div class="flex text-yellow-400 text-sm">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </div>
                            </div>
                            <p class="text-gray-600">"The gaming PC I purchased exceeded all my expectations. The build quality is exceptional and the performance is mind-blowing. Customer support was also very helpful when I had questions about setup."</p>
                        </div>
                    </div>
                    
                    
                    <div class="testimonial-slide flex-shrink-0 w-full md:w-1/2 lg:w-1/3 px-4">
                        <div class="bg-white p-6 rounded-lg shadow-sm h-full">
                            <div class="flex items-center mb-4">
                                <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4">
                                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer" class="w-full h-full object-cover">
                                </div>
                                <div>
                                    <h4 class="font-semibold">Michael Chen</h4>
                                    <div class="flex text-yellow-400 text-sm">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </div>
                            </div>
                            <p class="text-gray-600">"As a video editor, I needed a powerful workstation. PowerTech helped me customize the perfect machine for my needs. The 2-year warranty gives me peace of mind for my business."</p>
                        </div>
                    </div>
                    
                    
                    <div class="testimonial-slide flex-shrink-0 w-full md:w-1/2 lg:w-1/3 px-4">
                        <div class="bg-white p-6 rounded-lg shadow-sm h-full">
                            <div class="flex items-center mb-4">
                                <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4">
                                    <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Customer" class="w-full h-full object-cover">
                                </div>
                                <div>
                                    <h4 class="font-semibold">Emily Rodriguez</h4>
                                    <div class="flex text-yellow-400 text-sm">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star-half-alt"></i>
                                    </div>
                                </div>
                            </div>
                            <p class="text-gray-600">"I was hesitant to buy a laptop online, but the detailed product descriptions and real customer reviews helped me choose the right one. Free shipping was fast and the laptop arrived perfectly packaged."</p>
                        </div>
                    </div>
                </div>
                
                <div class="flex justify-center mt-8 space-x-2">
                    <button class="testimonial-prev w-8 h-8 rounded-full bg-gray-200 hover:bg-gray-300 flex items-center justify-center">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="testimonial-next w-8 h-8 rounded-full bg-gray-200 hover:bg-gray-300 flex items-center justify-center">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </section>

<section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12">Tech Insights</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <article class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300">
                    <div class="relative pt-[56.25%]">
                        <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Blog" class="absolute inset-0 w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <span class="text-sm text-blue-600 font-medium">Buying Guide</span>
                        <h3 class="text-xl font-bold my-2">How to Choose the Right Laptop for Gaming</h3>
                        <p class="text-gray-600 mb-4">Learn what specs matter most for gaming laptops and how to get the best performance for your budget.</p>
                        <a href="#" class="text-blue-600 font-medium hover:text-blue-800 inline-flex items-center">
                            Read More <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </article>
                
                
                <article class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300">
                    <div class="relative pt-[56.25%]">
                        <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Blog" class="absolute inset-0 w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <span class="text-sm text-blue-600 font-medium">Comparison</span>
                        <h3 class="text-xl font-bold my-2">Desktop vs. Laptop – What's Best for You?</h3>
                        <p class="text-gray-600 mb-4">We compare the pros and cons of desktops and laptops to help you decide which suits your needs better.</p>
                        <a href="#" class="text-blue-600 font-medium hover:text-blue-800 inline-flex items-center">
                            Read More <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </article>
                
                
                <article class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300">
                    <div class="relative pt-[56.25%]">
                        <img src="https://images.unsplash.com/photo-1629131726692-1accd0c53ce0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Blog" class="absolute inset-0 w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <span class="text-sm text-blue-600 font-medium">Technology</span>
                        <h3 class="text-xl font-bold my-2">The Future of Computing: What to Expect in 2024</h3>
                        <p class="text-gray-600 mb-4">From AI integration to quantum computing, explore the technologies that will shape the future of PCs.</p>
                        <a href="#" class="text-blue-600 font-medium hover:text-blue-800 inline-flex items-center">
                            Read More <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </article>
            </div>
            
            <div class="text-center mt-12">
                <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded font-medium">
                    View All Articles
                </a>
            </div>
        </div>
    </section>

<section class="py-16 bg-gray-900 text-white">
        <div class="container mx-auto px-4">
            <div class="max-w-4xl mx-auto">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold mb-4">Need Help Choosing?</h2>
                    <p class="text-xl text-gray-300 max-w-2xl mx-auto">Our experts are ready to help you find the perfect computer for your needs.</p>
                </div>
                
                <form class="modul-form grid grid-cols-1 md:grid-cols-2 gap-6 bg-gray-800 p-8 rounded-lg">
                    <div class="md:col-span-2">
                        <label class="block text-gray-300 mb-2">What type of device are you looking for?</label>
                        <select class="w-full bg-gray-700 border border-gray-600 rounded px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">Select a category</option>
                            <option value="laptop">Laptop</option>
                            <option value="desktop">Desktop PC</option>
                            <option value="workstation">Workstation</option>
                            <option value="gaming">Gaming PC</option>
                            <option value="accessories">Accessories</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-gray-300 mb-2">Brand Preference</label>
                        <select class="w-full bg-gray-700 border border-gray-600 rounded px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">Any brand</option>
                            <option value="apple">Apple</option>
                            <option value="asus">ASUS</option>
                            <option value="dell">Dell</option>
                            <option value="hp">HP</option>
                            <option value="lenovo">Lenovo</option>
                            <option value="msi">MSI</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-gray-300 mb-2">Budget Range</label>
                        <select class="w-full bg-gray-700 border border-gray-600 rounded px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">Select budget</option>
                            <option value="500-1000">$500 - $1,000</option>
                            <option value="1000-1500">$1,000 - $1,500</option>
                            <option value="1500-2500">$1,500 - $2,500</option>
                            <option value="2500+">$2,500+</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-gray-300 mb-2">Your Name</label>
                        <input type="text" class="w-full bg-gray-700 border border-gray-600 rounded px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    
                    <div>
                        <label class="block text-gray-300 mb-2">Email Address</label>
                        <input type="email" class="w-full bg-gray-700 border border-gray-600 rounded px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    
                    <div class="md:col-span-2">
                        <label class="block text-gray-300 mb-2">How can we help?</label>
                        <input rows="4" class="w-full bg-gray-700 border border-gray-600 rounded px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500"/>
                    </div>
                    
                    <div class="md:col-span-2">
                        <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded font-medium">
                            Get Expert Advice
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>

<footer class="bg-gray-800 text-white pt-16 pb-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                
                <div>
                    <h3 class="text-xl font-bold mb-4">PowerTech</h3>
                    <p class="text-gray-400 mb-4">Your trusted source for premium computers and technology solutions since 2010.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-blue-600">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-blue-400">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-red-600">
                            <i class="fab fa-youtube"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-purple-600">
                            <i class="fab fa-instagram"></i>
                        </a>
                    </div>
                </div>
                
                
                <div>
                    <h3 class="text-lg font-semibold mb-4">Shop</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">Laptops</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Desktops</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Gaming PCs</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Workstations</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Monitors</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Accessories</a></li>
                    </ul>
                </div>
                
                
                <div>
                    <h3 class="text-lg font-semibold mb-4">Support</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">FAQs</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Shipping Policy</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Return Policy</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Warranty Information</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Track Order</a></li>
                    </ul>
                </div>
                
                
                <div>
                    <h3 class="text-lg font-semibold mb-4">Newsletter</h3>
                    <p class="text-gray-400 mb-4">Subscribe to get updates on new products and special offers.</p>
                    <form class="flex">
                        <input type="email" placeholder="Your email" class="bg-gray-700 text-white px-4 py-2 rounded-l focus:outline-none focus:ring-2 focus:ring-blue-500 w-full">
                        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </form>
                </div>
            </div>
            
            <div class="border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-400 mb-4 md:mb-0">© 2023 PowerTech. All rights reserved.</p>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
                    <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
                    <a href="#" class="text-gray-400 hover:text-white">Sitemap</a>
                </div>
            </div>
        </div>
    </footer>

अनुशंसित

ब्लॉगियम: प्रौद्योगिकी, डिज़ाइन और जीवन ब्लॉग HTML टेम्पलेट

क्रिएटिव ब्लॉग: डिज़ाइन, पॉडकास्ट और पोर्टफोलियो HTML

मूल्य निर्धारण इंटरैक्शन (HTML, CSS और JS)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS