AMD11/shopsphere-php-powerhouse
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>ShopSphere - Your Ultimate Shopping Destination</title>7 <!-- Bootstrap 5 CSS -->8 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">9 <!-- Font Awesome -->10 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">11 <link rel="stylesheet" href="style.css">12</head>13<body>14 <!-- Navigation Component -->15 <custom-navbar></custom-navbar>16 17 <!-- Hero Section -->18 <section class="hero-section py-5">19 <div class="container">20 <div class="row align-items-center">21 <div class="col-md-6">22 <h1 class="display-4 fw-bold mb-4">Welcome to ShopSphere</h1>23 <p class="lead mb-4">Discover amazing products at unbeatable prices. Your perfect shopping experience starts here.</p>24 <a href="products.php" class="btn btn-primary btn-lg px-4 me-2">Shop Now</a>25 <a href="#features" class="btn btn-outline-primary btn-lg px-4">Learn More</a>26 </div>27 <div class="col-md-6">28 <img src="http://static.photos/retail/1200x630/42" alt="Shopping" class="img-fluid rounded shadow">29 </div>30 </div>31 </div>32 </section>33 34 <!-- Featured Products -->35 <section class="py-5 bg-light" id="products">36 <div class="container">37 <h2 class="text-center mb-5">Featured Products</h2>38 <div class="row">39 <?php40 // Sample PHP code to fetch products (in a real app, this would come from a database)41 $featuredProducts = [42 ['id' => 1, 'name' => 'Wireless Headphones', 'price' => 99.99, 'image' => 'http://static.photos/technology/320x240/1'],43 ['id' => 2, 'name' => 'Smart Watch', 'price' => 199.99, 'image' => 'http://static.photos/technology/320x240/2'],44 ['id' => 3, 'name' => 'Bluetooth Speaker', 'price' => 59.99, 'image' => 'http://static.photos/technology/320x240/3'],45 ['id' => 4, 'name' => 'Laptop Backpack', 'price' => 49.99, 'image' => 'http://static.photos/office/320x240/4']46 ];47 48 foreach ($featuredProducts as $product) {49 echo '50 <div class="col-md-3 mb-4">51 <div class="card h-100 product-card">52 <img src="' . $product['image'] . '" class="card-img-top" alt="' . $product['name'] . '">53 <div class="card-body">54 <h5 class="card-title">' . $product['name'] . '</h5>55 <p class="card-text text-primary fw-bold">$' . number_format($product['price'], 2) . '</p>56 </div>57 <div class="card-footer bg-transparent">58 <a href="product.php?id=' . $product['id'] . '" class="btn btn-primary w-100">View Details</a>59 </div>60 </div>61 </div>';62 }63 ?>64 </div>65 <div class="text-center mt-4">66 <a href="products.php" class="btn btn-outline-primary">View All Products</a>67 </div>68 </div>69 </section>70 71 <!-- Features Section -->72 <section class="py-5" id="features">73 <div class="container">74 <h2 class="text-center mb-5">Why Choose ShopSphere?</h2>75 <div class="row g-4">76 <div class="col-md-4">77 <div class="feature-card p-4 text-center h-100">78 <i class="fas fa-shipping-fast fa-3x mb-3 text-primary"></i>79 <h3>Fast Shipping</h3>80 <p>Get your products delivered to your doorstep in record time with our express shipping options.</p>81 </div>82 </div>83 <div class="col-md-4">84 <div class="feature-card p-4 text-center h-100">85 <i class="fas fa-shield-alt fa-3x mb-3 text-primary"></i>86 <h3>Secure Payments</h3>87 <p>Shop with confidence using our secure payment gateway that protects your financial information.</p>88 </div>89 </div>90 <div class="col-md-4">91 <div class="feature-card p-4 text-center h-100">92 <i class="fas fa-headset fa-3x mb-3 text-primary"></i>93 <h3>24/7 Support</h3>94 <p>Our customer support team is available round the clock to assist you with any queries.</p>95 </div>96 </div>97 </div>98 </div>99 </section>100 101 <!-- Newsletter -->102 <section class="py-5 bg-primary text-white">103 <div class="container">104 <div class="row justify-content-center">105 <div class="col-md-8 text-center">106 <h2 class="mb-4">Subscribe to Our Newsletter</h2>107 <p class="mb-4">Stay updated with our latest products and exclusive offers.</p>108 <form class="row g-2 justify-content-center">109 <div class="col-md-8">110 <input type="email" class="form-control form-control-lg" placeholder="Your email address">111 </div>112 <div class="col-md-2">113 <button type="submit" class="btn btn-light btn-lg w-100">Subscribe</button>114 </div>115 </form>116 </div>117 </div>118 </div>119 </section>120 121 <!-- Footer Component -->122 <custom-footer></custom-footer>123 124 <!-- Bootstrap JS Bundle with Popper -->125 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>126 <!-- Component Scripts -->127 <script src="components/navbar.js"></script>128 <script src="components/footer.js"></script>129 <script src="script.js"></script>130</body>131</html>132