diff --git a/src/index.css b/src/index.css
index ec2585e8c0bb8188184ed1e0703c4c8f2a8419b0..98ce77566d0e7073f73343fb21b5ff354feca059 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -11,3 +15,47 @@ 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;
+ }
+}
+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;
+
+}
+* {
+ font-family: 'Montserrat', sans-serif;
+}
+.container{
+ min-width: 100%;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+}
+
+h1 {
+ font-size: 32px;
+ font-weight: bold;
+ color:#000000;
+}
+
+p {
+ font-size: 16px;
+ color:#000000;
+}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index cd4f638939e418c0ad3dd2a4000839bd4fcaeb48..1671d1d6d55466dbcbb4a93616baa548973d515b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import HomePage from './pages/HomePage';
+import AboutPage from './pages/AboutPage';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(
@@ -9,7 +9,7 @@ const root = ReactDOM.createRoot(
);
root.render(
<React.StrictMode>
- <HomePage />
+ <AboutPage />
</React.StrictMode>
);
diff --git a/src/pages/HomePage/index.tsx b/src/pages/AboutPage/index.tsx
similarity index 52%
rename from src/pages/HomePage/index.tsx
rename to src/pages/AboutPage/index.tsx
index 8204f475160d82f3e61a5a404ede51e43ea2b398..fd3c2cfd6b69675a1f7a6499f4bb9465ef746119 100644
--- a/src/pages/HomePage/index.tsx
+++ b/src/pages/AboutPage/index.tsx
@@ -1,12 +1,12 @@
// import Navbar from '../components/layouts/Navbar'
import React from 'react'
// import Image from 'next/image'
-import HomePageView from '../../view/HomePage'
+import AboutPageView from '../../view/AboutPage'
-const HomePage = () => {
+const AboutPage = () => {
return (
- <HomePageView />
+ <AboutPageView />
)
}
-export default HomePage
\ No newline at end of file
+export default AboutPage
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
deleted file mode 100644
index ca5161f377f313757115c4c4c9b9de2884efa81a..0000000000000000000000000000000000000000
--- a/src/styles/global.css
+++ /dev/null
@@ -1,38 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
- /* TODO: Add color pallete */
- /* --primary: #292629;
- --secondary: #4863D8;
- --tertiary: #F9F6D5;
- --quaternary: #D6E9B0;
- --quinary: #F4602C; */
-}
-@media (prefers-color-scheme: dark) {
- :root {
- --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: #222536; */
- background-image: linear-gradient(to bottom, #000000 40%, #30344d);
- margin: 0;
-
-}
-* {
- font-family: 'Montserrat', sans-serif;
-}
-.container{
- min-width: 100%;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-
-}
\ No newline at end of file
diff --git a/src/view/AboutPage/AboutPage.module.css b/src/view/AboutPage/AboutPage.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..14d0835cc5dfe0ad3984b06308d135f3ae3cdccc
--- /dev/null
+++ b/src/view/AboutPage/AboutPage.module.css
@@ -0,0 +1,37 @@
+#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
new file mode 100644
index 0000000000000000000000000000000000000000..2a03545a35df1a2322db4484e8f8db7e4edab63d
--- /dev/null
+++ b/src/view/AboutPage/index.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client'
+import logo from '../../components/images/logo.svg'
+// import styles from './AboutPage.module.css'
+
+function AboutPageView() {
+ return (
+ <div className =
+ "flex flex-column flex-nowrap justify-center items-center ">
+ <title>
+ About Saranghaengbok
+ </title>
+ <div>
+ <img
+ src={logo}
+
+ ></img>
+ </div>
+ <div
+ className="flex flex-column flex-nowrap justify-start text-left
+ ">
+ <h1 className="p-15">
+ 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>
+ </div>
+ {/* TODO: Home Page details */}
+ </div>
+ )
+}
+
+export default AboutPageView;
\ No newline at end of file
diff --git a/src/view/HomePage/HomePage.module.css b/src/view/HomePage/HomePage.module.css
deleted file mode 100644
index 62617988186f4288847a25b2df61c093e745aad2..0000000000000000000000000000000000000000
--- a/src/view/HomePage/HomePage.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-#HomePageContainer {
- 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;
-}
\ No newline at end of file
diff --git a/src/view/HomePage/index.tsx b/src/view/HomePage/index.tsx
deleted file mode 100644
index b87eb368181de0554fb7c67ceff6dc38ede1ec29..0000000000000000000000000000000000000000
--- a/src/view/HomePage/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client'
-import logo from '../../components/images/logo.svg'
-import styles from './HomePage.module.css'
-
-function HomePageView() {
- return (
- <div id = {styles["HomePageContainer"]}>
- <title>
- Home Page
- </title>
- <img
- id = "LogoImage"
- src={logo}
- ></img>
- {/* TODO: Home Page details */}
- </div>
- )
-}
-
-export default HomePageView;
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index e5b64f308c4ea9eb7826f0d34441b90cb58e6c5b..a93068940df162e05feddd90ea0889478e85c90c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,6 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
- content: ["./src/**/*.{html,js}"],
+ content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},