Merge branch 'main' of https://github.com/mc-cloud-town/cloudtown-web…

…site

package.json

@@ -14,12 +14,12 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.1",
+    "react-typed": "^2.0.12",
     "styled-components": "^6.1.8",
     "vite": "^5.1.3"
   },
   "devDependencies": {
     "@childrentime/devcert": "^1.2.8",
-    "sitemap-ts": "^1.6.1",
     "@types/estree": "^1.0.5",
     "@types/node": "^20.11.19",
     "@types/react": "^18.2.55",
@@ -33,6 +33,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "prettier": "3.2.5",
+    "sitemap-ts": "^1.6.1",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
     "vite-plugin-compression": "^0.5.1",

src/components/homePage/PageHeader.tsx

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { ReactTyped } from "react-typed";
 
 const VideoBackgroundContainer = styled.div`
     position: relative;
@@ -29,14 +30,18 @@ const Mask = styled.div`
     opacity: 0.6;
 `;
 
-const HeaderText = styled.div`
+const HeaderTextContainer = styled.div`
     position: absolute;
-    color: white;
     text-align: center;
-    font-size: 2rem;
     z-index: 3;
 `;
 
+const HeaderText = styled.h1`
+    font-weight: bolder;
+    color: white;
+    font-size: 2rem;
+`;
+
 const BackgroundVideo = styled.iframe`
     position: absolute;
     top: 50%;
@@ -51,15 +56,28 @@ const BackgroundVideo = styled.iframe`
     border: 0;
 `;
 
-const PageHeader = ({ youtubeId }: {
+const PageHeader = ({ youtubeId, start = 0 }: {
   youtubeId: string,
+  start?: number,
 }) => {
-  const videoSrc = `https://www.youtube.com/embed/${youtubeId}?controls=0&autoplay=1&mute=1&playsinline=1&loop=1&playlist=${youtubeId}&frameborder=0`;
+  const videoSrc = `https://www.youtube.com/embed/${youtubeId}?controls=0&disablekb=1&fs=0&iv_load_policy=3&start=${start}&autoplay=1&mute=1&playsinline=1&loop=1&playlist=${youtubeId}&frameborder=0`;
   return (
     <VideoBackgroundHeader>
       <Mask>
       </Mask>
-      <HeaderText>歡迎來到我的網站</HeaderText>
+      <HeaderTextContainer>
+        <HeaderText>
+          <ReactTyped
+            strings={['Welcome to Cloud Town Exquisite Craft', '歡迎來到雲鎮工藝 | CTEC', '欢迎来到云镇工艺 | CTEC']}
+            typeSpeed={40}
+            backSpeed={50}
+            loop={true}
+            showCursor={true}
+            cursorChar="|"
+            backDelay={1000}
+          />
+        </HeaderText>
+      </HeaderTextContainer>
       <VideoBackgroundContainer>
         <BackgroundVideo
           src={videoSrc}

src/pages/HomePage.tsx

@@ -1,10 +1,8 @@
 import PageHeader from '#/homePage/PageHeader.tsx';
-import CTEC_banner_white from '@/assets/brand/CTEC_banner_white.png';
 
 const HomePage = () => (
   <>
-    <PageHeader youtubeId="USJWCs-rlc0"/>
-    <img src={CTEC_banner_white} alt="Brand Logo" />
+    <PageHeader youtubeId="USJWCs-rlc0" start={9} />
   </>
 );
 

yarn.lock

@@ -3531,6 +3531,13 @@ react-router@6.22.1:
   dependencies:
     "@remix-run/router" "1.15.1"
 
+react-typed@^2.0.12:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/react-typed/-/react-typed-2.0.12.tgz#898037767a59c43d6e0a4a4e42d13c0adb34abfc"
+  integrity sha512-sn59lrb4NKgvQLDGBRWM4wRNEz5Fp37F0BrLA2cKUmDqPSyQJOOiFigz+6wJof0o99QoE16nVCa3B3ID34ejsg==
+  dependencies:
+    typed.js "^2.1.0"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -4114,6 +4121,11 @@ type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+typed.js@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/typed.js/-/typed.js-2.1.0.tgz#b97a06111a5f57d6a59acfdd36d4f9b891ee13b4"
+  integrity sha512-bDuXEf7YcaKN4g08NMTUM6G90XU25CK3bh6U0THC/Mod/QPKlEt9g/EjvbYB8x2Qwr2p6J6I3NrsoYaVnY6wsQ==
+
 typescript@^5.2.2:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"