Added routes, enrollment, update component

14 files changed, 123 insertions, 17 deletions

diff --git a/src/App.js b/src/App.js
index f61c245..c39f14e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import Home from './pages/Home/Home'
+import Index from './routes'
 
 const App = () => {
   return (
     <>
-      <Home />
+      <Index />
     </>
   )
 }
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
index 93e8102..3d66067 100644
--- a/src/components/Card/Card.jsx
+++ b/src/components/Card/Card.jsx
@@ -1,11 +1,12 @@
 import React from 'react'
+import styles from './Card.module.css'
 
-const Card = (title, image) => {
+const Card = ({ title, image }) => {
   return (
-    <>
-      <img src={image} alt="" />
-      <h2>{title}</h2>
-    </>
+    <div className={styles.card}>
+      <img className={styles.card__image} src={image} alt="" />
+      <h2 className={styles.card__title}>{title}</h2>
+    </div>
   )
 }
 
diff --git a/src/components/Card/Card.module.css b/src/components/Card/Card.module.css
index e69de29..ff09072 100644
--- a/src/components/Card/Card.module.css
+++ b/src/components/Card/Card.module.css
@@ -0,0 +1,26 @@
+@import '../../styles/GlobalVariables.css';
+
+.card {
+  height: 300px;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 3px solid var(--color-black);
+  border-radius: 10px;
+  margin: 30px;
+  transition: 0.2s all;
+  cursor: pointer;
+  color: var(--color-black);
+  text-decoration-line: none;
+}
+
+.card:active {
+  transform: scale(0.98);
+  box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
+}
+
+.card__title {
+  margin: 15px 0px;
+}
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 0cbe47f..d90aafe 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -4,8 +4,8 @@ import styles from './Header.module.css'
 const Header = ({ subheading }) => {
   return (
     <header className={styles.header}>
-      <h1>AADHAAR</h1>
-      <h3>{subheading}</h3>
+      <h1 className={styles.header__heading}>AADHAAR</h1>
+      <h3 className={styles.header__subheading}>{subheading}</h3>
     </header>
   )
 }
diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css
index b30d5b7..8e6084f 100644
--- a/src/components/Header/Header.module.css
+++ b/src/components/Header/Header.module.css
@@ -1,8 +1,20 @@
+@import '../../styles/GlobalVariables.css';
+
 .header {
-  font-family: "Fredoka One", cursive;
+  font-family: 'Fredoka One', cursive;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 20px;
   padding: 20px;
 }
+
+.header__heading {
+  font-size: var(--font-large);
+  font-weight: 400;
+}
+
+.header__subheading {
+  font-size: var(--font-medium);
+  font-weight: 400;
+}
diff --git a/src/index.js b/src/index.js
index 31508db..08cf3d2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,14 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import "./index.css";
-import App from "./App";
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import './index.css'
+import App from './App'
 
-const root = ReactDOM.createRoot(document.getElementById("root"));
+const root = ReactDOM.createRoot(document.getElementById('root'))
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
-);
+)
diff --git a/src/pages/Enrollment/Enrollment.jsx b/src/pages/Enrollment/Enrollment.jsx
new file mode 100644
index 0000000..2aad1de
--- /dev/null
+++ b/src/pages/Enrollment/Enrollment.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Enrollment = () => {
+  return <div>Enrollment</div>
+}
+
+export default Enrollment
diff --git a/src/pages/Enrollment/Enrollment.module.css b/src/pages/Enrollment/Enrollment.module.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/Enrollment/Enrollment.module.css
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
index 17cf09d..b132f12 100644
--- a/src/pages/Home/Home.jsx
+++ b/src/pages/Home/Home.jsx
@@ -1,10 +1,28 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
+
+import Card from '../../components/Card/Card'
 import Header from '../../components/Header/Header'
+import styles from './Home.module.css'
 
 const Home = () => {
   return (
     <>
       <Header subheading="Mera Aadhaar Meri Pehchan" />
+      <div className={styles.card__container}>
+        <Link to="/enrollment">
+          <Card
+            title="Enrollment"
+            image={`${process.env.PUBLIC_URL}/assets/images/enrollment.svg`}
+          />
+        </Link>
+        <Link to="/update">
+          <Card
+            title="Update"
+            image={`${process.env.PUBLIC_URL}/assets/images/update.svg`}
+          />
+        </Link>
+      </div>
     </>
   )
 }
diff --git a/src/pages/Home/Home.module.css b/src/pages/Home/Home.module.css
new file mode 100644
index 0000000..de1cead
--- /dev/null
+++ b/src/pages/Home/Home.module.css
@@ -0,0 +1,4 @@
+.card__container {
+  display: flex;
+  justify-content: center;
+}
diff --git a/src/pages/Update/Update.jsx b/src/pages/Update/Update.jsx
new file mode 100644
index 0000000..0b448cf
--- /dev/null
+++ b/src/pages/Update/Update.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Update = () => {
+  return <div>Update</div>
+}
+
+export default Update
diff --git a/src/pages/Update/Update.module.css b/src/pages/Update/Update.module.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/Update/Update.module.css
diff --git a/src/routes/index.js b/src/routes/index.js
new file mode 100644
index 0000000..d6688c8
--- /dev/null
+++ b/src/routes/index.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Route, Routes } from 'react-router-dom'
+
+import Home from '../pages/Home/Home'
+import Enrollment from '../pages/Enrollment/Enrollment'
+import Update from '../pages/Update/Update'
+
+const Index = () => {
+  return (
+    <Routes>
+      <Route exact path="/" element={<Home />} />
+      <Route path="enrollment">
+        <Route index element={<Enrollment />} />
+      </Route>
+      <Route path="update">
+        <Route index element={<Update />} />
+      </Route>
+    </Routes>
+  )
+}
+
+export default Index
diff --git a/src/styles/GlobalVariables.css b/src/styles/GlobalVariables.css
new file mode 100644
index 0000000..fd76120
--- /dev/null
+++ b/src/styles/GlobalVariables.css
@@ -0,0 +1,6 @@
+:root {
+  --color-black: #000;
+
+  --font-large: 4rem;
+  --font-medium: 2rem;
+}