new home page,new footer

src/components/Footer.tsx

@@ -6,44 +6,31 @@ export function Footer() {
   const teamSlug = stringToSlug(teamName);
 
   return (
-    <footer className="pt-5 pb-5 footer py-5 mt-5 bg-dark text-white">
+    <footer className="pt-5 pb-5 footer py-5 mt-0 bg-dark text-white">
       <div className="container">
         <div className="row mb-4">
-          <div className="col-lg-6 col-xs-12">
-            <h4 className="mb-3">Heading</h4>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac
-              ante mollis quam tristique convallis
-            </p>
-          </div>
-          <div className="col-lg-3 col-xs-12">
-            <h4 className="mt-lg-0 mt-sm-3">Links</h4>
-            <ul className="m-2 p-2">
-              <li>
-                <a href="#">Lorem ipsum</a>
-              </li>
-              <li>
-                <a href="#">Nam mauris velit</a>
-              </li>
-              <li>
-                <a href="#">Etiam vitae mauris</a>
-              </li>
-              <li>
-                <a href="#">Fusce scelerisque</a>
-              </li>
-              <li>
-                <a href="#">Sed faucibus</a>
-              </li>
-              <li>
-                <a href="#">Mauris efficitur nulla</a>
-              </li>
-            </ul>
-          </div>
-          <div className="col-lg-3 col-xs-12">
-            <h4 className="mt-lg-0 mt-sm-4 mb-3">Contact</h4>
-            <p>22, Lorem ipsum dolor, consectetur adipiscing</p>
-            <p className="mb-0">(541) 754-3010</p>
-            <p>info@hsdf.com</p>
+            <div className="col-lg-2 col-xs-12">
+              <img
+                src="https://static.igem.wiki/teams/5378/school-badge/smu.webp"
+                alt="SMU brand"
+                className="responsive-img"
+              />
+            </div>
+            <div className="col-lg-2"></div>
+            <div className="col-lg-2 col-xs-12">
+              <img
+                src="https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
+                alt="GDMU brand"
+                className="responsive-img"
+              />
+            </div>
+            <div className="col-lg-2"></div>
+          <div className="col-lg-4 col-xs-12 row justify-content-center">
+          <img
+                src="https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp"
+                alt="Yanyin tech"
+                className="responsive-img"
+              />
           </div>
         </div>
         <hr />

src/containers/App/App.css

@@ -105,12 +105,27 @@ footer a:hover {
 
 
 .custom-header {
-  
   width: 100vw;
-  height: 200px;
+  height: 100vh;
   background-image: url('/src/asset/img/miami.jpg'); /* 背景图片路径 */
   background-size: cover;        /* 使背景图片覆盖整个容器 */
   background-position: center;   /* 居中对齐背景图片 */
   background-repeat: no-repeat;  /* 防止背景图片重复 */
   background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */
 }
+
+.promotion-video {
+  height: 30vh; /* 设置高度为视口高度的80% */
+  border: none; 
+  border-radius: 30px; /* 圆角效果 */
+}
+
+.responsive-img {
+  width: 100%; /* 图片宽度自适应容器 */
+  height: auto; /* 保持图片纵横比 */
+  display: block; /* 去掉图片下方的空隙 */
+}
+
+.full-height-element {
+  height: 100vh; /* 设置元素的高度为视口高度的 100% */
+}
\ No newline at end of file

src/containers/App/App.tsx

@@ -36,9 +36,11 @@ const App = () => {
               element={
                 <>
                   {/* <Header title={title || ""} lead={lead || ""} /> */}
-                  <div className="container-fluid">
-                    <Component />
-                  </div>
+
+                    <div>
+                      <Component />
+                    </div>
+                
                 </>
               }
             />

src/contents/home.tsx

@@ -9,14 +9,42 @@ export function Home() {
       <div className="container-fluid">
       <div className="row justify-content-center bg-rice_yellow ">
         
-        <div className="col-md-8">
-          <div className="row justify-content-center h1">Promotion Video</div>
-            <div className="embed-responsive embed-responsive-16by9 row">
-              <video className="embed-responsive-item justify-content-center" controls>
-                <source src={"https://static.igem.org/peertube/streaming-playlists/hls/b8667885-e1be-48b2-ab9b-d1aac71db0da/e35183e1-c8b5-45b0-a83a-d2b98dcb6996-480-fragmented.mp4"} type="video/mp4" />
-                Your browser does not support the video tag.
-              </video>
+        <div className="col-md-8 row justify-content-center ">
+          <div className="row justify-content-center h1 full-height-element">
+            Section 1
+            <img
+                src="https://img0.baidu.com/it/u=351821279,2605385406&fm=253&fmt=auto&app=138&f=PNG?w=600&h=335"
+                alt="dungreed"
+                className="responsive-img"
+              />
           </div>
+          <div className="row justify-content-center h1 full-height-element">
+            Section 2
+            <img
+                src="https://pic.3h3.com/up/2023/0915/20230915100746929.png"
+                alt="dungreed"
+                className="responsive-img"
+              />
+          </div>
+          <div className="row justify-content-center h1 full-height-element">
+            Section 3
+            <img
+                src="https://img0.baidu.com/it/u=3750079665,4155589639&fm=253&fmt=auto&app=138&f=PNG?w=600&h=338"
+                alt="dungreed"
+                className="responsive-img"
+              />
+          </div>
+          <div className="row justify-content-center h1">Stream our Promotion Video</div>
+            <div className="col-md-6 row justify-content-center mb-5">
+              <iframe 
+                title="SMU-GDMU-CHINA: Engineered bacterial therapeutics for Preventing Hepatic Encepha... (2024) - Project Promotion [English]"  
+                className="promotion-video"
+                src="https://video.igem.org/videos/embed/b8667885-e1be-48b2-ab9b-d1aac71db0da"  
+                allowFullScreen={true} 
+                sandbox="allow-same-origin allow-scripts allow-popups allow-forms">
+              </iframe>
+            </div>
+          
         </div>
       </div>
     </div>