Introduce ENS Cards

v3xlabs · Jun 24, 2023 · a96b44b · a96b44b
1 parent 4e31518
commit a96b44b
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 0 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -7,3 +7,7 @@
     font-size: 18px;
     @apply text-notblack;
 }
+
+.font-inter {
+    font-family: 'Inter', sans-serif;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -50,6 +50,10 @@ export default function RootLayout({
                     name="viewport"
                     content="width=device-width, initial-scale=1"
                 />
+                <style>
+                    @import
+                    url('https://fonts.googleapis.com/css2?family=Flow+Circular&family=Work+Sans:wght@400;500&display=swap');
+                </style>
             </head>
             <body className="w-full min-h-screen">
                 <NavBar />

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,3 +1,5 @@
+import { FiGithub } from 'react-icons/fi';
+
 export default function App() {
     return (
         <div className="mx-auto flex items-center justify-center px-4 md:px-8">
@@ -11,6 +13,31 @@ export default function App() {
             >
                 <div className="relative w-full bg-blue-400 col-span-7 row-span-3 rounded-md">
                     <div className="absolute inset-0 bg-gradient-to-tr from-black/5 to-white/20"></div>
+                    <div className="absolute left-8 top-8 right-8 flex justify-between">
+                        <div className="grow">
+                            <h2 className="text-7xl text-white font-bold font-inter">
+                                ENS Cards
+                            </h2>
+                            <p className="text-2xl text-white font-inter">
+                                Swag Printing w Magical Powers
+                            </p>
+                        </div>
+                        <div className="flex gap-4">
+                            <a
+                                href="https://og.ax"
+                                target="_blank"
+                                className="font-bold px-4 py-2 bg-neutral-50 h-fit rounded-md hover:brightness-105 transition-all duration-200 hover:outline outline-[#1e1e1e]"
+                            >
+                                <FiGithub />
+                                Github
+                            </a>
+                        </div>
+                    </div>
+                    <img
+                        src="/cards.svg"
+                        alt=""
+                        className="absolute bottom-0 left-0 right-0"
+                    />
                 </div>
                 <div className="w-full bg-pink-200 col-span-5 h-[512px] row-span-2 rounded-md" />
                 <div className="w-full bg-gray-200 h-48 col-span-5 row-span-1 rounded-md" />

diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
         "autoprefixer": "^10.4.14",
         "next": "^13.4.6",
         "postcss": "^8.4.24",
+        "react-icons": "^4.10.1",
         "tailwindcss": "^3.3.2"
     },
     "devDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/cards.svg b/public/cards.svg