From df7b6f0ccd273b4ff25a99875ac8c6a769fc39cb Mon Sep 17 00:00:00 2001
From: christodharma <13521009@std.stei.itb.ac.id>
Date: Tue, 14 Nov 2023 13:38:35 +0700
Subject: [PATCH] feat: tailwind inits
---
src/index.css | 48 +++++++++++++++++++++
src/index.tsx | 4 +-
src/pages/{HomePage => AboutPage}/index.tsx | 8 ++--
src/styles/global.css | 38 ----------------
src/view/AboutPage/AboutPage.module.css | 37 ++++++++++++++++
src/view/AboutPage/index.tsx | 34 +++++++++++++++
src/view/HomePage/HomePage.module.css | 11 -----
src/view/HomePage/index.tsx | 21 ---------
tailwind.config.js | 2 +-
9 files changed, 126 insertions(+), 77 deletions(-)
rename src/pages/{HomePage => AboutPage}/index.tsx (52%)
delete mode 100644 src/styles/global.css
create mode 100644 src/view/AboutPage/AboutPage.module.css
create mode 100644 src/view/AboutPage/index.tsx
delete mode 100644 src/view/HomePage/HomePage.module.css
delete mode 100644 src/view/HomePage/index.tsx
diff --git a/src/index.css b/src/index.css
index ec2585e..98ce775 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 cd4f638..1671d1d 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 8204f47..fd3c2cf 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 ca5161f..0000000
--- 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 0000000..14d0835
--- /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 0000000..2a03545
--- /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 6261798..0000000
--- 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 b87eb36..0000000
--- 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 e5b64f3..a930689 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: {},
},
--
GitLab