Footer

8 files changed, 101 insertions, 0 deletions

diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 00000000..daa97798
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,69 @@
+import { 
+  PhoneIcon,
+  DevicePhoneMobileIcon,
+  EnvelopeIcon
+} from "@heroicons/react/24/outline";
+import Image from "next/image";
+import InstagramIcon from "../icons/instagram.svg";
+import LinkedinIcon from "../icons/linkedin.svg";
+
+export default function Footer() {
+  return (
+    <div className="p-4 bg-gray_r-2">
+      <div className="grid grid-cols-2 gap-x-2 mb-4">
+        <div>
+          <p className="font-medium mb-2">Kantor Pusat</p>
+          <p className="text-gray_r-11 leading-6 text-caption-1">
+            Jl. Bandengan Utara 85A No. 8-9 RT.3/RW.16, Penjaringan, Kec. Penjaringan
+          </p>
+
+          <p className="font-medium mb-2 mt-6">Layanan Informasi</p>
+          <div className="flex items-center gap-x-2 text-gray_r-11 text-caption-1 mb-2">
+            <PhoneIcon className="w-5 h-5 stroke-2"/>
+            <p>(021) 2933-8828 / 29</p>
+          </div>
+          <div className="flex items-center gap-x-2 text-gray_r-11 text-caption-1 mb-2">
+            <DevicePhoneMobileIcon className="w-5 h-5 stroke-2"/>
+            <p>0812-8080-622</p>
+          </div>
+          <div className="flex items-center gap-x-2 text-gray_r-11 text-caption-1">
+            <EnvelopeIcon className="w-5 h-5 stroke-2"/>
+            <p>sales@indoteknik.com</p>
+          </div>
+
+          {/* <p className="font-medium mb-2 mt-6">Panduan Pelanggan</p> */}
+        </div>
+        <div>
+          <p className="font-medium mb-2">Jam Operasional</p>
+          <p className="text-gray_r-11 leading-6 text-caption-1">
+            <span className="font-medium">Senin - Jumat:</span> 08:30 - 17:00
+          </p>
+          <p className="text-gray_r-11 leading-6 text-caption-1">
+            <span className="font-medium">Sabtu:</span> 08:30 - 14:00
+          </p>
+
+          <p className="font-medium mb-2 mt-6">Temukan Kami</p>
+          <div className="flex gap-x-2">
+            <InstagramIcon className="w-5 h-5 stroke-gray_r-11" />
+            <LinkedinIcon className="w-5 h-5 stroke-gray_r-11" />
+          </div>
+
+          <p className="font-medium mb-2 mt-6">Pembayaran</p>
+          <div className="grid grid-cols-4 gap-2">
+            <Image src="/images/payments/bca.webp" alt="BCA Payment" width={48} height={48} className="w-full" />
+            <Image src="/images/payments/bca.webp" alt="BCA Payment" width={48} height={48} className="w-full" />
+            <Image src="/images/payments/bca.webp" alt="BCA Payment" width={48} height={48} className="w-full" />
+            <Image src="/images/payments/bca.webp" alt="BCA Payment" width={48} height={48} className="w-full" />
+            <Image src="/images/payments/bca.webp" alt="BCA Payment" width={48} height={48} className="w-full" />
+            <Image src="/images/payments/bca.webp" alt="BCA Payment" width={48} height={48} className="w-full" />
+            <Image src="/images/payments/bca.webp" alt="BCA Payment" width={48} height={48} className="w-full" />
+            <Image src="/images/payments/bca.webp" alt="BCA Payment" width={48} height={48} className="w-full" />
+          </div>
+
+          {/* <p className="font-medium mb-2 mt-6">Pengiriman</p> */}
+        </div>
+      </div>
+      <h6 className="h2">PT. Indoteknik Dotcom Gemilang</h6>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/icons/instagram.svg b/src/icons/instagram.svg
new file mode 100644
index 00000000..d90842c6
--- /dev/null
+++ b/src/icons/instagram.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram">
+    <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
+    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
+    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
+</svg>
\ No newline at end of file
diff --git a/src/icons/linkedin.svg b/src/icons/linkedin.svg
new file mode 100644
index 00000000..a68aec96
--- /dev/null
+++ b/src/icons/linkedin.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin">
+    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
+    <rect x="2" y="9" width="4" height="12"></rect>
+    <circle cx="4" cy="4" r="2"></circle>
+</svg>
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index d110e7de..da23f9cd 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -12,6 +12,7 @@ import ProductSlider from "../components/product/ProductSlider";
 import Layout from "../components/Layout";
 import axios from "axios";
 import ManufactureCard from "../components/ManufactureCard";
+import Footer from "../components/Footer";
 
 export async function getServerSideProps() {
   const heroBanners = await apiOdoo('GET', `/api/v1/banner?type=index-a-1`);
@@ -77,6 +78,15 @@ export default function Home({ heroBanners }) {
           <h2 className="mb-3">Produk Ready Stock</h2>
           <ProductSlider products={readyStockProducts} />
         </div>
+
+        <div className="px-4">
+          <h5 className="h2 mb-2">Platform Belanja B2B Alat Teknik & Industri di Indonesia</h5>
+          <p className="text-gray_r-11 leading-6 text-caption-1 mb-4">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 
+          </p>
+        </div>
+        
+        <Footer />
       </Layout>
     </>
   )
diff --git a/src/pages/shop/brands.js b/src/pages/shop/brands.js
index af9ab59c..d82fc31d 100644
--- a/src/pages/shop/brands.js
+++ b/src/pages/shop/brands.js
@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import Spinner from "../../components/Spinner";
 import Layout from "../../components/Layout";
 import ManufactureCard from "../../components/ManufactureCard";
+import Footer from "../../components/Footer";
 
 export async function getServerSideProps() {
   let initialManufactures = await apiOdoo('GET', '/api/v1/manufacture?limit=31');
@@ -70,6 +71,8 @@ export default function Brands({ initialManufactures }) {
             ))}
           </InfiniteScroll>
         </div>
+
+        <Footer />
       </Layout>
     </>
   )
diff --git a/src/pages/shop/brands/[slug].js b/src/pages/shop/brands/[slug].js
index a2f05cfa..8e67ef1e 100644
--- a/src/pages/shop/brands/[slug].js
+++ b/src/pages/shop/brands/[slug].js
@@ -1,6 +1,7 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
 import Filter from "../../../components/Filter";
+import Footer from "../../../components/Footer";
 import Header from "../../../components/Header";
 import Layout from "../../../components/Layout";
 import Pagination from "../../../components/Pagination";
@@ -125,6 +126,8 @@ export default function BrandDetail({
             <Pagination pageCount={pageCount} currentPage={parseInt(page)} url={route()} />
           </div>
         </div>
+
+        <Footer />
       </Layout>
     </>
   )
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index 2b54a1e0..5e0c8853 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -11,6 +11,7 @@ import ProductSlider from "../../../components/product/ProductSlider";
 import Layout from "../../../components/Layout";
 import { createOrUpdateItemCart } from "../../../helpers/cart";
 import toast from "react-hot-toast";
+import Footer from "../../../components/Footer";
 
 export async function getServerSideProps( context ) {
   const { slug } = context.query;
@@ -195,6 +196,8 @@ export default function ProductDetail({ product }) {
             <ProductSlider products={similarProducts}/>
           </div>
         </div>
+        
+        <Footer />
       </Layout>
     </>
   );
diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js
index a0a916fc..db93d2cb 100644
--- a/src/pages/shop/search.js
+++ b/src/pages/shop/search.js
@@ -6,6 +6,7 @@ import ProductCard from "../../components/ProductCard";
 import FilterIcon from "../../icons/filter.svg";
 import { useEffect, useState } from "react";
 import Filter from "../../components/Filter";
+import Footer from "../../components/Footer";
 
 export async function getServerSideProps(context) {
   const { 
@@ -116,6 +117,8 @@ export default function ShopSearch({
             <Pagination pageCount={pageCount} currentPage={parseInt(page)} url={route()} />
           </div>
         </div>
+
+        <Footer />
       </Layout>
     </>
   )