huncholanemotivation section good on desktop
huncholane3 files changed, +29 -3
+2-0twench_landing_page/app/page.tsx
| @@ -1,6 +1,7 @@ | ||
| 1 | 1 | import Banner from "@/components/Banner"; |
| 2 | 2 | import Header from "@/components/Header"; |
| 3 | 3 | import LandingSection from "@/components/LandingSection"; |
| 4 | +import MotivationSection from "@/components/MotivationSection"; | |
| 4 | 5 | import Image from "next/image"; |
| 5 | 6 | |
| 6 | 7 | export default function Home() { |
| @@ -9,6 +10,7 @@ export default function Home() { | ||
| 9 | 10 | <Header /> |
| 10 | 11 | <LandingSection /> |
| 11 | 12 | <Banner /> |
| 13 | + <MotivationSection /> | |
| 12 | 14 | </div> |
| 13 | 15 | ); |
| 14 | 16 | } |
+17-0twench_landing_page/components/MotivationSection/MotivationSection.css
| @@ -1,2 +1,19 @@ | ||
| 1 | 1 | .MotivationSection { |
| 2 | + background: url("/images/camo-bg.png") no-repeat center center fixed; | |
| 3 | + background-size: cover; | |
| 4 | + @apply w-screen h-screen relative; | |
| 5 | +} | |
| 6 | + | |
| 7 | +.MotivationSection .Picture { | |
| 8 | + background: url("/images/proposal.png") no-repeat; | |
| 9 | + background-size: auto 100%; | |
| 10 | + @apply absolute top-0 left-0 w-full h-full; | |
| 11 | +} | |
| 12 | + | |
| 13 | +.MotivationSection .Text { | |
| 14 | + @apply text-white absolute; | |
| 15 | + @apply left-[35%]; | |
| 16 | + @apply right-[7%]; | |
| 17 | + @apply top-[20%]; | |
| 18 | + @apply text-[40px]; | |
| 2 | 19 | } |
+10-3twench_landing_page/components/MotivationSection/MotivationSection.tsx
| @@ -1,10 +1,17 @@ | ||
| 1 | -import React from 'react'; | |
| 2 | -import './MotivationSection.css'; | |
| 1 | +import React from "react"; | |
| 2 | +import "./MotivationSection.css"; | |
| 3 | 3 | |
| 4 | 4 | const MotivationSection: React.FC = () => { |
| 5 | 5 | return ( |
| 6 | 6 | <div className="MotivationSection"> |
| 7 | - MotivationSection | |
| 7 | + <div className="Picture"></div> | |
| 8 | + <div className="Text"> | |
| 9 | + <p> | |
| 10 | + A Token Designed For Those Who Hustle Day And Night, Driven By The | |
| 11 | + Goal Of Financial Freedom. | |
| 12 | + </p> | |
| 13 | + <p>Today Is Our Day To Rise Up And Break Free From The Trenches!</p> | |
| 14 | + </div> | |
| 8 | 15 | </div> |
| 9 | 16 | ); |
| 10 | 17 | }; |