Landing page amends (#1560)

Applying text and design amends from jira/slack comments

docs/docs/homepage/case-studies.ts

@@ -4,8 +4,8 @@ export const FeaturedCaseStudy = {
   content: translate({
     id: "homepage.caseStudy.content",
     message:
-      "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, and low-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 performance of 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, and low-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,
+  tabletSrc: require("@site/static/img/case-studies-tablet.png").default,
 };

docs/docs/homepage/features.tsx

@@ -11,13 +11,13 @@ export const FeatureList = [
   {
     title: translate({
       id: "homepage.featureList.lowLatency.title",
-      message: "Low Latency",
+      message: "Low latency",
     }),
     icon: <LowLatency />,
     description: translate({
       id: "homepage.featureList.lowLatency.description",
       message:
-        "Transaction finality is only bounded by Head network latency, resulting in near-instant settlement",
+        "Transaction finality is only bounded by head network latency, resulting in near-instant settlement",
     }),
   },
   {

docs/docusaurus.config.js

@@ -153,9 +153,9 @@ const config = {
         respectPrefersColorScheme: false,
       },
       navbar: {
-        title: "Hydra Head Protocol",
+        title: "Hydra Head protocol",
         logo: {
-          alt: "Hydra Head Protocol",
+          alt: "Hydra Head protocol",
           src: "img/hydra.png",
           style: { height: 27, marginTop: 2.5 },
           srcDark: "img/hydra-white.png",
@@ -168,7 +168,7 @@ const config = {
           },
           {
             to: "/docs/dev",
-            label: "Developer Documentation",
+            label: "Developer documentation",
             position: "right",
           },
           //commenting out for the time being
@@ -189,7 +189,7 @@ const config = {
           },
           {
             to: "/docs/faqs",
-            label: "FAQ",
+            label: "FAQs",
             position: "right",
           },
         ],
@@ -201,15 +201,15 @@ const config = {
             title: "Contributing",
             items: [
               {
-                label: "Coding Standards",
+                label: "Coding standards",
                 to: "https://github.com/cardano-scaling/hydra/wiki/Coding-Standards",
               },
               {
-                label: "Architectural Decision Records",
+                label: "Architectural decision records",
                 to: "/adr",
               },
               {
-                label: "Testing Strategy",
+                label: "Testing strategy",
                 to: "https://github.com/cardano-scaling/hydra/wiki/Testing-Strategy",
               },
             ],
@@ -222,7 +222,7 @@ const config = {
                 href: "https://discord.gg/Qq5vNTg9PT",
               },
               {
-                label: "Github",
+                label: "GitHub",
                 href: "https://github.com/cardano-scaling/hydra/discussions",
               },
               {
@@ -235,7 +235,7 @@ const config = {
             title: "More",
             items: [
               {
-                label: "Haskell Packages",
+                label: "Haskell packages",
                 to: "/docs/dev/haskell-packages",
               },
               {
@@ -252,11 +252,11 @@ const config = {
             title: "Legal",
             items: [
               {
-                label: "Terms & Conditions",
+                label: "Terms and conditions",
                 to: "https://static.iohk.io/terms/iohktermsandconditions.pdf",
               },
               {
-                label: "Privacy Policy",
+                label: "Privacy policy",
                 to: "https://static.iohk.io/terms/iog-privacy-policy.pdf",
               },
               {

docs/helpers/media-queries.ts

@@ -7,3 +7,5 @@ export const forTablet = "(min-width: 768px)";
 export const forLaptop = "(min-width: 1024px)";
 
 export const forDesktop = "(min-width: 1280px)";
+
+export const forTabletOnly = `${forTablet} and (max-width: 1024px)`;

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

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

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

@@ -109,7 +109,7 @@ const ResponsiveCarousel: FC = () => {
             centeredSlides={isTabletUp}
             spaceBetween={10}
             ref={sliderRef}
-            loop={!isTabletUp}
+            loop={false}
           >
             {isTabletUp
               ? HowItWorksCarouselContent.map((props, idx) => (

docs/src/components/homepage/CaseStudies.tsx

@@ -2,11 +2,12 @@ import React, { FC } from "react";
 import Link from "@docusaurus/Link";
 import Arrow from "../icons/Arrow";
 import useMediaQuery from "../../hooks/useMediaQuery";
-import { forLaptop } from "../../../helpers/media-queries";
+import { forLaptop, forTabletOnly } from "../../../helpers/media-queries";
 import { motion } from "framer-motion";
 import { FeaturedCaseStudy } from "../../../docs/homepage/case-studies";
 
 const CaseStudies: FC = () => {
+  const isTabletOnly = useMediaQuery(forTabletOnly);
   const isLaptopUp = useMediaQuery(forLaptop);
   return (
     <section className="bg-teal-extralight">
@@ -24,14 +25,14 @@ const CaseStudies: FC = () => {
         <h5 className="text-base text-teal pb-14">/ CASE STUDIES</h5>
         <div className="bg-white flex tablet:flex-row flex-col rounded-2xl overflow-hidden laptop:mb-10 tablet:p-8 justify-between gap-8">
           <div className="flex flex-col laptop:pt-20 gap-8 laptop:max-w-md px-4 py-8 tablet:p-0 tablet:basis-2/5">
-            <h4 className="text-2xl text-teal font-medium">Case Studies</h4>
+            <h4 className="text-2xl text-teal font-medium">Case studies</h4>
             <p>{FeaturedCaseStudy.content}</p>
             <Link
               className="bg-none text-teal self-start inline-flex gap-3 group hover:no-underline hover:text-teal"
               href="/use-cases"
             >
               {"View case studies "}
-              <Arrow className="mt-1 rounded-full group-hover:bg-teal/15" />
+              <Arrow className="mt-[3px] rounded-full group-hover:bg-teal/15" />
             </Link>
           </div>
           <motion.div
@@ -48,7 +49,9 @@ const CaseStudies: FC = () => {
             <img
               width={!isLaptopUp ? "100%" : "auto"}
               src={
-                isLaptopUp ? FeaturedCaseStudy.src : FeaturedCaseStudy.mobileSrc
+                isTabletOnly
+                  ? FeaturedCaseStudy.tabletSrc
+                  : FeaturedCaseStudy.src
               }
               className="tablet:rounded-2xl rounded-none"
             />

docs/src/components/homepage/Features.tsx

@@ -39,7 +39,7 @@ const Features: FC = () => {
     <section className="component bg-white">
       <div className="pageContainer">
         <motion.h5
-          className="text-base text-teal pb-[72px]"
+          className="text-base text-teal pb-14"
           initial="hidden"
           whileInView="visible"
           viewport={{ once: true }}

docs/src/components/homepage/HomepageHero.tsx

@@ -34,7 +34,7 @@ const HomepageHero: FC = () => {
         />
       </video>
       <div className="pageContainer">
-        <div className="component-sm">
+        <div className="component-lg tablet:py-[72px]">
           <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"
@@ -59,7 +59,7 @@ const HomepageHero: FC = () => {
           >
             <Link
               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"
+              to="/docs/protocol-overview"
             >
               Learn more
             </Link>

docs/src/components/homepage/WhyHydraHead.tsx

@@ -49,7 +49,7 @@ const WhyHydraHead: FC = () => {
               {`Read ${expanded ? "less" : "more"}`}{" "}
               <Arrow
                 className={clsx(
-                  "mt-1 rounded-full group-hover:bg-teal/15",
+                  "mt-[3px] rounded-full group-hover:bg-teal/15",
                   expanded ? "-rotate-90" : "rotate-90"
                 )}
               />

docs/src/css/custom.css

@@ -149,6 +149,11 @@ html {
   padding-bottom: 56px;
 }
 
+.component-lg {
+  padding-top: 96px;
+  padding-bottom: 96px;
+}
+
 /* Hide scrollbar for Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
   display: none;
@@ -260,6 +265,10 @@ svg.architecture {
   }
 }
 
+.navbar__brand:hover {
+  color: #283032;
+}
+
 .navbar__item {
   font-size: 14px;
   font-weight: 600;

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

@@ -1,8 +1,8 @@
 import React from "react";
 import clsx from "clsx";
-import Github from "../../../components/icons/Github";
 import Link from "@docusaurus/Link";
 import { useIsLandingPage } from "../../../hooks/useIsLandingPage";
+import HydraLogo from "../../../components/icons/HydraLogo";
 
 export default function FooterLayout({ style, links, logo, copyright }) {
   const isLandingPage = useIsLandingPage();
@@ -33,17 +33,16 @@ export default function FooterLayout({ style, links, logo, copyright }) {
             )}
           >
             <div className="inline-flex items-center text-teal-light">
-              <Github className="shrink-0" width={24} height={24} />
+              <HydraLogo className="shrink-0" width={24} height={24} />
               <span className="border-l pl-4 ml-4 text-xl leading-[27px]">
-                Join the conversation
+                Join the family
               </span>
             </div>
             <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-white hover:no-underline hover:text-teal"
-              target="_blank"
-              to={"https://github.com/cardano-scaling/hydra"}
+              to={"/docs/get-involved"}
             >
-              Go Github
+              Get involved
             </Link>
           </div>
           {copyright}

docs/src/theme/Footer/Links/MultiColumn/index.js

@@ -46,7 +46,6 @@ export default function FooterLinksMultiColumn({ columns }) {
     <div
       className={clsx(
         "grid gap-10 pb-10 max-w-md",
-        "tablet:pb-14 tablet:grid-cols-2 tablet:gap-y-16 tablet:gap-x-0 tablet:max-w-[350px]",
         "laptop:flex laptop:pb-0 laptop:gap-7",
         isLandingPage
           ? "w-full laptop:max-w-[750px]"