Tweak landing page styles and fonts

docs/docs/homepage/case-studies.ts

@@ -4,7 +4,7 @@ export const FeaturedCaseStudy = {
   content: translate({
     id: "homepage.caseStudy.content",
     message:
-      "From enabling micropayments with near-zero feesand instant processing to boosting the performanceof decentralized finance (DeFi) applications and enhancing real-time gaming experiences, Hydra can enhance user engagement across various sectors. Discover how Hydra’s cost-efficient, scalable, andlow-latency transactions can address real-world problems and support innovative solutions on the Cardano platform. ",
+      "From enabling micropayments with near-zero fees and instant processing to boosting the performanceof decentralized finance (DeFi) applications and enhancing real-time gaming experiences, Hydra can enhance user engagement across various sectors. Discover how Hydra’s cost-efficient, scalable, andlow-latency transactions can address real-world problems and support innovative solutions on the Cardano platform. ",
   }),
   src: require("@site/static/img/case-studies.png").default,
   mobileSrc: require("@site/static/img/case-studies-mobile.png").default,

docs/src/components/homepage/AnimatedText.tsx

@@ -43,7 +43,7 @@ const processText = (children: React.ReactNode): React.ReactNode =>
 const AnimatedText: FC = () => {
   const [popTextClass, setPopTextClass] = useState("");
   return (
-    <section className="component tablet:px-[72px]">
+    <section className="component max-w-[1040px] mx-auto">
       <motion.div
         className="homepageText"
         variants={{

docs/src/components/homepage/Carousel/Coursel.tsx

@@ -41,8 +41,8 @@ const CarouselEntry: FC<Props> = ({ idx, src, description }) => {
               <Square className="mt-1" />
               Passengers <span className="font-bold">(Participants)</span>
             </span>
-            <span className="inline-flex">
-              <Triangle className="mt-[3px] gap-[5px]" />
+            <span className="inline-flex gap-[5px]">
+              <Triangle className="mt-[3px]" />
               Passengers <span className="font-bold">(Participants)</span>
             </span>
           </div>

docs/src/components/homepage/Carousel/ResponsiveCarousel.tsx

@@ -33,8 +33,8 @@ const CarouselEntryDescription: FC<Props> = ({ description, idx }) => {
               <Square className="mt-1" />
               Passengers <span className="font-bold">(Participants)</span>
             </span>
-            <span className="inline-flex">
-              <Triangle className="mt-[3px] gap-[5px]" />
+            <span className="inline-flex gap-[5px]">
+              <Triangle className="mt-[3px]" />
               Passengers <span className="font-bold">(Participants)</span>
             </span>
           </div>

docs/src/components/homepage/CaseStudies.tsx

@@ -9,7 +9,7 @@ import { FeaturedCaseStudy } from "../../../docs/homepage/case-studies";
 const CaseStudies: FC = () => {
   const isLaptopUp = useMediaQuery(forLaptop);
   return (
-    <section className="bg-[#E7EEF0]">
+    <section className="bg-teal-extralight">
       <motion.div
         className="component pageContainer"
         initial="hidden"

docs/src/components/homepage/Features.tsx

@@ -27,7 +27,7 @@ const Feature: FC<Props> = ({ icon, title, description, tagLine }) => {
         {icon}
         <h6 className="text-2xl">{title}</h6>
       </div>
-      <p className="tablet:max-w-80">{description}</p>
+      <p>{description}</p>
       <span
         className={clsx(
           "p-2 w-fit text-sm",
@@ -59,7 +59,7 @@ const Features: FC = () => {
         >
           / FEATURES
         </motion.h5>
-        <motion.div className="grid laptop:grid-cols-3 laptop:grid-rows-2 laptop:grid-flow-row tablet:grid-rows-3 tablet:grid-flow-col gap-x-[52px] tablet:gap-y-6 laptop:gap-y-14 gap-y-14">
+        <motion.div className="grid laptop:grid-cols-3 laptop:grid-rows-2 laptop:grid-flow-row tablet:grid-rows-3 tablet:grid-flow-col gap-x-6 tablet:gap-y-6 laptop:gap-y-14 gap-y-14">
           {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} />
           ))}

docs/src/components/homepage/FeaturesFAQ.tsx

@@ -22,7 +22,9 @@ const FAQ: FC<Props> = ({ title, description }) => {
         hidden: { opacity: 0, y: 100 },
       }}
     >
-      <span className="text-2xl min-w-40 tablet:self-center">{title}</span>
+      <span className="text-2xl min-w-40 tablet:self-center font-bold">
+        {title}
+      </span>
       <p className="tablet:border-l tablet:border-t-0 border-t border-solid border-white/25 tablet:pl-12 tablet:ml-12 mt-3 pt-3 tablet:pt-0 tablet:mt-0 max-w-xl">
         {description}
       </p>

docs/src/components/homepage/HomepageHero.tsx

@@ -34,8 +34,8 @@ const HomepageHero: FC = () => {
         />
       </video>
       <div className="pageContainer">
-        <div className="component my-6">
-          <div className="pb-8 tablet:max-w-md">
+        <div className="component-sm">
+          <div className="pb-9 tablet:max-w-[485px]">
             <motion.h1
               className="tablet:text-[56px] tablet:leading-[67px] text-4xl leading-[48px] text-teal font-medium pb-4"
               initial={{ opacity: 0 }}
@@ -58,11 +58,10 @@ const HomepageHero: FC = () => {
             transition={{ ease: "easeInOut", duration: 0.75, delay: 1.2 }}
           >
             <Link
-              className="px-4 py-3 justify-center border border-solid border-teal font-bold text-teal rounded-lg no-underline hover:bg-teal/15 hover:no-underline hover:text-teal
-      "
+              className="inline-block px-4 py-3 border border-solid border-teal font-bold text-sm text-teal rounded-lg no-underline bg-white hover:bg-teal-extralight hover:no-underline hover:text-teal"
               to="/docs/getting-started"
             >
-              Learn More
+              Learn more
             </Link>
           </motion.div>
         </div>

docs/src/css/custom.css

@@ -11,7 +11,21 @@
 @font-face {
   font-family: "Lexend";
   font-weight: 400;
-  src: url("/fonts/Lexend-Regular.ttf");
+  src: url("/fonts/Lexend-VariableFont.ttf");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Lexend";
+  font-weight: 500;
+  src: url("/fonts/Lexend-VariableFont.ttf");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Lexend";
+  font-weight: 600;
+  src: url("/fonts/Lexend-VariableFont.ttf");
   font-display: swap;
 }
 
@@ -30,6 +44,13 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: "Inter";
+  font-weight: 700;
+  src: url("/fonts/Inter-VariableFont.ttf");
+  font-display: swap;
+}
+
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #12506c;
@@ -92,7 +113,7 @@ html {
 }
 
 .pageContainer {
-  max-width: 1184px;
+  max-width: 1280px;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
@@ -112,6 +133,11 @@ html {
   padding-bottom: 72px;
 }
 
+.component-sm {
+  padding-top: 63px;
+  padding-bottom: 63px;
+}
+
 /* Hide scrollbar for Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
   display: none;

docs/src/theme/Footer/Layout/index.js

@@ -45,8 +45,7 @@ export default function FooterLayout({ style, links, logo, copyright }) {
               Lorem Ipsum is simply dummy text of the printing{" "}
             </span>
             <Link
-              className="px-4 py-3 justify-center text-center border text-sm border-solid bg-teal-lightest border-teal font-bold text-teal rounded-lg no-underline hover:bg-teal-light hover:no-underline hover:text-teal
-      "
+              className="px-4 py-3 justify-center text-center border text-sm border-solid bg-teal-lightest border-teal font-bold text-teal rounded-lg no-underline hover:bg-teal-light hover:no-underline hover:text-teal"
               target="_blank"
               to={"https://github.com/cardano-scaling/hydra"}
             >

docs/src/theme/Navbar/MobileSidebar/Layout/index.js

@@ -9,7 +9,7 @@ export default function NavbarMobileSidebarLayout({
 }) {
   const { shown: secondaryMenuShown } = useNavbarSecondaryMenu();
   return (
-    <div className="navbar-sidebar bg-[#E7EEF0] w-full transition-transform -translate-y-full">
+    <div className="navbar-sidebar bg-teal-extralight w-full transition-transform -translate-y-full">
       {header}
       <div
         className={clsx("navbar-sidebar__items", {

docs/tailwind.config.ts

@@ -51,6 +51,7 @@ const config: Config = {
         dark: "#08202B",
         light: "#7196A7",
         lightest: "#B8CBD3",
+        extralight: "#E7EEF0",
       },
       blue: {},
       black: "#283032",