Website styling

backend/app/views.py

@@ -23,22 +23,22 @@
     'component_name': 'ExampleId'
 }
 """
-from django.shortcuts import render, redirect
+from django.shortcuts import render
 
 
 def index(request):
     """
     Home page
     """
 
-    _context = {
+    context = {
         'page_metadata': {
             'title': 'Home page'
         },
         'component_name': 'Home'
     }
 
-    return redirect("/competitiveness")
+    return render(request, 'index.html', context)
 
 
 def competitiveness(request):

frontend/components/Home.js

@@ -1,10 +1,39 @@
 import React from "react";
+import "../scss/home.scss";
+import homepage_pic from "./homepage_pic.jpg";
 
 const Home = () => {
     return (
-        <>
-            <h2>Hello world!</h2>
-        </>
+        <div id="main-content">
+            <div className="text-block">
+                <h1>Data Driven Democracy</h1>
+                <p>Spring 2024 Cohort</p>
+                <p>
+                    Mapping India's 2024 Elections "Data-Driven Democracy" is a project designed to
+                    illuminate the complexities of India's electoral process through the lens of
+                    digital humanities, aligning closely with the DH goals of interdisciplinary
+                    research and innovative public scholarship. At the heart of this initiative is a
+                    collaboration between MIT's UROP students and Indian journalists, aimed at
+                    developing a dynamic website that presents real-time election data, opinion
+                    polls, and demographic analyses in an accessible, visual format. This project
+                    not only seeks to demystify the vast electoral landscape of the world's largest
+                    democracy but also to engage UROP students in the practical application of
+                    digital tools and methodologies in social sciences research. By integrating data
+                    visualization, statistical analysis, and digital mapping, students will gain
+                    hands-on experience in translating complex datasets into compelling,
+                    user-friendly narratives.
+                </p>
+                <p>
+                    This website contains sample mapping and graphical depictions of data from 
+                    three different datasources from the Ashoka University Trivedi Centre for
+                    Political Data, the Election Commission of India, and the Lokniti: Programme
+                    for Competitive Democracy.
+                </p>
+            </div>
+            <div className="image-block">
+                <img src={homepage_pic} alt="Data Driven Democracy Image" />
+            </div>
+        </div>
     );
 };
 

frontend/components/global/Nav.js

@@ -7,24 +7,30 @@ const Nav = () => {
             <a className="navbar-brand link-home" href="/">
                 Data Driven Democracy
             </a>
-            <ul className="navbar-nav mr-auto">
-                <li className="nav-item">
-                    <a href="/competitiveness/">Competitiveness Map</a>
+            <ul>
+                <li>
+                    <a href="#">Ashoka Data</a>
+                    <ul>
+                        <li><a href="/competitiveness/">Competitiveness Map</a></li>
+                    </ul>
                 </li>
-            </ul>
-            <ul className="navbar-nav mr-auto">
-                <li className="nav-item">
-                    <a href="/campaign-finance/top-10-donors-piechart/">Donors Pie Chart</a>
-                </li>
-            </ul>
-            <ul className="navbar-nav mr-auto">
-                <li className="nav-item">
-                    <a href="/campaign-finance/top-10-donors-barchart/">Donors Bar Chart</a>
+                <li>
+                    <a href="#">ECI Data</a>
+                    <ul>
+                        <li><a href="/campaign-finance/top-10-donors-piechart/">
+                                Donors Pie Chart</a></li>
+                        <li><a href="/campaign-finance/top-10-donors-barchart/">
+                                Donors Bar Chart</a></li>
+                        <li><a href="/campaign-finance/donor-party-sankey/">
+                                Donor Party Sankey</a></li>
+                    </ul>
                 </li>
-            </ul>
-            <ul className="navbar-nav mr-auto">
-                <li className="nav-item">
-                    <a href="/campaign-finance/donor-party-sankey/">Donor Party Sankey</a>
+                <li>
+                    <a href="#">Lokniti Data</a>
+                    <ul>
+                        <li><a href="#">Placeholder</a></li>
+                        <li><a href="#">Option 2</a></li>
+                    </ul>
                 </li>
             </ul>
             <a

frontend/scss/competitivenessMap.scss

@@ -1,6 +1,5 @@
 .map-display {
     display: flex;
-    position: aboslute;
 }
 
 .data-display {

frontend/scss/global.scss

@@ -4,6 +4,7 @@ body {
 
 #main-container {
     padding: 1em 2em;
+    background-color: #e2f4c5;
 }
 
 .bold {

frontend/scss/home.scss

@@ -0,0 +1,38 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#navbar {
+    width: 100%;
+    background-color: #333; // Assuming a simple color for the navbar
+    color: white;
+    text-align: center;
+    padding: 10px 0;
+}
+
+#main-content {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    margin-top: 20px; // Space below the navbar
+    background-color: #e2f4c5;
+
+    .text-block,
+    .image-block {
+        flex: 1;
+        padding: 0 20px;
+    }
+
+    .image-block {
+        text-align: center;
+
+        img {
+            max-width: 100%;
+            height: auto;
+        }
+    }
+}

frontend/scss/nav.scss

@@ -1,4 +1,8 @@
 .navbar {
+    padding:0 15px!important;
+    position: relative;
+    z-index: 1000;
+
     .link-home {
         font-size: 1.25rem;
         font-weight: bold;
@@ -13,4 +17,41 @@
         max-width: 75vw;
         width: 10rem;
     }
-}
+    ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        width: 50%; // to get the links to be spaced out, may look different on bigger screens
+        display: flex; 
+        justify-content: space-around;
+    }
+    li {
+        display: block;
+        flex-grow: 1;
+    }
+    li a {
+        color: black;
+        display: block;
+        padding: 10px 20px;
+        width: 100%;
+        box-sizing: border-box;
+        text-decoration: none;
+    }
+    ul ul {
+        position: absolute;
+        top: 100%;
+        display: none;
+        z-index: 2000;
+    }
+    ul ul li {
+        display: block;
+        background-color: white;
+        width: 30%
+    }
+    li:hover ul {
+        display: block;
+    }
+    ul ul li a:hover {
+        background-color: #555;
+        }
+}