Categories and orders created and components added (#35)

* Cart, payment, confirmation and error screen created

* fixed template paths

* Favorites Products and Packages Track Created

* Categories and orders created and components added

public/styles/input.css

@@ -2,13 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-    :root {
-        --color-primary: 59 17 151;
-    }
-    body {
-        @apply font-product;
-    }
+.container{
+    width: 95%;
+}
+
+.max-w-6xl{
+    width: 95%;
 }
 
 @font-face {

templates/components/all-categories.html

@@ -0,0 +1,6 @@
+<div class="space-y-3">
+    <div class="bg-gray-100 w-64 h-64 rounded-full flex items-center justify-center">
+        <img src="/templates/img/hp.jpg" alt="Book Image" class="w-40 mx-auto bg-gray-100 block object-contain">
+    </div>
+    <p class="text-fuente text-2xl text-center font-bold">{"Books"}</p>
+</div>

templates/components/categories-offers.html

@@ -0,0 +1,20 @@
+<div class="grid grid-cols-2 mt-10 gap-10">
+    <div>
+        <div class="xl:relative flex items-center justify-between bg-fuente rounded-2xl h-60 p-10">
+            <img src="/templates/img/sneaker_2.png" alt="Sneaker Product" class="xl:absolute xl:top-0 xl:left-0 xl:-translate-x-10 xl:-translate-y-10 block object-contain lg:max-w-56 xl:max-w-full">
+            <p class="lg:text-3xl 2xl:text-6xl lg:text-right xl:text-left text-white font-bold tracking-tighter text-wrap ml-auto xl:max-w-80">
+                {"50% Off Only today!"}
+                <span class="text-xl tracking-normal font-semibold block mt-3 uppercase">{"In evany store"}</span>
+            </p>
+        </div>
+    </div>
+    <div>
+        <div class="relative flex items-center justify-between bg-fuente rounded-2xl h-60 p-10">
+            <img src="/templates/img/iphone.png" alt="iPhone Product" class="absolute top-10 left-10 -translate-x-10 -translate-y-10 block object-contain lg:max-w-40 xl:max-w-52 lg:p-3 xl:p-0">
+            <p class="lg:text-3xl 2xl:text-6xl lg:text-right xl:text-left text-white font-bold tracking-tighter text-wrap ml-auto lg:max-w-80 xl:max-w-[400px]">
+                {"Shop today Receive today!"}
+                <span class="text-xl tracking-normal font-semibold block mt-3 uppercase">{"In mytechy store"}</span>
+            </p>
+        </div>
+    </div>
+</div>

templates/components/favorites-product.html

@@ -1,6 +1,6 @@
 <div class="border border-fuente rounded-2xl p-2 max-w-72 max-h-96 overflow-hidden">
     <div class="relative">
-        <img src="/src/img/tshirt.png" alt="Favorites Image" class="object-contain w-full max-h-52 mx-auto bg-gray-100 rounded-2xl">
+        <img src="/templates/img/tshirt.png" alt="Favorites Image" class="object-contain w-full max-h-52 mx-auto bg-gray-100 rounded-2xl">
         <svg viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 512 512" class="w-7 h-7 absolute top-3 left-3">
             <path d="M429.9 95.6c-40.4-42.1-106-42.1-146.4 0L256 124.1l-27.5-28.6c-40.5-42.1-106-42.1-146.4 0-45.5 47.3-45.5 124.1 0 171.4L256 448l173.9-181c45.5-47.3 45.5-124.1 0-171.4z" fill="#4167e8" class="fill-000000"></path>
         </svg>

templates/components/hot-categories-category.html

@@ -0,0 +1,3 @@
+<div class="bg-fuente-light rounded-2xl flex items-center w-80">
+    <p class="text-white text-6xl font-bold tracking-tighter text-center flex-1">{"Books"}</p>
+</div>

templates/components/hot-categories-image.html

@@ -0,0 +1 @@
+<img src="/templates/img/iphone.png" alt="iPhone Product" class="max-w-32 bg-gray-100 w-full object-cover flex h-full p-5 rounded-2xl">

templates/components/support.html

@@ -0,0 +1,35 @@
+<section class="mt-40 container mx-auto">
+    <div class="grid grid-cols-3 gap-5 bg-gray-100 p-12 rounded-2xl place-items-center">
+        <div class="flex items-center gap-5">
+            <svg viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" class="h-28 w-28 bg-fuente rounded-2xl p-3">
+                <path d="M12.617 22.125A7.002 7.002 0 0 1 9 15.997c0-3.864 3.137-7 7-7s7 3.136 7 7a7.002 7.002 0 0 1-3.617 6.128 1 1 0 0 0 .969 1.75A9 9 0 0 0 16 6.997a9 9 0 0 0-4.352 16.878 1 1 0 0 0 .969-1.75Z" fill="#ffffff" class="fill-000000"></path><path d="M18.247 18a2.994 2.994 0 0 1-4.477-.015 1.001 1.001 0 0 0-1.497 1.327 4.992 4.992 0 0 0 3.742 1.685 4.986 4.986 0 0 0 3.719-1.66A1 1 0 0 0 18.247 18Z" fill="#ffffff" class="fill-000000"></path><path d="M17 26.931v-2.926a1 1 0 0 0-2 0v3.977c0 .552.448.994 1 .994l.117-.001c5.999-.053 11.031-4.171 12.47-9.724.028-.107.054-.215.079-.323a2.995 2.995 0 0 0 .008-5.829C27.354 7.329 22.178 3.017 16 3.017c-6.175 0-11.349 4.308-12.672 10.074A2.996 2.996 0 0 0 .99 16.012a2.995 2.995 0 1 0 4.336-2.676A11.005 11.005 0 0 1 16 5.017c5.147 0 9.473 3.536 10.671 8.305a2.995 2.995 0 0 0-.007 5.378l-.013.049A11.01 11.01 0 0 1 17 26.931ZM3.984 15.019a.994.994 0 1 1 0 1.988.994.994 0 0 1 0-1.988Zm24 0a.994.994 0 1 1 0 1.988.994.994 0 0 1 0-1.988Z" fill="#ffffff" class="fill-000000"></path>
+            </svg>
+            <div>
+                <h3 class="text-fuente-dark text-xl font-semibold">{"Support 24/7"}</h3>
+                <p class="text-lg text-fuente-dark">{"Call to our support team"}</p>
+                <p class="text-lg text-fuente-dark">{"Availble 24 hours 7 days of week!"}</p>
+            </div>
+        </div>
+        <div class="flex items-center gap-5">
+            <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="h-28 w-28 bg-fuente rounded-2xl p-3">
+                <g data-name="14. Delivery Truck"><path d="M7 5h6v3.88A1.12 1.12 0 0 1 11.88 10H8.12A1.12 1.12 0 0 1 7 8.88V5Z" fill="#ffffff" class="fill-77acf1"></path><path d="m31.41 17-1.54-1.54-1.69-5.09A2 2 0 0 0 26.28 9H20V7a3 3 0 0 0-3-3H3a3 3 0 0 0-3 3v15a3 3 0 0 0 3 3h1.14a4 4 0 1 0 0-2H3a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v16h-3a1 1 0 0 0 0 2h6.14a4 4 0 0 0 7.72 0H30a2 2 0 0 0 2-2v-4.59a2 2 0 0 0-.59-1.41ZM8 22a2 2 0 1 1-2 2 2 2 0 0 1 2-2Zm19.61-7H24v-4h2.28ZM25 26a2 2 0 1 1 2-2 2 2 0 0 1-2 2Zm5-3h-1.14a4 4 0 0 0-7.72 0H20V11h2v5a1 1 0 0 0 1 1h5.59L30 18.41Z" fill="#ffffff" class="fill-04009a"></path></g>
+            </svg>
+            <div>
+                <h3 class="text-fuente-dark text-xl font-semibold">{"Track your package!"}</h3>
+                <p class="text-lg text-fuente-dark">{"You can track your package"}</p>
+                <p class="text-lg text-fuente-dark">{"on real time!"}</p>
+            </div>
+        </div>
+        <div class="flex items-center gap-5">
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="h-28 w-28 bg-fuente rounded-2xl p-3">
+                <path d="m22.814 9.216-.826-5.368A1 1 0 0 0 21 3C15.533 3 12.731.316 12.707.293a1 1 0 0 0-1.41 0C11.269.316 8.467 3 3 3a1 1 0 0 0-.988.848l-.826 5.368A12.033 12.033 0 0 0 7.3 21.576l4.22 2.3a1 1 0 0 0 .958 0l4.22-2.3a12.033 12.033 0 0 0 6.116-12.36Zm-7.072 10.6L12 21.861 8.258 19.82a10.029 10.029 0 0 1-5.1-10.3l.7-4.541A14.717 14.717 0 0 0 12 2.3a14.717 14.717 0 0 0 8.139 2.68l.7 4.54a10.029 10.029 0 0 1-5.097 10.3Z" fill="#ffffff" class="fill-232323"></path><path d="M15.293 8.293 10 13.586l-1.293-1.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l6-6a1 1 0 0 0-1.414-1.414Z" fill="#ffffff" class="fill-232323"></path>
+            </svg>
+
+            <div>
+                <h3 class="text-fuente-dark text-xl font-semibold">{"Shop Secure"}</h3>
+                <p class="text-lg text-fuente-dark">{"Our website compiles"}</p>
+                <p class="text-lg text-fuente-dark">{"with security standards."}</p>
+            </div>
+        </div>
+    </div>
+</section>

templates/json/texts.json

@@ -92,6 +92,14 @@
     "favorites_products_detail_store": "DEMO STORE",
     "favorites_products_detail_reviews": "5.0 (3 reviews)",
 
+    "favorites_stores_title": "Favorites - Stores",
+    "favorites_stores_heading": "Favorites",
+    "favorites_stores_stores_button": "Stores",
+    "favorites_stores_products_button": "Products",
+    "favorites_stores_detail_name": "Evany Store",
+    "favorites_stores_detail_category": "Category: Shoes",
+    "favorites_stores_detail_review": "5.0 Deliver on time",
+
     "packages_track_title": "Packages - Track",
     "packages_track_heading": "Your Packages",
     "packages_track_on_going_button": "On Going",
@@ -103,7 +111,51 @@
     "packages_track_product_heading": "Brand of shoes",
     "packages_track_product_description": "Woman Rainbow shoes",
     "packages_track_product_code": "CODE: 001212",
-
+
+    "categories_title": "Categories",
+    "categories_heading": "Hot Categories!",
+    "categories_books_heading": "Books",
+    "categories_tech_heading": "Tech",
+    "categories_movies_heading": "Movies",
+    "categories_music_heading": "Music",
+    "category_discount_heading": "50% Off Only today!",
+    "category_discount_store": "In evany store",
+    "category_offer_heading": "Shop today Receive today!",
+    "category_offer_store": "In mytechy store",
+    "category_categories_heading": "All Categories",
+    "category_books_heading": "Books",
+    "category_tech_heading": "Tech",
+    "category_clothing_heading": "Clothing",
+    "category_hardware_heading": "Hardware",
+    "category_pharmacy_heading": "Pharmacy",
+    "category_groceries_heading": "Groceries",
+    "category_music_heading": "Music",
+    "category_movies_heading": "Movies",
+
+    "orders_title": "My orders",
+    "orders_heading": "My Orders",
+    "orders_completed_button": "Completed",
+    "orders_failed_button": "Failed",
+    "orders_table_heading_order": "Order Number",
+    "orders_table_heading_date": "Purchased Date",
+    "orders_table_heading_details": "Product Details",
+    "orders_table_heading_driver": "Driver Assigned",
+    "orders_table_heading_status": "Status of Store",
+    "orders_table_product_brand": "Brand of shoes",
+    "orders_table_product_description": "Woman Rainbow shoes",
+    "orders_table_product_code": "CODE: 001212",
+    "orders_table_status": "Delivered",
+
+    "benefits_support_heading": "Support 24/7",
+    "benefits_support_text": "Call to our support team",
+    "benefits_support_text_description": "Availble 24 hours 7 days of week!",
+    "benefits_track_heading": "Track your package!",
+    "benefits_track_text": "You can track your package",
+    "benefits_track_text_description": "on real time!",
+    "benefits_secure_heading": "Shop Secure",
+    "benefits_secure_text": "Our website compiles",
+    "benefits_secure_text_description": "with security standards.",
+
     "footer_heading": "Fuente",
     "footer_about_how_to_buy": "How to buy?",
     "footer_about_how_to_sale": "How to sale?",

templates/views/app/cart.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{"Cart"}</title>
-    <link rel="stylesheet" href="../../css/app.css">
+    <link rel="stylesheet" href="../../styles/output.css">
 </head>
 <body>
     <header class="container mx-auto py-10 flex justify-between">
@@ -64,7 +64,7 @@
     </nav>
 
     <main class="max-w-6xl mx-auto mt-20">
-        <h1 class="text-5xl font-bold text-fuente tracking-tighter">{"My Cart"}</h1>
+        <h1 class="text-6xl font-bold text-fuente tracking-tighter">{"My Cart"}</h1>
 
         <div class="border border-fuente mt-10 px-16 rounded-3xl">
             <h2 class="text-2xl text-fuente font-bold pt-5">{"Products Details"}</h2>
@@ -100,7 +100,7 @@ <h2 class="text-2xl text-fuente font-bold pt-5">{"Products Details"}</h2>
                             <p class="mt-20">{"$99.99"}</p>
                         </td>
                         <td class="whitespace-nowrap text-center py-8 px-6">
-                            <button class="w-10 h-10 mt-20">
+                            <button class="w-10 h-10 mt-24">
                                 <svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                                     <path fill="none" d="M0 0h256v256H0z"></path><path fill="none" stroke="#4167e8" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M216 56H40M104 104v64M152 104v64M200 56v152a8 8 0 0 1-8 8H64a8 8 0 0 1-8-8V56M168 56V40a16 16 0 0 0-16-16h-48a16 16 0 0 0-16 16v16" class="stroke-000000"></path>
                                 </svg>