general fixes on mobile

app/(pages)/about/page.tsx

@@ -136,7 +136,7 @@ export default async function AboutPage() {
               <h2 className="font-sans text-base font-bold uppercase tracking-[4px] text-black dark:text-white text-center">
                 Our History
               </h2>
-              <span className="text-xl font-sans dark:text-tuatara-200 text-tuatara-500 mx-auto">
+              <span className="text-base lg:text-xl font-sans dark:text-tuatara-200 text-tuatara-500 mx-auto">
                 We began in 2018 as Applied ZKP, a team supported by the
                 Ethereum Foundation to push zero-knowledge proofs from theory to
                 practice. In 2021, we became Privacy & Scaling Explorations

app/(pages)/page.tsx

@@ -5,6 +5,7 @@ import { HomepageBanner } from "@/components/sections/HomepageBanner"
 import { HomepageVideoFeed } from "@/components/sections/HomepageVideoFeed"
 import { OurWork } from "@/components/sections/OurWork"
 import { ParallaxHero } from "@/components/sections/ParallaxHero"
+import { AppContent } from "@/components/ui/app-content"
 import { Button } from "@/components/ui/button"
 import Link from "next/link"
 import { Suspense } from "react"
@@ -28,8 +29,8 @@ export default function IndexPage() {
     <section className="flex flex-col w-full">
       <ParallaxHero />
 
-      <div className="flex flex-col justify-center bg-white dark:bg-black py-20">
-        <div className="lg:max-w-[890px] flex flex-col mx-auto gap-10 justify-center items-center">
+      <div className="flex flex-col justify-center bg-white dark:bg-black py-16 lg:py-20">
+        <AppContent className="lg:max-w-[890px] flex flex-col mx-auto gap-10 justify-center items-center">
           <span className="font-sans text-base text-center text-tuatara-950 dark:text-tuatara-100 font-bold uppercase tracking-[3.36px]">
             {LABELS.HOMEPAGE.MISSION_TITLE}
           </span>
@@ -49,7 +50,7 @@ export default function IndexPage() {
               </div>
             </Button>
           </Link>
-        </div>
+        </AppContent>
       </div>
 
       <OurWork />

app/(pages)/research/page.tsx

@@ -21,7 +21,7 @@ const ResearchPage = async () => {
             {LABELS.RESEARCH_PAGE.TITLE}
           </h1>
           <div className="lg:!w-4/5 w-full flex lg:flex-row flex-col items-center gap-3 lg:gap-10 mx-auto justify-center">
-            <span className="text-base lg:text-xl dark:text-tuatara-200 text-tuatara-950 font-sans">
+            <span className="text-base lg:text-xl dark:text-tuatara-200 text-tuatara-950 font-sans text-center">
               {LABELS.RESEARCH_PAGE.SUBTITLE}
             </span>
             <AppLink variant="button" href="/about">

components/app-link.tsx

@@ -1,11 +1,10 @@
 "use client"
 
-import React from "react"
-import Link from "next/link"
-
 import { Icons } from "./icons"
-import { cva } from "class-variance-authority"
 import { cn } from "@/lib/utils"
+import { cva } from "class-variance-authority"
+import Link from "next/link"
+import React from "react"
 
 interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   children: React.ReactNode
@@ -13,7 +12,7 @@ interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   to?: string
   external?: boolean
   withExternalIcon?: boolean
-  variant?: "default" | "blue" | "button"
+  variant?: "default" | "blue" | "button" | "nav"
   passHref?: boolean
 }
 
@@ -23,6 +22,7 @@ const linkClass = cva("inline-flex", {
       default:
         "text-black dark:text-white hover:text-orange duration-200 underline",
       blue: "text-anakiwa-500 hover:text-anakiwa-700",
+      nav: "text-tuatara-100 hover:text-anakiwa-400 duration-200",
       button: "flex",
     },
   },

components/blog/article-in-evidance-card.tsx

@@ -2,10 +2,10 @@
 
 import { Icons } from "../icons"
 import { Button } from "../ui/button"
+import { LABELS } from "@/app/labels"
 import { Article } from "@/lib/content"
 import { cn } from "@/lib/utils"
 import Link from "next/link"
-import { LABELS } from "@/app/labels"
 
 interface ArticleInEvidenceCardProps {
   article: Article
@@ -67,7 +67,7 @@ export const ArticleInEvidenceCard = ({
     return (
       <div
         className={cn(
-          "duration-200 flex flex-col gap-4 text-left relative z-[1] w-full h-full",
+          "duration-200 flex flex-col gap-4 text-left relative z-[1] aspect-video",
           {
             "px-5 lg:px-16 py-6 lg:py-16 ": size === "lg",
             "px-6 py-4 lg:p-8": size === "sm",
@@ -172,7 +172,7 @@ export const ArticleInEvidenceCard = ({
           "relative flex flex-col gap-5 w-full items-center after:absolute after:inset-0 after:content-[''] after:bg-black after:opacity-20 group-hover:after:opacity-80 transition-opacity duration-300 after:z-[0]",
           {
             "aspect-video": !className?.includes("h-full"),
-            "min-h-[148px]": !backgroundCover,
+            "min-h-[200px]": !backgroundCover,
             "min-h-[177px] lg:min-h-[190px]": backgroundCover,
           },
           className

components/blog/blog-recent-articles.tsx

@@ -1,10 +1,10 @@
-import { LABELS } from "@/app/labels"
-import { AppContent } from "../ui/app-content"
-import { getArticles, Article } from "@/lib/content"
-import Link from "next/link"
-import { cn } from "@/lib/utils"
-import { Button } from "../ui/button"
 import { Icons } from "../icons"
+import { AppContent } from "../ui/app-content"
+import { Button } from "../ui/button"
+import { LABELS } from "@/app/labels"
+import { getArticles, Article } from "@/lib/content"
+import { cn } from "@/lib/utils"
+import Link from "next/link"
 
 const ArticleInEvidenceCard = ({
   article,
@@ -60,7 +60,7 @@ const ArticleInEvidenceCard = ({
     <AsLinkWrapper href={`/blog/${article.id}`} asLink={asLink}>
       <div
         className={cn(
-          "min-h-[177px] lg:min-h-[190px] relative flex flex-col gap-5 w-full items-center after:absolute after:inset-0 after:content-[''] after:bg-black after:opacity-20 group-hover:after:opacity-80 transition-opacity duration-300 after:z-[0]",
+          "min-h-[177px] lg:min-h-[190px] relative w-full items-center after:absolute after:inset-0 after:content-[''] after:bg-black after:opacity-50 group-hover:after:opacity-80 transition-opacity duration-300 after:z-[0]",
           {
             "aspect-video": !className?.includes("h-full"),
           },
@@ -73,65 +73,68 @@ const ArticleInEvidenceCard = ({
         }}
       >
         <div
-          className={cn(
-            "duration-200 flex flex-col gap-[10px] text-left relative z-[1] w-full h-full",
-            {
-              "px-5 lg:px-16 py-6 lg:py-16 ": size === "lg",
-              "px-6 py-4 lg:p-8": size === "sm",
-              "px-6 lg:p-16": size === "xl",
-            },
-            contentClassName
-          )}
+          className={cn("flex flex-col gap-[10px] h-full justify-center", {
+            "px-5 lg:px-16 py-6 lg:py-16 ": size === "lg",
+            "px-6 py-4 lg:p-8": size === "sm",
+            "px-6 lg:p-16": size === "xl",
+          })}
         >
-          {article.date && showDate && (
-            <span className="text-white text-xs font-sans font-bold tracking-[2.5px] text-left uppercase">
-              {formatDate(article.date)}
-            </span>
-          )}
-          <Link
-            href={`/blog/${article.id}`}
+          <div
             className={cn(
-              " text-white font-display hover:text-anakiwa-400 transition-colors",
-              {
-                "text-[20px] font-semibold lg:font-bold lg:text-lg line-clamp-2 mt-auto":
-                  variant === "compact",
-                "text-[20px] font-semibold lg:font-bold line-clamp-3 mt-auto":
-                  variant === "default",
-                "text-[20px] font-bold lg:!text-[40px] lg:!leading-[44px] mt-auto":
-                  variant === "xl",
-              },
-              titleClassName
+              "duration-200 flex flex-col gap-[10px] text-left relative z-[1] w-full",
+              contentClassName
             )}
           >
-            {article.title}
-          </Link>
-          <span className="text-sm text-white/80 uppercase font-inter">
-            {article.authors?.join(", ")}
-          </span>
-          {article.tldr && !hideTldr && (
-            <div className="mt-auto hidden lg:block w-full">
-              <p
-                className="text-sm font-sans text-white font-normal line-clamp-2 lg:line-clamp-3"
-                style={{
-                  display: "-webkit-box",
-                  WebkitBoxOrient: "vertical",
-                  overflow: "hidden",
-                  wordBreak: "break-word",
-                  whiteSpace: "pre-wrap",
-                }}
-              >
-                {article.tldr}
-              </p>
-            </div>
-          )}
+            {article.date && showDate && (
+              <span className="text-white text-xs font-sans font-bold tracking-[2.5px] text-left uppercase">
+                {formatDate(article.date)}
+              </span>
+            )}
+            <Link
+              href={`/blog/${article.id}`}
+              className={cn(
+                " text-white font-display hover:text-anakiwa-400 transition-colors",
+                {
+                  "text-[20px] font-semibold lg:font-bold lg:text-lg line-clamp-2":
+                    variant === "compact",
+                  "text-[20px] font-semibold lg:font-bold line-clamp-3":
+                    variant === "default",
+                  "text-[20px] font-bold lg:!text-[40px] lg:!leading-[44px]":
+                    variant === "xl",
+                },
+                titleClassName
+              )}
+            >
+              {article.title}
+            </Link>
+            <span className="text-sm text-white/80 uppercase font-inter">
+              {article.authors?.join(", ")}
+            </span>
+            {article.tldr && !hideTldr && (
+              <div className="mt-auto hidden lg:block w-full">
+                <p
+                  className="text-sm font-sans text-white font-normal line-clamp-2 lg:line-clamp-3"
+                  style={{
+                    display: "-webkit-box",
+                    WebkitBoxOrient: "vertical",
+                    overflow: "hidden",
+                    wordBreak: "break-word",
+                    whiteSpace: "pre-wrap",
+                  }}
+                >
+                  {article.tldr}
+                </p>
+              </div>
+            )}
+          </div>
           {showReadMore && (
-            <Link href={`/blog/${article.id}`} className="ml-auto mt-4">
-              <Button className="uppercase ml-auto" variant="secondary">
-                <div className="flex items-center gap-2">
-                  <span className="!text-center">Read More</span>
-                  <Icons.arrowRight className="w-4 h-4" />
-                </div>
-              </Button>
+            <Link href={`/blog/${article.id}`} className="ml-auto z-[1]">
+              <div className="flex items-center gap-2 group">
+                <span className="!text-center text-white uppercase group-hover:text-anakiwa-400 duration-200">
+                  Read More
+                </span>
+                <Icons.arrowRight className="w-4 h-4 text-white group-hover:text-anakiwa-400 group-hover:ml-1 duration-200" />
+              </div>
             </Link>
           )}
         </div>
@@ -147,7 +150,7 @@ export async function BlogRecentArticles() {
   const otherArticles = articles.slice(1)
 
   return (
-    <div className="py-10 lg:py-20">
+    <div className="py-16 lg:py-20">
       <AppContent>
         <div className="flex flex-col gap-10">
           <h3 className="font-sans text-base font-bold uppercase tracking-[3.36px] text-tuatara-950 text-center dark:text-anakiwa-400">
@@ -181,7 +184,7 @@ export async function BlogRecentArticles() {
                   )}
                 </Link>
               ))}
-              <Link href="/blog" className="mt-auto">
+              <Link href="/blog" className="mt-auto lg:mx-0 mx-auto">
                 <Button className="uppercase">
                   <div className="flex items-center gap-2">
                     <span>{LABELS.BLOG_PAGE.SEE_MORE}</span>

components/sections/HomepageVideoFeed.tsx

@@ -1,14 +1,14 @@
 "use client"
 
+import { AppLink } from "../app-link"
+import { Icons } from "../icons"
+import { AppContent } from "../ui/app-content"
+import { Button } from "../ui/button"
 import { LABELS } from "@/app/labels"
+import { useYoutube } from "@/hooks/useYoutube"
 import { ArrowRight } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
-import { Button } from "../ui/button"
-import { AppContent } from "../ui/app-content"
-import { Icons } from "../icons"
-import { useYoutube } from "@/hooks/useYoutube"
-import { AppLink } from "../app-link"
 
 interface Video {
   id: string
@@ -71,7 +71,7 @@ export const HomepageVideoFeed = () => {
   const { data: videos = [], isLoading, isError } = useYoutube()
 
   return (
-    <section className="mx-auto px-6 lg:px-8 py-10 lg:pt-0 lg:pb-20 bg-white dark:bg-black w-full">
+    <section className="mx-auto py-10 lg:pt-0 lg:pb-20 bg-white dark:bg-black w-full">
       <AppContent className="flex flex-col gap-8 lg:max-w-[1200px] w-full">
         <div className="col-span-1 lg:col-span-4">
           <h2 className="font-sans text-base font-bold uppercase tracking-[3.36px] text-tuatara-950 text-center dark:text-tuatara-100">
@@ -106,9 +106,9 @@ export const HomepageVideoFeed = () => {
                 href="https://www.youtube.com/@privacyscalingexplorations-1"
                 external
                 variant="button"
-                className="group inline-flex"
+                className="group mx-auto lg:mx-0 lg:inline-flex"
               >
-                <Button className="w-full" variant="orange">
+                <Button className="w-fit mx-auto lg:w-full" variant="orange">
                   <div className="flex items-center gap-1">
                     <span className="font-medium uppercase">
                       {LABELS.HOMEPAGE.VISIT_OUR_CHANNEL}

components/sections/OurWork.tsx

@@ -1,9 +1,8 @@
 "use client"
 
-import { LABELS } from "@/app/labels"
-
 import { Icons } from "../icons"
 import { AppContent } from "../ui/app-content"
+import { LABELS } from "@/app/labels"
 import Link from "next/link"
 
 type OurWorkContent = {
@@ -33,21 +32,21 @@ export const OurWork = () => {
   ]
 
   return (
-    <div className="flex flex-col justify-center bg-cover-gradient dark:bg-anakiwa-975 dark:bg-none py-16">
+    <div className="flex flex-col justify-center bg-cover-gradient dark:bg-anakiwa-975 dark:bg-none py-16 lg:py-20">
       <AppContent className="mx-auto lg:max-w-[845px] w-full">
         <section className="flex flex-col gap-10">
           <h6 className="font-sans text-base font-bold uppercase tracking-[3.36px] text-primary text-center text-tuatara-950 dark:text-tuatara-100">
             Our Work
           </h6>
-          <div className="grid grid-cols-1 gap-10 lg:grid-cols-2 max-auto">
+          <div className="grid grid-cols-1 gap-6 lg:gap-10 lg:grid-cols-2 max-auto">
             {content.map((item, index) => (
               <Link
                 href={item.link}
                 key={index}
-                className="flex flex-col gap-6 w-full lg:max-w-[400px] p-10 rounded-[10px] border border-anakiwa-300 dark:border-anakiwa-400 bg-white dark:bg-anakiwa-975 hover:scale-105 duration-200 ease-in-out dark:hover:bg-cover-gradient-dark"
+                className="flex flex-col gap-6 w-full lg:max-w-[400px] p-6 lg:p-10 rounded-[10px] border border-anakiwa-300 dark:border-anakiwa-400 bg-white dark:bg-anakiwa-975 hover:scale-105 duration-200 ease-in-out dark:hover:bg-cover-gradient-dark"
               >
                 <article className="flex flex-col gap-2">
-                  <h6 className="font-sans text-xl font-medium text-tuatara-950 dark:text-anakiwa-400">
+                  <h6 className="font-sans text-base lg:text-xl font-medium text-tuatara-950 dark:text-anakiwa-400">
                     {item.title}
                   </h6>
                   <p className="font-sans text-base font-normal text-tuatara-500 dark:text-tuatara-100">

components/sections/ParallaxHero.tsx

@@ -1,11 +1,12 @@
 "use client"
 
-import { LABELS } from "@/app/labels"
 import { Icons } from "../icons"
+import { AppContent } from "../ui/app-content"
 import { Button } from "../ui/button"
+import { LABELS } from "@/app/labels"
+import { cn } from "@/lib/utils"
 import { motion, useScroll, useTransform } from "framer-motion"
 import Link from "next/link"
-import { AppContent } from "../ui/app-content"
 import { useRef } from "react"
 
 export const ParallaxHero = () => {
@@ -24,14 +25,18 @@ export const ParallaxHero = () => {
       style={{ isolation: "isolate" }}
     >
       <motion.div
-        className="absolute inset-0 w-full h-[120%] -z-10 bg-[url('/hero/hero.jpg')] dark:bg-[url('/hero/hero-dark-mode.jpg')] bg-cover bg-[0_-150px]"
+        className={cn(
+          "absolute inset-0 w-full h-[120%]-z-10 bg-cover bg-[0_-100px] lg:bg-[0_-150px]",
+          "bg-[url('/hero/hero-mobile.jpg')] dark:bg-[url('/hero/hero-dark-mode-mobile.jpg')]", // mobile image
+          "lg:bg-[url('/hero/hero.jpg')] lg:dark:bg-[url('/hero/hero-dark-mode.jpg')]" // desktop image
+        )}
         style={{
           y: backgroundY,
         }}
       />
 
       <motion.div
-        className="relative z-10 flex items-center justify-center h-full py-20 lg:py-[130px]"
+        className="relative z-10 flex items-center justify-center h-full py-10 lg:py-[130px]"
         style={{
           y: useTransform(scrollYProgress, [0, 1], ["0%", "-25%"]),
         }}

components/site-header-mobile.tsx

@@ -1,24 +1,23 @@
 "use client"
 
-import { useState } from "react"
-import NextImage from "next/image"
-import CloseVector from "@/public/icons/close-fill.svg"
-
-import { NavItem } from "@/types/nav"
-import { siteConfig } from "@/config/site"
-import { interpolate } from "@/lib/utils"
-import { useAppSettings } from "@/hooks/useAppSettings"
+import { AppLink } from "./app-link"
+import { Icons } from "./icons"
+import { LABELS } from "@/app/labels"
+import { useGlobalProvider } from "@/app/providers/GlobalProvider"
 import {
   Discord,
   Github,
   Mirror,
   Twitter,
 } from "@/components/svgs/social-medias"
-import { LABELS } from "@/app/labels"
-import { Icons } from "./icons"
+import { siteConfig } from "@/config/site"
+import { useAppSettings } from "@/hooks/useAppSettings"
+import { interpolate } from "@/lib/utils"
+import CloseVector from "@/public/icons/close-fill.svg"
+import { NavItem } from "@/types/nav"
 import { SunMedium as SunIcon, Moon as MoonIcon } from "lucide-react"
-import { useGlobalProvider } from "@/app/providers/GlobalProvider"
-import { AppLink } from "./app-link"
+import NextImage from "next/image"
+import { useState } from "react"
 
 export const SiteHeaderMobile = () => {
   const [header, setHeader] = useState(false)
@@ -63,6 +62,7 @@ export const SiteHeaderMobile = () => {
                   onClick={() => setHeader(false)}
                   target={item?.external ? "_blank" : undefined}
                   className="border-b-2 border-white p-4 uppercase"
+                  variant="nav"
                 >
                   {item.title}
                 </AppLink>