feat: branding and cleanup

kingjollie · Nov 16, 2021 · 7a283e7 · 7a283e7
1 parent 4b1b651
commit 7a283e7
Show file tree

Hide file tree

Showing 7 changed files with 155 additions and 118 deletions.
diff --git a/README.md b/README.md
@@ -1,34 +1,5 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Web3 Airdrops
 
-## Getting Started
+Interested in the latest airdrops happening throughout the metaverse? Did you miss $ENS or $OSMO and want to be alerted to the next airdrop?
 
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Steakwallet's crowd sourced airdrop aggregator is for you!
diff --git a/components/Email.tsx b/components/Email.tsx
@@ -1,38 +1,15 @@
 export function Email() {
   return (
     <div className="bg-white">
-      <div className="relative sm:py-16">
+      <div className="relative py-8">
         <div className="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
-          <div className="relative rounded-2xl px-6 py-10 bg-indigo-600 overflow-hidden shadow-xl sm:px-12 sm:py-20">
-            <div
-              aria-hidden="true"
-              className="absolute inset-0 -mt-72 sm:-mt-32 md:mt-0"
-            >
-              <svg
-                className="absolute inset-0 h-full w-full"
-                preserveAspectRatio="xMidYMid slice"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 1463 360"
-              >
-                <path
-                  className="text-indigo-500 text-opacity-40"
-                  fill="currentColor"
-                  d="M-82.673 72l1761.849 472.086-134.327 501.315-1761.85-472.086z"
-                />
-                <path
-                  className="text-indigo-700 text-opacity-40"
-                  fill="currentColor"
-                  d="M-217.088 544.086L1544.761 72l134.327 501.316-1761.849 472.086z"
-                />
-              </svg>
-            </div>
+          <div className="relative rounded-2xl px-6 py-10 bg-gradient-to-r from-pink to-light-pink overflow-hidden shadow-xl sm:px-12 sm:py-20">
             <div className="relative">
               <div className="sm:text-center">
                 <h2 className="text-3xl font-extrabold text-white tracking-tight sm:text-4xl">
                   Get notified of new airdrops
                 </h2>
-                <p className="mt-6 mx-auto max-w-2xl text-lg text-indigo-200">
+                <p className="mt-6 mx-auto max-w-2xl text-lg text-gray-100">
                   {`Submit your email below and we'll let you know when a new drop
                   happens`}
                 </p>
@@ -52,7 +29,7 @@ export function Email() {
                 <div className="mt-4 sm:mt-0 sm:ml-3">
                   <button
                     type="submit"
-                    className="block w-full rounded-md border border-transparent px-5 py-3 bg-indigo-500 text-base font-medium text-white shadow hover:bg-indigo-400 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600 sm:px-10"
+                    className="block w-full rounded-md border border-transparent px-5 py-3 bg-white text-base font-medium text-pink shadow hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600 sm:px-10 transition"
                   >
                     Notify me
                   </button>

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,5 +1,75 @@
 import React from "react";
 
-export const Footer = () => {
-  return <footer></footer>;
+const navigation = {
+  main: [
+    { name: "About Steakwallet", href: "https://steakwallet.fi" },
+    { name: "Blog", href: "https://blog.steakwallet.fi" },
+    {
+      name: "Jobs",
+      href: "https://steakwallet.notion.site/steakwallet/Careers-at-Steakwallet-935e872dbf0d433598f78f9e59443193",
+    },
+  ],
+  social: [
+    {
+      name: "Twitter",
+      href: "https://twitter.com/steakwallet",
+      icon: (props) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+        </svg>
+      ),
+    },
+    {
+      name: "GitHub",
+      href: "https://github.com/steakwallet",
+      icon: (props) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    },
+  ],
 };
+
+export function Footer() {
+  return (
+    <footer className="bg-white">
+      <div className="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
+        <nav
+          className="-mx-5 -my-2 flex flex-wrap justify-center"
+          aria-label="Footer"
+        >
+          {navigation.main.map((item) => (
+            <div key={item.name} className="px-5 py-2">
+              <a
+                href={item.href}
+                className="text-base text-gray-500 hover:text-gray-900"
+              >
+                {item.name}
+              </a>
+            </div>
+          ))}
+        </nav>
+        <div className="mt-8 flex justify-center space-x-6">
+          {navigation.social.map((item) => (
+            <a
+              key={item.name}
+              href={item.href}
+              className="text-gray-400 hover:text-gray-500"
+            >
+              <span className="sr-only">{item.name}</span>
+              <item.icon className="h-6 w-6" aria-hidden="true" />
+            </a>
+          ))}
+        </div>
+        <p className="mt-8 text-center text-base text-gray-400">
+          &copy; 2021 Steakwallet LLC. All rights reserved.
+        </p>
+      </div>
+    </footer>
+  );
+}
diff --git a/components/Table.tsx b/components/Table.tsx
@@ -159,7 +159,7 @@ export function Table() {
           <div>
             <Menu.Button className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500">
               {networks.length === 0
-                ? "Network"
+                ? "All Networks"
                 : networks.map(capitalise).join(", ")}
               <ChevronDownIcon
                 className="-mr-1 ml-2 h-5 w-5"
@@ -212,25 +212,6 @@ export function Table() {
                   </Menu.Item>
                 ))}
               </div>
-              {/* <div className="py-1">
-                <Menu.Item>
-                  {({ active }) => (
-                    <a
-                      href="#"
-                      className={classNames(
-                        active ? "bg-gray-100 text-gray-900" : "text-gray-700",
-                        "group flex items-center px-4 py-2 text-sm"
-                      )}
-                    >
-                      <TrashIcon
-                        className="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500"
-                        aria-hidden="true"
-                      />
-                      Delete
-                    </a>
-                  )}
-                </Menu.Item>
-              </div> */}
             </Menu.Items>
           </Transition>
         </Menu>
@@ -243,6 +224,10 @@ export function Table() {
               <table className="min-w-full divide-y divide-gray-200">
                 <thead className="bg-gray-50">
                   <tr>
+                    <th
+                      scope="col"
+                      className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                    ></th>
                     <th
                       scope="col"
                       className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
@@ -268,7 +253,7 @@ export function Table() {
                 </thead>
                 <tbody className="bg-white divide-y divide-gray-200">
                   {filtered.map((drop) => (
-                    <tr key={`${drop.network}-${drop.token}`}>
+                    <tr key={`${drop.network}-${drop.symbol}`}>
                       <td className="px-6 py-4 whitespace-nowrap">
                         <div className="flex items-center">
                           <div className="flex-shrink-0 h-10 w-10">
@@ -278,16 +263,16 @@ export function Table() {
                               alt=""
                             />
                           </div>
-                          <div className="ml-4">
-                            <div className="text-sm font-medium text-gray-900">
-                              {drop.network
-                                .split("-")
-                                .map(capitalise)
-                                .join(" ")}
-                            </div>
-                            <div className="text-sm text-gray-500">
-                              ${drop.token}
-                            </div>
+                        </div>
+                      </td>
+
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <div className="flex-col items-center">
+                          <div className="text-sm font-medium text-gray-900">
+                            {drop.name}
+                          </div>
+                          <div className="text-sm text-gray-500">
+                            ${drop.symbol}
                           </div>
                         </div>
                       </td>
@@ -315,15 +300,30 @@ export function Table() {
                             : "Announced"}
                         </div>
                       </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                        <a
-                          href={drop.claimLink || drop.homeLink}
-                          target="_blank"
-                          rel="noreferrer"
-                          className="text-indigo-600 hover:text-indigo-900"
-                        >
-                          Link
-                        </a>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-center ">
+                        {drop.status === Status.Active ? (
+                          <a
+                            href={drop.claimLink}
+                            target="_blank"
+                            rel="noreferrer"
+                            className="bg-indigo-600 hover:bg-indigo-700 transition text-white rounded p-2"
+                          >
+                            <button>Claim now</button>
+                          </a>
+                        ) : drop.homeLink ? (
+                          <a
+                            href={drop.homeLink}
+                            target="_blank"
+                            rel="noreferrer"
+                            className="text-indigo-600 hover:text-indigo-900 text-center"
+                          >
+                            See more
+                          </a>
+                        ) : (
+                          <span className="text-gray-700 text-center">
+                            Coming soon
+                          </span>
+                        )}
                       </td>
                     </tr>
                   ))}

diff --git a/data/drops.json b/data/drops.json
@@ -1,74 +1,86 @@
 [
   {
     "network": "osmosis",
-    "token": "OSMO",
+    "name": "Osmosis",
+    "symbol": "OSMO",
     "homeLink": "https://osmosis.zone",
     "startDate": "01-01-2021",
     "endDate": "01-01-2022"
   },
   {
     "network": "ethereum",
-    "token": "ENS",
+    "name": "Ethereum Name Service",
+    "symbol": "ENS",
     "homeLink": "https://ens.domains",
     "claimLink": "https://claim.ens.domains",
     "startDate": "08-11-2021",
     "endDate": "01-05-2022"
   },
   {
     "network": "solana",
-    "token": "SUNNY",
+    "name": "Sunny",
+    "symbol": "SUNNY",
     "homeLink": "https://sunny.ag",
     "startDate": "08-01-2022",
     "endDate": "01-02-2022"
   },
   {
     "network": "juno",
-    "token": "JUNO",
+    "name": "Juno",
+    "symbol": "JUNO",
     "homeLink": "https://junochain.com/",
     "startDate": "01-10-2021"
   },
   {
     "network": "persistence",
-    "token": "PSTAKE",
+    "name": "Ethereum Name Service",
+    "symbol": "PSTAKE",
     "homeLink": "https://pstake.finance/",
     "claimLink": "https://airdrop.pstake.finance/"
   },
   {
     "network": "desmos",
-    "token": "DSM",
+    "name": "Desmos",
+    "symbol": "DSM",
     "homeLink": "https://desmos.network/",
     "claimLink": "https://airdrop.desmos.network/"
   },
   {
     "network": "stargaze",
-    "token": "GAZE",
+    "name": "Stargaze",
+    "symbol": "GAZE",
     "homeLink": "https://stargaze.zone/",
     "claimLink": "https://stargaze.zone/airdrop"
   },
   {
     "network": "shade",
-    "token": "SHD"
+    "name": "Shade",
+    "symbol": "SHD"
   },
   {
     "network": "secret",
-    "token": "SCRT"
+    "name": "Secret",
+    "symbol": "SCRT"
   },
   {
     "network": "sentinel",
-    "token": "DVPN"
+    "name": "Sentinel",
+    "symbol": "DVPN"
   },
   {
     "network": "comdex",
-    "token": "CMDX",
+    "name": "Comdex",
+    "symbol": "CMDX",
     "claimLink": "https://airdrop.comdex.one/"
   },
   {
     "network": "sputnik",
-    "token": "SPUTNIK"
+    "name": "Sputnik",
+    "symbol": "SPUTNIK"
   },
   {
     "network": "cosmos-gaming-hub",
-    "token": "GAME",
-    "startDate": "01-01-2020"
+    "name": "Game",
+    "symbol": "GAME"
   }
 ]