chore: fix responsive navbar (#64)

Navbar is now clickable on responsive data --------- Co-authored-by: rollsmorr1 <[email protected]> Co-authored-by: nlc616 <[email protected]> Co-authored-by: GitHub Action <[email protected]>
fleek-platform · Jun 5, 2024 · ba04d1a · ba04d1a
1 parent f4e2198
commit ba04d1a
Show file tree

Hide file tree

Showing 26 changed files with 637 additions and 139 deletions.
diff --git a/src/components/BuildUseCases.tsx b/src/components/BuildUseCases.tsx
@@ -23,7 +23,7 @@ const BuildUseCases: React.FC<Props> = (props) => (
             description: 'Use the React started kit to get the best look.',
             icon: { src: '/svg/react-icon.svg', alt: 'Web3 App' },
             cta: {
-              url: 'https://github.com/fleekxyz/nextjs-template',
+              url: 'https://app.fleek.xyz/templates/clmf71ycb0004lb08mubafjnj/',
               text: 'try it',
             },
             image: '/svg/nextjs-template.svg',
@@ -33,7 +33,7 @@ const BuildUseCases: React.FC<Props> = (props) => (
             description: 'Use the React started kit to get the best look.',
             icon: { src: '/svg/react-icon.svg', alt: 'NextJs App' },
             cta: {
-              url: 'https://github.com/fleekxyz/react-template',
+              url: 'https://app.fleek.xyz/templates/clmf7apqf0007l808mo2f6937/',
               text: 'try it',
             },
             image: '/svg/react-template.svg',
@@ -43,7 +43,7 @@ const BuildUseCases: React.FC<Props> = (props) => (
             description: 'Use the React started kit to get the best look.',
             icon: { src: '/svg/react-icon.svg', alt: 'React App' },
             cta: {
-              url: 'https://github.com/fleekxyz/astro-template',
+              url: 'https://app.fleek.xyz/templates/clmf7io4a0009ic08ya3sjwyj/',
               text: 'try it',
             },
             image: '/svg/astro-template.svg',

diff --git a/src/components/ButtonYellowOutline.tsx b/src/components/ButtonYellowOutline.tsx
@@ -10,7 +10,7 @@ const ButtonYellowOutline: React.FC<ButtonWhiteProps> = (props) => {
     <button
       className={`inline-block rounded-12 p-1 px-15 py-7 ${props.color == 'yellow' ? 'bg-yellow-dark-4 text-yellow-dark-11 hover:bg-yellow-dark-5' : 'bg-gray-dark-4 text-gray-dark-12 hover:bg-gray-dark-5'} `}
     >
-      <p className="font-plex-sans text-8 leading-[150%] lg:text-16">
+      <p className="font-plex-sans text-8 capitalize leading-[150%] tracking-[0.064rem] lg:text-16">
         {props.children}
       </p>
     </button>

diff --git a/src/components/GlobeWithFloatingCards.tsx b/src/components/GlobeWithFloatingCards.tsx
@@ -60,124 +60,15 @@ const GlobeWithFloatingCards = () => {
                   className="absolute left-0 top-0 -z-1 m-auto h-full w-full lg:hidden"
                 />
                 <div className="mx-auto  hidden h-[62rem] w-[110rem] rounded-12 border-2 border-ui-mid-grey  bg-[#1c1c1c]  lg:block  "></div>
-                {/* <div className="relative  z-1 mb-8 flex flex-col gap-y-8 lg:absolute lg:left-[12%] lg:top-1/2 lg:mb-0 lg:w-[32.5rem] lg:-translate-y-1/2 lg:gap-y-48 ">
-                  <CardWrapper header>
-                    <a href="https://fleek.xyz/hosting/">
-                      <div className="mb-8 flex flex-col gap-8 lg:max-w-[32.5rem]">
-                        <div className="flex flex-col items-center gap-4 lg:flex-row lg:gap-16">
-                          <img
-                            src="/svg/hosting-icon.svg"
-                            className=" scale-105"
-                          />
-                          <span className="typo-caption-m text-ui-white lg:typo-caption-l">
-                            Hosting
-                          </span>
-                        </div>
-                        <p className="typo-xs text-center lg:typo-s lg:text-start">
-                          Host web3 apps on web3 infra (IPFS, ENS, etc.).
-                        </p>
-                      </div>
-                    </a>
-                  </CardWrapper>
-                  <CardWrapper header className="lg:relative lg:right-60">
-                    <a href="https://fleek.xyz/storage/">
-                      <div className="mb-8 flex flex-col gap-8 lg:max-w-[32.5rem]">
-                        <div className="flex flex-col items-center gap-4 lg:flex-row lg:gap-16">
-                          <img src="/svg/storage-icon.svg" />
-                          <span className="typo-caption-m text-ui-white lg:typo-caption-l">
-                            Storage
-                          </span>
-                        </div>
-                        <p className="typo-xs text-center lg:typo-s lg:text-start">
-                          Store on Filecoin and Arweave, addressable via IPFS.
-                        </p>
-                      </div>
-                    </a>
-                  </CardWrapper>
-                  <CardWrapper header>
-                    <a href="https://fleek.xyz/domains/">
-                      <div className="mb-8 flex flex-col gap-8 lg:max-w-[32.5rem]">
-                        <div className="flex flex-col items-center gap-4 lg:flex-row lg:gap-16">
-                          <img src="/svg/domains-icon.svg" />
-                          <span className="typo-caption-m text-ui-white lg:typo-caption-l">
-                            Domains
-                          </span>
-                        </div>
-                        <p className="typo-xs text-center lg:typo-s lg:text-start">
-                          Manage ENS, DNS, and IPNS records.
-                        </p>
-                      </div>
-                    </a>
-                  </CardWrapper>
-                </div> */}
-                {/* <div className="z-1 flex flex-col gap-y-8 lg:absolute lg:right-[12%] lg:top-1/2 lg:w-[32.5rem] lg:-translate-y-1/2 lg:gap-y-48">
-                  <CardWrapper header>
-                    <a
-                      href="https://docs.fleek.xyz/docs/Storage#content-addressing"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <div className="mb-8 flex flex-col gap-8 lg:max-w-[32.5rem]">
-                        <div className="flex flex-col items-center gap-4 lg:flex-row lg:gap-16">
-                          <img src="/svg/content-addressing-icon.svg" />
-                          <span className="typo-caption-m text-ui-white">
-                            Content Addressing
-                          </span>
-                        </div>
-                        <p className="typo-xs text-center lg:typo-s lg:text-start">
-                          Use IPFS and/or IPNS for addressing data.
-                        </p>
-                      </div>
-                    </a>
-                  </CardWrapper>
-                  <CardWrapper header className="lg:relative lg:left-60">
-                    <a
-                      href="https://docs.fleek.xyz/docs/Sites#cdn"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <div className="mb-8 flex flex-col gap-8 lg:max-w-[32.5rem]">
-                        <div className="flex flex-col items-center gap-4 lg:flex-row lg:gap-16">
-                          <img src="/svg/concentric-circles-icon.svg" />
-                          <span className="typo-caption-m text-ui-white lg:typo-caption-l">
-                            CDN
-                          </span>
-                        </div>
-                        <p className="typo-xs text-center lg:typo-s lg:text-start">
-                          Accelerate files, data, sites, gateways, and more.
-                        </p>
-                      </div>
-                    </a>
-                  </CardWrapper>
-                  <CardWrapper header>
-                    <div className="mb-8 flex flex-col gap-8 lg:max-w-[32.5rem]">
-                      <div className="flex flex-col items-center gap-4 lg:flex-row lg:gap-16">
-                        <img src="/svg/compute-icon.svg" />
-                        <div className="text-ui-white">
-                          <span className="typo-caption-m lg:typo-caption-l">
-                            Compute
-                          </span>
-                          <span className="font-plex-mono text-8 uppercase leading-[150%] tracking-[0.1638rem]">
-                            (coming soon)
-                          </span>
-                        </div>
-                      </div>
-                      <p className="typo-xs text-center lg:typo-s lg:text-start">
-                        Choose from serverless and edge functions.
-                      </p>
-                    </div>
-                  </CardWrapper>
-                </div> */}
-
-                <video
-                  src="https://fleek.network/media/globe_animation.mp4"
+                <iframe
+                  width={725}
+                  height={400}
+                  src="https://www.youtube.com/embed/I7n7JFhUKeA?autoplay=1&loop=1&playlist=I7n7JFhUKeA&modestbranding=1&showinfo=0&controls=1&mute=1"
+                  title="Fleek Edge-Optimize Cloud Platform"
                   className="z-0 absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 scale-150 transform-gpu mix-blend-screen  lg:block"
-                  width={520}
-                  height={480}
-                  autoPlay
-                  loop
-                  preload="auto"
-                />
+                  allow="autoplay"
+                  frameBorder="0"
+                ></iframe>
               </div>
             </div>
           </GridLayout>

diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
@@ -265,17 +265,33 @@ const Nav = ({ pathname }: NavProps) => {
                           <span className="ml-4 inline-block w-8">+</span>
                         )}
                       </Text>
-                      {navItem?.subMenu.map(({ label }, index) => (
+                      {navItem?.subMenu.map(({ label, url }, index) => (
                         <div
                           key={`${index}-${label}`}
                           className="nav-menu-mobile-sub-menu-container"
                         >
-                          <Text
-                            className="nav-menu-mobile-sub-menu-label"
-                            style="nav-m"
+                          <Link
+                            href={url}
+                            target={
+                              navItem.openInNewTab ? Target.Blank : Target.Self
+                            }
+                            key={navItem.url}
+                            className={
+                              isActivePath({
+                                pathname,
+                                lookup: navItem.url || '',
+                              })
+                                ? 'font-bold'
+                                : 'nav-text-item'
+                            }
                           >
-                            {label}
-                          </Text>
+                            <Text
+                              className="nav-menu-mobile-sub-menu-label"
+                              style="nav-m"
+                            >
+                              {label}
+                            </Text>
+                          </Link>
                         </div>
                       ))}
                     </>

diff --git a/src/components/SearchBtn.tsx b/src/components/SearchBtn.tsx
@@ -181,7 +181,7 @@ export default ({
 
   useEffect(() => {
     if (openModal && typeof onEnter === 'function') {
-      onEnter(); 
+      onEnter();
     }
 
     if (!openModal && typeof onLeave === 'function') {

diff --git a/src/components/Text.tsx b/src/components/Text.tsx
@@ -66,7 +66,8 @@ const textStyles: Record<TextStyle, string> = {
   'btn-s':
     'font-plex-sans text-13 font-normal leading-[150%] tracking-[0.096rem] uppercase',
   'btn-l':
-    'font-plex-sans lg:text-16 font-normal leading-[150%] tracking-[0.0rem]',
+    'font-plex-sans lg:text-16 font-medium leading-[150%] tracking-[0.192rem] capitalize',
+
   'btn-l-mid':
     'font-plex-sans lg:text-14 font-normal leading-[150%] tracking-[0.0rem]',
 };

diff --git a/...nt/blog/Uncategorized/introducing-nfas-non-fungible-apps/fleekxyz-nfa-thumb.png b/...nt/blog/Uncategorized/introducing-nfas-non-fungible-apps/fleekxyz-nfa-thumb.png