restructuring of website files

assets/homepage.css

@@ -0,0 +1,158 @@
+.main-hero {
+    background: url("images/hero_bg.png") center/cover no-repeat;
+    min-height: 90vh;
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+@media (max-width: 991px) {
+    .main-hero {
+        background: url('images/hero_bg.png') center/cover no-repeat !important;
+    }
+}
+
+.hero-top-header {
+    text-transform: uppercase;
+    font-size: 1rem;
+    letter-spacing: 2px;
+    color: var(--octigen-blue);
+}
+
+/* Improve Mobile Experience */
+@media (max-width: 991px) {
+    .main-hero {
+        text-align: center;
+    }
+}
+
+.service-section {
+    background: radial-gradient(circle at top left, #1A1B31 40%, #010101 80%);
+    color: white;
+}
+
+.service-box {
+    background-color: rgba(255,255,255,0.07);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    overflow: hidden;
+    transition: 0.4s ease-in-out;
+}
+
+.service-box:hover {
+    border: 1px solid rgba(255, 255, 255, 0.7);
+    transition: 0.4s ease-in-out;
+    box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.05);
+}
+
+.service-box-title {
+    text-transform: uppercase;
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+.data-sources-box {
+    background-image: url('images/data_sources.png');
+    background-size: contain;
+    background-position: right;
+    background-repeat: no-repeat;
+}
+
+.reporting-box-image {
+    max-width: 100%; /* Ensures it scales inside the container */
+    height: auto; /* Maintains aspect ratio */
+    display: block; /* Removes extra space under image */
+    object-fit: contain; /* Ensures proper scaling */
+    margin-left: 4rem;
+    margin-bottom: -2rem;
+    margin-top: -1.5rem;
+}
+
+@media (max-width: 991px) {
+    .reporting-box-image {
+        margin-left: 0 !important;
+        margin-top: 0 !important;
+    }
+}
+
+.quantitative-box {
+    background-image: url('images/quant_edge.png');
+    background-size: contain;
+    background-position: bottom;
+    background-repeat: no-repeat;
+}
+
+.ai-box-image {
+    max-width: 100%; /* Ensures it scales inside the container */
+    height: auto; /* Maintains aspect ratio */
+    display: block; /* Removes extra space under image */
+    object-fit: contain; /* Ensures proper scaling */
+    margin-left: -2rem;
+    margin-top: -2.5rem;
+    opacity: 0.7;
+}
+
+@media (max-width: 991px) {
+    .ai-box-image {
+        margin-left: 0 !important;
+        margin-top: 0 !important;
+        margin-bottom: 2rem !important;
+    }
+}
+
+.who-we-are-section {
+    background: radial-gradient(circle at top right, rgba(206, 226, 255, 0.5) 10%, #ffffff 40%);
+}
+.founder-image {
+    max-width: 8rem;
+}
+
+.founder-container {
+    box-shadow: 0px 0px 50px rgba(221, 221, 221, 0.5);
+    border: 2px solid rgba(255, 255, 255, 1);
+    transition: box-shadow 0.4s ease-in-out;
+}
+
+.founder-container:hover {
+    box-shadow: 0px 0px 50px rgba(30, 79, 226, 0.5);
+    transition: box-shadow 0.4s ease-in-out;
+}
+
+.founder-container h5 {
+    text-transform: uppercase;
+    font-size: 0.8rem;
+    font-weight: 400;
+    color: var(--octigen-blue);
+}
+
+.founder-container p {
+    text-align: justify;
+}
+
+.contacts-section {
+    background: radial-gradient(circle at bottom right, #1A1B31 40%, #010101 80%);
+    color: white;
+}
+
+.free-banner {
+    color: white;
+    margin-bottom: -2.2rem;
+}
+
+h5.free-banner-text {
+    display: inline-block;
+    background-color: var(--octigen-blue);
+    margin-left: 30rem;
+    font-size: 14px;
+    padding: 2px;
+}
+
+@media (max-width: 991px) {
+    h5.free-banner-text {
+        margin-left: 0 !important;
+    }
+    .free-banner {
+        margin-bottom: -1.5rem;
+        font-size: 12px;
+        margin-top: 1rem;
+    }
+}

assets/main.css

@@ -0,0 +1,179 @@
+/* define colors */
+:root {
+    --octigen-blue: rgba(30, 79, 226, 1);
+    --octigen-highlighted: #1A1B31;
+}
+
+section {
+    overflow-x: hidden;
+}
+
+main {
+    font-family: 'Outfit', sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    letter-spacing: 1px;
+    font-weight: 300;
+    line-height: 1.5;
+}
+
+p {
+    line-height: 2;
+    font-weight: 300;
+    font-size: 1rem;
+    opacity: 0.7;
+}
+
+.navbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 10;
+    padding: 20px 0;
+}
+
+.nav-highlighted-link {
+    color: var(--octigen-blue);
+    border: 1px solid var(--octigen-blue);
+    padding: 7px;
+    border-radius: 4px;
+    transition: 0.2s ease-in-out;
+}
+
+.nav-highlighted-link:hover {
+    color: var(--octigen-blue) !important;
+    transition: 0.2s ease-in-out;
+    border-radius: 18px;
+}
+
+.lang-dropdown.show {
+    display: inline-flex !important;
+    margin-top: 5px !important;
+}
+
+.dropdown-hamburger {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    min-width: 50px;
+    background: white;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+}
+
+.dropdown-hamburger-container:hover .hamburger-menu,
+#hamburgerMenu.active + #menuDropdown {
+    padding: 20px;
+    margin-top: 5px;
+    position: absolute;
+    width: 200px !important;
+    right: -70px;
+    left: auto;
+    display: flex !important;
+    flex-direction: column;
+}
+
+.hamb-item {
+    line-height: 1.5;
+}
+
+.language-selector {
+    background-color: var(--octigen-blue);
+    padding: 5px 12px;
+    color: white;
+    border-radius: 3px;
+}
+
+.line-height-1and5 {
+    line-height: 1.5;
+}
+
+.btn-primary {
+    font-size: 0.9rem;
+    font-weight: 400;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    text-decoration: none;
+    display: inline-block;
+    overflow: hidden;
+    background-color: var(--octigen-blue);
+    transition: background-color 0.2s ease-in-out;
+    box-shadow: 0px 0px 50px rgba(30, 79, 226, 0.5);
+    z-index: 1;
+    font-family: 'Outfit', sans-serif;
+}
+
+.btn-primary:hover {
+    background-color: var(--octigen-highlighted);
+    transition: background-color 0.2s ease-in-out;
+}
+
+.form-container {
+    font-size: 0.9rem;
+    font-weight: 300;
+    font-family: 'Outfit', sans-serif;
+}
+
+.form-container input, .form-container textarea {
+    background-color: transparent;
+    border-radius: 0px;
+    border: 1px solid rgba(255, 255, 255, 0.7);
+    color: white;
+}
+
+.form-container input::placeholder, .form-container textarea::placeholder {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 0.9rem;
+    font-weight: 300;
+}
+
+.form-container textarea:focus,
+.form-container input:focus,
+.form-container textarea:active,
+.form-container input:active,
+.form-container textarea:hover,
+.form-container input:hover {
+    border: 1px solid var(--octigen-blue);
+    background-color: transparent;
+    color: white;
+    box-shadow: none;
+}
+
+.form-btn {
+    background-color: transparent;
+    border: 1px solid white;
+    border-radius: 0px;
+    transition: border 0.2s ease-in-out;
+    font-weight: 300;
+}
+
+.form-btn:hover {
+    transition: border 0.2s ease-in-out;
+}
+
+.form-control {
+    color: white;
+    font-weight: 300;
+    font-size: 0.9rem;
+}
+
+.highlighted-header {
+    color: var(--octigen-blue);
+    text-transform: uppercase;
+    font-size: 1rem;
+    letter-spacing: 2px;
+}
+
+.footer-container {
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.footer-text {
+    font-size: 0.8rem;
+    font-weight: 300;
+    color: rgba(255, 255, 255, 0.7);
+}

assets/reporting.css

@@ -0,0 +1,21 @@
+.main-hero {
+    background: radial-gradient(circle at center, #ffffff 20%, rgba(206, 226, 255, 0.5) 50%);
+    min-height: 80vh;
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+.hero-top-header {
+    text-transform: uppercase;
+    font-size: 1rem;
+    letter-spacing: 2px;
+    color: var(--octigen-blue);
+}
+
+/* Improve Mobile Experience */
+@media (max-width: 991px) {
+    .main-hero {
+        text-align: center;
+    }
+}

form.js

@@ -0,0 +1,30 @@
+var form = document.getElementById("contact-form");
+
+async function handleSubmit(event) {
+  event.preventDefault();
+  var status = document.getElementById("contact-form-status");
+  var data = new FormData(event.target);
+  fetch(event.target.action, {
+    method: form.method,
+    body: data,
+    headers: {
+        'Accept': 'application/json'
+    }
+  }).then(response => {
+    if (response.ok) {
+      status.innerHTML = "Thanks for your submission!";
+      form.reset()
+    } else {
+      response.json().then(data => {
+        if (Object.hasOwn(data, 'errors')) {
+          status.innerHTML = data["errors"].map(error => error["message"]).join(", ")
+        } else {
+          status.innerHTML = "Oops! There was a problem submitting your form"
+        }
+      })
+    }
+  }).catch(error => {
+    status.innerHTML = "Oops! There was a problem submitting your form"
+  });
+}
+form.addEventListener("submit", handleSubmit)