Issue #3: Implement homepage template and design

backend/core/templates/index.html

@@ -1,6 +1,45 @@
-<!-- index.html -->
 {% extends "base.html" %}
+{% load static %}
 
 {% block content %}
-
-{% endblock content %}
+<div class="inner-container">
+    <h1> Gen-AI Powered Business Risk Analysis </h1>
+    <div class="gif-container">
+        <img src="{% static 'img/risklet-poll.png' %}" alt="Risklet Poll" />
+    </div>
+    <h3>Actionable | Intelligent | Simple</h3>
+    <div class="buttons">
+        <a class="btn-bl" href="#"> Learn More </a>
+        <a class="btn-bl" href="#"> Watch Keynote </a>
+    </div>
+</div>
+<div class="insight-main">
+    <div class="insight-content">
+        <div class="left-side">
+            <h3> What are your top cybersecurity risks? </h3>
+        </div>
+        <div class="right-side">
+            <div class="insight-grid">
+                <h3>Your Top Cyber Risks Quantified in Loss Magnitude ($) and Likelihood (Probability) </h3>
+                <img src="{% static 'img/risklet-scatter-plot.png' %}" alt="Risklet Plot" />
+            </div>
+        </div>
+    </div>
+</div>
+<div class="out-risk-management">
+    <div class="risk-management">
+        <h2>The Only Unified Platform to Manage your Third-Party & First-Party Cyber Risk </h2>
+        <div class="video-container">
+            <iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
+        </div>
+        <div class="demo-buttons">
+            <a class="btn-bl-small" href="#">First-party Business risks </a>
+            <a class="btn-bl-small" href="#">Third-party Business risks </a>
+        </div>
+    </div>
+</div>
+<div class="risklet-action">
+    <h2>See Risklet in Action </h2>
+    <a class="btn-bl" href="#"> Demo </a>
+</div>
+{% endblock %}