From 1d2ef54e2201ea01745dc246fc52a0138b8d73c9 Mon Sep 17 00:00:00 2001 From: Leslie Yip Date: Mon, 29 Jan 2024 14:37:21 +0800 Subject: [PATCH] KAN-7 Create sections for home page --- public/events_graphic.svg | 91 ++++++++++++++++++++++++++++++++++++++ public/hero_graphic.svg | 72 ++++++++++++++++++++++++++++++ public/planner_graphic.svg | 81 +++++++++++++++++++++++++++++++++ src/pages/Home.jsx | 9 ---- src/pages/home/index.css | 78 ++++++++++++++++++++++++++++++++ src/pages/home/index.tsx | 58 ++++++++++++++++++++++++ src/pages/index.js | 2 +- tailwind.config.js | 1 + 8 files changed, 382 insertions(+), 10 deletions(-) create mode 100644 public/events_graphic.svg create mode 100644 public/hero_graphic.svg create mode 100644 public/planner_graphic.svg delete mode 100644 src/pages/Home.jsx create mode 100644 src/pages/home/index.css create mode 100644 src/pages/home/index.tsx diff --git a/public/events_graphic.svg b/public/events_graphic.svg new file mode 100644 index 0000000..2508154 --- /dev/null +++ b/public/events_graphic.svg @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/hero_graphic.svg b/public/hero_graphic.svg new file mode 100644 index 0000000..053ca16 --- /dev/null +++ b/public/hero_graphic.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/planner_graphic.svg b/public/planner_graphic.svg new file mode 100644 index 0000000..0ab9333 --- /dev/null +++ b/public/planner_graphic.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx deleted file mode 100644 index 95f81fc..0000000 --- a/src/pages/Home.jsx +++ /dev/null @@ -1,9 +0,0 @@ -// import React from 'react'; - -const Home = () => { - return ( -
Home
- ); -}; - -export default Home; diff --git a/src/pages/home/index.css b/src/pages/home/index.css new file mode 100644 index 0000000..8224c5d --- /dev/null +++ b/src/pages/home/index.css @@ -0,0 +1,78 @@ +section { + @apply + flex + flex-col + md:flex-row + items-center + justify-center + md:justify-around + h-[80vh] + px-8 + md:px-20 + gap-8 + lg:gap-16 + ; +} + +.section-description { + @apply + w-96 + max-w-full + lg:w-[32rem] + ; +} + +.section-description>h1 { + @apply + text-5xl + lg:text-6xl + text-primary + font-heading + pb-4 + ; +} + +.section-description>h2 { + @apply + text-3xl + md:text-4xl + text-primary + font-subheading + ; +} + +.section-description>p { + @apply + font-body + ; +} + +.section-description>p>span { + @apply + text-highlight + font-bold + ; +} + +.section-description>button { + @apply + mt-4 + px-6 + py-3 + bg-primary + text-white + font-subheading + hover:scale-[1.1] + hover:shadow-lg + transition-all + duration-100 + ease-out + ; +} + +.section-graphic { + @apply + w-80 + lg:w-[24rem] + ; +} diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx new file mode 100644 index 0000000..3e9fec5 --- /dev/null +++ b/src/pages/home/index.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import './index.css'; + +function Home() { + return ( +
+ {/* hero section */} +
+
+

NUS Students'

+

Computing Club

+

+ We aim to be the voice of the students, ensuring + their holistic well-being, and bridging + the gaps between them and the school. +

+
+ +
+ + {/* events */} +
+ +
+

Wondering

+

What's up?

+

+ There's always something new to look forward to. + Keep an eye out for the latest Computing Club events! +

+ +
+
+ + {/* study planner */} + {/* flex-col-reverse is used to render the graphic on top */} +
+
+

Stressed about

+

Study plans?

+

+ Set yourself up for academic success with our + study planner! +

+ +
+ +
+
+ ); +} + +export default Home; diff --git a/src/pages/index.js b/src/pages/index.js index d213ecf..f7a1a7b 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,3 +1,3 @@ -import Home from './Home'; +import Home from './home'; export { Home }; diff --git a/tailwind.config.js b/tailwind.config.js index 6ef65b9..a63f6ae 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -7,6 +7,7 @@ module.exports = { colors: { primary: '#365486', outline: '#333333', + highlight: '#61afef', }, transitionTimingFunction: { 'out-flex': 'cubic-bezier(0.05, 0.6, 0.4, 0.9)',