From 35d8dd259465affad6435c76b76f8582103725bd Mon Sep 17 00:00:00 2001
From: christodharma <13521009@std.stei.itb.ac.id>
Date: Tue, 14 Nov 2023 19:18:25 +0700
Subject: [PATCH] feat: about page feat: left-to-right wipe reveal style feat:
about page content feat: tailwind config
---
.../fragments/L2RWipeReveal/L2RWipeReveal.css | 12 ++++
src/index.css | 58 +++++--------------
src/view/AboutPage/AboutPage.module.css | 37 ------------
src/view/AboutPage/index.tsx | 18 +++---
tailwind.config.js | 21 ++++++-
5 files changed, 57 insertions(+), 89 deletions(-)
create mode 100644 src/components/fragments/L2RWipeReveal/L2RWipeReveal.css
delete mode 100644 src/view/AboutPage/AboutPage.module.css
diff --git a/src/components/fragments/L2RWipeReveal/L2RWipeReveal.css b/src/components/fragments/L2RWipeReveal/L2RWipeReveal.css
new file mode 100644
index 0000000..4398321
--- /dev/null
+++ b/src/components/fragments/L2RWipeReveal/L2RWipeReveal.css
@@ -0,0 +1,12 @@
+@keyframes L2RWipeReveal {
+ 0% {
+ clip-path: inset(0 100% 0 0);
+ }
+ 100% {
+ clip-path: inset(0 0 0 0);
+ }
+}
+
+.L2RWipeRevealElement {
+ animation: L2RWipeReveal 1s ease-in-out;
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 98ce775..5a25f6d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,60 +2,34 @@
@tailwind components;
@tailwind utilities;
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
-:root {
- --primary: #AA1E1E;
- --secondary: #3c00a0;
- --tertiary: #fefefe;
- --quaternary: #2ec4b6;
- --quinary: #20a4f3;
-}
@media (prefers-color-scheme: dark) {
:root {
- --foreground-rgb: 255, 255, 255;
- --background-start-rgb: 0, 0, 0;
- --background-end-rgb: 0, 0, 0;
+ --foreground-rgb: 255, 255, 255;
+ --background-start-rgb: 0, 0, 0;
+ --background-end-rgb: 0, 0, 0;
}
}
-body {
- color: var(--tertiary);
- /* background: linear-gradient(to bottom, var(--primary), var(--secondary)); */
- background-color:whitesmoke;
- /* background-image: linear-gradient(to bottom, #000000 40%, #30344d); */
- margin: 0;
+body {
+ @apply text-tertiary;
+ @apply bg-whitesmoke;
}
* {
- font-family: 'Montserrat', sans-serif;
+ @apply font-montserrat;
}
-.container{
- min-width: 100%;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
+.container {
+ @apply min-w-full;
+ @apply min-h-screen;
+ @apply flex;
+ @apply flex-col;
+ @apply justify-between;
}
h1 {
- font-size: 32px;
- font-weight: bold;
- color:#000000;
+ @apply text-2xl font-bold text-black;
}
p {
- font-size: 16px;
- color:#000000;
-}
\ No newline at end of file
+ @apply text-base text-black;
+}
diff --git a/src/view/AboutPage/AboutPage.module.css b/src/view/AboutPage/AboutPage.module.css
deleted file mode 100644
index 14d0835..0000000
--- a/src/view/AboutPage/AboutPage.module.css
+++ /dev/null
@@ -1,37 +0,0 @@
-#AboutPageContainer {
- display: flex;
- flex-flow: column nowrap;
- justify-content: center;
- align-items: center;
- color: var(--tertiary);
- text-align: center;
- padding-top: 5rem;
- padding-bottom: 5rem;
- gap: 4rem;
-}
-
-@keyframes LogoReveal {
- 0% {
- clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
- }
- 100% {
- clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
- }
-}
-
-#LogoImage {
- width: 100%;
- height: 100%;
- background-color: var(--primary);
- padding: 15px;
- animation-name : LogoReveal;
- clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
- animation: LogoReveal 1s ease-in-out forwards;
-}
-
-#AboutField {
- display: flex;
- flex-flow: column nowrap;
- justify-content: flex-start;
- text-align: left;
-}
\ No newline at end of file
diff --git a/src/view/AboutPage/index.tsx b/src/view/AboutPage/index.tsx
index 2a03545..ebb5cde 100644
--- a/src/view/AboutPage/index.tsx
+++ b/src/view/AboutPage/index.tsx
@@ -1,32 +1,32 @@
import React from 'react';
import ReactDOM from 'react-dom/client'
import logo from '../../components/images/logo.svg'
-// import styles from './AboutPage.module.css'
+import "../../components/fragments/L2RWipeReveal/L2RWipeReveal.css"
function AboutPageView() {
return (
<div className =
- "flex flex-column flex-nowrap justify-center items-center ">
+ "flex flex-col flex-nowrap justify-center items-center text-tertiary text-center py-5">
<title>
About Saranghaengbok
</title>
- <div>
+ <div
+ className="p-12 bg-primary self-stretch flex justify-center L2RWipeRevealElement mb-24">
<img
src={logo}
-
+ className="w-100 h-100"
></img>
</div>
<div
- className="flex flex-column flex-nowrap justify-start text-left
+ className="flex flex-col flex-nowrap justify-start text-left mx-auto px-6 max-w-screen-lg
">
- <h1 className="p-15">
+ <h1 className="py-5">
About Saranghaengbok
</h1>
- <p className ="p-15">
- Dari tahun 2023, Saranghaengbok adalah aplikasi sarana bagi penggemar K-POP yang ingin membeli merch K-POP band favoritnya dengan memberikan hasil pencarian merch K-POP yang sedang dibuka untuk group ordering maupun individual ordering, menghubungkan pembeli dengan penjual, dan menyediakan wadah untuk transaksi dari penjual dan pembeli. Pada awalnya, Saranghaengbok dikembangkan untuk menyelesaikan suatu masalah yang dihadapi oleh penggemar K-POP yang kesulitan dalam mencari merch K-POP karena informasi penjualannya yang terpisah-pisah dengan mulut ke mulut atau informasi yang tidak diregulasi, transaksi yang tidak aman atau tidak terpercaya, dan media komunikasi yang sulit karena tembok bahasa atau media yang sulit. Karena hal ini, Christo, Haikal, dan Varraz mengembangkan mengembangkan cara untuk menengahi hal ini sehingga masalah yang dihadapi bisa dipermudah.
+ <p className ="py-5">
+ Dari tahun 2023, Saranghaengbok adalah aplikasi sarana bagi penggemar K-POP yang ingin membeli merch K-POP band favoritnya dengan memberikan hasil pencarian merch K-POP yang sedang dibuka untuk group ordering maupun individual ordering, menghubungkan pembeli dengan penjual, dan menyediakan wadah untuk transaksi dari penjual dan pembeli. Pada awalnya, Saranghaengbok dikembangkan untuk menyelesaikan suatu masalah yang dihadapi oleh penggemar K-POP yang kesulitan dalam mencari merch K-POP karena informasi penjualannya yang terpisah-pisah dengan mulut ke mulut atau informasi yang tidak diregulasi, transaksi yang tidak aman atau tidak terpercaya, dan media komunikasi yang sulit karena tembok bahasa atau media yang sulit. Karena hal ini, Christo, Haikal, dan Varraz mengembangkan cara untuk menengahi hal ini sehingga bisa mempermudah masalah yang dihadapi.
</p>
</div>
- {/* TODO: Home Page details */}
</div>
)
}
diff --git a/tailwind.config.js b/tailwind.config.js
index a930689..8482c87 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,26 @@
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
- extend: {},
+ screens: {
+ 'sm': '640px',
+ 'md': '768px',
+ 'lg': '1024px',
+ 'xl': '1280px',
+ '2xl': '1536px',
+ },
+ extend: {
+ colors: {
+ primary: '#AA1E1E',
+ secondary: '#3c00a0',
+ tertiary: '#fefefe',
+ quaternary: '#2ec4b6',
+ quinary: '#20a4f3',
+ whitesmoke: '#f5f5f5'
+ },
+ fontFamily: {
+ 'montserrat': ['Montserrat', 'sans-serif'],
+ },
+ },
},
plugins: [],
}
--
GitLab