feat: update styling & add eslint

lfglabs-dev · May 28, 2024 · b84f3bc · b84f3bc
1 parent a0748bf
commit b84f3bc
Show file tree

Hide file tree

Showing 6 changed files with 309 additions and 46 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,13 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "plugins": ["react-hooks"],
+  "parser": "@typescript-eslint/parser",
+  "rules": {
+    "@next/next/no-img-element": "off",
+    "react-hooks/exhaustive-deps": "warn"
+  }
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -31,47 +31,59 @@ export default function Home() {
           </Button>
         </div>
         <div className={styles.centralSection}>
-          <img
-            alt="background"
-            src="/visuals/background.svg"
-            className={styles.background}
-          />
-          <img
-            alt="background lines"
-            src="/visuals/backgroundLines.svg"
-            className={styles.backgroundLines}
-          />
-          <img
-            alt="left squares"
-            src="/visuals/leftSquares.svg"
-            className={styles.leftSquares}
-          />
-          <img
-            alt="right squares"
-            src="/visuals/rightSquares.svg"
-            className={styles.rightSquares}
-          />
-          <img
-            alt="bottom squares"
-            src="/visuals/bottomSquares.svg"
-            className={styles.bottomSquares}
-          />
-          <div className={styles.radialGradient} />
-          <div className={styles.radialGradientLeft} />
-          <div className={styles.radialGradientRight} />
-          <div className={styles.coloredTrapeze}>
-            <div className={styles.darkTrapeze}>
-              <h1 className={styles.title}>
-                WIN <span className={styles.pinkTitle}>Five</span>{" "}
-                <span className={styles.blueTitle}>ETH</span> !
-              </h1>
+          <div className={styles.backgroundWrapper}>
+            <img
+              alt="background"
+              src="/visuals/background.svg"
+              className={styles.background}
+            />
+            <img
+              alt="background lines"
+              src="/visuals/backgroundLines.svg"
+              className={styles.backgroundLines}
+            />
+            <img
+              alt="left squares"
+              src="/visuals/leftSquares.svg"
+              className={styles.leftSquares}
+            />
+            <img
+              alt="right squares"
+              src="/visuals/rightSquares.svg"
+              className={styles.rightSquares}
+            />
+            <img
+              alt="bottom squares"
+              src="/visuals/bottomSquares.svg"
+              className={styles.bottomSquares}
+            />
+            <img
+              alt="vertical group"
+              src="/visuals/verticalGroup.svg"
+              className={styles.verticalGroupLeft}
+            />
+            <img
+              alt="vertical group"
+              src="/visuals/verticalGroup.svg"
+              className={styles.verticalGroupRight}
+            />
+            <div className={styles.radialGradient} />
+            <div className={styles.radialGradientLeft} />
+            <div className={styles.radialGradientRight} />
+            <div className={styles.coloredTrapeze}>
+              <div className={styles.darkTrapeze}>
+                <h1 className={styles.title}>
+                  WIN <span className={styles.pinkTitle}>Five</span>{" "}
+                  <span className={styles.blueTitle}>ETH</span> !
+                </h1>
+              </div>
+            </div>
+            <div className={styles.countdownContainer}>
+              <Countdown />
+            </div>
+            <div className={styles.ethBtnContainer}>
+              <EthButton onClick={() => console.log("eth button clicked")} />
             </div>
-          </div>
-          <div className={styles.countdownContainer}>
-            <Countdown />
-          </div>
-          <div className={styles.ethBtnContainer}>
-            <EthButton onClick={() => console.log("eth button clicked")} />
           </div>
         </div>
         <Stats />

diff --git a/app/provider.tsx b/app/provider.tsx
@@ -41,8 +41,7 @@ export function Providers({ children }: any) {
     appName: "Eth Button",
     projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_APP_ID as string,
     chains: [
-      EthMainnet,
-      EthSepolia,
+      process.env.NEXT_PUBLIC_IS_TESTNET === "true" ? EthSepolia : EthMainnet,
       arbitrum,
       optimism,
       polygon,

diff --git a/app/styles/components/stats.module.css b/app/styles/components/stats.module.css
@@ -16,3 +16,15 @@
   align-items: flex-start;
   gap: 8px;
 }
+
+@media (max-width: 1280px) {
+  .statsSections {
+    margin: 24px auto;
+    align-items: center;
+    justify-content: center;
+    max-width: 400px;
+  }
+  .statsSection {
+    align-items: center;
+  }
+}
diff --git a/app/styles/home.module.css b/app/styles/home.module.css
@@ -29,11 +29,21 @@
   margin: auto;
 }
 
-.background {
+.backgroundWrapper {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
+  width: 900px;
+  height: 600px;
+  z-index: 0;
+}
+
+.background {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
   width: 100%;
   height: auto;
   z-index: 0;
@@ -42,8 +52,8 @@
 .backgroundLines {
   position: absolute;
   left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
+  top: 48px;
   width: 85%;
   height: auto;
   z-index: 1;
@@ -73,6 +83,20 @@
   transform: translateX(-50%);
 }
 
+.verticalGroupLeft {
+  position: absolute;
+  left: 60px;
+  bottom: 70px;
+  z-index: 3;
+}
+
+.verticalGroupRight {
+  position: absolute;
+  right: 60px;
+  bottom: 70px;
+  z-index: 3;
+}
+
 .radialGradient {
   position: absolute;
   left: 26%;
@@ -204,3 +228,29 @@
   font-size: 50px;
   line-height: 42px;
 }
+
+@media (max-width: 1280px) {
+  .main {
+    justify-content: center;
+    flex-direction: column-reverse;
+  }
+
+  .leftContainer {
+    margin: 24px auto;
+    align-items: center;
+  }
+
+  .backgroundWrapper {
+    width: 900px;
+    height: 600px;
+  }
+}
+
+/* 1280px, 1024px, 768px, 640px */
+
+@media (max-width: 900px) {
+  .backgroundWrapper {
+    width: 900px;
+    height: 600px;
+  }
+}