Pietro coin

src/App.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from "vue-router";
+import HomePage from "./components/HomePage.vue";
 </script>
 
 <template>
-  <header>HEADER</header>
-
-  <RouterView />
+  <HomePage></HomePage>
 </template>

src/components/Appunti.txt

@@ -0,0 +1,53 @@
+const response = await fetch('url della chiamata api (ad esempio dummyjson').then(res=> res.json())
+
+console.log("response", response.products);
+
+dummyjson
+?limit=10
+
+promise --> then --> se va tutto bene dammi res.json
+await si usa per fare chiamate API
+wrappi con Suspense il componente che va a fare le chiamate API così se si rompe non crea problemi
+status 200 --> la chiamata è andata a buon fine
+
+funzione che fornisce vue
+
+<template>
+ <div class = "example">
+ <div v-if="response">
+ <div v-for="product in response.products" :key="product.id">
+    <p>{{product.title}} - {{product.price}}€</p>
+ </div>
+ </div>
+</template>
+
+
+nel main:
+
+<Suspense>
+<HomePage/>
+</Suspense>
+
+<script>
+const response = await fetch("https://dummyjson.com/products?limit=10").then(
+  (res) => res.json()
+);
+
+console.log("response", response.product);
+</ script>
+
+  <main>
+    <div v-if="response">
+      <div v-for="product in response.product" :key="product.add">
+        <p>{{ product.title }} - {{ product.price }},00 €</p>
+        <img :src="product.thumbnail" :alt="product.title" />
+      </div>
+    </div>
+
+    <div>
+     <!--<Suspense>--> 
+        <HomePage></HomePage>
+      <!--</Suspense>-->
+    </div>
+  </main>
+

src/components/HomePage.vue

@@ -1,7 +1,35 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import Navbar from "./molecule/Navbar.vue";
+import TheHero from "./molecule/TheHero.vue";
+import TheFooter from "./molecule/TheFooter.vue";
+import CardsList from "./molecule/CardsList.vue";
+import CategoriesList from "./molecule/CategoriesList.vue";
+</script>
 
+<!--  -->
 <template>
-  <div class="example">Home Page</div>
+
+
+  <div>
+    <Navbar></Navbar>
+    <div>
+      <TheHero></TheHero>
+    </div>
+    <div>
+      <CategoriesList></CategoriesList>
+    </div>
+    <div>
+      <CardsList></CardsList>
+    </div>
+    <div class="footer">
+      <TheFooter></TheFooter>
+    </div>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.footer {
+  background-color: black;
+  margin-top: 60px;
+}
+</style>

src/components/atoms/BottomWrite.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="text">
+    <h4>We Collaborate With 250++ Leading Top<br />E Commerce and Brands</h4>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.text {
+  text-align: center;
+  margin-top: 3rem;
+  font-size: 1.5rem;
+  margin-bottom: 60px;
+}
+
+h4 {
+  font-weight: 500;
+}
+</style>

src/components/atoms/CategoriesCard.vue

@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <div >
+            <div :style="{'background-image':'url({{ urlImage }})'}">
+                <div>
+                   <p>{{ category }}</p> 
+                    <p>{{ elements }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps ({
+    urlImage : String,
+    category : String,
+    elements : String,
+})
+</script>
+
+<style scoped>
+
+</style>

src/components/atoms/DescriptionFoot.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <p>
+      Bachira is an online store dealing with all product Bachira provide cheap,
+      high quality, products to customers
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+p {
+  color: white;
+}
+</style>

src/components/atoms/FooterCard.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <tr>
+      <td class="title">{{ title }}</td>
+    </tr>
+    <ul>
+      <li>{{ a1 }}</li>
+      <li>{{ a2 }}</li>
+      <li>{{ a3 }}</li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: String,
+  a1: String,
+  a2: String,
+  a3: String,
+});
+</script>
+
+<style scoped>
+.title {
+  font-weight: 700;
+}
+
+li {
+  list-style: none;
+}
+
+ul {
+  padding: 0;
+}
+
+div {
+  color: white;
+}
+</style>

src/components/atoms/ImageHero.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="container">
+    <img src="/static/fonts/Manrope/static/Images/HeroImage.png" />
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.container {
+  width: 30%;
+}
+</style>

src/components/atoms/LincenseRight.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <p>Copyright {{ year }} • All Rights Reserved Bachira by Giatinaja</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const prop = defineProps({
+  year: Date,
+});
+
+const year = new Date().getFullYear;
+</script>
+
+<style scoped>
+div {
+  color: white;
+}
+</style>

src/components/atoms/LogIn.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="buttons">
+    <button id="login">Login</button>
+    <button id="register">Register</button>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+button {
+  border: none;
+  border-radius: 5px;
+  height: 2rem;
+  width: auto;
+}
+#login {
+  background-color: white;
+  color: black;
+}
+#register {
+  background-color: #3c9379;
+  color: white;
+}
+
+.buttons {
+  display: flex;
+}
+</style>

src/components/atoms/ProductCard.vue

@@ -0,0 +1,33 @@
+S
+<template>
+  <div class=" ">
+    <h2 class="">Populer Products From All Brands</h2>
+    <div v-if="response">
+      <div v-for="product in response.products" :key="product.id">
+        <div class="">
+          <div class="">
+            <img :src="product.thumbnail" :alt="product.title" class="" />
+          </div>
+        </div>
+        <h3 class="">{{ product.title }} - {{ product.brand }}</h3>
+        <h4>{{ product.price }}$</h4>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const response = await fetch("https://dummyjson.com/products?limit=10").then(
+  (res) => res.json()
+);
+</script>
+
+<style scoped>
+.card {
+}
+
+.image {
+  width: 499px;
+  height: 399px;
+}
+</style>

src/components/atoms/Sections.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="section">
+    <a href="">Home</a>
+    <a href="">Products</a>
+    <a href="">Categories</a>
+    <a href="">Brands</a>
+    <a href="">Pricing</a>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+a {
+  text-decoration: none;
+  margin: 1rem;
+}
+
+.section {
+  display: flex;
+}
+</style>

src/components/atoms/SponsorShip.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="sponsor">
+    <img src="/static/fonts/Manrope/static/Images/Vector.png" />
+    <img src="/static/fonts/Manrope/static/Images/Vector(1).png" />
+    <img src="/static/fonts/Manrope/static/Images/Vector(2).png" />
+    <img src="/static/fonts/Manrope/static/Images/Group.png" />
+    <img src="/static/fonts/Manrope/static/Images/Bukalapak.png" />
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.sponsor {
+  display: flex;
+  align-content: center;
+  justify-content: space-around;
+  margin-left: 2rem;
+  margin-right: 2rem;
+  height: 1.5rem;
+}
+</style>

src/components/atoms/SubTitle.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="container">
+    <h2>Best place to buy<br /><span class="colored">Everything.</span></h2>
+    <br />
+    <p>
+      At Bachira, you can shop for all your favorite beauty brands, clothes,
+      household products and more at a single place.
+    </p>
+    <br />
+    <button>Shopping now</button>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+button {
+  border: none;
+  border-radius: 5px;
+  height: 2.5rem;
+  width: auto;
+  background-color: #3c9379;
+  color: white;
+  font-weight: 500;
+}
+
+h2 {
+  font-size: 50px;
+  font-weight: 400;
+}
+
+.colored {
+  color: #3c9379;
+  font-weight: bold;
+}
+
+.container {
+  width: 300px;
+}
+</style>