Merge pull request #13 from tlsnotary/mobile-fixs

mobile fixs

app/page.tsx

@@ -17,14 +17,14 @@ interface ComparisonTableProps {
 }
 
 const TableWrapper = classed.div("grid grid-cols-4 ");
-const TableTitle = classed.h4("font-semibold text-[15px] text-inter text-brown-50 uppercase");
+const TableTitle = classed.h4("font-semibold text-xs text-inter text-brown-50 uppercase md:text-[15px]");
 const TableContent = classed.div("p-4");
 
 const ComparisonTable = ({ title, tls, tlsNotary }: ComparisonTableProps) => {
   return (
     <TableWrapper>
       <TableContent className=" col-span-2">
-        <span className="text-primary font-semibold text-lg text-inter">{title}</span>
+        <span className="text-primary font-semibold text-sm text-inter md:text-lg">{title}</span>
       </TableContent>
       <TableContent className="m-auto">{tls ? <Icons.Check /> : <Icons.X />}</TableContent>
       <TableContent className="m-auto">{tlsNotary ? <Icons.Check /> : <Icons.X />}</TableContent>
@@ -36,13 +36,13 @@ export default function Home() {
   return (
     <main>
       <AppContainer className="flex flex-col">
-        <div className="flex flex-col gap-8 md:gap-12 lg:gap-16 py-16 ">
-          <div className="flex flex-col gap-10">
+        <div className="flex flex-col gap-8 md:gap-12 pt-10 pb-0 lg:gap-16 lg:py-16 ">
+          <div className="flex flex-col gap-4 md:gap-10">
             <div className="flex flex-col gap-2 w-full lg:w-3/4">
               <Label.Subtitle className=" ">{LABELS.HOMEPAGE.SUBTITLE}</Label.Subtitle>
               <Label.Title>{LABELS.HOMEPAGE.TITLE}</Label.Title>
             </div>
-            <span className="w-full lg:w-3/4 text-primary text-base font-inter md:text-xl font-medium">
+            <span className="w-full lg:w-3/4 text-primary text-sm leading-5 font-inter md:text-xl font-medium">
               {LABELS.HOMEPAGE.DESCRIPTION}
             </span>
           </div>
@@ -54,24 +54,25 @@ export default function Home() {
         <Icons.DividerHomepage className="hidden md:flex mx-auto w-full" />
       </AppContainer>
 
-      <AppContainer className="py-16 md:py-[120px] w-full lg:!max-w-[960px]">
+      <AppContainer className="py-8 md:py-[120px] w-full lg:!max-w-[960px]">
         <Section
           title={
-            <h3 className="text-primary text-3xl text-center font-bold md:text-5xl  md:leading-[49px]">
+            <h3 className="text-primary text-2xl font-bold md:text-center md:text-5xl md:leading-[49px]">
               {LABELS.HOMEPAGE.WHY_USE_TLSNOTARY.TITLE}
             </h3>
           }
           description={LABELS.HOMEPAGE.WHY_USE_TLSNOTARY.DESCRIPTION}
         >
           <div className="relative w-full h-[200px] py-16">
-            <Image src="/images/infographic.svg" alt="infographic" fill />
+            <Image className="hidden md:block" src="/images/infographic.svg" alt="infographic" fill />
+            <Image className="block md:hidden" src="/images/infographic-mobile.svg" alt="infographic mobile" fill />
           </div>
         </Section>
       </AppContainer>
 
       <AppContainer className="pb-16 md:pb-[120px]">
         <div className="!max-w-[640px] mx-auto">
-          <TableWrapper className="px-8">
+          <TableWrapper className="hidden md:block px-8">
             <div className=" col-span-2"></div>
             <TableContent className="text-center">
               <span className="text-primary font-bold py-4 font-inter text-xs md:text-2xl">TLS</span>
@@ -80,7 +81,16 @@ export default function Home() {
               <span className="text-primary font-bold py-4 font-inter text-xs md:text-2xl">TLSNotary</span>
             </TableContent>
           </TableWrapper>
-          <div className=" p-8 border border-gray-100 bg-gray rounded-xl">
+          <div className="p-2 border border-gray-100 bg-gray rounded-xl md:p-8 ">
+            <TableWrapper className="block md:hidden">
+              <div className=" col-span-2"></div>
+              <TableContent className="text-center">
+                <span className="text-primary font-black py-4 font-inter text-[13px]">TLS</span>
+              </TableContent>
+              <TableContent className="text-center">
+                <span className="text-primary font-black py-4 font-inter text-[13px]">TLSN</span>
+              </TableContent>
+            </TableWrapper>
             <TableContent>
               <TableTitle>{LABELS.COMMON.SERVER_AUTHENTICATION}</TableTitle>
             </TableContent>
@@ -97,14 +107,14 @@ export default function Home() {
       </AppContainer>
 
       <BannerWrapper color="gray">
-        <AppContainer className="flex flex-col gap-8">
+        <AppContainer className="flex flex-col gap-4 md:gap-8">
           <BannerTitle className="text-center" variant="primary">
             {LABELS.COMMON.LEARN_THE_BASICS}
           </BannerTitle>
 
           <div className="mx-auto">
             <iframe
-              className="w-full min-w-[360px] md:min-h-[320px] md:min-w-[560px]"
+              className="w-full min-w-autos md:min-h-[320px] md:min-w-[560px]"
               src="https://www.youtube.com/embed/bNGSdlvIPfI?si=xJSG43Go-JQGy_hs"
               title="YouTube video player"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

app/use-cases/page.tsx

@@ -19,11 +19,11 @@ const IconMapping: Record<WebsiteType, React.ReactNode> = {
 export default function UseCases() {
   return (
     <div className="flex flex-col">
-      <div className=" py-16">
+      <div className=" py-10 md:py-16">
         <AppContainer className="flex flex-col gap-16 !max-w-[800px]">
           <Section
             title={
-              <h2 className=" text-primary font-semibold text-[32px] text-center">
+              <h2 className=" text-primary font-semibold text-2xl md:text-[32px] text-center">
                 {LABELS.USE_CASES.USE_CASES.TITLE}
               </h2>
             }
@@ -32,20 +32,20 @@ export default function UseCases() {
 
           <Section
             title={
-              <h2 className=" text-primary font-semibold text-[32px] text-center">
+              <h2 className=" text-primary font-inter w-3/4 mx-auto font-semibold text-2xl leading-6 md:text-[32px] md:w-full text-center">
                 {LABELS.USE_CASES.BUILD_WITH_TLSNOTARY}
               </h2>
             }
           >
-            <div className="grid grid-cols-1  gap-5 md:grid-cols-2">
+            <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
               {ProjectList.map((project) => {
                 return (
                   <Card.Base key={project.title}>
                     <div className="flex flex-col gap-3">
-                      <h5 className=" text-white font-inter font-semibold text-[28px] leading-[28px]">
+                      <h5 className=" text-white font-inter font-semibold text-[22px] leading-5 md:text-[28px] md:leading-[28px]">
                         {project.title}
                       </h5>
-                      <div className=" min-h-[100px]">
+                      <div className="min-h-[100px]">
                         <span className="text-white text-sm font-normal font-inter line-clamp-5">{project.tldr}</span>
                       </div>
                     </div>

components/AppFooter.tsx

@@ -16,14 +16,16 @@ const NavLabel = classed.span("flex gap-2 items-center font-sans text-white-100
 export const AppFooter = () => {
   return (
     <div className="bg-primary">
-      <AppContainer className="py-8 flex gap-10 md:gap-0 flex-col md:flex-row justify-between">
-        <div className="flex flex-col md:flex-row items-center gap-[34px] my-auto">
+      <AppContainer className="py-8 px-8 flex gap-10 flex-col justify-between md:flex-row md:gap-0 md:px-0 ">
+        <div className="flex flex-col md:flex-row items-center gap-[34px] my-auto order-2 md:order-1">
           <Link href="/">
             <Icons.Logo className="text-gray" />
           </Link>
-          <NavLabel className="text-center md:text-left md:max-w-[250px]">{LABELS.COMMON.FOOTER.TITLE}</NavLabel>
+          <NavLabel className="text-center px-4 font-normal text-xs font-inter md:px-0 md:text-left md:max-w-[250px]">
+            {LABELS.COMMON.FOOTER.TITLE}
+          </NavLabel>
         </div>
-        <div className="flex flex-col md:flex-row gap-10 md:gap-[100px]">
+        <div className="flex flex-col md:flex-row gap-10 md:gap-[100px] order-1 md:order-1">
           <div className="flex flex-col gap-6">
             {NAVIGATION.map(({ label, href, external }, index) => {
               if (external) return null;
@@ -34,7 +36,7 @@ export const AppFooter = () => {
                   href={href}
                   target={external ? "_blank" : undefined}
                 >
-                  <NavLabel className="mx-auto" hover>
+                  <NavLabel className="md:mx-auto" hover>
                     {label}
                   </NavLabel>
                 </Link>
@@ -46,13 +48,16 @@ export const AppFooter = () => {
               if (!external) return null;
               return (
                 <Link
-                  className="flex md:block uppercase group"
+                  className="flex gap-1 items-center md:block uppercase group"
                   key={index}
                   href={href}
                   target={external ? "_blank" : undefined}
                 >
-                  <NavLabel className="mx-auto" hover>
-                    {label}
+                  <NavLabel className="md:mx-auto" hover>
+                    <div className="flex items-center gap-1">
+                      <Icons.ExternalLink className="text-white group-hover:text-brown-50 duration-200" />
+                      {label}
+                    </div>
                   </NavLabel>
                 </Link>
               );
@@ -67,7 +72,7 @@ export const AppFooter = () => {
                   href={href}
                   target={external ? "_blank" : undefined}
                 >
-                  <NavLabel className="mx-auto" hover>
+                  <NavLabel className="md:mx-auto" hover>
                     {icon}
                     {label}
                   </NavLabel>

components/AppHeader.tsx

@@ -32,7 +32,7 @@ const AppMobileNav = () => {
           <Icons.Logo className="text-primary" size={48} />
         </Link>
         <button type="button" aria-label="burgher menu" onClick={() => setIsOpen(true)}>
-          <Icons.Burgher className="text-primary dark:text-white" />
+          <Icons.Burgher className="text-primary" />
         </button>
       </AppContainer>
       {isOpen && (

components/Section.tsx

@@ -9,7 +9,7 @@ interface SectionProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
 
 export const Section = ({ title, description, children }: SectionProps) => {
   return (
-    <div className="flex flex-col gap-6 md:gap-16">
+    <div className="flex flex-col gap-4 md:gap-16">
       <div className="flex flex-col gap-4 md:gap-8">
         {typeof title === "string" ? <Label.SectionTitle className="text-center">{title}</Label.SectionTitle> : title}
         {description && <AppMarkdown>{description}</AppMarkdown>}

components/ui/Banner.tsx

@@ -8,15 +8,20 @@ import ReactMarkdown from "react-markdown";
 import { createMarkdownElement } from "../AppMarkdown";
 import { AppContainer } from "../AppContainer";
 
-export const BannerWrapper = classed.div("py-[120px] relative", {
+export const BannerWrapper = classed.div("relative md:py-[120px]", {
   variants: {
     color: {
       brown: "bg-brown-50",
       gray: "bg-gray",
     },
+    spacing: {
+      small: "py-8",
+      medium: "py-16",
+    },
   },
   defaultVariants: {
     color: "brown",
+    spacing: "small",
   },
 });
 
@@ -24,7 +29,7 @@ export const BannerTitle = classed.h4("text-gold", {
   variants: {
     titleSize: {
       small: "text-[32px] font-semibold",
-      medium: "text-3xl md:text-4xl lg:text-5xl md:leading-[49px] font-bold",
+      medium: "text-2xl md:text-4xl lg:text-5xl md:leading-[49px] font-bold",
     },
     variant: {
       brown: "text-gold",
@@ -47,12 +52,12 @@ type BannerProps = Classed.VariantProps<typeof BannerTitle> &
 
 export const Banner = ({ title, description, actions, descriptionClass, color }: BannerProps) => {
   return (
-    <BannerWrapper color={color}>
+    <BannerWrapper spacing="medium" color={color}>
       <AppContainer>
         <div className="mx-auto py-10 md:py-16 px-8 md:px-[120px] bg-white rounded-3xl w-full md:max-w-[900px]">
           <div className={cn("flex flex-col gap-8")}>
-            <div className="flex flex-col gap-6">
-              <span className=" text-primary font-sans font-bold text-2xl text-center md:text-5xl">{title}</span>
+            <div className="flex flex-col gap-4 md:gap-6">
+              <span className=" text-primary font-inter font-bold text-2xl text-center md:text-5xl">{title}</span>
               {description && (
                 <ReactMarkdown
                   remarkPlugins={[remarkGfm]}
@@ -66,7 +71,7 @@ export const Banner = ({ title, description, actions, descriptionClass, color }:
                       }),
                     a: ({ node, ...props }) =>
                       createMarkdownElement("a", {
-                        className: "text-primary font-medium text-lg md:text-xl md:leading-6",
+                        className: "text-primary font-medium leading-5 text-sm font-inter md:text-xl md:leading-6",
                         target: "_blank",
                         ...props,
                       }),
@@ -74,7 +79,10 @@ export const Banner = ({ title, description, actions, descriptionClass, color }:
                       <span className="text-primary font-normal text-lg md:text-xl md:leading-6" {...props} />
                     ),
                     p: ({ ...props }: any) => (
-                      <span className="text-primary font-normal text-lg md:text-xl md:leading-6" {...props} />
+                      <span
+                        className="text-primary font-inter font-medium text-sm leading-5 md:font-normal md:text-xl md:leading-6"
+                        {...props}
+                      />
                     ),
                   }}
                   className={cn(descriptionClass, "text-primary font-normal text-lg  md:text-xl md:leading-6")}

components/ui/Label.tsx

@@ -1,14 +1,20 @@
 import { classed } from "@tw-classed/react";
 
-const Title = classed.h1("text-5xl font-black leading-1 text-primary md:text-6xl lg:text-[96px] lg:leading-[101px]");
+const Title = classed.h1(
+  "text-2xl font-extrabold leading-1 text-primary md:text-6xl  md:font-black lg:text-[96px] lg:leading-[101px]"
+);
 
-const Subtitle = classed.h6("text-brown-50 font-black text-lg leading-none md:text-2xl lg:text-7xl md:leading-6");
+const Subtitle = classed.h6(
+  "text-brown-50 font-extrabold text-sm leading-none md:font-black md:text-2xl lg:text-7xl md:leading-6"
+);
 
 const SectionTitle = classed.h6(
   "font-semibold font-inter text-primary text-2xl leading-[24px] md:text-[56px] md:leading-[56px]"
 );
 
-const Paragraph = classed.span("text-primary text-sm md:text-xl leading-6");
+const Paragraph = classed.span(
+  "text-primary leading-5 font-medium fon-inter text-sm md:font-normal md:text-xl md:leading-6"
+);
 
 const Label = {
   displayName: "Label",