feat(home): 首頁只差背景圖了

sexyoung · Jul 12, 2023 · 4ac72e4 · 4ac72e4
1 parent a6d883b
commit 4ac72e4
Show file tree

Hide file tree

Showing 9 changed files with 148 additions and 332 deletions.
diff --git a/app/components/footer.tsx b/app/components/footer.tsx
@@ -3,7 +3,7 @@ import Links from "./links";
 
 export default function Footer() {
   return (
-    <footer className="container mx-auto py-5 text-center lg:flex lg:items-start lg:items-center lg:gap-10 lg:text-left">
+    <footer className="container mx-auto py-5 text-center text-[#536942] lg:flex lg:items-start lg:items-center lg:gap-10 lg:text-left">
       <img
         src={logo}
         className="mx-auto block h-[auto] w-[120px] lg:mr-5 lg:inline-block"

diff --git a/app/components/header.tsx b/app/components/header.tsx
@@ -11,7 +11,7 @@ export default function Header() {
         </Link>
         <label htmlFor="menu-toggle" className="pointer-cursor block md:hidden">
           <svg
-            className="fill-current text-gray-900"
+            className="cursor-pointer fill-current text-white"
             xmlns="http://www.w3.org/2000/svg"
             width="20"
             height="20"

diff --git a/app/images/4-3.webp b/app/images/4-3.webp
diff --git a/app/images/5-1.webp b/app/images/5-1.webp
diff --git a/app/images/6-1.webp b/app/images/6-1.webp
diff --git a/app/images/emoji.webp b/app/images/emoji.webp
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { cssBundleHref } from "@remix-run/css-bundle";
 import type { LinksFunction, LoaderArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
@@ -10,18 +11,20 @@ import {
   ScrollRestoration,
 } from "@remix-run/react";
 
+/** @deprecated */
 import { getUser } from "~/session.server";
+
 import stylesheet from "~/tailwind.css";
 
 import Header from "./components/header";
 import Footer from "./components/footer";
-import { useEffect, useState } from "react";
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
   ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
 ];
 
+/** @deprecated */
 export const loader = async ({ request }: LoaderArgs) => {
   return json({ user: await getUser(request) });
 };

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
diff --git a/app/styles/home.css b/app/styles/home.css
@@ -6,3 +6,58 @@
 .hero > .text {
   @apply text-2xl md:text-4xl lg:text-6xl;
 }
+
+.first-title {
+  @apply text-center
+    text-xl
+    font-medium
+    after:mx-auto
+    after:mt-6
+    after:block
+    after:h-[3px]
+    after:w-28
+    after:bg-[#ffd936]
+    after:content-['']
+    md:text-4xl;
+}
+
+.link-btn {
+  @apply rounded bg-[#ffd936] px-4 py-2;
+}
+
+.section {
+  @apply px-10 py-24;
+}
+
+.img {
+  @apply bg-transparent bg-center bg-no-repeat;
+}
+
+.first-section .img {
+  @apply h-40 bg-contain;
+}
+
+.first-section > *:nth-of-type(1) .img {
+  background-image: url(~/images/4-3.webp);
+}
+
+.first-section > *:nth-of-type(2) .img {
+  background-image: url(~/images/5-1.webp);
+}
+
+.first-section > *:nth-of-type(3) .img {
+  background-image: url(~/images/6-1.webp);
+}
+
+.first-section .title {
+  @apply mt-4 text-xl;
+}
+
+.first-section .desc {
+  @apply mt-2 font-light;
+}
+
+.emoji {
+  @apply mb-12 h-40 bg-cover bg-top md:h-60 md:bg-contain;
+  background-image: url(~/images/emoji.webp);
+}