save

Author: zzq0826

public/scroll-logo-light.svg

@@ -1,12 +1,13 @@
 // import PureFooter from "./PureFooter"
 import React, { useState, useCallback } from "react"
 import Subscribe from "./Subscribe/Subscribe.tsx"
+import PureFooter from "./PureFooter/PureFooter.tsx"
 
 const Footer = () => {
   return (
     <>
-      <Subscribe  />
-      {/* <PureFooter></PureFooter> */}
+      <Subscribe />
+      <PureFooter />
     </>
   )
 }

src/components/Footer/Footer.tsx

@@ -0,0 +1,89 @@
+.footerLayout {
+  grid-template-areas: "logo about resource follow version";
+  @apply grid w-full pb-[80px] pt-[60px] px-[20px] grid-cols-2 gap-[1em] bg-[var(--black-100)] md:grid-cols-[2fr_2fr_2fr_2fr_4fr]  md:pb-[100px];
+}
+
+@media screen and (max-width: 768px) {
+  .footerLayout {
+    grid-template-areas:
+      "logo follow"
+      "about resource"
+      "version version";
+  }
+}
+
+.footerLayout .logo {
+  grid-area: logo;
+}
+
+.footerLayout .logo img {
+  width: 100px;
+  height: auto;
+}
+
+.footerLayout .about {
+  grid-area: about;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.footerLayout .title {
+  color: #fff8f3;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: 0.18px;
+}
+
+.footerLayout .content {
+  list-style: none;
+  margin-bottom: 16px;
+}
+
+.footerLayout .content a {
+  color: #fff8f3;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.15px;
+}
+
+.footerLayout .content a:hover {
+  color: var(--orange-500);
+}
+
+.footerLayout .follow {
+  grid-area: follow;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.footerLayout .follow .title {
+  @apply hidden md:block;
+}
+
+.footerLayout .follow a {
+  color: #fff8f3;
+  margin-right: 27px;
+}
+
+.footerLayout .follow a:hover {
+  color: var(--orange-500);
+}
+
+.footerLayout .version {
+  grid-area: version;
+  color: #fff8f3;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 25px; /* 166.667% */
+  letter-spacing: 0.15px;
+  @apply md:text-right;
+}

src/components/Footer/PureFooter/PureFooter.module.css

@@ -0,0 +1,50 @@
+import { useState, useEffect } from "preact/hooks"
+import { aboutList, mediaList, resourceList } from "../helper.tsx"
+import styles from "./PureFooter.module.css"
+
+const Footer = () => {
+  return (
+    <div className={styles.footerLayout}>
+      <a className={styles.logo} href="/">
+        <img src="/scroll-logo-light.svg" />
+      </a>
+      <div className={styles.about}>
+        <p className={styles.title}>About Scroll</p>
+        <ul>
+          {aboutList.map((item) => (
+            <li key={item.name} className={styles.content}>
+              <a href={item.href}>{item.name}</a>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className={styles.resource}>
+        <p className={styles.title}>Resources</p>
+        <ul>
+          {resourceList.map((item) => (
+            <li key={item.name} className={styles.content}>
+              <a href={item.href}>{item.name}</a>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div className={styles.follow}>
+        <p className={styles.title}>Follow Us</p>
+        <div>
+          {mediaList.map((item) => (
+            <a external href={item.href} key={item.name}>
+              {
+                <item.icon />
+              }
+            </a>
+          ))}
+        </div>
+      </div>
+
+      <p className={styles.version}>© Version 1.0.0 Scroll Ltd 2023</p>
+    </div>
+  )
+}
+
+export default Footer

src/components/Footer/PureFooter/PureFooter.tsx

@@ -53,7 +53,7 @@
 }
 
 .success {
-  font-size: 16px;
+  font-size: 20px;
   font-weight: 600;
   color: #fff;
   background-color: #1f1f1f;

src/components/Footer/PureFooter/RelativeLink.tsx

@@ -10,11 +10,6 @@ const EmailInput = (props) => {
     }
   }
 
-  const test = () => {
-    console.log("test")
-  }
-  
-
   return (
     <div className={styles.container}>
       <div
@@ -23,7 +18,7 @@ const EmailInput = (props) => {
           ...(end && { width: "100%" }),
         }}
       >
-        <button className={styles.iconButton} onClick={test}>
+        <button className={styles.iconButton} onClick={onClick}>
           <img
             src="/images/footer/arrow-right.svg"
             alt="arrow-right"