Merge pull request #16 from ref-finance/update-v3-ui

Update v3 UI
ref-finance · Feb 18, 2024 · 895843a · 895843a
2 parents cfaed52 + 0f88ba6
commit 895843a
Show file tree

Hide file tree

Showing 30 changed files with 4,118 additions and 5,280 deletions.
diff --git a/.postcssrc.json b/.postcssrc.json
@@ -1,7 +1,6 @@
 {
   "plugins": {
     "tailwindcss": {},
-    "autoprefixer": {},
     "postcss-pxtorem": {
       "propList": ["*"]
     }

diff --git a/src/assets/Gotham-Bold.otf b/src/assets/Gotham-Bold.otf
diff --git a/src/components/common/FooterIconLink.tsx b/src/components/common/FooterIconLink.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { openInNewTab } from '~src/utils/openNewTab';
+
+type IconLinkProps = {
+  IconComponent: React.ElementType;
+  href: string;
+  className?: string;
+};
+
+export const IconLink: React.FC<IconLinkProps> = ({ IconComponent, href, className }) => {
+  const [clicked, setClicked] = useState(false);
+
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    openInNewTab(href);
+    setClicked(true);
+  };
+
+  const handleMouseLeave = () => {
+    setClicked(false);
+  };
+
+  const divClass = `w-10 h-10 bg-opacity-50 rounded-3xl bg-footerHoverColor flex justify-center items-center cursor-pointer md:mb-4 ${
+    clicked ? '' : 'hover:bg-opacity-100'
+  } ${className || ''}`;
+
+  return (
+    <div className={divClass} onClick={handleClick} onMouseLeave={handleMouseLeave} style={{minWidth:'40px',minHeight:"40px"}}>
+      <IconComponent />
+    </div>
+  );
+};
diff --git a/src/components/common/FooterLink.tsx b/src/components/common/FooterLink.tsx
@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { openInNewTab } from '~src/utils/openNewTab';
+
+type FooterLinkProps = {
+  children: React.ReactNode;
+  href: string;
+};
+
+export const FooterLink: React.FC<FooterLinkProps> = ({ children, href }) => {
+  const [clicked, setClicked] = useState(false);
+
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    openInNewTab(href);
+    setClicked(true);
+  };
+
+  const handleMouseLeave = () => {
+    setClicked(false);
+  };
+
+  const divClass = `opacity-50 mb-4 cursor-pointer whitespace-nowrap ${
+    clicked ? '' : 'hover:text-footerHoverColor hover:opacity-100'
+  }`;
+
+  return (
+    <div
+      className={divClass}
+      onClick={handleClick}
+      onMouseLeave={handleMouseLeave}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/src/components/common/Link.tsx b/src/components/common/Link.tsx
@@ -7,7 +7,8 @@ import {
   FooterIcon1Hover,
   FooterIcon2Hover,
   FooterIcon3Hover,
-  FooterIcon4Hover
+  FooterIcon4Hover,
+  FooterIcon5Hover
 } from '~src/components/layoutIcon/Icon';
 const Link = (props: any) => {
   return (
@@ -16,6 +17,7 @@ const Link = (props: any) => {
       <FooterIconB />
       <FooterIconC />
       <FooterIconD />
+      <FooterIconE />
     </div>
   );
 };
@@ -82,3 +84,19 @@ function FooterIconD() {
     />
   );
 }
+
+function FooterIconE() {
+  const [hoverLogo, setHoverLogo] = useState(false);
+  function go() {
+    window.open('https://form.typeform.com/to/onOPhJ6Y?typeform-source=www.ref.finance');
+  }
+  return (
+    <FooterIcon5Hover
+      onMouseOver={() => setHoverLogo(true)}
+      onMouseLeave={() => setHoverLogo(false)}
+      onClick={go}
+      hoverLogo={hoverLogo}
+      className="cursor-pointer text-opacity80White drop-shadow-2xl hover:text-hightGreenColor lg:ml-1"
+    />
+  );
+}
diff --git a/src/components/icon/SDKIntro.tsx b/src/components/icon/SDKIntro.tsx
@@ -161,7 +161,7 @@ export const CodeBlock = () => {
           left: '120px'
         }}
       >
-        npm install @ref-finance/ref-sdk
+        npm install ref-sdk
       </div>
 
       <div
@@ -199,7 +199,7 @@ export const CodeBlockMobile = () => {
           left: '24%'
         }}
       >
-        npm install @ref-finance/ref-sdk
+        npm install ref-sdk
       </div>
 
       <div

diff --git a/src/components/layoutIcon/Icon.tsx b/src/components/layoutIcon/Icon.tsx
diff --git a/src/index.scss b/src/index.scss
@@ -27,6 +27,10 @@
   font-family: 'gotham';
   src: url('./assets/Gotham-Book.ttf');
 }
+@font-face {
+  font-family: 'gothamBold';
+  src: url('./assets/Gotham-Bold.otf');
+}
 @font-face {
   font-family: 'gothamLight';
   src: url('./assets/Gotham-Light.otf');
@@ -35,6 +39,10 @@
   font-family: 'gotham';
 }
 
+.gotham_font_bold {
+  font-family: 'gothamBold';
+}
+
 .gotham_font_light {
   font-family: 'gothamLight';
 }

diff --git a/src/pages/home/Cooperation/index.tsx b/src/pages/home/Cooperation/index.tsx
@@ -7,7 +7,7 @@ const Cooperation = () => {
   return (
     <div className="mt-24 w-full l:mt-44 flex justify-center">
       <div className="flex flex-col CooperateCard_max_width s:items-center">
-        <div className="font-poppins inline-flex flex-col font-bold text-6xl s:text-4xl s:mx-auto s:px-10  text-white">
+        <div className="font-poppins inline-flex flex-col gotham_font_bold  text-6xl s:text-4xl s:mx-auto s:px-10  text-white">
           <div className="italic">
             Partnerships
             <div

diff --git a/src/pages/home/Intro/DataCards.tsx b/src/pages/home/Intro/DataCards.tsx
@@ -89,7 +89,7 @@ const GradientBackground = () => {
 
 const DataCard: FC<DataCardProps> = ({ title, value, icon, description }) => {
   return (
-    <div className="dataCard relative font-bold italic text-white flex flex-col justify-center items-center text-center mx-2 s:my-2 rounded-2xl border border-mobile">
+    <div className="dataCard relative gotham_font_bold  italic text-white flex flex-col justify-center items-center text-center mx-2 s:my-2 rounded-2xl border border-mobile">
       <div
         style={{
           fontSize: '26px',

diff --git a/src/pages/home/Intro/FeatureCards.tsx b/src/pages/home/Intro/FeatureCards.tsx
@@ -42,7 +42,7 @@ const FeatureCard: FC<FeatureCardProps> = ({ index, icon, title, description })
       >
         <div
           className={`
-          font-poppins font-bold italic text-2xl xl:text-3xl s:text-xl text-white text-left
+          font-poppins gotham_font_bold  italic text-2xl xl:text-3xl s:text-xl text-white text-left
           w-full mb-1 l:mt-4 s:mt-2 px-0
         `}
         >

diff --git a/src/pages/home/Investors/index.tsx b/src/pages/home/Investors/index.tsx
@@ -7,7 +7,7 @@ const Investors = () => {
   return (
     <div className="mt-24 w-full l:mt-44 flex justify-center s:w-full">
       <div className="flex flex-col Investors_max_width s:w-full l:items-center">
-        <div className="font-poppins l:inline-flex l:flex-col font-bold text-6xl s:text-4xl s:px-10 investorCard_title_max_width text-white ">
+        <div className="font-poppins l:inline-flex l:flex-col gotham_font_bold  text-6xl s:text-4xl s:px-10 investorCard_title_max_width text-white ">
           <div className="italic">
             Investors
             <div

diff --git a/src/pages/home/Roadmap/Goals.tsx b/src/pages/home/Roadmap/Goals.tsx
@@ -17,7 +17,7 @@ const Goals: FC<GoalsProps> = ({ title, children }) => {
       <div
         className={`
           mb-6
-          font-poppins font-bold italic text-3xl text-white
+          font-poppins gotham_font_bold  italic text-3xl text-white
           flex
         `}
       >

diff --git a/src/pages/home/Roadmap/index.tsx b/src/pages/home/Roadmap/index.tsx
@@ -12,7 +12,7 @@ const Roadmap = () => {
       `}
     >
       {/* Title */}
-      <div className="font-poppins flex font-bold text-6xl s:text-4xl italic text-white l:mb-16 s:mb-0">
+      <div className="font-poppins flex gotham_font_bold  text-6xl s:text-4xl italic text-white l:mb-16 s:mb-0">
         What we’re
         <br />
         working on

diff --git a/src/pages/home/SDKIntro/index.tsx b/src/pages/home/SDKIntro/index.tsx
@@ -4,19 +4,19 @@ import { DownArrow, ReadDoc, CodeBlock, CodeBlockMobile } from '../../../compone
 export const SDKIntro = () => {
   return (
     <div className="relative">
-      <div className="relative z-10 flex sm:flex-col md:flex-col  items-center justify-center mx-auto mt-44 sm:mt-20 md:mt-20 lg:w-4/5 sm:w-full md:w-full">
+      <div className="relative z-10 flex sm:flex-col md:flex-col  items-center justify-center mx-auto mt-44 sm:mt-20 md:mt-20 lg:w-4/5 sm:w-full md:w-full md:mb-44 sm:mb-44">
         <div className="w-1/2 sm:w-full md:w-full flex flex-col">
-          <div className="text-white text-2xl sm:text-center md:text-center font-bold">Developers</div>
+          <div className="text-white text-2xl sm:text-center md:text-center gotham_font_bold ">DEVELOPERS</div>
 
-          <div className="text-hightGreenColor text-6xl sm:text-center md:text-center  sm:text-5xl md:text-5xl font-bold mt-12 sm:mt-8 md:mt-8">{`{ REF SDK`}</div>
+          <div className="text-hightGreenColor text-6xl sm:text-center md:text-center  sm:text-42 md:text-46 gotham_font_bold  mt-12 sm:mt-8 md:mt-8">{`{ REF SDK`}</div>
 
-          <div className="font-light text-white lg:max-w-sm text-4xl sm:text-2xl md:text-2xl sm:px-10 md:px-10 sm:text-opacity-50 md:text-opacity-50 mt-4 sm:text-center md:text-center  mb-8">
+          <div className="font-light text-white lg:mr-14 text-42 gotham_font_light sm:text-2xl md:text-2xl sm:px-10 md:px-10  mt-4 sm:text-center md:text-center mb-6">
             The easiest way to build on top of Ref
           </div>
 
           <div className="flex items-center sm:hidden md:hidden">
             <button
-              className="flex mr-5 items-center rounded-lg text-white font-bold text-lg px-6 py-4 h-14"
+              className="flex mr-5 items-center rounded-lg text-white gotham_font_bold  text-lg px-6 py-4 h-14"
               style={{
                 background: 'linear-gradient(270deg, #7331FF 0%, #004FC6 49.79%, #00C6A2 97.06%)'
               }}
@@ -49,12 +49,15 @@ export const SDKIntro = () => {
         <div className="w-1/2 sm:hidden md:hidden relative bottom-44">
           <CodeBlock />
         </div>
-        <div className="lg:hidden ">
+        <div className="lg:hidden md:hidden">
           <CodeBlockMobile />
         </div>
-        <div className="flex whitespace-nowrap flex-col px-10 w-full items-center lg:hidden">
+        <div className="sm:hidden lg:hidden mb-80 absolute md:scale-x-110 top-44 left-1/2 transform -translate-x-1/2 mx-auto" style={{width:'556px'}}>
+          <CodeBlock />
+        </div>
+        <div className="flex flex-col px-10 w-full items-center lg:hidden md:flex-row md:mt-96 md:space-x-4 md:justify-center">
           <button
-            className="flex mt-8 mb-6 w-full justify-center items-center rounded-lg text-white font-bold text-lg px-6 py-4 h-14"
+            className="flex mt-8 w-full md:w-auto md:mt-0 md:mb-0 justify-center items-center rounded-lg text-white gotham_font_bold text-lg px-6 py-4 h-14"
             style={{
               background: 'linear-gradient(270deg, #7331FF 0%, #004FC6 49.79%, #00C6A2 97.06%)'
             }}
@@ -69,7 +72,7 @@ export const SDKIntro = () => {
           </button>
 
           <button
-            className="flex w-full justify-center items-center rounded-lg text-white text-opacity-70 text-lg h-14 px-6 py-4"
+            className="flex mt-8 w-full md:w-auto md:mt-0 md:mb-0 justify-center items-center rounded-lg text-white text-opacity-70 text-lg h-14 px-6 py-4"
             style={{
               background: 'linear-gradient(90deg, rgba(58, 110, 114, 0.64) 0%, rgba(13, 43, 37, 0.64) 100.18%)'
             }}
@@ -79,7 +82,7 @@ export const SDKIntro = () => {
           >
             Read Doc
             <span className="ml-2">
-              <ReadDoc></ReadDoc>
+              <ReadDoc />
             </span>
           </button>
         </div>

diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
@@ -4,9 +4,12 @@ import Banner from './v2/Banner';
 import Intro from './v2/Intro';
 import Data from './v2/Data';
 import Investors from './v2/Investors';
-import Footer from './v2/Footer';
 import { isMobile } from '~src/utils/device';
 import { SDKIntro } from './SDKIntro/index';
+import Dcl from './v3/Dcl';
+import Overview from './v3/Overview';
+import Team from './v3/Team';
+import Footer from './v3/Footer';
 
 const HomePage = () => {
   const mobile = isMobile();
@@ -19,9 +22,12 @@ const HomePage = () => {
         <section className="mx-auto">
           <Banner />
           {/* <Intro /> */}
+          <Dcl />
+          <Overview />
           <Data />
           <SDKIntro />
           <Investors />
+          <Team />
         </section>
       </div>
       <footer className="Home_footer flex justify-center">
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,7 +17,7 @@ const Goals: FC<GoalsProps> = ({ title, children }) => { @@
           <div
             className={`
               mb-6
-              font-poppins font-bold italic text-3xl text-white
+              font-poppins gotham_font_bold  italic text-3xl text-white
               flex
             `}
           >
@@ Expand Down @@