Make homepage components responsive (#65)

* adds responsive layouts for landing components * tweak some landing padding/spacing on mobile * makes landing footer responsive
0xsequence · Apr 15, 2024 · 081a6e1 · 081a6e1
1 parent 03ca334
commit 081a6e1
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 93 deletions.
diff --git a/docs/components/Landing/APIsSection.tsx b/docs/components/Landing/APIsSection.tsx
@@ -5,12 +5,12 @@ export const APIsSection = () => (
   <section className="flex flex-col gap-5 border-t dark:border-white-10 border-black-10">
     <div className="flex flex-col gap-1 py-5">
       <h3 className="text-3xl text-themed-primary font-bold">APIs</h3>
-      <p className="text-md leading-6 font-medium max-w-xl dark:text-white-80 text-black-80">
+      <p className="text-md leading-6 font-medium max-w-xl dark:text-white-80 text-black-80 mr-8">
         Use our modular APIs for more advanced integrations and for accessing
         on-chain data through easy-to-use interfaces.
       </p>
     </div>
-    <div className="flex flex-wrap gap-2">
+    <div className="flex flex-wrap gap-2 md:flex-row flex-col">
       <Card
         title="Marketplace API"
         icon="MarketplaceIcon"
@@ -61,7 +61,7 @@ const Card = ({
   return (
     <SmartLink
       href={link}
-      className="hover-fade p-4 dark:bg-white-10 bg-white rounded-xl w-[calc(33%-(16px/3))]"
+      className="hover-fade p-4 dark:bg-white-10 bg-white rounded-xl md:w-[calc(33%-(16px/3))]"
     >
       <p className="font-bold text-themed-primary text-xl leading-7 flex items-center gap-2">
         <IconComponent />

diff --git a/docs/components/Landing/Footer.tsx b/docs/components/Landing/Footer.tsx
@@ -14,7 +14,7 @@ export const Footer = ({ logo }: { logo: ReactNode }) => {
           <SmartLink href="https://sequence.xyz" className="hover-fade w-fit">
             {logo}
           </SmartLink>
-          <div className="flex items-start gap-10">
+          <div className="flex gap-10 md:items-start md:flex-row flex-col">
             <div className="flex-1">
               <form
                 onSubmit={e => {
@@ -68,75 +68,29 @@ export const Footer = ({ logo }: { logo: ReactNode }) => {
               </form>
             </div>
             <div className="flex-1 flex gap-2 text-xs font-medium text-themed-secondary">
-              <div className="flex gap-2 flex-1">
-                <div className="flex flex-col gap-3 flex-1">
-                  <SmartLink
-                    href="https://sequence.xyz"
-                    className="hover-fade w-fit"
-                  >
-                    Home
-                  </SmartLink>
-                  <SmartLink
-                    href="https://sequence.xyz/pricing"
-                    className="hover-fade w-fit"
-                  >
-                    Pricing
-                  </SmartLink>
-                  <SmartLink
-                    href="https://sequence.xyz/blog"
-                    className="hover-fade w-fit"
-                  >
-                    Blog
-                  </SmartLink>
-                </div>
-                <div className="flex flex-col gap-3 flex-1">
-                  <SmartLink
-                    href="https://sequence.xyz/terms"
-                    className="hover-fade w-fit"
-                  >
-                    Terms
-                  </SmartLink>
-                  <SmartLink
-                    href="https://sequence.xyz/privacy"
-                    className="hover-fade w-fit"
-                  >
-                    Privacy
-                  </SmartLink>
-                </div>
-              </div>
-              <div className="flex gap-2 flex-1">
-                <div className="flex flex-col gap-3 flex-1">
-                  <SmartLink
-                    href="https://sequence.xyz/contact"
-                    className="hover-fade w-fit"
-                  >
-                    Contact
-                  </SmartLink>
-                  <SmartLink
-                    href="https://40061393.fs1.hubspotusercontent-na1.net/hubfs/40061393/Sequence%20Media%20Kit%202024.pdf"
-                    className="hover-fade w-fit"
-                  >
-                    Media kit
-                  </SmartLink>
-                  <SmartLink href="/" className="hover-fade w-fit">
-                    Docs
-                  </SmartLink>
-                </div>
-                <div className="flex flex-col gap-3 flex-1">
-                  <SmartLink
-                    href="https://sequence.build"
-                    className="hover-fade w-fit"
-                  >
-                    Sequence Builder
-                  </SmartLink>
-                  <SmartLink
-                    href="https://sequence.app"
-                    className="hover-fade w-fit"
-                  >
-                    Sequence Wallet
-                  </SmartLink>
+              {LINKS.map((linkListGroup, groupIndex) => (
+                <div
+                  key={groupIndex}
+                  className="w-1/2 flex md:flex-row flex-col gap-2.5"
+                >
+                  {linkListGroup.map((linkList, listIndex) => (
+                    <div
+                      key={listIndex}
+                      className="md:grow flex flex-col gap-3"
+                    >
+                      {linkList.map((link, linkIndex) => (
+                        <SmartLink
+                          key={linkIndex}
+                          href={link.href}
+                          className="w-fit hover-fade"
+                        >
+                          {link.text}
+                        </SmartLink>
+                      ))}
+                    </div>
+                  ))}
                 </div>
-              </div>
+              ))}
             </div>
           </div>
         </div>
@@ -173,6 +127,34 @@ export const Footer = ({ logo }: { logo: ReactNode }) => {
   )
 }
 
+const LINKS: { text: string; href: string }[][][] = [
+  [
+    [
+      { text: 'Home', href: 'https://sequence.xyz' },
+      { text: 'Pricing', href: 'https://sequence.xyz/pricing' },
+      { text: 'Blog', href: 'https://sequence.xyz/blog' },
+    ],
+    [
+      { text: 'Terms', href: 'https://sequence.xyz/terms' },
+      { text: 'Privacy', href: 'https://sequence.xyz/privacy' },
+    ],
+  ],
+  [
+    [
+      { text: 'Contact', href: 'https://sequence.xyz/contact' },
+      {
+        text: 'Media Kit',
+        href: 'https://40061393.fs1.hubspotusercontent-na1.net/hubfs/40061393/Sequence%20Media%20Kit%202024.pdf',
+      },
+      { text: 'Docs', href: 'https://docs.sequence.xyz' },
+    ],
+    [
+      { text: 'Sequence Builder', href: 'https://sequence.build' },
+      { text: 'Sequence Wallet', href: 'https://sequence.app' },
+    ],
+  ],
+]
+
 type NewsletterSignupState =
   | 'initial'
   | 'loading'

diff --git a/docs/components/Landing/GuidesSection.tsx b/docs/components/Landing/GuidesSection.tsx
@@ -4,12 +4,12 @@ export const GuidesSection = () => (
   <section className="flex flex-col gap-5 border-t dark:border-white-10 border-black-10">
     <div className="flex flex-col gap-1 py-5">
       <h3 className="text-3xl text-themed-primary font-bold">Guides</h3>
-      <p className="text-md leading-6 font-medium dark:text-white-80 text-black-80">
+      <p className="text-md leading-6 font-medium dark:text-white-80 text-black-80 mr-8">
         Follow our step-by-step guides and open source code templates to
         accelerate your time to market.
       </p>
     </div>
-    <div className="flex flex-wrap gap-4">
+    <div className="flex flex-wrap gap-4 md:flex-row flex-col">
       <GuideCard
         title="Build a web3 game with WebGL"
         body="Follow a step by step guide to build a web-based game demo that leverages Sequence Embedded Wallet with custom in-game achievement tokens."
@@ -38,19 +38,20 @@ const GuideCard = ({
   title,
   body,
   link,
+  image,
 }: {
   title: string
   body: string
   link: string
+  image?: string
 }) => {
   return (
-    <div className="flex flex-col gap-4 p-4 dark:bg-white-10 bg-white rounded-xl w-[calc(50%-8px)]">
-      <div className="rounded-md overflow-hidden w-full aspect-[2]">
-        <img
-          src="https://unsplash.it/500/300"
-          className="object-cover w-full h-full"
-        />
-      </div>
+    <div className="flex flex-col gap-4 p-4 dark:bg-white-10 bg-white rounded-xl md:w-[calc(50%-8px)]">
+      {image && (
+        <div className="rounded-md overflow-hidden w-full aspect-[2]">
+          <img src={image} className="object-cover w-full h-full" />
+        </div>
+      )}
       <p className="text-xl leading-7 text-themed-primary font-bold">{title}</p>
       <p className="text-themed-secondary text-md font-medium leading-6">
         {body}

diff --git a/docs/components/Landing/Header.tsx b/docs/components/Landing/Header.tsx
@@ -5,7 +5,7 @@ export const Header = ({ logo }: { logo: ReactNode }) => (
   <MatrixBackground className="pt-20 pb-40 -mb-10 px-5 z-0">
     <section className="flex flex-col items-center gap-4 max-w-screen-lg mx-auto">
       {logo}
-      <h2 className="text-xl font-bold text-themed-primary max-w-3xl text-center text-wrap">
+      <h2 className="text-xl font-bold text-themed-primary max-w-3xl text-center text-wrap px-6">
         {`Welcome to Sequence docs. Here you can learn about the modular Sequence products that empower game developers to build engaging web3 games on any Ethereum-compatible chain.`}
       </h2>
     </section>

diff --git a/docs/components/Landing/SDKsSection.tsx b/docs/components/Landing/SDKsSection.tsx
@@ -5,12 +5,12 @@ export const SDKsSection = () => (
   <section className="flex flex-col gap-5 border-t dark:border-white-10 border-black-10">
     <div className="flex flex-col gap-1 py-5">
       <h3 className="text-3xl text-themed-primary font-bold">SDKs</h3>
-      <p className="text-md leading-6 font-medium max-w-xl dark:text-white-80 text-black-80">
+      <p className="text-md leading-6 font-medium max-w-xl dark:text-white-80 text-black-80 mr-8">
         Leverage our open source SDKs to easily integrate from any popular game
         development framework or language.
       </p>
     </div>
-    <div className="flex flex-wrap gap-2">
+    <div className="flex flex-wrap gap-2 md:flex-row flex-col">
       <Card
         icon="UnityIcon"
         title="Unity"
@@ -61,7 +61,7 @@ const Card = ({
   return (
     <SmartLink
       href={link}
-      className="hover-fade p-4 dark:bg-white-10 bg-white rounded-xl w-[calc(33%-(16px/3))]"
+      className="hover-fade p-4 dark:bg-white-10 bg-white rounded-xl md:w-[calc(33%-(16px/3))]"
     >
       <p className="font-bold text-themed-primary text-xl leading-7 flex items-center gap-2">
         <IconComponent />

diff --git a/docs/components/Landing/SolutionsSection.tsx b/docs/components/Landing/SolutionsSection.tsx
@@ -5,12 +5,12 @@ export const SolutionsSection = () => (
   <section className="flex flex-col gap-5 border-t border-black-10">
     <div className="flex flex-col gap-1 py-5">
       <h3 className="text-3xl text-themed-primary font-bold">Solutions</h3>
-      <p className="text-md leading-6 font-medium max-w-xl dark:text-white-80 text-black-80">
+      <p className="text-md leading-6 font-medium max-w-xl dark:text-white-80 text-black-80 mr-8">
         Follow our solution guides to boost your game's acquisition,
         monetization and retention with the power of web3.
       </p>
     </div>
-    <div className="flex gap-4">
+    <div className="flex md:flex-row flex-col gap-4">
       <SolutionsGroup
         theme="purple"
         heading="Acquire players"
@@ -140,8 +140,10 @@ const SolutionsGroup = ({
               className="hover-fade p-4 rounded-md z-10 dark:bg-white-10 bg-black-7"
             >
               <div className="flex gap-2">
-                <p className="flex items-center gap-2 text-xl leading-7 font-bold text-themed-primary">
-                  <IconComponent />
+                <p className="flex items-start gap-2 text-xl leading-7 font-bold text-themed-primary">
+                  <span className="mt-1">
+                    <IconComponent />
+                  </span>
                   {item.title}
                 </p>
               </div>

diff --git a/docs/components/Landing/SupportSection.tsx b/docs/components/Landing/SupportSection.tsx
@@ -4,12 +4,12 @@ export const SupportSection = () => (
   <section className="flex flex-col gap-5 border-t dark:border-white-10 border-black-10">
     <div className="flex flex-col gap-1 py-5">
       <h3 className="text-3xl text-themed-primary font-bold">Support</h3>
-      <p className="text-md leading-6 font-medium max-w-xl dark:text-white-80 text-black-80">
+      <p className="text-md leading-6 font-medium max-w-xl dark:text-white-80 text-black-80 mr-8">
         Follow our solution guides to boost your game's acquisition,
         monetization and retention with the power of web3.
       </p>
     </div>
-    <div className="flex flex-wrap gap-x-10 gap-y-5">
+    <div className="flex flex-wrap gap-x-10 gap-y-5 md:flex-row flex-col">
       <SupportItem
         link="/support"
         title="Chat Support"
@@ -43,10 +43,10 @@ const SupportItem = ({
   body: string
   link: string
 }) => (
-  <div className="w-[calc(50%-20px)] border-t dark:border-white-10 border-black-10 flex flex-col gap-3 py-5">
+  <div className="md:w-[calc(50%-20px)] border-t dark:border-white-10 border-black-10 flex flex-col gap-3 py-5">
     <div>
       <p className="text-themed-primary font-bold text-xl leading-7">{title}</p>
-      <p className="text-themed-secondary font-medium text-sm leading-5">
+      <p className="text-themed-secondary font-medium text-sm leading-5 md:pr-0 pr-6">
         {body}
       </p>
     </div>