add landing page

blockworks-foundation · Nov 27, 2023 · da9257d · da9257d
1 parent 1dd2774
commit da9257d
Show file tree

Hide file tree

Showing 16 changed files with 508 additions and 13 deletions.
diff --git a/components/ColorBlur.tsx b/components/ColorBlur.tsx
@@ -9,7 +9,7 @@ const ColorBlur = ({
 }) => {
   return (
     <div
-      className={`absolute bg-th-red-dark mix-blend-screen rounded-full filter blur-3xl opacity-10 ${className}`}
+      className={`absolute mix-blend-screen rounded-full filter blur-3xl opacity-10 ${className}`}
       style={{ height: height, width: width }}
     />
   )

diff --git a/components/home/HomePage.tsx b/components/home/HomePage.tsx
@@ -135,7 +135,6 @@ const HomePage = () => {
       const boxes = self.selector('.highlight-features')
       boxes.forEach((box) => {
         gsap.to(box, {
-          opacity: 1,
           y: -40,
           ease: 'power3.inOut',
           scrollTrigger: {
@@ -397,7 +396,7 @@ const HomePage = () => {
       <div className="bg-[url('/images/new/stage-slice.png')] bg-repeat-x bg-contain">
         <SectionWrapper className="relative overflow-hidden">
           <ColorBlur
-            className="-top-20 left-0 -rotate-25 opacity-20"
+            className="-top-20 left-0 -rotate-25 opacity-20 bg-white"
             height="800px"
             width="600px"
           />
@@ -432,7 +431,7 @@ const HomePage = () => {
             ))}
           </div>
           <ColorBlur
-            className="-top-20 left-0 -rotate-25 opacity-20"
+            className="-top-20 left-0 -rotate-25 opacity-20 bg-white"
             height="800px"
             width="600px"
           />
@@ -524,7 +523,7 @@ const HomePage = () => {
         <SectionWrapper className="relative overflow-hidden">
           <div className="absolute -bottom-40 left-1/2 -translate-x-1/2 bg-gradient-to-tl shadow-xl from-th-bkg-1 to-th-bkg-2 h-[600px] w-[600px] md:h-[800px] md:w-[800px] rounded-full" />
           <ColorBlur
-            className="-top-10 left-0 opacity-50"
+            className="-top-10 left-0 opacity-50 bg-white"
             height="600px"
             width="600px"
           />

diff --git a/components/icons/OttersecLogoMark.tsx b/components/icons/OttersecLogoMark.tsx
@@ -0,0 +1,14 @@
+const OttersecLogoMark = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      className={`${className}`}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 27 27"
+      fill="currentColor"
+    >
+      <path d="M19.5102 24.2486C21.1613 23.5889 22.6454 22.5931 23.861 21.3292C25.8177 19.3032 26.85 16.0533 26.85 16.0533C26.8163 16.3985 26.7622 16.7416 26.6882 17.081C26.5817 17.5909 26.4409 18.0935 26.2668 18.5856C26.0803 19.1366 25.8613 19.6769 25.6106 20.2037C25.3185 20.8282 24.973 21.4283 24.5777 21.9975C23.6367 23.2742 22.4417 24.3572 21.0623 25.1834C20.1022 25.7172 19.0767 26.1334 18.0098 26.4222C14.7497 27.2643 7.73278 27.0624 3.55038 21.9658C0.505971 18.2544 0.719572 14.0884 0.775707 13.2922C0.817261 12.6991 1.21166 8.15835 5.12291 4.70858C6.26657 3.70278 7.5806 2.89377 9.00784 2.31681C9.00508 1.93578 9.14283 1.5662 9.39653 1.27419C9.65023 0.982179 10.0033 0.786769 10.3926 0.722909C10.782 0.659039 11.1821 0.730889 11.5216 0.925589C11.861 1.1203 12.1176 1.42517 12.2454 1.78569C13.2106 1.71535 13.9609 1.71113 14.3355 1.74419C14.5572 1.76318 14.8138 1.79413 14.8138 1.79413C15.3028 1.84483 15.7852 1.94219 16.2544 2.08466C16.8422 2.24138 17.4031 2.48005 17.9195 2.79305C18.6937 3.27564 18.7869 3.63226 19.8565 4.27664C19.9717 4.34628 20.0672 4.40045 20.1284 4.43424L20.5469 4.5538C20.7496 4.6115 20.8574 4.64105 20.95 4.66706C21.1242 4.71632 21.3721 4.78805 21.6835 4.88585C21.6083 5.03074 21.5449 5.15174 21.4982 5.23755C21.4035 5.41482 21.3305 5.54641 21.3305 5.55132C20.9895 6.1893 20.4841 6.73191 19.863 7.12709C19.2419 7.52226 17.1409 7.26843 16.2544 7.12709C15.3678 6.98574 12.583 6.24983 9.9279 7.98319C6.73327 10.0689 6.79233 13.8289 6.81276 14.3846C6.83028 14.8757 6.99429 17.9266 9.65011 20.0186C11.6046 21.5579 13.7581 21.6563 14.5244 21.6809C15.1033 21.6992 17.4441 21.7175 19.7004 20.2037C20.7184 19.5263 21.5655 18.6368 22.1792 17.6008C22.7517 16.608 23.0761 15.5 23.1269 14.365C23.1514 13.5533 23.0281 12.7437 22.7624 11.9732C22.4999 11.3003 22.1504 10.6622 21.722 10.0738C22.6261 12.8174 21.795 15.0684 21.795 15.0684C21.5602 15.7036 21.2533 16.4992 20.5053 17.2927C19.5349 18.3212 18.1965 18.8136 17.6957 18.993C17.3124 19.1272 16.9203 19.2365 16.5219 19.3201C16.2153 19.3804 15.9822 19.4059 15.6617 19.4409L15.6471 19.4425C15.3327 19.4794 15.0161 19.4961 14.6994 19.4925C14.6994 19.4925 15.2979 19.3799 15.8717 19.2357C17.0226 18.937 18.0843 18.3808 18.9707 17.6121C19.4417 17.1978 20.1926 16.521 20.6249 15.3956C20.9043 14.6681 20.9331 14.0597 20.9594 13.5055L20.9595 13.5025C20.9968 12.6226 20.8935 11.7423 20.6533 10.8926C20.4359 10.1192 20.1092 9.3783 19.6823 8.69085L20.143 8.73729C20.8568 8.8317 21.5631 8.9728 22.2572 9.1594C23.0147 9.3633 23.6073 9.528 24.2984 9.9332C24.6126 10.1175 24.9254 10.3011 25.2462 10.6366C25.836 11.2549 26.0211 11.9373 26.1209 12.3249C26.4374 13.5511 26.1779 14.5831 25.9752 15.3498C25.6486 16.5844 25.1135 17.4334 24.7359 18.023C24.1895 18.8777 23.5276 19.6584 22.7675 20.3443C20.9019 22.0158 18.8235 22.6939 17.6279 22.9823C16.0094 23.4083 14.3104 23.4647 12.6654 23.1473C11.0204 22.8298 9.47471 22.1471 8.15055 21.1533C6.34251 19.8871 5.46622 18.4675 5.0682 17.6958C3.86239 15.3589 3.94697 12.9595 3.99871 11.8248C4.01405 11.4962 4.03156 11.2958 4.03156 11.2697C3.68011 12.4353 3.12174 14.9285 4.02349 17.7965C4.26408 18.5624 4.79699 20.1945 6.29152 21.7526C7.99963 23.5331 9.9556 24.1634 11.0302 24.4961C12.2645 24.8782 15.7091 25.7378 19.5102 24.2486Z" />
+    </svg>
+  )
+}
+
+export default OttersecLogoMark
diff --git a/components/layout/LayoutWrapper.tsx b/components/layout/LayoutWrapper.tsx
@@ -1,7 +1,12 @@
 import { ReactNode, useEffect, useState } from 'react'
 import Footer from '../footer/Footer'
 import TopNavigation from '../navigation/TopNavigation'
-import { ttCommons, ttCommonsExpanded, ttCommonsMono } from '../../utils/fonts'
+import {
+  lalezar,
+  ttCommons,
+  ttCommonsExpanded,
+  ttCommonsMono,
+} from '../../utils/fonts'
 
 const LayoutWrapper = ({ children }: { children: ReactNode }) => {
   const [mounted, setMounted] = useState(false)
@@ -16,7 +21,7 @@ const LayoutWrapper = ({ children }: { children: ReactNode }) => {
 
   return (
     <main
-      className={`bg-th-bkg-1 ${ttCommons.variable} ${ttCommonsExpanded.variable} ${ttCommonsMono.variable} font-sans`}
+      className={`bg-th-bkg-1 ${ttCommons.variable} ${ttCommonsExpanded.variable} ${ttCommonsMono.variable} ${lalezar.variable} font-sans`}
     >
       <TopNavigation />
       <div>{children}</div>

diff --git a/components/navigation/TopNavigation.tsx b/components/navigation/TopNavigation.tsx
@@ -1,8 +1,10 @@
 import Link from 'next/link'
 import DesktopNavigation from './DesktopNavigation'
 import MobileNavigation from './MobileNavigation'
+import { useRouter } from 'next/router'
 
 const TopNavigation = () => {
+  const { asPath } = useRouter()
   return (
     <div className="lg:px-20 lg:py-6 px-6 py-4 bg-transparent max-w-[1600px] mx-auto">
       <div className="flex justify-between items-center">
@@ -18,8 +20,12 @@ const TopNavigation = () => {
             </span>
           </div>
         </Link>
-        <DesktopNavigation />
-        <MobileNavigation />
+        {asPath !== '/rewards' ? (
+          <>
+            <DesktopNavigation />
+            <MobileNavigation />
+          </>
+        ) : null}
       </div>
     </div>
   )