feat: create intro page with header, missingSection, and tradewithsup…

…erpowerSection
techemmy · Jul 13, 2024 · ac23f81 · ac23f81
1 parent bd749be
commit ac23f81
Show file tree

Hide file tree

Showing 19 changed files with 161 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,12 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Sync Swap</title>
+  <title>Sync Swap Parallel</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+    rel="stylesheet">
 </head>
 
 <body>

diff --git a/public/images/curve.png b/public/images/curve.png
diff --git a/public/syncswap-cover-art-min.png → public/images/syncswap-cover-art-min.png b/public/syncswap-cover-art-min.png → public/images/syncswap-cover-art-min.png
diff --git a/public/syncswap-logo.svg → public/images/syncswap-logo.svg b/public/syncswap-logo.svg → public/images/syncswap-logo.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,14 @@
-import Header from "@/components/Header";
+import NavBars from "@/components/NavBars";
+import { Outlet } from "react-router-dom";
 
 export default function App() {
   return (
-    <Header />
+    <>
+      <NavBars />
+      <div className="pt-20" >
+        <Outlet />
+      </div>
+    </>
   )
 }
 
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -0,0 +1,6 @@
+export default function Footer() {
+    return (
+        <div>Footer</div>
+    )
+}
+
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
@@ -1,5 +1,5 @@
 export default function Logo({ className = "" }: { className?: string }) {
     return (
-        <img className={`w-7 h-7 ${className}`} src="/syncswap-logo.svg" alt="Sync Swap Logo" />
+        <img className={`w-7 h-7 ${className}`} src="/images/syncswap-logo.svg" alt="Sync Swap Logo" />
     )
 }
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -23,6 +23,7 @@ const buttonVariants = cva(
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
+        xl: "h-11 rounded-full px-20",
         icon: "h-10 w-10",
       },
     },
@@ -35,7 +36,7 @@ const buttonVariants = cva(
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+  VariantProps<typeof buttonVariants> {
   asChild?: boolean
 }
 

diff --git a/src/index.css b/src/index.css
@@ -9,6 +9,8 @@
     --background: 255 255 255;
     --foreground: 222.2 84% 4.9%;
 
+    --zKTextGradient: 272.04deg, #8c8dfc 46.24%, #4e529a 99.45%;
+
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
 
@@ -24,15 +26,15 @@
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 81, 85, 166, 0.04;
+    --accent-foreground: var(--primary);
 
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
     --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --input: 81, 85, 166;
+    --ring: 81, 85, 166, 0.5;
 
     --radius: 0.5rem;
   }

diff --git a/src/main.tsx b/src/main.tsx
@@ -3,11 +3,15 @@ import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
 import { Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from 'react-router-dom'
+import Intro from '@/pages/intro'
 
 
 const router = createBrowserRouter(
   createRoutesFromElements([
-    <Route path='/' element={<App />} />
+    <Route path='/' element={<App />} >
+      // <Route index /> Trade page
+      <Route path='intro' element={<Intro />} />
+    </Route>
   ])
 )
 

diff --git a/src/pages/intro/components/BuiltWithTheBestSection.tsx b/src/pages/intro/components/BuiltWithTheBestSection.tsx
@@ -0,0 +1,6 @@
+export default function BuiltWithTheBestSection() {
+    return (
+        <div>BuiltWithTheBestSection</div>
+    )
+}
+
diff --git a/src/pages/intro/components/CommunityOwnershipSection.tsx b/src/pages/intro/components/CommunityOwnershipSection.tsx
@@ -0,0 +1,6 @@
+export default function CommunityOwnershipSection() {
+    return (
+        <div>CommunityOwnershipSection</div>
+    )
+}
+
diff --git a/src/pages/intro/components/FeatureArticle.tsx b/src/pages/intro/components/FeatureArticle.tsx
@@ -0,0 +1,14 @@
+export interface FeatureArticleProps {
+    name: string;
+    description: string;
+}
+
+export default function FeatureArticle({ name, description }: FeatureArticleProps) {
+    return (
+        <article className="bg-white p-6 text-left rounded-lg grid gap-y-4 hover:bg-gray-100">
+            <h3 className="text-xl font-semibold">{name}</h3>
+            <p className="text-gray-500 text-[15px]">{description}</p>
+        </article>
+    )
+}
+
diff --git a/src/pages/intro/components/Header.tsx b/src/pages/intro/components/Header.tsx
@@ -0,0 +1,14 @@
+export default function Header() {
+    return (
+        <header className="h-screen md:pt-24 flex flex-col-reverse justify-end items-center md:block">
+            <article className='md:ml-[12.50%] flex flex-col gap-y-8 font-semibold text-left px-5 md:px-0'>
+                <h1 className='mx-auto md:mx-0 text-center md:text-left text-[40px] max-w-[500px] xl:text-5xl xl:w-[700px] leading-[1.2] font-Public'>Seamless and Efficient Trading on
+                    <span className="bg-zKTextGradient text-transparent bg-clip-text"> zk Rollups</span>
+                </h1>
+                <p className='text-center md:text-left md:w-1/2 text-gray-500 font-medium'>SyncSwap brings more people easy-to-use and low-cost DeFi with complete Ethereum security powered by zero-knowledge technology.</p>
+            </article>
+            <img className='md:absolute top-14 z-[-1]' src='/images/syncswap-cover-art-min.png' alt='Sync Swap Cover art' />
+        </header>
+    )
+}
+
diff --git a/src/pages/intro/components/MissionSection.tsx b/src/pages/intro/components/MissionSection.tsx
@@ -0,0 +1,26 @@
+import { buttonVariants } from "@/components/ui/button";
+import { MdArrowOutward } from "react-icons/md";
+import { Link } from "react-router-dom";
+
+export default function MissionSection() {
+    return (
+        <section className="mb-10 md:mb-80 text-center flex flex-col gap-y-6 relative">
+            <h2 className="text-[40px] font-Public font-medium">An Aligned Mission </h2>
+            <p className="mx-auto text-lg text-gray-500 max-w-[750px]">SyncSwap aligns with the mission of zkSync
+                to accelerate the mass adoption of crypto for
+                personal sovereignty.</p>
+
+            <Link className={buttonVariants({
+                variant: "outline",
+                className: "mx-auto max-w-[400px] flex gap-x-3 text-primary bg-transparent text-[16px]",
+                size: "xl"
+            })} to="https://matterlabs.notion.site/Why-zkSync-On-Maximizing-Freedom-6265ef48c6af490f83926e907d959035" >
+                Learn
+                <MdArrowOutward />
+            </Link>
+
+            <img className="absolute top-44 md:top-24 max-w-[85%] left-0 right-0 md:mx-auto z-[-1]" src="/images/curve.png" alt="Curve" />
+        </section>
+    )
+}
+
diff --git a/src/pages/intro/components/TradeWithSuperpowerSection.tsx b/src/pages/intro/components/TradeWithSuperpowerSection.tsx
@@ -0,0 +1,26 @@
+import FeatureArticle from "@/pages/intro/components/FeatureArticle";
+
+export default function TradeWithSuperpowerSection() {
+    return (
+        <section className="text-center py-10">
+            <p className="text-lg font-medium leading-[1.2]"> Your DeFi Hub on Ethereum zk Rollups </p>
+            <h2 className="text-[40px] font-medium font-Public my-2"> Trade with Superpowers </h2>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-10 max-w-[950px] mx-auto">
+                <FeatureArticle
+                    name="Complete Security"
+                    description=" Stay the same security as Ethereum mainnet "
+                />
+                <FeatureArticle
+                    name=" Seamless UX "
+                    description=" Enjoy up to 100x scaling with lower gas costs "
+                />
+                <FeatureArticle
+                    name=" Efficient Trades "
+                    description=" Next generation multi-pool enables higher capital efficiency "
+                />
+            </div>
+        </section>
+    )
+}
+
diff --git a/src/pages/intro/index.tsx b/src/pages/intro/index.tsx
@@ -0,0 +1,24 @@
+import Header from '@/pages/intro/components/Header';
+import MissionSection from '@/pages/intro/components/MissionSection';
+import TradeWithSuperpowerSection from '@/pages/intro/components/TradeWithSuperpowerSection';
+import CommunityOwnershipSection from '@/pages/intro/components/CommunityOwnershipSection';
+import BuiltWithTheBestSection from "@/pages/intro/components/BuiltWithTheBestSection";
+import Footer from "@/components/Footer";
+
+export default function Intro() {
+    return (
+        <>
+            <Header />
+            <main className="md:mt-10 mx-3 md:px-5 md:px-0">
+
+                <MissionSection />
+                <TradeWithSuperpowerSection />
+                <CommunityOwnershipSection />
+                <BuiltWithTheBestSection />
+                <Footer />
+            </main>
+
+        </>
+    )
+}
+
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -17,10 +17,16 @@ export default {
       },
     },
     extend: {
+      backgroundImage: {
+        zKTextGradient: "linear-gradient(var(--zKTextGradient))",
+      },
+      fontFamily: {
+        Public: "Poppins, sans-serif",
+      },
       colors: {
-        border: "hsl(var(--border))",
+        border: "rgba(var(--border))",
         input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
+        ring: "rgb(var(--ring))",
         background: "rgb(var(--background))",
         foreground: "hsl(var(--foreground))",
         primary: {
@@ -40,8 +46,8 @@ export default {
           foreground: "hsl(var(--muted-foreground))",
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          DEFAULT: "rgba(var(--accent))",
+          foreground: "rgb(var(--accent-foreground))",
         },
         popover: {
           DEFAULT: "hsl(var(--popover))",