huncholaneadded banner
huncholane5 files changed, +34 -1
+2-0twench_landing_page/app/page.tsx
| @@ -1,3 +1,4 @@ | ||
| 1 | +import Banner from "@/components/Banner"; | |
| 1 | 2 | import Header from "@/components/Header"; |
| 2 | 3 | import LandingSection from "@/components/LandingSection"; |
| 3 | 4 | import Image from "next/image"; |
| @@ -7,6 +8,7 @@ export default function Home() { | ||
| 7 | 8 | <div> |
| 8 | 9 | <Header /> |
| 9 | 10 | <LandingSection /> |
| 11 | + <Banner /> | |
| 10 | 12 | </div> |
| 11 | 13 | ); |
| 12 | 14 | } |
+17-0twench_landing_page/components/Banner/Banner.css
| @@ -0,0 +1,17 @@ | ||
| 1 | +.Banner { | |
| 2 | + @apply w-full px-[5%]; | |
| 3 | +} | |
| 4 | +.Banner .Picture { | |
| 5 | + background: url("/images/banner.png") repeat-x center center; | |
| 6 | + @apply h-16; | |
| 7 | + animation: scrollBackground 10s linear infinite; | |
| 8 | +} | |
| 9 | + | |
| 10 | +@keyframes scrollBackground { | |
| 11 | + from { | |
| 12 | + background-position: 0 center; | |
| 13 | + } | |
| 14 | + to { | |
| 15 | + background-position: -100% center; | |
| 16 | + } | |
| 17 | +} |
+12-0twench_landing_page/components/Banner/Banner.tsx
| @@ -0,0 +1,12 @@ | ||
| 1 | +import React from "react"; | |
| 2 | +import "./Banner.css"; | |
| 3 | + | |
| 4 | +const Banner: React.FC = () => { | |
| 5 | + return ( | |
| 6 | + <div className="Banner"> | |
| 7 | + <div className="Picture"></div> | |
| 8 | + </div> | |
| 9 | + ); | |
| 10 | +}; | |
| 11 | + | |
| 12 | +export default Banner; |
+2-0twench_landing_page/components/Banner/index.ts
| @@ -0,0 +1,2 @@ | ||
| 1 | +import Banner from './Banner'; | |
| 2 | +export default Banner; |
+1-1twench_landing_page/components/LandingSection/LandingSection.css
| @@ -23,7 +23,7 @@ | ||
| 23 | 23 | .LandingSection .Title { |
| 24 | 24 | @apply text-[150px] text-center w-full absolute md:top-32 leading-none; |
| 25 | 25 | @apply md:text-[150px] xs:text-[100px] text-[69px]; |
| 26 | - @apply md:text-shadow-lg xs:text-shadow-md text-shadow; | |
| 26 | + @apply md:text-shadow-lg xs:text-shadow-md text-shadow-sm; | |
| 27 | 27 | @apply top-32; |
| 28 | 28 | } |
| 29 | 29 |