Merge branch '3-napraviti-home-page' into 'master'

Issue  #3: Implement homepage template and design

Closes #3

See merge request kbr4/riskletpy!3

backend/core/static/css/index.css

@@ -0,0 +1,215 @@
+body {
+    font-family: "Darker Grotesque", sans-serif;
+}
+  
+.inner-container {
+    display: grid;
+    grid-template-columns: 1fr;
+    background: linear-gradient(90deg, rgb(2, 0, 36) 0%, rgb(9, 9, 121) 50%, rgb(10, 8, 37) 100%);
+    color: white;
+    margin: 0;
+    width: 100%;
+    padding: 0;
+    gap: 3%;
+    padding: 60px;
+    text-align: center;
+}
+
+.gif-container {
+    display: flex;                
+    justify-content: center;      
+    align-items: center;         
+    padding: 20px;               
+}
+
+.gif-container img {
+    height: auto;                
+    display: block;
+    max-width: 700px;           
+}
+.insight-main {
+    display: flex;
+    justify-content: center;
+    padding: 20px;
+}
+.insight-content {
+    display: flex;
+    width: 80%;
+    box-shadow: 0 0 143px #f2f0fb;
+}
+.left-side {
+    flex: 1; 
+    display: flex;
+    align-items: center; 
+    justify-content: center; 
+    padding: 20px; 
+}
+.right-side {
+    flex: 1; 
+    display: flex;
+    flex-direction: column; 
+    align-items: center; 
+    justify-content: center;
+    padding: 20px; 
+}
+.insight-grid {
+    display: flex;
+    flex-direction: column; 
+    align-items: center; 
+    text-align: center; 
+}
+.insight-grid img {
+    max-width: 100%; 
+    height: auto; 
+}
+.out-risk-management {
+    width: 100%;
+    background-color: white;
+    display: flex;
+    justify-content: center;      
+    align-items: center;          
+    padding: 20px;                
+}
+
+.risk-management {
+    width: 80%;                   
+    display: grid;                
+    grid-template-columns: 1fr;   
+    text-align: center;           
+    justify-content: center;       
+    align-items: center;          
+    gap: 20px;                   
+    padding: 20px;               
+    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(223,240,255,1) 48%, rgba(255,255,255,1) 100%);
+}
+.risklet-action {
+    display: flex;                
+    flex-direction: column;       
+    align-items: center;          
+    justify-content: center;       
+    text-align: center;          
+    padding: 20px;               
+}
+.btn-bl{
+    background: linear-gradient(230deg, #3652f3 16.03%, #a862ee 90.73%);
+    color: #fff;
+    border: none;
+    border-radius: 11px;
+    height: 100%;
+    width: 100%;
+    text-transform: uppercase;
+    padding: 15px 20px;
+    min-width: 200px;
+    max-width: 300px;
+    text-decoration: none;
+    text-align: center;
+}
+.btn-bl-small{
+    background: linear-gradient(230deg, #3652f3 16.03%, #a862ee 90.73%);
+    color: #fff;
+    border: none;
+    border-radius: 11px;
+    text-transform: uppercase;
+    padding: 15px 20px;
+    text-decoration: none;
+    text-align: center;
+}
+.btn-bl:hover{
+    color: white;
+}
+.btn-bl-small:hover{
+    color: white;
+}
+.buttons {
+    display: flex;
+    gap: 20px;
+    justify-content: center;
+    text-align: center;
+}
+.demo-buttons{
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+}
+.sf-insight-main {
+    padding: 8rem;
+    border-radius: 2rem;
+    box-shadow: 0 0 143px #f2f0fb;
+    display: flex;
+}
+.insight-grid{
+    display: grid;
+    gap: 3rem;
+}
+
+.video-container {
+    display: flex;                
+    justify-content: center;      
+    align-items: center;          
+    width: 100%;                  
+    max-width: 500px;             
+    height: auto;                 
+    max-height: 500px;            
+    aspect-ratio: 16 / 9;         
+    background: #000;            
+    margin: 0 auto; 
+}
+
+.iframe {
+    position: absolute;          
+    top: 0;                      
+    left: 0;                    
+    width: 100%;                
+    height: 100%;               
+}
+
+@media (max-width: 768px) {
+    .inner-container {
+        padding: 60px; 
+    }
+    .gif-container img {
+        width: 100%;
+        max-width: 400px;
+    }   
+    .insight-content {
+        flex-direction: column; 
+        width: 100%; 
+    }
+
+    .left-side, .right-side {
+        flex: none; 
+        width: 100%; 
+        padding: 10px; 
+    }
+
+    .insight-main {
+        flex-direction: column; 
+    }
+
+    .risk-management {
+        padding: 10px; 
+    }
+
+    .risklet-action {
+        padding: 10px; 
+    }
+
+    .btn-bl, .btn-bl-small {
+        width: 90%; 
+        min-width: auto; 
+        max-width: none; 
+    }
+
+    .buttons {
+        flex-direction: column; 
+        gap: 10px; 
+    }
+
+    .sf-insight-main {
+        padding: 4rem;
+    }
+
+    .insight-grid {
+        grid-template-columns: 1fr; 
+    }
+}

backend/core/static/css/main.css

@@ -1,7 +1,5 @@
-
 body {
-    font-family: 'Jost', sans-serif;
+  font-family: "Darker Grotesque", sans-serif;
-    font-size: var(--bs-body-font-size);
 }
 
 :root {

backend/core/templates/base.html

@@ -9,6 +9,8 @@
     <link href="{%  static 'css/bootstrap.css' %}" rel="stylesheet">
     <link href="{% static 'css/Jost.css' %}" rel="stylesheet">
     <link href="{% static 'css/main.css' %}" rel="stylesheet">
+    <link href="{% static 'css/index.css' %}" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300..900&display=swap" rel="stylesheet">
     {% block css %}{% endblock css %}
 </head>
 <body>
@@ -36,7 +38,7 @@
     </div>
   </div>
 </nav>
-  <article class="px-3">
+  <article>
        {% block content %}{% endblock content %}
     <!-- Bootstrap JS and dependencies -->
   </article>

backend/core/templates/index.html

@@ -1,6 +1,45 @@
-<!-- index.html -->
 {% extends "base.html" %}
+{% load static %}
 
 {% block content %}
-
+<div class="inner-container">
-{% endblock content %}
+    <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 %}

backend/core/views.py

@@ -21,11 +21,8 @@ def signup(request):
         form = OrganizationForm(request.POST)
         if form.is_valid():
             organization = form.save()
-            print(f"Organization :{organization}")
             top_risk_ids = get_top_risk(organization)
-            print(f"Top risks: {top_risk_ids}")
             top_risks = Risk.objects.filter(risk_id__in = top_risk_ids)
-            print(f"Final: {top_risks}")
 
             document = Document.objects.create(organization=organization)
             document.add_segment('h1', "Top 10 Risk Identified")