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)',