Merapihkan tampilan

8 files changed, 153 insertions, 64 deletions

diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js
index 0fe47196..64624d70 100644
--- a/src/components/ProductCard.js
+++ b/src/components/ProductCard.js
@@ -29,13 +29,13 @@ export default function ProductCard({ data }) {
         </div>
         <div className="mt-2">
           {product.lowest_price.discount_percentage > 0 ? (
-            <div className="flex gap-x-1 items-center">
+            <div className="flex gap-x-1 items-center mb-1">
               <span className="badge-red">{product.lowest_price.discount_percentage}%</span>
-              <p className="text-xs text-gray-800 line-through">{currencyFormat(product.lowest_price.price)}</p>
+              <p className="text-xs text-gray_r-11 line-through">{currencyFormat(product.lowest_price.price)}</p>
             </div>
           ) : ''}
           {product.lowest_price.price_discount > 0 ? (
-            <p className="text-sm text-gray-900 font-semibold">
+            <p className="text-caption text-gray_r-12 font-bold">
               {currencyFormat(product.lowest_price.price_discount)}
             </p>
           ) : (
diff --git a/src/pages/index.js b/src/pages/index.js
index ee746519..d110e7de 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -13,19 +13,18 @@ import Layout from "../components/Layout";
 import axios from "axios";
 import ManufactureCard from "../components/ManufactureCard";
 
-export default function Home() {
-  const [heroBanners, setHeroBanners] = useState(null);
+export async function getServerSideProps() {
+  const heroBanners = await apiOdoo('GET', `/api/v1/banner?type=index-a-1`);
+
+  return { props: { heroBanners } };
+}
+
+export default function Home({ heroBanners }) {
   const [manufactures, setManufactures] = useState(null);
   const [readyStockProducts, setReadyStockProducts] = useState(null);
   const [popularProducts, setPopularProducts] = useState(null);
 
   useEffect(() => {
-    const getHeroBanners = async () => {
-      const dataHeroBanners = await apiOdoo('GET', `/api/v1/banner?type=index-a-1`);
-      setHeroBanners(dataHeroBanners);
-    }
-    getHeroBanners();
-
     const getManufactures = async () => {
       const dataManufactures = await apiOdoo('GET', `/api/v1/manufacture?level=prioritas`);
       setManufactures(dataManufactures);
@@ -59,7 +58,7 @@ export default function Home() {
           }
         </Swiper>
         <div className="mt-6 px-4">
-          <h2 className="text-gray-900 font-bold mb-3">Brand Pilihan</h2>
+          <h2 className="mb-3">Brand Pilihan</h2>
           <Swiper slidesPerView={4} freeMode={true} spaceBetween={16}>
             {
               manufactures?.manufactures?.map((manufacture, index) => (
@@ -71,11 +70,11 @@ export default function Home() {
           </Swiper>
         </div>
         <div className="mt-6 px-4 mb-6">
-          <h2 className="text-gray-900 font-bold mb-3">Produk Populer</h2>
+          <h2 className="mb-3">Produk Populer</h2>
           <ProductSlider products={popularProducts} />
         </div>
         <div className="mt-6 px-4 mb-6">
-          <h2 className="text-gray-900 font-bold mb-3">Produk Ready Stock</h2>
+          <h2 className="mb-3">Produk Ready Stock</h2>
           <ProductSlider products={readyStockProducts} />
         </div>
       </Layout>
diff --git a/src/pages/login.js b/src/pages/login.js
index cb299afa..b67564d2 100644
--- a/src/pages/login.js
+++ b/src/pages/login.js
@@ -57,22 +57,24 @@ export default function Login() {
         <Link href="/" className="mt-16">
           <Image src={Logo} alt="Logo Indoteknik" width={165} height={42} />
         </Link>
-        <h1 className="text-2xl text-gray-900 mt-4">Mulai Belanja Sekarang</h1>
-        <h2 className="text-gray-800 mt-2 mb-4">Masuk ke akun kamu untuk belanja</h2>
+        <h1 className="text-2xl mt-4 text-center">Mulai Belanja Sekarang</h1>
+        <h2 className="text-gray_r-11 font-medium mt-2 mb-4">Masuk ke akun kamu untuk belanja</h2>
         {alert ? (
           <Alert className="text-center" type={alert.type}>{alert.component}</Alert>
         ) : ''}
         <form onSubmit={login} className="w-full">
+          <label className="form-label mt-4 mb-2">Nama Lengkap</label>
           <input 
             type="text"
-            className="form-input bg-gray-100 mt-4" 
+            className="form-input bg-gray_r-2" 
             placeholder="johndoe@gmail.com"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
           />
+          <label className="form-label mt-4 mb-2">Kata Sandi</label>
           <input 
             type="password"
-            className="form-input bg-gray-100 mt-4" 
+            className="form-input bg-gray_r-2" 
             placeholder="••••••••"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
diff --git a/src/pages/register.js b/src/pages/register.js
index 41bd7c75..6b366387 100644
--- a/src/pages/register.js
+++ b/src/pages/register.js
@@ -55,29 +55,32 @@ export default function Login() {
         <Link href="/" className="mt-16">
           <Image src={Logo} alt="Logo Indoteknik" width={165} height={42} />
         </Link>
-        <h1 className="text-2xl text-gray-900 mt-4 text-center">Mudahkan Pembelian dengan Indoteknik</h1>
-        <h2 className="text-gray-800 mt-2 mb-4">Daftar untuk melanjutkan</h2>
+        <h1 className="text-2xl mt-4 text-center">Mudahkan Pembelian dengan Indoteknik</h1>
+        <h2 className="text-gray_r-11 font-medium mt-2 mb-4">Daftar untuk melanjutkan</h2>
         {alert ? (
           <Alert className="text-center" type={alert.type}>{alert.component}</Alert>
         ) : ''}
         <form onSubmit={register} className="w-full">
+          <label className="form-label mt-4 mb-2">Alamat Email</label>
           <input 
             type="text"
-            className="form-input bg-gray-100 mt-4" 
+            className="form-input bg-gray_r-2" 
             placeholder="johndoe@gmail.com"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
           />
+          <label className="form-label mt-4 mb-2">Nama Lengkap</label>
           <input 
             type="text"
-            className="form-input bg-gray-100 mt-4" 
+            className="form-input bg-gray_r-2" 
             placeholder="John Doe"
             value={name}
             onChange={(e) => setName(e.target.value)}
           />
+          <label className="form-label mt-4 mb-2">Kata Sandi</label>
           <input 
             type="password"
-            className="form-input bg-gray-100 mt-4" 
+            className="form-input bg-gray_r-2" 
             placeholder="••••••••"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
diff --git a/src/pages/shop/brands/[slug].js b/src/pages/shop/brands/[slug].js
index c0524207..320c4454 100644
--- a/src/pages/shop/brands/[slug].js
+++ b/src/pages/shop/brands/[slug].js
@@ -89,7 +89,7 @@ export default function BrandDetail({
             <FilterIcon className="w-4 h-4" /> <span>Filter</span>
           </button>
           <h1>Produk</h1>
-          <div className="text-sm mb-4">
+          <div className="text-caption mb-4">
             {productFound > 0 ? (
               <>
                 Menampilkan&nbsp;
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index 1ef693c0..c0119c8f 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -82,33 +82,33 @@ export default function ProductDetail({ product }) {
     <>
       <Header title={`${product.name} - Indoteknik`}/>
       <Layout>
-        <LazyLoadImage effect="blur" src={product.image} alt={product.name} className="border-b border-gray-300 w-full h-[300px] object-contain object-center bg-white" />
+        <LazyLoadImage effect="blur" src={product.image} alt={product.name} className="border-b border-gray_r-6 w-full h-[300px] object-contain object-center bg-white" />
         <div className="p-4 pb-10">
           <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)}>
             {product.manufacture.name ?? '-'}
           </Link>
-          <h1 className="mb-3">{product.name}{activeVariant.attributes ? ' - ' + activeVariant.attributes : ''}</h1>
+          <h1 className="h2 mt-2 mb-3">{product.name}{activeVariant.attributes ? ' - ' + activeVariant.attributes : ''}</h1>
 
           {product.variant_total > 1 && !selectedVariant ? (
             <p className="text-xs text-gray-800 mb-1">Harga mulai dari:</p>
           ) : ''}
 
           {product.lowest_price.discount_percentage > 0 ? (
-            <div className="flex gap-x-1 items-center">
+            <div className="flex gap-x-1 items-center mb-1">
               <span className="badge-red">{activeVariant.price.discount_percentage}%</span>
-              <p className="text-xs text-gray-800 line-through">{currencyFormat(activeVariant.price.price)}</p>
+              <p className="text-xs text-gray_r-11 line-through">{currencyFormat(activeVariant.price.price)}</p>
             </div>
           ) : ''} 
 
           {product.lowest_price.price > 0 ? (
-            <p className="text-lg text-gray-900 font-semibold">{currencyFormat(activeVariant.price.price_discount)}</p>
+            <p className="text-body-lg font-semibold">{currencyFormat(activeVariant.price.price_discount)}</p>
           ) : (
-            <p className="text-gray-800">Dapatkan harga terbaik, <a href="">hubungi kami.</a></p>
+            <p className="text-gray_r-11">Dapatkan harga terbaik, <a href="">hubungi kami.</a></p>
           )}
 
           <div className="flex gap-x-2 mt-5">
             <div className="w-9/12">
-              <label className="form-label">Pilih: <span className="text-gray-800">{product.variant_total} Varian</span></label>
+              <label className="form-label mb-1">Pilih: <span className="text-gray-800">{product.variant_total} Varian</span></label>
               <select name="variant" className="form-input" value={selectedVariant} onChange={onchangeVariant} >
                 <option value="" disabled={selectedVariant != "" ? true : false}>Pilih Varian...</option>
                 {product.variants.length > 1 ? (
@@ -123,7 +123,7 @@ export default function ProductDetail({ product }) {
               </select>
             </div>
             <div className="w-3/12">
-              <label htmlFor="quantity" className="form-label">Jumlah</label>
+              <label htmlFor="quantity" className="form-label mb-1">Jumlah</label>
               <input type="number" name="quantity" id="quantity" className="form-input text-center is-invalid" value={quantity} onChange={(e) => setQuantity(e.target.value)} />
             </div>
           </div>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 5033a220..d9f33913 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -7,25 +7,31 @@
 html, body {
     @apply 
         w-screen
-        text-base
-        text-gray-900
-        bg-gray-50
+        text-body
+        text-gray_r-12
+        bg-gray_r-1
     ;
 }
 
 @layer base {
     h1, .h1 {
         @apply
-            text-lg
+            text-h6
+            font-semibold
+        ;
+    }
+
+    h2, .h2 {
+        @apply
+            text-body
             font-semibold
-            text-gray-900
         ;
     }
 
     a {
         @apply 
             font-medium
-            text-yellow-900
+            text-yellow_r-11
         ;
     }
 }
@@ -37,9 +43,10 @@ html, body {
     .badge-green {
         @apply
             text-xs
+            leading-none
             font-medium
             px-1
-            py-0.5
+            py-1
             rounded
             w-fit
         ;
@@ -47,36 +54,35 @@ html, body {
 
     .badge-red {
         @apply
-            bg-red-300
-            text-red-900
+            bg-red_r-6
+            text-red_r-11
         ;
     }
 
     .badge-gray {
         @apply
-            bg-gray-200
-            text-gray-700
+            bg-gray_r-6
+            text-gray_r-11
         ;
     }
 
     .badge-yellow {
         @apply
-            bg-yellow-300
-            text-yellow-900
+            bg-yellow_r-6
+            text-yellow_r-11
         ;
     }
 
     .badge-green {
         @apply
-            bg-green-200 
-            text-green-700
+            bg-green-100 
+            text-green-800
         ;
     }
 
     .form-label {
         @apply
-            text-sm
-            mb-1
+            font-medium
             block
         ;
     }
@@ -86,13 +92,14 @@ html, body {
             p-3
             rounded
             border
-            border-gray-300
+            text-gray_r-11
+            border-gray_r-7
             bg-transparent
             w-full
             leading-none
             focus:outline-none
             focus:ring-1 
-            focus:ring-yellow-900
+            focus:ring-yellow_r-9
         ;
     }
 
@@ -101,15 +108,14 @@ html, body {
             block
             w-fit
             p-3
-            bg-yellow-900
-            border-yellow-900
+            bg-yellow_r-9
+            border-yellow_r-9
             rounded
             border
-            text-gray-900
             text-center
-            disabled:text-gray-700
-            disabled:bg-yellow-700
-            disabled:border-yellow-700
+            disabled:text-gray_r-10
+            disabled:bg-yellow_r-7
+            disabled:border-yellow_r-7
             ease-linear
             duration-150
         ;
@@ -134,7 +140,8 @@ html, body {
             w-full
             h-full
             border
-            border-gray-300
+            border-gray_r-6
+            bg-gray_r-2
             rounded
             relative
             flex
@@ -164,13 +171,13 @@ html, body {
 
     .product-card__title {
         @apply
-            text-sm
-            text-gray-900
+            text-caption-p
+            text-gray_r-12
         ;
     }
 
     .product-card__brand {
-        @apply text-sm;
+        @apply text-caption-p;
     }
 }
 
@@ -339,7 +346,7 @@ html, body {
         rounded 
         ease-linear 
         bg-gray-100
-        text-sm
+        text-caption
     ;
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index dce6f0c0..e6c399d0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,8 +10,16 @@ module.exports = {
         'sans': ['Inter', 'sans-serif']
       },
       fontSize: {
-        base: '15px',
-        lg: '18px',
+        'h1': ['60px', '120%'],
+        'h2': ['48px', '120%'],
+        'h3': ['34px', '120%'],
+        'h4': ['24px', '120%'],
+        'h5': ['20px', '120%'],
+        'h6': ['18px', '120%'],
+        'body-lg': ['16px', '120%'],
+        'body': ['14px', '120%'],
+        'caption': ['12px', '120%'],
+        'caption-p': ['12px', '150%']
       },
       colors: {
         gray: {
@@ -47,6 +55,76 @@ module.exports = {
           200: '#FFFBED',
           100: '#FFFCF5',
         },
+        'r-green': {
+          1: '#fbfefc',
+          2: '#f2fcf5',
+          3: '#e9f9ee',
+          4: '#ddf3e4',
+          5: '#ccebd7',
+          6: '#b4dfc4',
+          7: '#92ceac',
+          8: '#5bb98c',
+          9: '#30a46c',
+          10: '#299764',
+          11: '#18794e',
+          12: '#153226',
+        },
+        'yellow_r': {
+          1: '#fdfdf9',
+          2: '#fffce8',
+          3: '#fffbd1',
+          4: '#fff8bb',
+          5: '#fef2a4',
+          6: '#f9e68c',
+          7: '#efd36c',
+          8: '#ebbc00',
+          9: '#f5d90a',
+          10: '#f7ce00',
+          11: '#946800',
+          12: '#35290f',
+        },
+        'gray_r': {
+          1: '#fcfcfc',
+          2: '#f8f8f8',
+          3: '#f3f3f3',
+          4: '#ededed',
+          5: '#e8e8e8',
+          6: '#e2e2e2',
+          7: '#dbdbdb',
+          8: '#c7c7c7',
+          9: '#8f8f8f',
+          10: '#858585',
+          11: '#6f6f6f',
+          12: '#171717',
+        },
+        'red_r': {
+          1: '#fffcfc',
+          2: '#fff8f8',
+          3: '#ffefef',
+          4: '#ffe5e5',
+          5: '#fdd8d8',
+          6: '#f9c6c6',
+          7: '#f3aeaf',
+          8: '#eb9091',
+          9: '#e5484d',
+          10: '#dc3d43',
+          11: '#cd2b31',
+          12: '#381316',
+        },
+        'r-sand': {
+          1: '#fdfdfc',
+          2: '#f9f9f8',
+          3: '#f3f3f2',
+          4: '#eeeeec',
+          5: '#e9e9e6',
+          6: '#e3e3e0',
+          7: '#dbdbd7',
+          8: '#c8c7c1',
+          9: '#90908c',
+          10: '#868682',
+          11: '#706f6c',
+          12: '#1b1b18',
+        }
         // yellow500: {
         //   900: '#F8C20A',
         //   800: '#FACF40',