diff options
Diffstat (limited to 'examples/server-islands/src')
| -rw-r--r-- | examples/server-islands/src/base.css | 32 | ||||
| -rw-r--r-- | examples/server-islands/src/cart.ts | 20 | ||||
| -rw-r--r-- | examples/server-islands/src/components/AddToCart.tsx | 27 | ||||
| -rw-r--r-- | examples/server-islands/src/components/CartCount.tsx | 14 | ||||
| -rw-r--r-- | examples/server-islands/src/components/PersonalBar.astro | 36 | ||||
| -rw-r--r-- | examples/server-islands/src/pages/index.astro | 678 |
6 files changed, 0 insertions, 807 deletions
diff --git a/examples/server-islands/src/base.css b/examples/server-islands/src/base.css deleted file mode 100644 index d0ae7cae4..000000000 --- a/examples/server-islands/src/base.css +++ /dev/null @@ -1,32 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); - -@tailwind base; -@tailwind components; -@tailwind utilities; - -@layer base { - body { - @apply font-poppins; - } - h1, - h2, - h3, - h4, - h5, - h6 { - @apply font-roboto; - } -} - -@layer components { - .size-selector input:checked + label { - @apply bg-primary text-white; - } - .color-selector input:checked + label { - @apply ring-2 ring-primary; - } - - .input-box { - @apply block w-full border border-gray-300 px-4 py-3 text-gray-600 text-sm rounded placeholder-gray-400 focus:border-primary focus:ring-0; - } -} diff --git a/examples/server-islands/src/cart.ts b/examples/server-islands/src/cart.ts deleted file mode 100644 index 355074a38..000000000 --- a/examples/server-islands/src/cart.ts +++ /dev/null @@ -1,20 +0,0 @@ - -const channel = new MessageChannel(); - -function onNewCartItem(cb: (m: any) => void) { - let onMessage = (ev: MessageEvent) => { - cb(ev.data); - }; - channel.port2.addEventListener('message', onMessage); - channel.port2.start(); - return () => channel.port2.removeEventListener('message', onMessage); -} - -function addToCart(item: any) { - channel.port1.postMessage(item); -} - -export { - onNewCartItem, - addToCart -} diff --git a/examples/server-islands/src/components/AddToCart.tsx b/examples/server-islands/src/components/AddToCart.tsx deleted file mode 100644 index 5fcfc4eaa..000000000 --- a/examples/server-islands/src/components/AddToCart.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { addToCart } from '../cart'; - -export default function({ small }) { - function onClick(ev: Event) { - ev.preventDefault(); - let item = { name: 'Sofa' }; - addToCart(item); - - } - - if(small) { - return ( - <a href="#" - onClick={onClick} - className="block w-full py-1 text-center text-white bg-primary border border-primary rounded-b hover:bg-transparent hover:text-primary transition">Add - to cart</a> - ) - } - - return ( - <a href="#" - onClick={onClick} - className="bg-primary border border-primary text-white px-8 py-2 font-medium rounded uppercase flex items-center gap-2 hover:bg-transparent hover:text-primary transition"> - <i className="fa-solid fa-bag-shopping"></i> Add to cart - </a> - ) -} diff --git a/examples/server-islands/src/components/CartCount.tsx b/examples/server-islands/src/components/CartCount.tsx deleted file mode 100644 index 5c3d3e392..000000000 --- a/examples/server-islands/src/components/CartCount.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { useEffect, useState } from 'react'; -import { onNewCartItem } from '../cart'; - -export default function({ count: initialCount }) { - const [count, setCount] = useState(initialCount); - useEffect(() => { - return onNewCartItem(() => setCount(count + 1)); - }, [count]); - - return ( - <div className="absolute -right-3 -top-1 w-5 h-5 rounded-full flex items-center justify-center bg-primary text-white text-xs"> -{count}</div> - ); -} diff --git a/examples/server-islands/src/components/PersonalBar.astro b/examples/server-islands/src/components/PersonalBar.astro deleted file mode 100644 index afff16d60..000000000 --- a/examples/server-islands/src/components/PersonalBar.astro +++ /dev/null @@ -1,36 +0,0 @@ ---- -import CartCount from './CartCount'; - -const { placeholder } = Astro.props; -let wishlist = 0; -let cart = 0; - -if (!placeholder) { - await new Promise((resolve) => setTimeout(resolve, 3000)); -} ---- - -<a href="#" class="text-center text-gray-700 hover:text-primary transition relative"> - <div class="text-2xl"> - <i class="fa-regular fa-heart"></i> - </div> - <div class="text-xs leading-3">Wishlist</div> - <div - class="absolute right-0 -top-1 w-5 h-5 rounded-full flex items-center justify-center bg-primary text-white text-xs" - > - {wishlist} - </div> -</a> -<a href="#" class="text-center text-gray-700 hover:text-primary transition relative"> - <div class="text-2xl"> - <i class="fa-solid fa-bag-shopping"></i> - </div> - <div class="text-xs leading-3">Cart</div> - <CartCount client:load count={cart} /> -</a> -<a href="#" class="text-center text-gray-700 hover:text-primary transition relative"> - <div class="text-2xl"> - <i class="fa-regular fa-user"></i> - </div> - <div class="text-xs leading-3">Account</div> -</a> diff --git a/examples/server-islands/src/pages/index.astro b/examples/server-islands/src/pages/index.astro deleted file mode 100644 index b12fb0c5e..000000000 --- a/examples/server-islands/src/pages/index.astro +++ /dev/null @@ -1,678 +0,0 @@ ---- -import '../base.css'; -import AddToCart from '../components/AddToCart'; -import PersonalBar from '../components/PersonalBar.astro'; -import '@fortawesome/fontawesome-free/css/all.min.css'; ---- - -<!doctype html> -<html lang="en"> - <head> - <meta charset="UTF-8" /> - <meta http-equiv="X-UA-Compatible" content="IE=edge" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Product - Ecommerce Tailwind</title> - - <link rel="shortcut icon" href="../assets/images/favicon/favicon.ico" type="image/x-icon" /> - - <link rel="preconnect" href="https://fonts.googleapis.com" /> - <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> - <link - href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap" - rel="stylesheet" - /> - </head> - - <body> - <!-- header --> - <header class="py-4 shadow-sm bg-white"> - <div class="container flex items-center justify-between"> - <a href="index.html"> - <img src="../assets/images/logo.svg" alt="Logo" class="w-32" /> - </a> - - <div class="w-full max-w-xl relative flex"> - <span class="absolute left-4 top-3 text-lg text-gray-400"> - <i class="fa-solid fa-magnifying-glass"></i> - </span> - <input - type="text" - name="search" - id="search" - class="w-full border border-primary border-r-0 pl-12 py-3 pr-3 rounded-l-md focus:outline-none" - placeholder="search" - /> - <button - class="bg-primary border border-primary text-white px-8 rounded-r-md hover:bg-transparent hover:text-primary transition" - >Search</button - > - </div> - - <div class="flex items-center space-x-4"> - <PersonalBar server:defer> - <PersonalBar placeholder slot="fallback" /> - </PersonalBar> - </div> - </div> - </header> - <!-- ./header --> - - <!-- navbar --> - <nav class="bg-gray-800"> - <div class="container flex"> - <div class="px-8 py-4 bg-primary flex items-center cursor-pointer relative group"> - <span class="text-white"> - <i class="fa-solid fa-bars"></i> - </span> - <span class="capitalize ml-2 text-white">All Categories</span> - - <!-- dropdown --> - <div - class="absolute w-full left-0 top-full bg-white shadow-md py-3 divide-y divide-gray-300 divide-dashed opacity-0 group-hover:opacity-100 transition duration-300 invisible group-hover:visible" - > - <a href="#" class="flex items-center px-6 py-3 hover:bg-gray-100 transition"> - <img - src="../assets/images/icons/sofa.svg" - alt="sofa" - class="w-5 h-5 object-contain" - /> - <span class="ml-6 text-gray-600 text-sm">Sofa</span> - </a> - <a href="#" class="flex items-center px-6 py-3 hover:bg-gray-100 transition"> - <img - src="../assets/images/icons/terrace.svg" - alt="terrace" - class="w-5 h-5 object-contain" - /> - <span class="ml-6 text-gray-600 text-sm">Terarce</span> - </a> - <a href="#" class="flex items-center px-6 py-3 hover:bg-gray-100 transition"> - <img src="../assets/images/icons/bed.svg" alt="bed" class="w-5 h-5 object-contain" /> - <span class="ml-6 text-gray-600 text-sm">Bed</span> - </a> - <a href="#" class="flex items-center px-6 py-3 hover:bg-gray-100 transition"> - <img - src="../assets/images/icons/office.svg" - alt="office" - class="w-5 h-5 object-contain" - /> - <span class="ml-6 text-gray-600 text-sm">office</span> - </a> - <a href="#" class="flex items-center px-6 py-3 hover:bg-gray-100 transition"> - <img - src="../assets/images/icons/outdoor-cafe.svg" - alt="outdoor" - class="w-5 h-5 object-contain" - /> - <span class="ml-6 text-gray-600 text-sm">Outdoor</span> - </a> - <a href="#" class="flex items-center px-6 py-3 hover:bg-gray-100 transition"> - <img - src="../assets/images/icons/bed-2.svg" - alt="Mattress" - class="w-5 h-5 object-contain" - /> - <span class="ml-6 text-gray-600 text-sm">Mattress</span> - </a> - </div> - </div> - - <div class="flex items-center justify-between flex-grow pl-12"> - <div class="flex items-center space-x-6 capitalize"> - <a href="../index.html" class="text-gray-200 hover:text-white transition">Home</a> - <a href="pages/shop.html" class="text-gray-200 hover:text-white transition">Shop</a> - <a href="#" class="text-gray-200 hover:text-white transition">About us</a> - <a href="#" class="text-gray-200 hover:text-white transition">Contact us</a> - </div> - <a href="#" class="text-gray-200 hover:text-white transition">Login/Register</a> - </div> - </div> - </nav> - <!-- ./navbar --> - - <!-- breadcrumb --> - <div class="container py-4 flex items-center gap-3"> - <a href="../index.html" class="text-primary text-base"> - <i class="fa-solid fa-house"></i> - </a> - <span class="text-sm text-gray-400"> - <i class="fa-solid fa-chevron-right"></i> - </span> - <p class="text-gray-600 font-medium">Product</p> - </div> - <!-- ./breadcrumb --> - - <!-- product-detail --> - <div class="container grid grid-cols-2 gap-6"> - <div> - <img src="../assets/images/products/product1.jpg" alt="product" class="w-full" /> - <div class="grid grid-cols-5 gap-4 mt-4"> - <img - src="../assets/images/products/product2.jpg" - alt="product2" - class="w-full cursor-pointer border border-primary" - /> - <img - src="../assets/images/products/product3.jpg" - alt="product2" - class="w-full cursor-pointer border" - /> - <img - src="../assets/images/products/product4.jpg" - alt="product2" - class="w-full cursor-pointer border" - /> - <img - src="../assets/images/products/product5.jpg" - alt="product2" - class="w-full cursor-pointer border" - /> - <img - src="../assets/images/products/product6.jpg" - alt="product2" - class="w-full cursor-pointer border" - /> - </div> - </div> - - <div> - <h2 class="text-3xl font-medium uppercase mb-2">Italian L Shape Sofa</h2> - <div class="flex items-center mb-4"> - <div class="flex gap-1 text-sm text-yellow-400"> - <span><i class="fa-solid fa-star"></i></span> - <span><i class="fa-solid fa-star"></i></span> - <span><i class="fa-solid fa-star"></i></span> - <span><i class="fa-solid fa-star"></i></span> - <span><i class="fa-solid fa-star"></i></span> - </div> - <div class="text-xs text-gray-500 ml-3">(150 Reviews)</div> - </div> - <div class="space-y-2"> - <p class="text-gray-800 font-semibold space-x-2"> - <span>Availability: </span> - <span class="text-green-600">In Stock</span> - </p> - <p class="space-x-2"> - <span class="text-gray-800 font-semibold">Brand: </span> - <span class="text-gray-600">Apex</span> - </p> - <p class="space-x-2"> - <span class="text-gray-800 font-semibold">Category: </span> - <span class="text-gray-600">Sofa</span> - </p> - <p class="space-x-2"> - <span class="text-gray-800 font-semibold">SKU: </span> - <span class="text-gray-600">BE45VGRT</span> - </p> - </div> - <div class="flex items-baseline mb-1 space-x-2 font-roboto mt-4"> - <p class="text-xl text-primary font-semibold">$45.00</p> - <p class="text-base text-gray-400 line-through">$55.00</p> - </div> - - <p class="mt-4 text-gray-600"> - Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos eius eum reprehenderit dolore - vel mollitia optio consequatur hic asperiores inventore suscipit, velit consequuntur, - voluptate doloremque iure necessitatibus adipisci magnam porro. - </p> - - <div class="pt-4"> - <h3 class="text-sm text-gray-800 uppercase mb-1">Size</h3> - <div class="flex items-center gap-2"> - <div class="size-selector"> - <input type="radio" name="size" id="size-xs" class="hidden" /> - <label - for="size-xs" - class="text-xs border border-gray-200 rounded-sm h-6 w-6 flex items-center justify-center cursor-pointer shadow-sm text-gray-600" - >XS</label - > - </div> - <div class="size-selector"> - <input type="radio" name="size" id="size-sm" class="hidden" /> - <label - for="size-sm" - class="text-xs border border-gray-200 rounded-sm h-6 w-6 flex items-center justify-center cursor-pointer shadow-sm text-gray-600" - >S</label - > - </div> - <div class="size-selector"> - <input type="radio" name="size" id="size-m" class="hidden" /> - <label - for="size-m" - class="text-xs border border-gray-200 rounded-sm h-6 w-6 flex items-center justify-center cursor-pointer shadow-sm text-gray-600" - >M</label - > - </div> - <div class="size-selector"> - <input type="radio" name="size" id="size-l" class="hidden" /> - <label - for="size-l" - class="text-xs border border-gray-200 rounded-sm h-6 w-6 flex items-center justify-center cursor-pointer shadow-sm text-gray-600" - >L</label - > - </div> - <div class="size-selector"> - <input type="radio" name="size" id="size-xl" class="hidden" /> - <label - for="size-xl" - class="text-xs border border-gray-200 rounded-sm h-6 w-6 flex items-center justify-center cursor-pointer shadow-sm text-gray-600" - >XL</label - > - </div> - </div> - </div> - - <div class="pt-4"> - <h3 class="text-xl text-gray-800 mb-3 uppercase font-medium">Color</h3> - <div class="flex items-center gap-2"> - <div class="color-selector"> - <input type="radio" name="color" id="red" class="hidden" /> - <label - for="red" - class="border border-gray-200 rounded-sm h-6 w-6 cursor-pointer shadow-sm block" - style="background-color: #fc3d57;"></label> - </div> - <div class="color-selector"> - <input type="radio" name="color" id="black" class="hidden" /> - <label - for="black" - class="border border-gray-200 rounded-sm h-6 w-6 cursor-pointer shadow-sm block" - style="background-color: #000;"></label> - </div> - <div class="color-selector"> - <input type="radio" name="color" id="white" class="hidden" /> - <label - for="white" - class="border border-gray-200 rounded-sm h-6 w-6 cursor-pointer shadow-sm block" - style="background-color: #fff;"></label> - </div> - </div> - </div> - - <div class="mt-4"> - <h3 class="text-sm text-gray-800 uppercase mb-1">Quantity</h3> - <div class="flex border border-gray-300 text-gray-600 divide-x divide-gray-300 w-max"> - <div - class="h-8 w-8 text-xl flex items-center justify-center cursor-pointer select-none" - > - - - </div> - <div class="h-8 w-8 text-base flex items-center justify-center">4</div> - <div - class="h-8 w-8 text-xl flex items-center justify-center cursor-pointer select-none" - > - + - </div> - </div> - </div> - - <div class="mt-6 flex gap-3 border-b border-gray-200 pb-5 pt-5"> - <AddToCart client:load /> - <a - href="#" - class="border border-gray-300 text-gray-600 px-8 py-2 font-medium rounded uppercase flex items-center gap-2 hover:text-primary transition" - > - <i class="fa-solid fa-heart"></i> Wishlist - </a> - </div> - - <div class="flex gap-3 mt-4"> - <a - href="#" - class="text-gray-400 hover:text-gray-500 h-8 w-8 rounded-full border border-gray-300 flex items-center justify-center" - > - <i class="fa-brands fa-facebook-f"></i> - </a> - <a - href="#" - class="text-gray-400 hover:text-gray-500 h-8 w-8 rounded-full border border-gray-300 flex items-center justify-center" - > - <i class="fa-brands fa-twitter"></i> - </a> - <a - href="#" - class="text-gray-400 hover:text-gray-500 h-8 w-8 rounded-full border border-gray-300 flex items-center justify-center" - > - <i class="fa-brands fa-instagram"></i> - </a> - </div> - </div> - </div> - <!-- ./product-detail --> - - <!-- description --> - <div class="container pb-16"> - <h3 class="border-b border-gray-200 font-roboto text-gray-800 pb-3 font-medium"> - Product details - </h3> - <div class="w-3/5 pt-6"> - <div class="text-gray-600"> - <p> - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur necessitatibus - deleniti natus dolore cum maiores suscipit optio itaque voluptatibus veritatis tempora - iste facilis non aut sapiente dolor quisquam, ex ab. - </p> - <p> - Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, quae accusantium - voluptatem blanditiis sapiente voluptatum. Autem ab, dolorum assumenda earum veniam eius - illo fugiat possimus illum dolor totam, ducimus excepturi. - </p> - <p> - Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quia modi ut expedita! - Iure molestiae labore cumque nobis quasi fuga, quibusdam rem? Temporibus consectetur - corrupti rerum veritatis numquam labore amet. - </p> - </div> - - <table class="table-auto border-collapse w-full text-left text-gray-600 text-sm mt-6"> - <tr> - <th class="py-2 px-4 border border-gray-300 w-40 font-medium">Color</th> - <th class="py-2 px-4 border border-gray-300">Blank, Brown, Red</th> - </tr> - <tr> - <th class="py-2 px-4 border border-gray-300 w-40 font-medium">Material</th> - <th class="py-2 px-4 border border-gray-300">Latex</th> - </tr> - <tr> - <th class="py-2 px-4 border border-gray-300 w-40 font-medium">Weight</th> - <th class="py-2 px-4 border border-gray-300">55kg</th> - </tr> - </table> - </div> - </div> - <!-- ./description --> - - <!-- related product --> - <div class="container pb-16"> - <h2 class="text-2xl font-medium text-gray-800 uppercase mb-6">Related products</h2> - <div class="grid grid-cols-4 gap-6"> - <div class="bg-white shadow rounded overflow-hidden group"> - <div class="relative"> - <img src="../assets/images/products/product1.jpg" alt="product 1" class="w-full" /> - <div - class="absolute inset-0 bg-black bg-opacity-40 flex items-center - justify-center gap-2 opacity-0 group-hover:opacity-100 transition" - > - <a - href="#" - class="text-white text-lg w-9 h-8 rounded-full bg-primary flex items-center justify-center hover:bg-gray-800 transition" - title="view product" - > - <i class="fa-solid fa-magnifying-glass"></i> - </a> - <a - href="#" - class="text-white text-lg w-9 h-8 rounded-full bg-primary flex items-center justify-center hover:bg-gray-800 transition" - title="add to wishlist" - > - <i class="fa-solid fa-heart"></i> - </a> - </div> - </div> - <div class="pt-4 pb-3 px-4"> - <a href="#"> - <h4 - class="uppercase font-medium text-xl mb-2 text-gray-800 hover:text-primary transition" - > - Guyer Chair - </h4> - </a> - <div class="flex items-baseline mb-1 space-x-2"> - <p class="text-xl text-primary font-semibold">$45.00</p> - <p class="text-sm text-gray-400 line-through">$55.90</p> - </div> - <div class="flex items-center"> - <div class="flex gap-1 text-sm text-yellow-400"> - <span><i class="fa-solid fa-star"></i></span> - <span><i class="fa-solid fa-star"></i></span> - <span><i class="fa-solid fa-star"></i></span> - <span><i class="fa-solid fa-star"></i></span> - <span><i class="fa-solid fa-star"></i></span> - </div> - <div class="text-xs text-gray-500 ml-3">(150)</div> - </div> - </div> - <AddToCart small client:load /> - </div> - <div class="bg-white shadow rounded overflow-hidden group"> - <div class="relative"> - <img src="../assets/images/products/product4.jpg" alt="product 1" class="w-full" /> - <div - class="absolute inset-0 bg-black bg-opacity-40 flex items-center - justify-center gap-2 opacity-0 group-hover:opacity-100 transition" - > - <a - href="#" - class="text-white text-lg w-9 h-8 rounded-full bg-primary flex items-center justify-center hover:bg-gray-800 transition" - title="view product" - > - <i class="fa-solid fa-magnifying-glass"></i> - </a> - <a - href="#" - class="text-white text-lg w-9 h-8 rounded-full bg-primary flex items-center justify-center hover:bg-gray-800 transition" - title="add to wishlist" - > - <i class="fa-solid fa-heart"></i> - </a> - </div> - </div> - <div class="pt-4 pb-3 px-4"> - <a href="#"> - <h4 - class="uppercase font-medium text-xl mb-2 text-gray-800 hover:text-primary transition" - > - Bed King Size - </h4> - </a> - <div class="flex items-baseline mb-1 space-x-2"> - <p class="text-xl text-primary font-semibold">$45.00</p> - <p class="text-sm text-gray-400 line-through">$55.90</p> - </div> - <div class="flex items-center"> - <div class="flex gap-1 text-sm text-yellow-400"> - <span><i class="fa-solid fa-star"></i></span> - <span><i class="fa-solid fa-star"></i></span> - <span><i class="fa-solid fa-star"></i></span> - <span><i class="fa-solid fa-star"></i></span> - <span><i class="fa-solid fa-star"></i></span> - </div> - <div class="text-xs text-gray-500 ml-3">(150)</div> - </div> - </div> - <AddToCart small client:load /> - </div> - <div class="bg-white shadow rounded overflow-hidden group"> - <div class="relative"> - <img src="../assets/images/products/product2.jpg" alt="product 1" class="w-full" /> - <div - class="absolute inset-0 bg-black bg-opacity-40 flex items-center - justify-center gap-2 opacity-0 group-hover:opacity-100 transition" - > - <a - href="#" - class="text-white text-lg w-9 h-8 rounded-full bg-primary flex items-center justify-center hover:bg-gray-800 transition" - title="view product" - > - <i class="fa-solid fa-magnifying-glass"></i> - </a> - <a - href="#" - class="text-white text-lg w-9 h-8 rounded-full bg-primary flex items-center justify-center hover:bg-gray-800 transition" - title="add to wishlist" - > - <i class="fa-solid fa-heart"></i> - </a> - </div> - </div> - <div class="pt-4 pb-3 px-4"> - <a href="#"> - <h4 - class="uppercase font-medium text-xl mb-2 text-gray-800 hover:text-primary transition" - > - Couple Sofa - </h4> - </a> - <div class="flex items-baseline mb-1 space-x-2"> - <p class="text-xl text-primary font-semibold">$45.00</p> - <p class="text-sm text-gray-400 line-through">$55.90</p> - </div> - <div class="flex items-center"> - <div class="flex gap-1 text-sm text-yellow-400"> - <span><i class="fa-solid fa-star"></i></span> - <span><i class="fa-solid fa-star"></i></span> - <span><i class="fa-solid fa-star"></i></span> - <span><i class="fa-solid fa-star"></i></span> - <span><i class="fa-solid fa-star"></i></span> - </div> - <div class="text-xs text-gray-500 ml-3">(150)</div> - </div> - </div> - <AddToCart small client:load /> - </div> - <div class="bg-white shadow rounded overflow-hidden group"> - <div class="relative"> - <img src="../assets/images/products/product3.jpg" alt="product 1" class="w-full" /> - <div - class="absolute inset-0 bg-black bg-opacity-40 flex items-center - justify-center gap-2 opacity-0 group-hover:opacity-100 transition" - > - <a - href="#" - class="text-white text-lg w-9 h-8 rounded-full bg-primary flex items-center justify-center hover:bg-gray-800 transition" - title="view product" - > - <i class="fa-solid fa-magnifying-glass"></i> - </a> - <a - href="#" - class="text-white text-lg w-9 h-8 rounded-full bg-primary flex items-center justify-center hover:bg-gray-800 transition" - title="add to wishlist" - > - <i class="fa-solid fa-heart"></i> - </a> - </div> - </div> - <div class="pt-4 pb-3 px-4"> - <a href="#"> - <h4 - class="uppercase font-medium text-xl mb-2 text-gray-800 hover:text-primary transition" - > - Mattrass X - </h4> - </a> - <div class="flex items-baseline mb-1 space-x-2"> - <p class="text-xl text-primary font-semibold">$45.00</p> - <p class="text-sm text-gray-400 line-through">$55.90</p> - </div> - <div class="flex items-center"> - <div class="flex gap-1 text-sm text-yellow-400"> - <span><i class="fa-solid fa-star"></i></span> - <span><i class="fa-solid fa-star"></i></span> - <span><i class="fa-solid fa-star"></i></span> - <span><i class="fa-solid fa-star"></i></span> - <span><i class="fa-solid fa-star"></i></span> - </div> - <div class="text-xs text-gray-500 ml-3">(150)</div> - </div> - </div> - <AddToCart small client:load /> - </div> - </div> - </div> - <!-- ./related product --> - - <!-- footer --> - <footer class="bg-white pt-16 pb-12 border-t border-gray-100"> - <div class="container grid grid-cols-3"> - <div class="col-span-1 space-y-8 mr-2"> - <img src="../assets/images/logo.svg" alt="logo" class="w-30" /> - <div class="mr-2"> - <p class="text-gray-500"> - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, hic? - </p> - </div> - <div class="flex space-x-6"> - <a href="#" class="text-gray-400 hover:text-gray-500" - ><i class="fa-brands fa-facebook-square"></i></a - > - <a href="#" class="text-gray-400 hover:text-gray-500" - ><i class="fa-brands fa-instagram-square"></i></a - > - <a href="#" class="text-gray-400 hover:text-gray-500" - ><i class="fa-brands fa-twitter-square"></i></a - > - <a href="#" class="text-gray-400 hover:text-gray-500"> - <i class="fa-brands fa-github-square"></i> - </a> - </div> - </div> - - <div class="col-span-2 grid grid-cols-2 gap-8"> - <div class="grid grid-cols-2 gap-8"> - <div> - <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider"> - Solutions - </h3> - <div class="mt-4 space-y-4"> - <a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Marketing</a> - <a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Analitycs</a> - <a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Commerce</a> - <a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Insights</a> - </div> - </div> - - <div> - <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">Support</h3> - <div class="mt-4 space-y-4"> - <a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Pricing</a> - <a href="#" class="text-base text-gray-500 hover:text-gray-900 block" - >Documentation</a - > - <a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Guides</a> - <a href="#" class="text-base text-gray-500 hover:text-gray-900 block">API Status</a> - </div> - </div> - </div> - <div class="grid grid-cols-2 gap-8"> - <div> - <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider"> - Solutions - </h3> - <div class="mt-4 space-y-4"> - <a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Marketing</a> - <a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Analitycs</a> - <a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Commerce</a> - <a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Insights</a> - </div> - </div> - - <div> - <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">Support</h3> - <div class="mt-4 space-y-4"> - <a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Pricing</a> - <a href="#" class="text-base text-gray-500 hover:text-gray-900 block" - >Documentation</a - > - <a href="#" class="text-base text-gray-500 hover:text-gray-900 block">Guides</a> - <a href="#" class="text-base text-gray-500 hover:text-gray-900 block">API Status</a> - </div> - </div> - </div> - </div> - </div> - </footer> - <!-- ./footer --> - - <!-- copyright --> - <div class="bg-gray-800 py-4"> - <div class="container flex items-center justify-between"> - <p class="text-white">© TailCommerce - All Right Reserved</p> - <div> - <img src="../assets/images/methods.png" alt="methods" class="h-5" /> - </div> - </div> - </div> - <!-- ./copyright --> - </body> -</html> |