about is responsive

huncholaneauthored 1 year ago

parent 82d782acommit e627902145eedbb0a8865727bf2b7de5ab4ceeddBrowse files

4 files changed, +38 -4

+2-1twench_landing_page/app/page.tsx

		@@ -1,8 +1,8 @@
	1	+import AboutSection from "@/components/AboutSection";
1	2	import Banner from "@/components/Banner";
2	3	import Header from "@/components/Header";
3	4	import LandingSection from "@/components/LandingSection";
4	5	import MotivationSection from "@/components/MotivationSection";
5		-import Image from "next/image";
6	6
7	7	export default function Home() {
8	8	return (
		@@ -11,6 +11,7 @@ export default function Home() {
11	11	<LandingSection />
12	12	<Banner />
13	13	<MotivationSection />
	14	+ <AboutSection />
14	15	</div>
15	16	);
16	17	}

+22-0twench_landing_page/components/AboutSection/AboutSection.css

		@@ -1,2 +1,24 @@
1	1	.AboutSection {
	2	+ @apply bg-[#394B37];
	3	+ @apply h-[570px] w-screen relative;
	4	+}
	5	+
	6	+.AboutSection h1 {
	7	+ @apply text-[35px] w-full absolute top-[40px] text-center;
	8	+}
	9	+
	10	+.AboutSection p {
	11	+ @apply text-[14px] absolute top-[100px] text-center p-4 bg-[#688C65] rounded-md left-[2%] right-[2%] bottom-[30%] text-shadow;
	12	+ @apply 424:left-[15%] 424:right-[15%];
	13	+ @apply 552:left-[25%] 552:right-[25%];
	14	+ @apply 664:text-[16px];
	15	+ @apply 844:text-[18px];
	16	+ @apply 1100:left-[30%] 1100:right-[30%];
	17	+ @apply 1430:left-[35%] 1430:right-[35%];
	18	+}
	19	+
	20	+.AboutSection .Bull {
	21	+ background: url("/images/bull.png") no-repeat center 0;
	22	+ background-size: auto 100%;
	23	+ @apply bottom-0 h-[50%] w-screen absolute;
2	24	}

+11-3twench_landing_page/components/AboutSection/AboutSection.tsx

		@@ -1,10 +1,18 @@
1		-import React from 'react';
2		-import './AboutSection.css';
	1	+import React from "react";
	2	+import "./AboutSection.css";
3	3
4	4	const AboutSection: React.FC = () => {
5	5	return (
6	6	<div className="AboutSection">
7		- AboutSection
	7	+ <h1>ABOUT</h1>
	8	+ <p>
	9	+ Twench Was Built For All Of Us Striving To Turn Our Hard Work Into
	10	+ Success. Many Of Us Are Grinding Every Day, Chasing The Dream Of
	11	+ Thriving In The Crypto World. With Twench, The Goal Is To Create A
	12	+ Strong Community Of Like-Minded Individuals, Working Together To Make
	13	+ This Dream A Reality.
	14	+ </p>
	15	+ <div className="Bull"></div>
8	16	</div>
9	17	);
10	18	};

+3-0twench_landing_page/tailwind.config.ts