Merapihkan tampilan

5 files changed, 33 insertions, 29 deletions

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>