styling: update for dark mode and fix service card image size

rocket-connect · May 30, 2024 · 87a1919 · 87a1919
1 parent 03ab7f4
commit 87a1919
Show file tree

Hide file tree

Showing 17 changed files with 86 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -2,23 +2,17 @@ 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 (
     <Container className="py-2">
       <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -24,15 +24,15 @@ 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
                 src={logo.image}
                 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>