From f9e3e64ca2f95aabe17a62d9c09f3fcef7c2c48f Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <rafizadanly@gmail.com>
Date: Fri, 16 Dec 2022 17:35:26 +0700
Subject: Footer

---
 src/components/Footer.js         | 69 ++++++++++++++++++++++++++++++++++++++++
 src/icons/instagram.svg          |  5 +++
 src/icons/linkedin.svg           |  5 +++
 src/pages/index.js               | 10 ++++++
 src/pages/shop/brands.js         |  3 ++
 src/pages/shop/brands/[slug].js  |  3 ++
 src/pages/shop/product/[slug].js |  3 ++
 src/pages/shop/search.js         |  3 ++
 8 files changed, 101 insertions(+)
 create mode 100644 src/components/Footer.js
 create mode 100644 src/icons/instagram.svg
 create mode 100644 src/icons/linkedin.svg

(limited to 'src')

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>
     </>
   )
-- 
cgit v1.2.3