header加陰影&footer切板完成

client/components/footer/footer.module.scss

@@ -0,0 +1,82 @@
+@import '@/styles/globals-var.scss';
+
+.footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.mainDiv {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 150px;
+    width: 90%;
+    padding: 0 5%;
+    border-bottom: 1px solid $note-color;
+}
+
+.centerDiv {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.pink {
+    font-weight: 600;
+    color: $secondary;
+}
+
+.iconsDiv {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 12vw;
+    padding-top: 30px;
+    padding-bottom: 10px;
+}
+
+.facebookIcon {
+    font-size: 24px;
+    color: $secondary;
+}
+
+.commentIcon {
+    font-size: 16px;
+    border-radius: 50%;
+    padding: 5px;
+    background-color: $secondary;
+    color: white;
+}
+
+.instagramIcon {
+    font-size: 20px;
+    background-color: $secondary;
+    color: white;
+    border-radius: 6px;
+    padding: 2px;
+}
+
+.centerText {
+    margin-bottom: 0px;
+    color: $note-color;
+}
+
+.rightDiv {
+    display: flex;
+    flex-direction: column;
+}
+
+.link {
+    text-decoration: none;
+    color: $note-color;
+}
+
+.rights {
+    color: $note-color;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    padding-top: 10px;
+    align-items: center;
+}

client/components/footer/index.js

@@ -1,10 +1,46 @@
-import React, { useState, useEffect } from 'react'
-import Styles from './footer.module.css'
+import React, { useState, useEffect } from 'react';
+import Styles from './footer.module.scss';
+import Link from 'next/link';
+import Image from 'next/image';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faInstagram } from '@fortawesome/free-brands-svg-icons';
+import { faFacebook } from '@fortawesome/free-brands-svg-icons';
+import { faComment } from '@fortawesome/free-solid-svg-icons';
 
 export default function Footer(props) {
   return (
     <>
-      <div>footer</div>
+      <div className={Styles['footer']}>
+        <div className={Styles['mainDiv']}>
+          <div>
+            <Link href={'/'}>
+              <Image
+                className={Styles['logo']}
+                src={'/icon/sweet_time_logo1.png'}
+                alt=""
+                width={140}
+                height={75}
+              />
+            </Link>
+          </div>
+          <div className={Styles['centerDiv']}>
+            <div className={Styles['iconsDiv']}>
+              <FontAwesomeIcon className={Styles['facebookIcon']} icon={faFacebook} />
+              <FontAwesomeIcon className={Styles['commentIcon']} icon={faComment} />
+              <FontAwesomeIcon className={Styles['instagramIcon']} icon={faInstagram} />
+            </div>
+            <h5 className={Styles['centerText']}>If you have any question, please contact <span className={Styles['pink']}>sweetytime@gmail.com</span></h5>
+          </div>
+          <div className={Styles['rightDiv']}>
+            <h4><Link href={'/'} className={Styles['link']}>About us</Link></h4>
+            <h4><Link href={'/'} className={Styles['link']}>Contact us</Link></h4>
+            <h4><Link href={'/'} className={Styles['link']}>Need some help?</Link></h4>
+          </div>
+        </div>
+        <div className={Styles['rights']}>
+          <h5>@ 2024 Sweety Time. All rights reserved.</h5>
+        </div>
+      </div>
     </>
   )
 }

client/components/header/header.module.scss

@@ -14,7 +14,8 @@
   position: fixed;
   top: 0;
   font-family: $major-text;
-  /* box-shadow: 0 0px 20px var(--primary2); */
+  // box-shadow: 0 0px 20px black;
+  filter: drop-shadow(0 0px 10px $primary);
   z-index: 10;
 }
 

client/components/header/index.js

@@ -6,6 +6,7 @@ import Image from 'next/image';
 // 功能還沒寫
 
 export default function Header(props) {
+  const [navOpen, setNavOpen] = useState(false);
   return (
     <header className={Styles['header']}>
       <Link href={'/productList'} className={Styles['bigLink']}>
@@ -41,14 +42,17 @@ export default function Header(props) {
       </Link>
 
       <div className={`${Styles['icons']} ${Styles['bigLink']}`}>
-        <Image
-          className={Styles['icon']}
-          src={'/icon/portrait.svg'}
-          alt=""
-          width={30}
-          height={30}
-        />
-        <Image src={'/icon/cart.svg'} alt="" width={25} height={25} />
+        <Link href={'/'} className={Styles['icon']}>
+          <Image
+            src={'/icon/portrait.svg'}
+            alt=""
+            width={30}
+            height={30}
+          />
+        </Link>
+        <Link href={'/cart'}>
+          <Image src={'/icon/cart.svg'} alt="" width={25} height={25} />
+        </Link>
       </div>
 
       <Link href={'/'} className={Styles['smallLink']}>
@@ -59,7 +63,7 @@ export default function Header(props) {
           height={40}
         />
       </Link>
-      <Link href="/cart" className={Styles['smallLink']}>
+      <Link href="/" className={`${navOpen ? Styles['openLink'] : Styles['smallLink']}`} onClick={() => {setNavOpen(!navOpen);}}>
         <Image src={'/icon/navButton.svg'} alt="" width={25} height={25} />
       </Link>
     </header>

client/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "axios": "^1.6.8",