feat: added steps and updated footer (#10)

* feat: added steps and updated footer * Added details in home page Co-authored-by: UltimateRoman <[email protected]>
Weir-Protocol · Jun 24, 2022 · ec7f7a8 · ec7f7a8 · vercel · Jun 24, 2022
1 parent 4fa7ff7
commit ec7f7a8
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 12 deletions.
diff --git a/frontend/components/Footer/index.tsx b/frontend/components/Footer/index.tsx
@@ -1,7 +1,18 @@
 const Footer = () => {
   return (
     <div className="w-full max-w-[1440px] mx-auto px-[32px] md:px-[64px] lg:px[120px]">
-      <footer>This is a cool footer</footer>
+      <footer className="flex items-center justify-end">
+        <div className="py-[30px]">
+          <a
+            href="https://github.com/Weir-Protocol/prototype"
+            className="font-bold text-sm"
+            target="_blank"
+            rel="noreferrer"
+          >
+            GitHub
+          </a>
+        </div>
+      </footer>
     </div>
   );
 };

diff --git a/frontend/components/Navbar/index.tsx b/frontend/components/Navbar/index.tsx
@@ -11,7 +11,7 @@ const navLinks: { text: string; link: string }[] = [
   {
     text: "Weirs",
     link: "/weirs",
-  }
+  },
 ];
 
 const Navbar = () => {
@@ -72,7 +72,9 @@ const Navbar = () => {
             suppressHydrationWarning
             onClick={address ? destroy : connectWallet}
           >
-            {address ? `Disconnect wallet` : "Connect to a wallet"}
+            {address
+              ? `${address.slice(0, 5)}...${address.slice(-5)}`
+              : "Connect to a wallet"}
           </button>
         </div>
         <div

diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
@@ -10,27 +10,33 @@ import OracleIcon from "../public/assets/weir-oo.svg";
 const cardData: { icon: any; title: string; description: string }[] = [
   {
     title: "Community friendly",
-    description: "Weir is a Web3 native protocol with a community-first focus",
+    description: "Weir is focussed on DAOs and decentralized communities",
     icon: CommunityIcon,
   },
   {
-    title: "No limits on design",
-    description: "Request any arbitrary data to power your protocol",
+    title: "Voting Simplified",
+    description: "DAO members can effortlessly register their votes",
     icon: DocumentIcon,
   },
   {
-    title: "Provably secure",
+    title: "Secure",
     description:
-      "Weir's oracle is the only one that offers economic guarantees",
+      "Weir's token lock and control mechanism is inherently secure",
     icon: LockIcon,
   },
   {
-    title: "Minimize oracle usage",
-    description: "Fewer calls means a smaller attack vector and lower fees",
+    title: "Custom Oracle",
+    description: "Weir's oracle commits vote results on-chain",
     icon: OracleIcon,
   },
 ];
 
+const steps: string[] = [
+  "Create a weir using your DAO token and a (DAO token - Stablecoin) Liquidity Pool and set a Key Performance Indicator(KPI) target relevant to the purpose/goal of your DAO",
+  "Share the voting link with your DAO members and endorse them to vote",
+  "Once the voting deadline is over, view votes received and commit the voting result on-chain",
+];
+
 const Home: NextPage = () => {
   return (
     <DefaultLayout>
@@ -40,9 +46,15 @@ const Home: NextPage = () => {
           <span className="text-primary">DAO2Stablecoin Protocol</span> for
           sustainable liquidity
         </h1>
-        <button className="text-lg font-bold px-[50px] py-[10px] bg-primary rounded">
+        <a
+          href="#get-started"
+          className="text-lg font-bold px-[50px] py-[10px] bg-primary rounded"
+        >
           Get Started
-        </button>
+        </a>
+        <small className="font-bold mt-[12px] text-sm">
+          Weir Protocol is live on Celo Alfajores Testnet
+        </small>
       </div>
       <div className="py-[60px]">
         <h2 className="text-lg uppercase font-bold mb-[32px]">Why use Weir?</h2>
@@ -52,6 +64,24 @@ const Home: NextPage = () => {
           ))}
         </div>
       </div>
+      <div className="py-[60px]" id="get-started">
+        <h2 className="text-lg uppercase font-bold mb-[32px]">
+          As a DAO how can you use Weir Protocol?
+        </h2>
+        <div className="grid md:grid-col-4 lg:grid-cols-6 gap-[20px]">
+          {steps.map((step, i) => (
+            <>
+              <div className="col-span-1 font-bold">Step {i + 1}:</div>
+              <div className="col-span-3 lg:col-span-5">{step}</div>
+            </>
+          ))}
+          <div className="col-span-1"></div>
+          <div className="col-span-3 lg:col-span-5">
+            Receive liquidity into the liquidity pool if your DAO has achieved
+            the KPI target
+          </div>
+        </div>
+      </div>
     </DefaultLayout>
   );
 };

diff --git a/frontend/styles/globals.scss b/frontend/styles/globals.scss
@@ -17,4 +17,5 @@ a {
 
 * {
   box-sizing: border-box;
+  scroll-behavior: smooth;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,4 +17,5 @@ a { @@
     * {
       box-sizing: border-box;
+      scroll-behavior: smooth;
     }