diff options
| -rw-r--r-- | src/components/ProductCard.js | 6 | ||||
| -rw-r--r-- | src/pages/index.js | 21 | ||||
| -rw-r--r-- | src/pages/login.js | 10 | ||||
| -rw-r--r-- | src/pages/register.js | 13 | ||||
| -rw-r--r-- | src/pages/shop/brands/[slug].js | 2 | ||||
| -rw-r--r-- | src/pages/shop/product/[slug].js | 16 | ||||
| -rw-r--r-- | src/styles/globals.css | 67 | ||||
| -rw-r--r-- | tailwind.config.js | 82 |
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 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', |