Start work on design and product layout

README.md

@@ -10,14 +10,12 @@
  - Vue 3
  - VueX state management
  - Composition API
- - Laravel Scout
+ - Animations 
  - Laravel tests with CircleCI integration
 
  ## TODO
 
  - Finish implementing Laravel Scout
- - Finish implementing VueX
  - Add some tests to verify that the cart and checkout works correctly
  - Consider adding an admin dashboard
- - Implement animations
  - Update all composer packages and verify that everything still works

resources/js/app.js

@@ -6,6 +6,7 @@ import { createRouter, createWebHashHistory } from "vue-router";
 import store from "./store/index";
 
 import Layout from "./components/Layouts/Layout.vue";
+import Footer from "./components/Footer/Footer.vue";
 import Cart from "./components/Header/Cart.vue";
 import CartContents from "./components/Cart/CartContents.vue";
 import Index from "./components/Index.vue";
@@ -25,7 +26,7 @@ const router = createRouter({
 });
 
 createApp({
-    components: { Cart, Layout, Index, Products, Categories, CartContents },
+    components: { Footer, Cart, Layout, Index, Products, Categories, CartContents },
 })
     .use(store)
     .use(router)

resources/js/components/Footer/Footer.vue

@@ -1,13 +1,22 @@
 <template>
-  Default footer
+    <div class="container mx-auto mt-12">
+        <footer
+            class="px-6 text-center bg-white border border-gray-200 rounded-lg shadow-md"
+        >
+            <div class="p-6">
+                Copyright &copy; {{ todayDate }} Daniel / w3bdesign
+            </div>
+        </footer>
+    </div>
 </template>
 
 <script>
 export default {
-
-}
+    name: "Footer",
+    computed: {
+        todayDate() {
+            return new Date().getFullYear();
+        },
+    },
+};
 </script>
-
-<style>
-
-</style>

resources/js/components/Header/Cart.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <transition name="cart">
+        <transition name="fade">
             <span
                 v-if="cartLength"
                 class="text-xl text-white no-underline lg:text-black is-active"
@@ -12,7 +12,7 @@
                     src="../../../img/svg/Cart.svg"
             /></span>
         </transition>
-        <transition name="cart">
+        <transition name="fade">
             <div v-if="cartLength">
                 <span
                     class="absolute w-6 h-6 pb-2 ml-16 -mt-12 text-center text-white bg-black rounded-full lg:ml-14"
@@ -38,15 +38,14 @@ export default {
 };
 </script>
 
-<style>
-.cart-enter-active,
-.cart-leave-active {
-    transition: all 0.5s;
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+    transition: all 0.5s ease;
 }
-.cart-enter,
-.cart-leave-active {
+
+.fade-enter-from,
+.fade-leave-to {
     opacity: 0;
-    transform: translateX(-50px);
-    transform: translateY(-50px);
 }
 </style>

resources/js/components/Header/Navbar.vue

@@ -22,59 +22,63 @@
                 aria-expanded="false"
             >
                 <div class="px-6 lg:px-0 lg:pt-5 xl:pt-7">
-                    <div>
-                        <nav
-                            id="block-main"
-                            role="navigation"
-                            aria-labelledby="block-main-menu"
+                    <nav
+                        id="block-main"
+                        role="navigation"
+                        aria-labelledby="block-main-menu"
+                    >
+                        <ul
+                            class="items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex"
                         >
-                            <ul
-                                class="items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex"
+                            <li
+                                class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
                             >
-                                <li
-                                    class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
-                                >
-                                    <router-link to="/">
-                                        <span
-                                            class="text-xl text-white no-underline lg:text-black is-active"
-                                        >
-                                            Home
-                                        </span>
-                                    </router-link>
-                                </li>
-                                <li
-                                    class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
-                                >
-                                    <router-link to="/products">
-                                        <span
-                                            class="text-xl text-white no-underline lg:text-black"
-                                            >Products</span
-                                        >
-                                    </router-link>
-                                </li>
-                                <li
-                                    class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
-                                >
-                                    <router-link to="/categories">
-                                        <span
-                                            class="text-xl text-white no-underline lg:text-black is-active"
-                                            >Categories</span
-                                        >
-                                    </router-link>
-                                </li>
-                                <li
-                                    class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
-                                >
-                                    Search
-                                </li>
-                                <li
-                                    class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
-                                >
-                                    <cart />
-                                </li>
-                            </ul>
-                        </nav>
-                    </div>
+                                <input
+                                    class="w-56 px-2 py-2 pt-2 pb-2 border border-gray-400 rounded appearance-none input focus focus:border-indigo-600 focus:outline-none active:outline-none active:border-indigo-600"
+                                    placeholder="Search ..."
+                                    aria-placeholder="Search ..."
+                                    id="email"
+                                    type="text"
+                                />
+                            </li>
+                            <li
+                                class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
+                            >
+                                <router-link to="/">
+                                    <span
+                                        class="text-xl text-white no-underline lg:text-black is-active"
+                                    >
+                                        Home
+                                    </span>
+                                </router-link>
+                            </li>
+                            <li
+                                class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
+                            >
+                                <router-link to="/products">
+                                    <span
+                                        class="text-xl text-white no-underline lg:text-black"
+                                        >Products</span
+                                    >
+                                </router-link>
+                            </li>
+                            <li
+                                class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
+                            >
+                                <router-link to="/categories">
+                                    <span
+                                        class="text-xl text-white no-underline lg:text-black is-active"
+                                        >Categories</span
+                                    >
+                                </router-link>
+                            </li>
+                            <li
+                                class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
+                            >
+                                <cart />
+                            </li>
+                        </ul>
+                    </nav>
                 </div>
             </div>
         </div>

resources/js/components/Index.vue

@@ -1,52 +1,15 @@
 <template>
     <div>
-        Laravel Vue 3 Ecommerce
-        <loading-spinner v-if="loading" />
-        <div v-if="products">
-            <div v-for="product in products" :key="product.id">
-                {{ product.id }} - {{ product.name }} -
-                {{ product.description }} -
-                {{ product.price }}
-                <br />
-                <button
-                    class="p-2 mt-4 mb-4 text-lg font-bold text-white bg-blue-500 rounded"
-                    @click="$store.commit('ADD_PRODUCT_TO_CART', product)"
-                >
-                    Add to cart button
-                </button>
-            </div>
-            Cart: {{ $store.state.cart }}
-        </div>
+        <hero />
+        <products />
     </div>
 </template>
 
 <script>
-import { defineComponent, reactive, toRefs, onMounted } from "vue";
-import LoadingSpinner from "./LoadingSpinner/LoadingSpinner";
+import Hero from "./Index/Hero";
+import Products from "./Products/Products";
 
-export default defineComponent({
-    components: { LoadingSpinner },
-    setup() {
-        const state = reactive({
-            loading: true,
-            products: null,
-        });
-        const fetchProducts = () => {
-            axios
-                .get("/api/products")
-                .then((response) => {
-                    // commit('updateProducts', response.data);
-                    state.products = response.data;
-                    state.loading = false;
-                })
-                .catch((error) => console.error(error));
-        };
-
-        onMounted(fetchProducts);
-
-        return { ...toRefs(state) };
-    },
-});
+export default {
+    components: { Hero, Products },
+};
 </script>
-
-<style></style>

resources/js/components/Index/Hero.vue

@@ -0,0 +1,27 @@
+<template>
+    <div
+        id="hero"
+        class="flex w-full mx-auto mt-16 bg-right bg-cover md:pt-0 md:items-center"
+    >
+        <div
+            class="flex flex-col items-start justify-center w-full px-6 tracking-wide lg:w-1/2"
+        >
+            <span class="p-4 my-4 text-2xl text-black bg-white rounded-lg">
+                MacBook Air 13 In Store now!
+            </span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Hero",
+};
+</script>
+
+<style scoped>
+#hero {
+    background-image: url("../../../img/jpg/Hero.jpg");
+    height: 24rem;
+}
+</style>

resources/js/components/Layouts/Layout.vue

@@ -1,17 +1,17 @@
 <template>
     <nav-bar />
-    <div class="flex justify-center">
+    <div class="container mx-auto">
         <router-view />
+        <footer-content />
     </div>
-    <footer />
+
 </template>
 
 <script>
 import NavBar from "../Header/Navbar";
+import Footercontent from "../Footer/Footer";
 
 export default {
-    components: { NavBar },
+    components: { NavBar, Footercontent },
 };
 </script>
-
-<style></style>