Merge pull request #21 from dhmit/styling

Eleanor created/designed the homepage, and I updated the navbar to sort the visualizations by data source.

Still left to do: maybe add links to the data sources/cite them? and possibly change the navbar to a different color if it doesn't stand out enough.

Also, if there are new visualizations for the Lokniti data, we should integrate those into the navbar where there are placeholder links right now (and get rid of the placeholders if not).

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;
+        }
+}