Feat/section2and3

assets/css/root.css

@@ -1,8 +1,20 @@
 :root {
   --body-margin: 0px;
+  --primary-color: #fc4c02;
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
-
 body {
   margin: var(--body-margin);
   font-family: "Nunito", sans-serif;
 }
+textarea,
+select,
+input,
+button,
+a {
+  outline: none;
+}

assets/css/section2.css

@@ -0,0 +1,138 @@
+.section__2 {
+  display: flex;
+  justify-content: center;
+  background: linear-gradient(90deg, #8e2610 0%, #481502 100%);
+  background-repeat: no-repeat;
+  background-size: 100% 72px;
+}
+.section__2-container {
+  display: flex;
+  border-radius: 5px;
+  overflow: hidden;
+  width: 82.5%;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;
+  box-sizing: border-box;
+}
+.section__2-container-shopping {
+  max-width: 900px;
+  height: 200px;
+}
+.section__2-container-shopping:nth-child(1) {
+  flex: 1;
+  background-color: var(--primary-color);
+  display: flex;
+}
+.section__2-container-shopping:nth-child(2) {
+  flex: 1;
+  display: flex;
+  padding: 24px 8px;
+  flex-direction: column;
+  align-items: center;
+}
+.section__2-container-shopping-left {
+  flex: 1;
+  padding: 26px 8px 24px 24px;
+  display: flex;
+  flex-direction: column;
+  max-height: 200px;
+}
+.section__2-container-shopping-right {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.section__2-img {
+  object-fit: cover;
+}
+.section__2-container-shopping:nth-child(2) {
+  background-color: white;
+  flex: 1;
+}
+.section__2-shopping-caption {
+  color: white;
+  font-size: 20px;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 110%;
+}
+.section__2-button {
+  width: 100%;
+  font-size: 1rem;
+  padding: 12px 16px;
+  background-color: white;
+  color: var(--primary-color);
+  border-radius: 2rem;
+  border: 1px solid var(--primary-color);
+  margin-top: 1rem;
+  font-weight: 600;
+}
+.section__2-button a {
+  text-decoration: none;
+  color: var(--primary-color);
+}
+.slick-slide {
+  background: #f5f5f5;
+  border-radius: 10px;
+}
+.section__2-carousel {
+  max-width: 200px;
+  max-height: 500px;
+}
+.section__2-carousel-item {
+  height: 100%;
+  width: 100%;
+}
+/* right sight carousel */
+.section__2-title-button {
+  color: var(--primary-color);
+  font-size: 20px;
+  text-decoration: none;
+  font-weight: bold;
+  position: relative;
+}
+.section__2-badge {
+  position: absolute;
+  right: -18px;
+  top: -12px;
+  width: 24px;
+  height: 24px;
+}
+.section__2-title-description {
+  color: black;
+  margin-top: -5px;
+  font-weight: bold;
+  font-size: 24px;
+  margin-bottom: 1rem;
+}
+.section__2-container-list-store {
+  width: 100%;
+}
+.section__2-container-list-store p {
+  text-align: center;
+  color: slategray;
+  font-size: 18px;
+}
+.section__2-list-store {
+  display: flex;
+  width: 80%;
+  margin: 0 auto;
+  justify-content: center;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+.section__2-list-store-item {
+  padding: 0 12px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 20px;
+}
+.section__2-store-button {
+  background-color: var(--primary-color);
+  padding: 12px 16px;
+  border-radius: 20px;
+  border: none;
+  color: white;
+  font-weight: bold;
+}

assets/css/section3.css

@@ -0,0 +1,30 @@
+.container {
+  width: 72%;
+  margin: 0 auto;
+}
+.section__3-title {
+  font-size: 20px;
+  font-weight: bold;
+  padding: 16px 0;
+}
+.section__3-categories {
+  display: flex;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+}
+.section__3-categories-item {
+  min-height: 150px;
+  min-width: 120px;
+  text-align: center;
+  padding: 8px;
+  background-color: white;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+.section__3-categories-item-img {
+  height: 80%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.section__3-categories-item-title {
+  font-size: 14px;
+}

assets/css/styles.css

@@ -0,0 +1,2 @@
+@import "/assets/css/section2.css";
+@import "/assets/css/section3.css";

assets/js/section2.js

@@ -0,0 +1,16 @@
+$(document).ready(function () {
+  console.log("test");
+  $(".section__2-carousel").slick({
+    // prevArrow: "<i class='slick-prev fa-regular fa-circle-left'></i>",
+    // nextArrow: "<i class='slick-next fa-regular fa-circle-right'></i>",
+    // dots: true,
+    // autoplay: true,
+    // autoplaySpeed: 2500,
+    // centerMode: true,
+    // centerPadding: "60px",
+    // slidesToShow: 3,
+
+    // slidesToShow: 1,
+    // slidesToScroll: 1,
+  });
+});