feat: ui fixes

components/AnimatedText.tsx

@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority";
 import { Fragment, useEffect, useRef, useState } from "react";
 
-const letterStyles = cva(["inline-block", "opacity-0"], {
+const letterStyles = cva(["inline", "opacity-0"], {
     variants: {
         visible: {
             true: ["animate-fade-in"],
@@ -48,15 +48,14 @@ const AnimatedText = ({
     }, []);
 
     return (
-        <>
+        <span className="text-clip" ref={targetRef}>
             {text.split(" ").map((word, i) => {
                 return (
-                    <>
-                        <span className="inline-block" key={i + word}>
+                    <Fragment key={i + word}>
+                        <span className="inline-block">
                             {word.split("").map((letter, i) => {
                                 return (
                                     <span
-                                        ref={targetRef}
                                         key={i + letter}
                                         className={letterStyles({ visible })}
                                         style={{
@@ -72,10 +71,10 @@ const AnimatedText = ({
                             })}
                         </span>
                         <span> </span>
-                    </>
+                    </Fragment>
                 );
             })}
-        </>
+        </span>
     );
 };
 

components/common/footer/index.tsx

@@ -24,7 +24,7 @@ export const Footer = ({ footerLinks }: FooterProps) => {
     }, [parallaxController]);
 
     return (
-        <div className="w-full py-16 bg-black md:py-24 lg:py-32 relative">
+        <div className="flex flex-col items-center w-full py-16 bg-black md:py-24 lg:py-32 relative px-6 md:px-24 xl:px-32 xxl:px-52">
             <div
                 className="absolute left-[16%] lg:left-[20%] hidden md:block z-10 md:w-20 md:h-20 lg:w-44 lg:h-44 md:top-[0%]"
                 ref={coneRef}
@@ -39,7 +39,7 @@ export const Footer = ({ footerLinks }: FooterProps) => {
                 </picture>
             </div>
             <div
-                className="absolute hidden left-0 right-0 mx-auto md:block z-10 w-2/3 top-[5%]"
+                className="absolute hidden left-0 right-0 mx-auto md:block z-10 w-1/2 top-[5%]"
                 ref={carrotRef}
             >
                 <picture>
@@ -56,20 +56,26 @@ export const Footer = ({ footerLinks }: FooterProps) => {
                     <Logo className="relative w-full h-auto text-orange" />
                 </div>
             </div>
-            <div className="flex flex-col justify-between px-6 pt-8 space-y-24 md:pt-24 lg:pt-32 md:px-24 xl:px-32 xl:space-y-0 xl:flex-row xxl:px-52">
-                <div className="grid grid-cols-2 gap-8 xs:gap-10 md:gap-0 md:flex xl:space-x-6">
-                    {footerLinks.map(({ title, links }) => (
-                        <FooterLinks key={title} title={title} links={links} />
-                    ))}
-                </div>
-                <div className="flex items-end dark">
-                    <Button
-                        href={`https://app.${CARROT_DOMAIN}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        Carrot app
-                    </Button>
+            <div className="flex justify-center w-full max-w-screen-2xl pt-8 md:pt-24 lg:pt-32">
+                <div className="w-full flex flex-col justify-between xl:flex-row space-y-24 xl:space-y-0">
+                    <div className="grid grid-cols-2 gap-8 xs:gap-10 md:gap-0 md:flex xl:space-x-6">
+                        {footerLinks.map(({ title, links }) => (
+                            <FooterLinks
+                                key={title}
+                                title={title}
+                                links={links}
+                            />
+                        ))}
+                    </div>
+                    <div className="flex items-end dark">
+                        <Button
+                            href={`https://app.${CARROT_DOMAIN}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            Carrot app
+                        </Button>
+                    </div>
                 </div>
             </div>
         </div>

components/homepage/Breakdown.tsx

@@ -152,7 +152,7 @@ const ContentBlock = ({
                     <Typography
                         variant="h2"
                         className={{
-                            root: "text-[3rem] md:text-[4.3rem] mb-8",
+                            root: "text-[2.5rem] md:text-[3.5rem] mb-8",
                         }}
                     >
                         <AnimatedText speed={20} text={heading} />

components/homepage/Hero.tsx

@@ -1,16 +1,34 @@
 import { CARROT_DOMAIN } from "../../constants";
-import { Typography, Button } from "@carrot-kpi/ui";
+import { Typography, Button, Modal } from "@carrot-kpi/ui";
 import AnimatedText from "../AnimatedText";
+import Image from "next/image";
+import { useCallback, useRef, useState } from "react";
+import PlayVideo from "../../icons/play-video";
 
 const Hero = () => {
+    const videoRef = useRef<HTMLVideoElement>(null);
+    const [showVideo, setShowVideo] = useState(false);
+
+    const handleClick = useCallback(() => {
+        setShowVideo(true);
+        if (!videoRef || !videoRef.current) return;
+        videoRef.current.play();
+    }, []);
+
+    const handleDismiss = useCallback(() => {
+        setShowVideo(false);
+        if (!videoRef || !videoRef.current) return;
+        videoRef.current.pause();
+    }, []);
+
     return (
-        <div className="px-4 md:px-8 lg:px-48 pb-6 w-full flex justify-center">
-            <div className="w-full flex flex-col lg:items-center lg:justify-center gap-20 md:gap-36 pb-16 pt-7 md:pt-24 md:pb-32">
-                <div className="flex flex-col gap-10 flex-1 w-full">
+        <div className="px-4 md:px-10 lg:px-14 xl:px-40 pb-6 w-full flex justify-center">
+            <div className="w-full max-w-screen-2xl flex flex-col items-center lg:flex-row lg:justify-center gap-20 md:gap-36 pb-16 pt-7 md:pt-24 md:pb-32">
+                <div className="flex flex-col gap-10 flex-1 w-full max-w-xl lg:max-w-none">
                     <Typography
                         variant="h1"
                         className={{
-                            root: "text-[4rem] md:text-[4.8rem] lg:text-[6.9rem]",
+                            root: "text-[3.5rem] md:text-[4.5rem] lg:text-[5.5rem]",
                         }}
                     >
                         <AnimatedText text="Unlock the power of incentivization" />
@@ -20,7 +38,7 @@ const Hero = () => {
                             <AnimatedText
                                 text="Reimagine the potential of your community with Carrot. Turn goals into actions and celebrate every milestone with tailored rewards."
                                 speed={10}
-                            ></AnimatedText>
+                            />
                         </Typography>
                         <a
                             href={`https://app.${CARROT_DOMAIN}`}
@@ -34,24 +52,49 @@ const Hero = () => {
                         </a>
                     </div>
                 </div>
-                <div className="w-full flex-1 lg:max-w-5xl" data-aos="fade-up">
-                    <video
-                        controls
-                        preload="metadata"
-                        poster="/video-poster.png"
-                        className="aspect-video w-full border border-black rounded-xl bg-gray-500 overflow-hidden"
-                    >
-                        <source
-                            src={`https://static.${CARROT_DOMAIN}/hero-video.webm`}
-                            type="video/webm"
-                        />
-                        <source
-                            src={`https://static.${CARROT_DOMAIN}/hero-video.mp4`}
-                            type="video/mp4"
-                        />
-                        Not supported
-                    </video>
+                <div
+                    className="flex-1 flex justify-center max-w-xl w-full md:max-w-lg lg:w-60 aspect-9/12 relative"
+                    data-aos="fade-up"
+                >
+                    <Image
+                        className="border border-black rounded-xl"
+                        src="/video-poster.png"
+                        fill
+                        alt="poster"
+                    />
+                    <div className="absolute bottom-20 left-1/2 transform -translate-x-1/2">
+                        <Button
+                            onClick={handleClick}
+                            className={{
+                                contentWrapper:
+                                    "flex gap-3 items-center whitespace-nowrap",
+                            }}
+                            size="small"
+                        >
+                            <PlayVideo />
+                            How it works
+                        </Button>
+                    </div>
                 </div>
+                <Modal open={showVideo} onDismiss={handleDismiss}>
+                    <div className="w-full md:w-1/2 aspect-video rounded-xl bg-gray-500">
+                        <video
+                            ref={videoRef}
+                            controls
+                            className="aspect-video w-full border border-black rounded-xl bg-gray-500 overflow-hidden"
+                        >
+                            <source
+                                src={`https://static.${CARROT_DOMAIN}/hero-video.webm`}
+                                type="video/webm"
+                            />
+                            <source
+                                src={`https://static.${CARROT_DOMAIN}/hero-video.mp4`}
+                                type="video/mp4"
+                            />
+                            Not supported
+                        </video>
+                    </div>
+                </Modal>
             </div>
         </div>
     );

components/homepage/HowItWorks.tsx

@@ -6,23 +6,25 @@ const HowItWorks = () => {
     return (
         <div
             id="how-it-works"
-            className="px-4 md:px-10 lg:px-14 xl:px-40 py-36 flex flex-col gap-20"
+            className="px-4 md:px-10 lg:px-14 xl:px-40 pt-36 flex flex-col items-center"
         >
-            <Typography
-                variant="h2"
-                className={{
-                    root: "text-[5rem] md:text-[6rem] lg:text-[7.4rem]",
-                }}
-                data-aos="fade-up"
-            >
-                How it works
-            </Typography>
-            <div className="flex flex-col">
-                {HOW_IT_WORKS_CONTENT.map((contentBlock, index) => (
-                    <div key={index}>
-                        <HowItWorksBlock index={index} {...contentBlock} />
-                    </div>
-                ))}
+            <div className="max-w-screen-2xl flex flex-col gap-12">
+                <Typography
+                    variant="h4"
+                    className={{
+                        root: "text-[3.5rem] md:text-[4.5rem] lg:text-[5.5rem]",
+                    }}
+                    data-aos="fade-up"
+                >
+                    How it works
+                </Typography>
+                <div className="flex flex-col">
+                    {HOW_IT_WORKS_CONTENT.map((contentBlock, index) => (
+                        <div key={index}>
+                            <HowItWorksBlock index={index} {...contentBlock} />
+                        </div>
+                    ))}
+                </div>
             </div>
         </div>
     );

components/homepage/HowItWorksBlock.tsx

@@ -42,7 +42,7 @@ const HowItWorksBlock = ({
 
     return (
         <div className="flex flex-col lg:flex-row w-full" data-aos="fade-up">
-            <div className="flex lg:w-[60%]">
+            <div className="flex flex-1 lg:w-[60%]">
                 <Typography
                     variant="h2"
                     className={{
@@ -60,7 +60,7 @@ const HowItWorksBlock = ({
                     {heading}
                 </Typography>
             </div>
-            <div className="bg-white flex flex-col items-center flex-1 shadow-border overflow-hidden">
+            <div className="bg-white flex flex-col items-center flex-[1.1] shadow-border overflow-hidden">
                 <div className="lg:h-48 w-full flex py-7 px-8 lg:px-12 justify-between items-center gap-20">
                     <Typography
                         className={{ root: "text-base lg:text-[1.25rem]" }}