Website revamp

_includes/BottomFooter.jsx

@@ -3,19 +3,20 @@ const { ContainerFluid } = require("@layouts/Container")
 const { RegularButton } = require("./CTA")
 const { Paragraph } = require("./Texts")
 const { BodyHead } = require("./Texts")
-import { CNCFLogo, CnSVG, LitmusLogoDark } from "@components/SVG/FooterSVG"
+import Image from "next/image"
+import { CNCFLogo, CnSVG, LitmusLogo } from "@components/SVG/FooterSVG"
 import { GithubButton } from "@components/SVG/NavbarSVG"
 import styles from "@includes/scss/Footer.module.scss"
 import Link from "next/link"
 import { FooterData } from "./Footer.data"
 
 const PreFooter = props => {
   return (
-    <ContainerFluid className={`${props.attached ? "" : "bg-[#FAFBFC]"}`}>
-      <Container className="flex flex-col gap-8 items-center md:flex-row py-6 md:py-12 lg:py-20">
+    <ContainerFluid className={`${props.attached ? "" : "bg-white"}`}>
+      <Container className="flex flex-col gap-8 items-center md:flex-row py-8 md:py-16">
         <div className="w-full md:w-1/2">
-          <BodyHead>Chaos Engineering made easy</BodyHead>
-          <Paragraph hint className="mt-4">
+          <BodyHead className="text-center md:text-left">Chaos Engineering made easy</BodyHead>
+          <Paragraph hint className="mt-4 text-center md:text-left">
             Litmus is highly extensible and integrates with other tools to
             enable the creation of custom experiments. Kubernetes developers &
             SREs use Litmus to manage chaos in a declarative manner and find
@@ -50,15 +51,20 @@ const BottomFooter = props => {
       <ContainerFluid className={styles.footerFluidCont}>
         <Container className={styles.footerCont}>
           <div className={styles.companyDetCont}>
-            <Link href="/">
-              <a>
-                <LitmusLogoDark />
-              </a>
-            </Link>
-            <Paragraph dark secondary className="mb-4">
-              Copyright © 2020 LitmusChaos Authors. All rights reserved.
+          <Link href="/">
+                <a>
+                  <Image
+                    src="/logos/dark-logo.svg"
+                    alt="Litmus"
+                    height={51.26}
+                    width={134}
+                  />
+                </a>
+              </Link>
+            <Paragraph secondary className="mb-4 text-[#573e69cc]">
+              Copyright © {new Date().getFullYear()} LitmusChaos Authors. All rights reserved.
             </Paragraph>
-            <Paragraph dark secondary>
+            <Paragraph dark secondary className="text-[#808080]">
               The Linux Foundation has registered trademarks and uses
               trademarks. For a list of trademarks of The Linux Foundation,
               please see our{" "}
@@ -120,7 +126,7 @@ const BottomFooter = props => {
         </Container>
         <Container className="pb-12 flex justify-center items-center">
           <span className="flex gap-1 items-center md:items-baseline flex-col md:flex-row">
-            <Paragraph dark className="font-medium">
+            <Paragraph dark className="font-medium text-[#808080]">
               Originally created by
             </Paragraph>
             <Link href="https://www.chaosnative.com/">

_includes/Texts.jsx

@@ -24,7 +24,7 @@ const HeroHead = props => {
   return (
     <h1
       className={`${styles.heading} ${props.className} ${
-        props.hero ? "font-bold text-center lg:text-left" : "font-medium"
+        props.hero ? "font-bold text-center" : "font-medium"
       } ${
         props.dark
           ? "text-white"

_includes/TopNavbar.jsx

@@ -97,10 +97,10 @@ const TopNavbar = () => {
               <Link href="/">
                 <a>
                   <Image
-                    src="/logo.png"
+                    src="/logos/dark-logo.svg"
                     alt="Litmus"
-                    height={51.26}
-                    width={134}
+                    height={40}
+                    width={120}
                   />
                 </a>
               </Link>

_includes/scss/About.module.scss

@@ -25,3 +25,101 @@ div.partDiv {
     }
   }
 }
+
+/* GetStarted Section Styles */
+.getStartedLeftContainer {
+  background-color: rgb(230, 230, 252);
+  border-radius: 12px;
+  box-shadow: rgba(50, 87, 120, 0.09) 0px 0.796192px 0.796192px -0.4375px, 
+              rgba(50, 87, 120, 0.1) 0px 2.41451px 2.41451px -0.875px, 
+              rgba(50, 87, 120, 0.11) 0px 6.38265px 6.38265px -1.3125px, 
+              rgba(50, 87, 120, 0.16) 0px 20px 20px -1.75px;
+  opacity: 1;
+  height: 100%;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 24px;
+}
+
+.getStartedRightContainer {
+  background-color: white;
+  border-radius: 12px;
+  box-shadow: rgba(50, 87, 120, 0.09) 0px 0.796192px 0.796192px -0.4375px, 
+              rgba(50, 87, 120, 0.1) 0px 2.41451px 2.41451px -0.875px, 
+              rgba(50, 87, 120, 0.11) 0px 6.38265px 6.38265px -1.3125px, 
+              rgba(50, 87, 120, 0.16) 0px 20px 20px -1.75px;
+  padding: 0;
+  width: 100%;
+  border: 1px solid rgb(228, 223, 220);
+
+  @include mediumScreens {
+    min-height: 300px;
+  }
+}
+
+.iconContainer {
+  width: 64px;
+  height: 64px;
+}
+
+.iconSvg {
+  user-select: none;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  fill: rgb(90, 68, 185);
+  color: rgb(90, 68, 185);
+  flex-shrink: 0;
+}
+
+.quickStartText {
+  color: rgb(90, 68, 185);
+  font-size: 1.125rem; /* 18px - mobile base */
+  font-weight: 600;
+
+  @include mediumScreens {
+    font-size: 1.25rem; /* 20px - tablet */
+  }
+
+  @include mediumScreensDesk {
+    font-size: 1.5rem; /* 24px - desktop */
+  }
+}
+
+.tabButton {
+  border-radius: 12px;
+}
+
+.tabButtonActive {
+  border-top-right-radius: 0;
+}
+
+.tabButtonInactive {
+  border-top-left-radius: 0;
+}
+
+.stepIcon {
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 10;
+  background-color: white;
+  border-radius: 8px;
+  padding: 8px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid rgb(243, 244, 246);
+}
+
+.stepIconSvg {
+  user-select: none;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  fill: rgb(91, 68, 186);
+  color: rgb(91, 68, 186);
+  flex-shrink: 0;
+}

_includes/scss/Adopters.module.scss

@@ -1,6 +1,72 @@
 @import "@styles/scss/layoutMixins";
 @import "@styles/scss/Variables.scss";
 
+// Floating logo animations
+@keyframes scrollLeft {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes scrollRight {
+  0% {
+    transform: translateX(-50%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+.scrollLeft {
+  animation: scrollLeft 150s linear infinite;
+}
+
+.scrollRight {
+  animation: scrollRight 150s linear infinite;
+}
+
+.logoContainer {
+  mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 10%, rgb(0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
+  -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 10%, rgb(0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
+  overflow: hidden;
+}
+
+// Modern adopter cards with enhanced styling
+.modernAdopterCard {
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  overflow: hidden;
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.adopterLogoCard {
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+    pointer-events: none;
+  }
+}
+
+// Legacy styles for backward compatibility
 div.adopterListCardCont {
   display: flex;
   flex-direction: column;