From 87a1919601dfce11870029f5ccd3637300eca77e Mon Sep 17 00:00:00 2001
From: chrisfromhubql <christophe@hubql.com>
Date: Thu, 30 May 2024 16:00:40 +0700
Subject: [PATCH] styling: update for dark mode and fix service card image size

---
 frontend/app/contact/page.tsx                 |  2 +-
 frontend/app/globals.css                      | 11 ++++++
 frontend/components/shared/Cta.tsx            |  2 +-
 frontend/components/shared/Footer.tsx         |  5 ++-
 frontend/components/shared/Header.tsx         | 12 ++----
 frontend/components/shared/Logo.tsx           | 39 +++++++++++++++++++
 .../components/templates/CommunitySection.tsx |  4 +-
 frontend/components/templates/MapSection.tsx  |  4 +-
 .../components/templates/ServicesCard.tsx     | 10 ++---
 .../components/templates/ServicesSection.tsx  |  2 +-
 .../templates/SocialProofSection.tsx          |  4 +-
 frontend/components/ui/button.tsx             |  6 +--
 frontend/components/ui/input.tsx              |  2 +-
 frontend/components/ui/textarea.tsx           |  2 +-
 frontend/content/socialproof.ts               |  4 ++
 .../company-logos/hubql-logomark-dark.svg     |  5 +++
 frontend/tailwind.config.ts                   |  2 +
 17 files changed, 86 insertions(+), 30 deletions(-)
 create mode 100644 frontend/components/shared/Logo.tsx
 create mode 100644 frontend/public/images/company-logos/hubql-logomark-dark.svg

diff --git a/frontend/app/contact/page.tsx b/frontend/app/contact/page.tsx
index ce1e8e4..84ca414 100644
--- a/frontend/app/contact/page.tsx
+++ b/frontend/app/contact/page.tsx
@@ -19,7 +19,7 @@ export default function Services() {
       <Header />
       <Hero content={contact.hero} />
       <div className="w-full py-8">
-        <div className="max-w-2xl bg-[#FCFCFF] border border-[#E6E6FF] p-8 mx-auto rounded-lg flex flex-col gap-4 items-center">
+        <div className="max-w-2xl bg-[#FCFCFF] bg-[#1F344A] border border-[#E6E6FF] dark:border-[#546C87] p-8 mx-auto rounded-lg flex flex-col gap-4 items-center">
           <Input placeholder="Your name" />
           <Input placeholder="Your email" />
           <Textarea placeholder="Your message" />
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 23d80b8..a2a9610 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -5,7 +5,18 @@
 :root {
   --foreground: #1A2735;
   --background: #FFFFFF;
+  --foreground-invert: #FFFFFF;
 
+
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground: #FFFFFF;
+    --background: #1A2735;
+    --foreground-invert: #1A2735;
+  --background-invert: #1A2735;
+  }
 }
 
 body {
diff --git a/frontend/components/shared/Cta.tsx b/frontend/components/shared/Cta.tsx
index e96862f..9026720 100644
--- a/frontend/components/shared/Cta.tsx
+++ b/frontend/components/shared/Cta.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 
 export const Cta = () => {
   return (
-    <div className="w-full bg-gradient-to-b from-white to-[#FCFCFF]  border-b border-[#E6E6FF] py-12">
+    <div className="w-full bg-gradient-to-b from-white dark:from-background-main to-[#FCFCFF] dark:to-[#1F344A] border-b border-[#E6E6FF] dark:border-[#1F344A] py-12">
       <Container className="flex flex-col gap-4 items-center justify-center text-center">
         <h2 className="text-2xl lg:text-4xl font-bold">Connect with us now!</h2>
         <Link href="/contact">
diff --git a/frontend/components/shared/Footer.tsx b/frontend/components/shared/Footer.tsx
index ed77f3c..6422c8f 100644
--- a/frontend/components/shared/Footer.tsx
+++ b/frontend/components/shared/Footer.tsx
@@ -2,15 +2,16 @@ import { footer } from "@/content/footer";
 import Image from "next/image";
 import Link from "next/link";
 import { Container } from "./Container";
+import { Logo } from "./Logo";
 
 export const Footer = () => {
   return (
-    <div className="w-full border-t border-[#E6E6FF] py-4">
+    <div className="w-full border-t border-[#E6E6FF] dark:border-[#1F344A] pt-4 pb-24">
       <Container>
         <div className="w-full flex flex-col lg:flex-row gap-12 items-start justify-between  flex-wrap">
           <div className="flex flex-col gap-2 flex-wrap">
             <Link href={footer.logo.href}>
-              <Image src={footer.logo.image} width={160} height={44} alt="" />
+              <Logo />
             </Link>
             <p className="text-xl">{footer.logo.title}</p>
           </div>
diff --git a/frontend/components/shared/Header.tsx b/frontend/components/shared/Header.tsx
index a3e67c1..51fd506 100644
--- a/frontend/components/shared/Header.tsx
+++ b/frontend/components/shared/Header.tsx
@@ -2,15 +2,9 @@ import { header } from "@/content/header";
 import Image from "next/image";
 import Link from "next/link";
 import { Container } from "./Container";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "../ui/sheet";
+import { Sheet, SheetContent, SheetTrigger } from "../ui/sheet";
 import { Menu } from "lucide-react";
+import { Logo } from "./Logo";
 
 export const Header = () => {
   return (
@@ -18,7 +12,7 @@ export const Header = () => {
       <div className="w-full flex flex-row gap-4 justify-between items-center">
         <div className="flex gap-12 items-center">
           <Link href={header.logo.href}>
-            <Image src={header.logo.image} width={160} height={44} alt="" />
+            <Logo />
           </Link>
           {header.links.map((link, index) => (
             <Link
diff --git a/frontend/components/shared/Logo.tsx b/frontend/components/shared/Logo.tsx
new file mode 100644
index 0000000..1689468
--- /dev/null
+++ b/frontend/components/shared/Logo.tsx
@@ -0,0 +1,39 @@
+import { cn } from "@/lib/utils";
+
+interface LogoProp {
+  className?: string;
+}
+
+export const Logo = ({ className }: LogoProp) => {
+  return (
+    <svg
+      width="160"
+      height="44"
+      viewBox="0 0 160 44"
+      fill="none"
+      className={cn("fill-[#1A2735] dark:fill-white", className)}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M39.8904 19.3212L27.1788 6.6096C25.6993 5.13013 23.3007 5.13013 21.8212 6.6096L9.1096 19.3212C7.63013 20.8007 7.63013 23.1993 9.1096 24.6788L21.8212 37.3904C23.3007 38.8699 25.6993 38.8699 27.1788 37.3904L39.8904 24.6788C41.3699 23.1993 41.3699 20.8007 39.8904 19.3212Z"
+        fill="current"
+      />
+      <path
+        d="M26.6452 21.87H23.7362C23.1051 21.87 22.7636 22.6214 23.1727 23.1097L27.0625 27.7525C27.2031 27.9203 27.4091 28.017 27.626 28.017H30.5349C31.166 28.017 31.5075 27.2657 31.0984 26.7773L27.2086 22.1345C27.068 21.9667 26.862 21.87 26.6452 21.87Z"
+        fill="#FFBF14"
+      />
+      <path
+        d="M30.6404 16.6291C30.0813 15.9796 29.2735 15.6071 28.4244 15.6071H19.2359C18.3239 15.6071 17.5847 16.3584 17.5847 17.2852C17.5847 18.212 18.3239 18.9633 19.2359 18.9633H26.5861C27.2033 18.9633 27.794 19.2179 28.2231 19.6688L28.5057 19.9658C29.2485 20.7463 30.4803 20.7443 31.2205 19.9614C31.8983 19.2446 31.9241 18.1201 31.28 17.372L30.6404 16.6291Z"
+        fill="#C4C7CA"
+      />
+      <path
+        d="M17.54 23.6922C17.54 22.7576 18.2855 22 19.2051 22C20.1247 22 20.8702 22.7576 20.8702 23.6922V26.7007C20.8702 27.6353 20.1247 28.3929 19.2051 28.3929C18.2855 28.3929 17.54 27.6353 17.54 26.7007V23.6922Z"
+        fill="#00A5AA"
+      />
+      <path
+        d="M50.9 29C50.7533 29 50.6333 28.9533 50.54 28.86C50.4467 28.7667 50.4 28.6467 50.4 28.5V15.5C50.4 15.3533 50.4467 15.2333 50.54 15.14C50.6333 15.0467 50.7533 15 50.9 15H56.34C58.06 15 59.4133 15.4 60.4 16.2C61.4 16.9867 61.9 18.1067 61.9 19.56C61.9 20.5067 61.6667 21.3067 61.2 21.96C60.7467 22.6133 60.1467 23.1067 59.4 23.44L62.16 28.36C62.2 28.44 62.22 28.5133 62.22 28.58C62.22 28.6867 62.1733 28.7867 62.08 28.88C62 28.96 61.9 29 61.78 29H59.14C58.8867 29 58.7 28.94 58.58 28.82C58.46 28.6867 58.3733 28.5667 58.32 28.46L56.04 24.06H53.98V28.5C53.98 28.6467 53.9333 28.7667 53.84 28.86C53.7467 28.9533 53.6267 29 53.48 29H50.9ZM53.98 21.24H56.3C56.9267 21.24 57.3933 21.0867 57.7 20.78C58.02 20.4733 58.18 20.0533 58.18 19.52C58.18 19 58.0267 18.58 57.72 18.26C57.4267 17.94 56.9533 17.78 56.3 17.78H53.98V21.24ZM68.6514 29.2C67.6647 29.2 66.7914 29.02 66.0314 28.66C65.2714 28.3 64.6647 27.78 64.2114 27.1C63.7714 26.4067 63.5314 25.58 63.4914 24.62C63.4781 24.4067 63.4714 24.14 63.4714 23.82C63.4714 23.4867 63.4781 23.2133 63.4914 23C63.5314 22.0267 63.7714 21.2 64.2114 20.52C64.6514 19.8267 65.2514 19.3 66.0114 18.94C66.7847 18.58 67.6647 18.4 68.6514 18.4C69.5714 18.4 70.3581 18.5333 71.0114 18.8C71.6647 19.0533 72.1981 19.3733 72.6114 19.76C73.0247 20.1467 73.3314 20.5467 73.5314 20.96C73.7447 21.36 73.8581 21.7133 73.8714 22.02C73.8847 22.1533 73.8381 22.2733 73.7314 22.38C73.6247 22.4733 73.5047 22.52 73.3714 22.52H70.8314C70.6847 22.52 70.5714 22.4867 70.4914 22.42C70.4114 22.3533 70.3381 22.2533 70.2714 22.12C70.1114 21.7067 69.9047 21.4133 69.6514 21.24C69.4114 21.0667 69.0981 20.98 68.7114 20.98C68.1781 20.98 67.7647 21.1533 67.4714 21.5C67.1914 21.8467 67.0381 22.38 67.0114 23.1C66.9981 23.6333 66.9981 24.1067 67.0114 24.52C67.0381 25.2533 67.1914 25.7867 67.4714 26.12C67.7647 26.4533 68.1781 26.62 68.7114 26.62C69.1247 26.62 69.4514 26.5333 69.6914 26.36C69.9314 26.1867 70.1247 25.8933 70.2714 25.48C70.3381 25.3467 70.4114 25.2467 70.4914 25.18C70.5714 25.1133 70.6847 25.08 70.8314 25.08H73.3714C73.5047 25.08 73.6247 25.1333 73.7314 25.24C73.8381 25.3333 73.8847 25.4467 73.8714 25.58C73.8581 25.8067 73.7914 26.0733 73.6714 26.38C73.5514 26.6733 73.3647 26.9867 73.1114 27.32C72.8581 27.6533 72.5247 27.9667 72.1114 28.26C71.7114 28.54 71.2247 28.7667 70.6514 28.94C70.0781 29.1133 69.4114 29.2 68.6514 29.2ZM80.5883 29.2C79.4683 29.2 78.5216 29.02 77.7483 28.66C76.9883 28.3 76.4016 27.7867 75.9883 27.12C75.5883 26.44 75.3616 25.6333 75.3083 24.7C75.2949 24.4333 75.2883 24.1333 75.2883 23.8C75.2883 23.4533 75.2949 23.1533 75.3083 22.9C75.3616 21.9533 75.6016 21.1467 76.0283 20.48C76.4549 19.8133 77.0483 19.3 77.8083 18.94C78.5816 18.58 79.5083 18.4 80.5883 18.4C81.6816 18.4 82.6083 18.58 83.3683 18.94C84.1416 19.3 84.7416 19.8133 85.1683 20.48C85.5949 21.1467 85.8349 21.9533 85.8883 22.9C85.9016 23.1533 85.9083 23.4533 85.9083 23.8C85.9083 24.1333 85.9016 24.4333 85.8883 24.7C85.8349 25.6333 85.6016 26.44 85.1883 27.12C84.7883 27.7867 84.2016 28.3 83.4283 28.66C82.6683 29.02 81.7216 29.2 80.5883 29.2ZM80.5883 26.76C81.1883 26.76 81.6216 26.58 81.8883 26.22C82.1683 25.86 82.3283 25.32 82.3683 24.6C82.3816 24.4 82.3883 24.1333 82.3883 23.8C82.3883 23.4667 82.3816 23.2 82.3683 23C82.3283 22.2933 82.1683 21.76 81.8883 21.4C81.6216 21.0267 81.1883 20.84 80.5883 20.84C80.0016 20.84 79.5683 21.0267 79.2883 21.4C79.0083 21.76 78.8549 22.2933 78.8283 23C78.8149 23.2 78.8083 23.4667 78.8083 23.8C78.8083 24.1333 78.8149 24.4 78.8283 24.6C78.8549 25.32 79.0083 25.86 79.2883 26.22C79.5683 26.58 80.0016 26.76 80.5883 26.76ZM88.3753 29C88.2286 29 88.1086 28.9533 88.0153 28.86C87.922 28.7667 87.8753 28.6467 87.8753 28.5V19.1C87.8753 18.9533 87.922 18.8333 88.0153 18.74C88.1086 18.6467 88.2286 18.6 88.3753 18.6H90.6753C90.822 18.6 90.942 18.6467 91.0353 18.74C91.1286 18.8333 91.1753 18.9533 91.1753 19.1V19.86C91.522 19.4467 91.9753 19.1 92.5353 18.82C93.0953 18.54 93.7553 18.4 94.5153 18.4C95.2886 18.4 95.9686 18.5733 96.5553 18.92C97.1553 19.2667 97.622 19.78 97.9553 20.46C98.302 21.1267 98.4753 21.9467 98.4753 22.92V28.5C98.4753 28.6467 98.422 28.7667 98.3153 28.86C98.222 28.9533 98.1086 29 97.9753 29H95.4553C95.322 29 95.202 28.9533 95.0953 28.86C95.002 28.7667 94.9553 28.6467 94.9553 28.5V23.04C94.9553 22.4133 94.802 21.9333 94.4953 21.6C94.202 21.2533 93.762 21.08 93.1753 21.08C92.6286 21.08 92.1886 21.2533 91.8553 21.6C91.5353 21.9333 91.3753 22.4133 91.3753 23.04V28.5C91.3753 28.6467 91.322 28.7667 91.2153 28.86C91.122 28.9533 91.0086 29 90.8753 29H88.3753ZM101.207 29C101.061 29 100.941 28.9533 100.847 28.86C100.754 28.7667 100.707 28.6467 100.707 28.5V19.1C100.707 18.9533 100.754 18.8333 100.847 18.74C100.941 18.6467 101.061 18.6 101.207 18.6H103.507C103.654 18.6 103.774 18.6467 103.867 18.74C103.961 18.8333 104.007 18.9533 104.007 19.1V19.86C104.354 19.4467 104.807 19.1 105.367 18.82C105.927 18.54 106.587 18.4 107.347 18.4C108.121 18.4 108.801 18.5733 109.387 18.92C109.987 19.2667 110.454 19.78 110.787 20.46C111.134 21.1267 111.307 21.9467 111.307 22.92V28.5C111.307 28.6467 111.254 28.7667 111.147 28.86C111.054 28.9533 110.941 29 110.807 29H108.287C108.154 29 108.034 28.9533 107.927 28.86C107.834 28.7667 107.787 28.6467 107.787 28.5V23.04C107.787 22.4133 107.634 21.9333 107.327 21.6C107.034 21.2533 106.594 21.08 106.007 21.08C105.461 21.08 105.021 21.2533 104.687 21.6C104.367 21.9333 104.207 22.4133 104.207 23.04V28.5C104.207 28.6467 104.154 28.7667 104.047 28.86C103.954 28.9533 103.841 29 103.707 29H101.207ZM118.339 29.2C116.766 29.2 115.513 28.7733 114.579 27.92C113.646 27.0667 113.159 25.8 113.119 24.12C113.119 24.0267 113.119 23.9067 113.119 23.76C113.119 23.6133 113.119 23.5 113.119 23.42C113.159 22.3667 113.393 21.4667 113.819 20.72C114.259 19.96 114.859 19.3867 115.619 19C116.393 18.6 117.293 18.4 118.319 18.4C119.493 18.4 120.459 18.6333 121.219 19.1C121.993 19.5667 122.573 20.2 122.959 21C123.346 21.8 123.539 22.7133 123.539 23.74V24.22C123.539 24.3667 123.486 24.4867 123.379 24.58C123.286 24.6733 123.173 24.72 123.039 24.72H116.639C116.639 24.7333 116.639 24.7533 116.639 24.78C116.639 24.8067 116.639 24.8333 116.639 24.86C116.653 25.2467 116.719 25.6 116.839 25.92C116.959 26.24 117.146 26.4933 117.399 26.68C117.653 26.8667 117.959 26.96 118.319 26.96C118.586 26.96 118.806 26.92 118.979 26.84C119.166 26.7467 119.319 26.6467 119.439 26.54C119.559 26.42 119.653 26.32 119.719 26.24C119.839 26.1067 119.933 26.0267 119.999 26C120.079 25.96 120.199 25.94 120.359 25.94H122.839C122.973 25.94 123.079 25.98 123.159 26.06C123.253 26.1267 123.293 26.2267 123.279 26.36C123.266 26.5867 123.153 26.86 122.939 27.18C122.726 27.5 122.413 27.82 121.999 28.14C121.599 28.4467 121.093 28.7 120.479 28.9C119.866 29.1 119.153 29.2 118.339 29.2ZM116.639 22.74H120.019V22.7C120.019 22.2733 119.953 21.9 119.819 21.58C119.699 21.26 119.506 21.0133 119.239 20.84C118.986 20.6667 118.679 20.58 118.319 20.58C117.959 20.58 117.653 20.6667 117.399 20.84C117.159 21.0133 116.973 21.26 116.839 21.58C116.706 21.9 116.639 22.2733 116.639 22.7V22.74ZM130.194 29.2C129.208 29.2 128.334 29.02 127.574 28.66C126.814 28.3 126.208 27.78 125.754 27.1C125.314 26.4067 125.074 25.58 125.034 24.62C125.021 24.4067 125.014 24.14 125.014 23.82C125.014 23.4867 125.021 23.2133 125.034 23C125.074 22.0267 125.314 21.2 125.754 20.52C126.194 19.8267 126.794 19.3 127.554 18.94C128.328 18.58 129.208 18.4 130.194 18.4C131.114 18.4 131.901 18.5333 132.554 18.8C133.208 19.0533 133.741 19.3733 134.154 19.76C134.568 20.1467 134.874 20.5467 135.074 20.96C135.288 21.36 135.401 21.7133 135.414 22.02C135.428 22.1533 135.381 22.2733 135.274 22.38C135.168 22.4733 135.048 22.52 134.914 22.52H132.374C132.228 22.52 132.114 22.4867 132.034 22.42C131.954 22.3533 131.881 22.2533 131.814 22.12C131.654 21.7067 131.448 21.4133 131.194 21.24C130.954 21.0667 130.641 20.98 130.254 20.98C129.721 20.98 129.308 21.1533 129.014 21.5C128.734 21.8467 128.581 22.38 128.554 23.1C128.541 23.6333 128.541 24.1067 128.554 24.52C128.581 25.2533 128.734 25.7867 129.014 26.12C129.308 26.4533 129.721 26.62 130.254 26.62C130.668 26.62 130.994 26.5333 131.234 26.36C131.474 26.1867 131.668 25.8933 131.814 25.48C131.881 25.3467 131.954 25.2467 132.034 25.18C132.114 25.1133 132.228 25.08 132.374 25.08H134.914C135.048 25.08 135.168 25.1333 135.274 25.24C135.381 25.3333 135.428 25.4467 135.414 25.58C135.401 25.8067 135.334 26.0733 135.214 26.38C135.094 26.6733 134.908 26.9867 134.654 27.32C134.401 27.6533 134.068 27.9667 133.654 28.26C133.254 28.54 132.768 28.7667 132.194 28.94C131.621 29.1133 130.954 29.2 130.194 29.2ZM142.531 29C141.678 29 140.938 28.8667 140.311 28.6C139.698 28.32 139.225 27.8933 138.891 27.32C138.558 26.7333 138.391 25.98 138.391 25.06V21.22H136.831C136.685 21.22 136.558 21.1733 136.451 21.08C136.358 20.9867 136.311 20.8667 136.311 20.72V19.1C136.311 18.9533 136.358 18.8333 136.451 18.74C136.558 18.6467 136.685 18.6 136.831 18.6H138.391V15.3C138.391 15.1533 138.438 15.0333 138.531 14.94C138.638 14.8467 138.758 14.8 138.891 14.8H141.211C141.358 14.8 141.478 14.8467 141.571 14.94C141.665 15.0333 141.711 15.1533 141.711 15.3V18.6H144.211C144.358 18.6 144.478 18.6467 144.571 18.74C144.665 18.8333 144.711 18.9533 144.711 19.1V20.72C144.711 20.8667 144.665 20.9867 144.571 21.08C144.478 21.1733 144.358 21.22 144.211 21.22H141.711V24.78C141.711 25.2333 141.798 25.5933 141.971 25.86C142.145 26.1267 142.438 26.26 142.851 26.26H144.391C144.538 26.26 144.658 26.3067 144.751 26.4C144.845 26.4933 144.891 26.6133 144.891 26.76V28.5C144.891 28.6467 144.845 28.7667 144.751 28.86C144.658 28.9533 144.538 29 144.391 29H142.531Z"
+        fill="current"
+      />
+    </svg>
+  );
+};
diff --git a/frontend/components/templates/CommunitySection.tsx b/frontend/components/templates/CommunitySection.tsx
index 6b6b685..826e12a 100644
--- a/frontend/components/templates/CommunitySection.tsx
+++ b/frontend/components/templates/CommunitySection.tsx
@@ -39,11 +39,11 @@ export const CommunitySection = ({ content }: CommunityProps) => {
             <a
               key={"vdo-" + index}
               href={video.href}
-              className="w-full grid grid-cols-2 gap-4 items-center "
+              className="group w-full grid grid-cols-2 gap-4 items-center "
             >
               <Image
                 src={video.image}
-                className="aspect-video w-full rounded-lg"
+                className="aspect-video w-full rounded-lg object-cover group-hover:scale-105 transition-all ease-in"
                 alt=""
                 width={200}
                 height={100}
diff --git a/frontend/components/templates/MapSection.tsx b/frontend/components/templates/MapSection.tsx
index 1a56b63..47dd866 100644
--- a/frontend/components/templates/MapSection.tsx
+++ b/frontend/components/templates/MapSection.tsx
@@ -69,7 +69,7 @@ export default function Map({ content }: MapProp) {
             </MapContainer>
           </div>
           <div className="w-full h-full flex flex-col items-center jusitfy-start">
-            <div className="w-full flex flex-col border border-[#E6E6FF] rounded-xl bg-[#F1F6FA] h-fit">
+            <div className="w-full flex flex-col border border-[#E6E6FF] rounded-xl bg-[#F1F6FA] dark:bg-[#1F344A] dark:border-[#546C87] h-fit overflow-hidden">
               {content.locations.map(
                 (
                   location: {
@@ -85,7 +85,7 @@ export default function Map({ content }: MapProp) {
                     href={location.href}
                     target="_blank"
                   >
-                    <div className="w-full py-4 px-6 text-xl font-bold flex flex-row items-center justify-between hover:bg-[#EEEEFB] cursor-pointer">
+                    <div className="w-full py-4 px-6 text-xl font-bold flex flex-row items-center justify-between hover:bg-[#EEEEFB] hover:bg-[#546C87] cursor-pointer">
                       {location.eventName}
                       <ArrowRight className="-rotate-45 stroke-[#838793]" />
                     </div>
diff --git a/frontend/components/templates/ServicesCard.tsx b/frontend/components/templates/ServicesCard.tsx
index b7bdafa..d357b0b 100644
--- a/frontend/components/templates/ServicesCard.tsx
+++ b/frontend/components/templates/ServicesCard.tsx
@@ -23,20 +23,20 @@ export const ServicesCard = ({ cards }: CardsProps) => {
 
 const Card = ({ card }: any) => {
   return (
-    <div className="border border-#EFEFEF shadow-sm rounded-xl overflow-hidden">
+    <div className="border border-[#EFEFEF] dark:border-[#1F344A] shadow-sm rounded-xl overflow-hidden">
       <div className="relative aspec-video w-full">
-        <div className="relative z-20 mix-blend-multiply bg-[#D1DBFF] h-full" />
+        <div className="relative z-20 mix-blend-multiply bg-[#D1DBFF] dark:bg-[#1F344A] h-full" />
         <Image
           src={card.image}
           alt=""
           width={432}
           height={246}
-          className="relative z-10 w-full"
+          className="relative z-10 w-full object-cover aspect-video"
           priority
         />
       </div>
-      <div className="flex flex-col gap-2 items-start justify-center text-left p-6">
-        <h3 className="text-xl font-medium truncate w-full">{card.name}</h3>
+      <div className="flex flex-col gap-2 items-start justify-center text-left text-foreground-main p-6">
+        <h3 className="text-lg font-medium truncate w-full">{card.name}</h3>
         <p className="line-clamp-3">{card.content}</p>
       </div>
     </div>
diff --git a/frontend/components/templates/ServicesSection.tsx b/frontend/components/templates/ServicesSection.tsx
index 0a856e7..8de0f96 100644
--- a/frontend/components/templates/ServicesSection.tsx
+++ b/frontend/components/templates/ServicesSection.tsx
@@ -18,7 +18,7 @@ interface sectionProps {
 
 export const ServicesSection = ({ content }: sectionProps) => {
   return (
-    <div className="w-full bg-gradient-to-b from-[#FCFCFF] to-white border-t border-[#E6E6FF]">
+    <div className="w-full bg-gradient-to-b from-[#FCFCFF] to-white border-t border-[#E6E6FF] dark:bg-gradient-to-b dark:from-[#1F344A] dark:to-background-main dark:border-[#1F344A]">
       <Container className="gap-8 justify-center items-center">
         <h2 id={"service-section"} className="text-3xl font-bold mr-auto">
           {content.title}
diff --git a/frontend/components/templates/SocialProofSection.tsx b/frontend/components/templates/SocialProofSection.tsx
index eaffdd3..a454083 100644
--- a/frontend/components/templates/SocialProofSection.tsx
+++ b/frontend/components/templates/SocialProofSection.tsx
@@ -24,7 +24,7 @@ export const SocialProofSection = ({
           <div key={"logo-" + index} className="w-[100px] h-[40px]">
             <a
               href={logo.href}
-              className="inline-block w-[100px] h-[40px]"
+              className="inline-block w-[100px] h-[40px] hover:scale-105 transition-all ease-in"
               target="_blank"
             >
               <Image
@@ -32,7 +32,7 @@ export const SocialProofSection = ({
                 width={100}
                 height={40}
                 alt=""
-                className="w-full h-full object-contain"
+                className="w-full h-full object-contain aspect-video py-1 dark:invert-[100%] dark:brightness-[0%]"
               />
             </a>
           </div>
diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx
index 2645c2b..992a680 100644
--- a/frontend/components/ui/button.tsx
+++ b/frontend/components/ui/button.tsx
@@ -5,12 +5,12 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all hover:scale-105 ease-in focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
         default:
-          "group inline-flex gap-4 items-center justify-center  w-fit rounded-full bg-background-accent text-white",
+          "group inline-flex gap-4 items-center justify-center  w-fit rounded-full bg-background-accent text-foreground-invert stroke-foreground-invert",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
@@ -18,7 +18,7 @@ const buttonVariants = cva(
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+        link: "text-foreground-invert underline-offset-4 hover:underline",
       },
       size: {
         default: "px-6 py-3",
diff --git a/frontend/components/ui/input.tsx b/frontend/components/ui/input.tsx
index 644632d..25f20f5 100644
--- a/frontend/components/ui/input.tsx
+++ b/frontend/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input dark:border-[#546C87] bg-background-main px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}
diff --git a/frontend/components/ui/textarea.tsx b/frontend/components/ui/textarea.tsx
index 0f3eac6..9eb9cbd 100644
--- a/frontend/components/ui/textarea.tsx
+++ b/frontend/components/ui/textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[80px] w-full rounded-md border border-input  dark:border-[#546C87] bg-background-main px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}
diff --git a/frontend/content/socialproof.ts b/frontend/content/socialproof.ts
index b20b94d..e62cbb9 100644
--- a/frontend/content/socialproof.ts
+++ b/frontend/content/socialproof.ts
@@ -38,5 +38,9 @@ export const socialProof = {
       image: "/images/company-logos/gdg.svg",
       href: "https://developers.google.com/community/gdg",
     },
+    {
+      image: "/images/company-logos/hubql-logomark-dark.svg",
+      href: "https://www.hubql.com",
+    },
   ],
 };
diff --git a/frontend/public/images/company-logos/hubql-logomark-dark.svg b/frontend/public/images/company-logos/hubql-logomark-dark.svg
new file mode 100644
index 0000000..29ce780
--- /dev/null
+++ b/frontend/public/images/company-logos/hubql-logomark-dark.svg
@@ -0,0 +1,5 @@
+<svg width="672" height="170" viewBox="0 0 672 170" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M216.345 52.5155C219.447 47.9286 223.211 44.3287 227.635 41.7167C232.116 39.1037 237.114 37.7977 242.63 37.7977C247.513 37.7977 251.995 38.5518 256.074 40.0619C260.153 41.5136 263.657 43.8065 266.587 46.9417C269.518 50.0769 271.787 54.1118 273.396 59.0475C275.062 63.9246 275.895 69.8175 275.895 76.727V133.771H251.937V76.5526C251.937 73.1846 251.506 70.2822 250.645 67.8436C249.84 65.405 248.662 63.4312 247.111 61.9211C245.56 60.4119 243.693 59.3091 241.509 58.6115C239.326 57.8574 236.855 57.4799 234.098 57.4799C230.076 57.4799 226.572 58.2052 223.584 59.6569C220.654 61.1085 218.241 63.1408 216.345 65.7528V133.771H192.388V0H216.345V52.5155ZM350.791 120.534C347.631 125.236 343.81 128.922 339.329 131.594C334.905 134.264 330.05 135.6 324.765 135.6C319.939 135.6 315.515 134.845 311.493 133.336C307.472 131.826 304.024 129.446 301.152 126.194C298.279 122.885 296.039 118.704 294.43 113.653C292.879 108.544 292.103 102.418 292.103 95.2766V39.5387H316.061V95.451C316.061 99.2828 316.319 102.505 316.837 105.118C317.411 107.731 318.302 109.85 319.508 111.476C320.715 113.043 322.294 114.176 324.248 114.873C326.201 115.569 328.585 115.917 331.401 115.917C336.169 115.917 340.048 115.017 343.034 113.218C346.022 111.36 348.292 108.834 349.843 105.64V39.5387H373.887V133.771H352.17L350.791 120.534ZM474.292 87.613C474.292 94.6384 473.517 101.083 471.965 106.947C470.471 112.811 468.202 117.862 465.157 122.101C462.112 126.339 458.32 129.649 453.782 132.029C449.243 134.352 443.957 135.513 437.925 135.513C432.467 135.513 427.727 134.496 423.705 132.465C419.741 130.374 416.323 127.472 413.45 123.756L412.33 133.771H390.785V0H414.742V48.0743C417.5 44.8222 420.746 42.2974 424.481 40.4969C428.272 38.6974 432.696 37.7977 437.752 37.7977C443.842 37.7977 449.156 38.9878 453.695 41.3679C458.292 43.748 462.112 47.0576 465.157 51.2967C468.202 55.5347 470.471 60.615 471.965 66.5366C473.517 72.4008 474.292 78.8168 474.292 85.7838V87.613ZM450.334 85.7838C450.334 81.952 450.047 78.3233 449.472 74.8978C448.898 71.4723 447.893 68.4818 446.456 65.9272C445.078 63.3142 443.181 61.2532 440.768 59.7441C438.355 58.2349 435.339 57.4799 431.72 57.4799C427.354 57.4799 423.791 58.4083 421.033 60.2663C418.334 62.1242 416.236 64.6787 414.742 67.9308V105.467C416.236 108.718 418.334 111.273 421.033 113.131C423.791 114.988 427.41 115.917 431.892 115.917C435.512 115.917 438.499 115.22 440.854 113.827C443.211 112.375 445.078 110.402 446.456 107.905C447.893 105.35 448.898 102.36 449.472 98.935C450.047 95.451 450.334 91.6777 450.334 87.613V85.7838ZM486.795 85.871C486.795 78.7296 487.599 72.1976 489.208 66.276C490.817 60.3534 493.172 55.3029 496.274 51.1223C499.435 46.8832 503.283 43.6034 507.822 41.2807C512.419 38.958 517.675 37.7977 523.593 37.7977C528.879 37.7977 533.475 38.7846 537.382 40.7585C541.346 42.7324 544.764 45.5198 547.637 49.1187L549.102 39.5387H570.216V170H546.172V125.758C543.357 128.894 540.082 131.304 536.347 132.987C532.614 134.671 528.304 135.513 523.421 135.513C517.561 135.513 512.361 134.323 507.822 131.942C503.283 129.503 499.463 126.165 496.361 121.927C493.258 117.63 490.874 112.579 489.208 106.773C487.599 100.909 486.795 94.5512 486.795 87.7002V85.871ZM510.753 87.7002C510.753 91.5904 511.097 95.2478 511.786 98.6734C512.476 102.099 513.568 105.118 515.061 107.731C516.556 110.286 518.48 112.318 520.836 113.827C523.249 115.336 526.15 116.091 529.54 116.091C533.733 116.091 537.151 115.25 539.795 113.566C542.495 111.882 544.621 109.559 546.172 106.599V66.5366C544.621 63.6343 542.495 61.3988 539.795 59.8312C537.151 58.2052 533.791 57.3927 529.712 57.3927C526.323 57.3927 523.421 58.1477 521.008 59.6569C518.652 61.1085 516.699 63.1111 515.148 65.6666C513.654 68.2212 512.534 71.2404 511.786 74.7234C511.097 78.1489 510.753 81.8648 510.753 85.871V87.7002ZM593.146 0H645.285V114.089H672V133.771H593.146V114.089H621.069V19.7694H593.146V0Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M130.106 17.9599H23.3702C16.2424 17.9599 10.4643 23.8116 10.4643 31.03V139.124C10.4643 146.342 16.2424 152.194 23.3702 152.194H130.106C137.233 152.194 143.012 146.342 143.012 139.124V31.03C143.012 23.8116 137.233 17.9599 130.106 17.9599ZM23.3702 7.36249C10.4632 7.36249 0 17.9588 0 31.03V139.124C0 152.195 10.4632 162.791 23.3702 162.791H130.106C143.013 162.791 153.476 152.195 153.476 139.124V31.03C153.476 17.9588 143.013 7.36249 130.106 7.36249H23.3702Z" fill="black"/>
+<path d="M82.0672 120.756C82.0672 124.138 81.6231 127.144 80.7349 129.775C79.8467 132.405 78.5699 134.622 76.9045 136.426C75.2391 138.229 73.2036 139.601 70.798 140.54C68.4294 141.48 65.7278 141.949 62.6931 141.949C61.3977 141.949 60.2135 141.874 59.1402 141.724C58.104 141.611 56.9937 141.367 55.8094 140.991L56.4756 130.338C56.8087 130.451 57.2158 130.545 57.6969 130.62C58.215 130.733 58.7331 130.808 59.2512 130.846C59.8064 130.921 60.343 130.977 60.8611 131.015C61.3793 131.052 61.8049 131.071 62.1379 131.071C64.2844 131.071 65.9313 130.15 67.0786 128.309C68.2259 126.505 68.7995 123.988 68.7995 120.756V49.2284C68.7995 45.8464 69.2621 42.8403 70.1874 40.2099C71.1496 37.5795 72.5004 35.3812 74.2398 33.6151C76.0163 31.849 78.1628 30.515 80.6794 29.6132C83.233 28.6738 86.1012 28.2041 89.284 28.2041C90.6903 28.2041 92.0781 28.3168 93.4474 28.5422C94.8538 28.7677 96.2601 29.0495 97.6665 29.3877L96.3341 39.6462C95.631 39.4584 94.8723 39.3268 94.0581 39.2517C93.2439 39.1389 92.3002 39.0826 91.2269 39.0826C88.2292 39.0826 85.9532 39.9844 84.3988 41.7881C82.8444 43.5542 82.0672 46.0343 82.0672 49.2284V120.756Z" fill="#0A8939"/>
+</svg>
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 8c25553..eb14c6b 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -11,10 +11,12 @@ const config: Config = {
       colors: {
         foreground: {
           main: "var(--foreground)",
+          invert: "var(--foreground-invert)",
         },
         background: {
           main: "var(--background)",
           accent: "var(--foreground)",
+          invert: "var(--background-invert)",
         },
       },
       backgroundImage: {