<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Landing Page with JSON Data</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
rel="stylesheet"
/>
<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
></script>
</head>
<body class="bg-gray-100 text-gray-800">
<!-- Navbar -->
<header class="bg-white shadow-md sticky top-0 z-50">
<div class="container mx-auto flex justify-between items-center p-4">
<div class="logo text-xl font-bold">MyLogo</div>
<a
href="tel:+12345678"
class="bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700"
>
Contact Us
</a>
</div>
</header>
<!-- Search Bar and Gadgets Section -->
<section class="container mx-auto my-6 p-4" x-data="gadgetList()">
<!-- Search Bar -->
<div class="relative mb-8">
<input
type="text"
placeholder="Search for items..."
x-model="searchQuery"
class="w-full p-3 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-600"
/>
<i
class="fas fa-search absolute right-5 top-1/2 -translate-y-1/2 text-blue-600"
></i>
</div>
<!-- Gadgets Items -->
<h2 class="text-2xl font-bold mb-4">Browse All Items</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<template x-if="filteredGadgets.length === 0">
<p class="col-span-full text-center text-gray-500">No items found.</p>
</template>
<template x-for="gadget in filteredGadgets" :key="gadget.name">
<div
class="bg-white p-4 rounded-lg shadow hover:shadow-lg transition"
>
<img
:src="gadget.image"
alt="Gadget"
class="w-full h-40 object-cover rounded-md mb-4"
/>
<h3 class="text-lg font-semibold" x-text="gadget.name"></h3>
<p class="text-gray-600" x-text="gadget.descrip"></p>
<p
class="text-blue-600 font-bold mt-2"
x-text="`Price: $${gadget.price}`"
></p>
<button
type="button"
class="mt-3 bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700"
>
Buy Now
</button>
</div>
</template>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-6">
<div class="container mx-auto flex flex-col items-center">
<div class="mb-4">
<a
href="https://www.facebook.com"
target="_blank"
class="text-blue-400 mx-2"
>Facebook</a
>
<a href="https://www.x.com" target="_blank" class="text-blue-400 mx-2"
>Twitter</a
>
<a
href="https://www.instagram.com"
target="_blank"
class="text-blue-400 mx-2"
>Instagram</a
>
<a
href="https://www.linkedin.com"
target="_blank"
class="text-blue-400 mx-2"
>LinkedIn</a
>
</div>
<p class="text-sm">© 2025 Your Company. All rights reserved.</p>
</div>
</footer>
<script>
function gadgetList() {
return {
searchQuery: "",
gadgets: [
{
name: "Iphone 14",
image: "https://via.placeholder.com/150",
price: 400,
descrip:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
},
{
name: "Samsung Galaxy S23",
image: "https://via.placeholder.com/150",
price: 350,
descrip: "A powerful smartphone with cutting-edge features.",
},
{
name: "MacBook Pro",
image: "https://via.placeholder.com/150",
price: 1200,
descrip: "High-performance laptop for professionals.",
},
{
name: "Sony Headphones",
image: "https://via.placeholder.com/150",
price: 150,
descrip: "Noise-cancelling over-ear headphones.",
},
{
name: "Apple Watch",
image: "https://via.placeholder.com/150",
price: 300,
descrip: "Smartwatch with advanced health features.",
},
{
name: "GoPro Camera",
image: "https://via.placeholder.com/150",
price: 250,
descrip: "Action camera for capturing adventures.",
},
{
name: "Amazon Echo",
image: "https://via.placeholder.com/150",
price: 100,
descrip: "Smart speaker with Alexa voice assistant.",
},
{
name: "Xbox Series X",
image: "https://via.placeholder.com/150",
price: 500,
descrip: "Next-gen gaming console.",
},
{
name: "DJI Drone",
image: "https://via.placeholder.com/150",
price: 800,
descrip: "Capture stunning aerial footage.",
},
{
name: "Kindle Paperwhite",
image: "https://via.placeholder.com/150",
price: 130,
descrip: "E-reader with a glare-free display.",
},
],
get filteredGadgets() {
if (!this.searchQuery) return this.gadgets;
return this.gadgets.filter((gadget) =>
gadget.name.toLowerCase().includes(this.searchQuery.toLowerCase())
);
},
};
}
</script>
</body>
</html>