style(hero): style landing page hero banner

app/Home.css

@@ -1,15 +1,25 @@
-@keyframes fadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
+.hero-img {
+ background-image: url(../public/images/heroBanner.jpg);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+.hero-img-logo {
+ position: absolute;
+ top: 48px;
+ left: 48px;
 }
 
-.home-hero {
- transition: background-color 1s ease;
- animation: fadeIn 1s ease;
+@media (max-width: 1280px) {
+ .hero-img {
+ background-image: url(../public/images/heroBannerMobile.jpg);
+ }
+ .hero-img-logo {
+ position: absolute;
+ top: 24px;
+ left: 24px;
+ }
 }
 
 .login-signup-container {

app/page.tsx

@@ -1,20 +1,18 @@
 "use client";
 
 import "./Home.css";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import Login from "@/components/Login/Login";
 import SignUp from "@/components/SignUp/SignUp";
 import Flex from "./styles/Flex.styled";
 import Text from "./styles/Text.styled";
 import Container from "./styles/Container.styled";
 import Theme from "./styles/Theme.styled";
-import DarkLightModeButton from "./components/DarkLightModeButton";
 import { DarkLightModeContext } from "./contexts/DarkLightModeProvider";
 
 const Home = () => {
  const router = useRouter();
- const [heroOneBorderRadius, setHeroOneBorderRadius] = useState("0");
  const { isDark } = useContext(DarkLightModeContext)!;
 
  useEffect(() => {
@@ -26,32 +24,31 @@ const Home = () => {
 
  return (
  <Container>
- <DarkLightModeButton
- position="absolute"
- top={"32px"}
- right={"32px"}
- bg={Theme.colors.green}
- hBg={Theme.colors.green}
- iconSize={32}
- />
  <Flex
  height="100vh"
+ padding="48px"
+ mPadding="24px"
+ className="hero-img"
+ $position="relative"
  alignItems="center"
- justifyContent="center"
- backgroundColor={Theme.colors.green}
- borderRadius={heroOneBorderRadius}
- onScroll={() => setHeroOneBorderRadius("0 0 0 100%")}
+ justifyContent="flex-end"
+ mJustifyContent="flex-start"
  >
  <Text
- fontSize="5.5rem"
- mFontSize="2rem"
+ className="hero-img-logo"
+ fontSize="2rem"
+ mFontSize="1rem"
  fontWeight="900"
- fontStyle="italic"
  letterSpacing="16px"
- color={isDark ? Theme.colors.black : Theme.colors.white}
+ color={Theme.colors.white}
  >
  BYTEPING
  </Text>
+ <Container border="2px solid white" padding="48px" mPadding="24px">
+ <Text fontSize="3.5rem" fontWeight="100" color={Theme.colors.white} letterSpacing="4px">
+ IMPRESSIVE EXPERIENCES THAT DELIVER
+ </Text>
+ </Container>
  </Flex>
  <Flex backgroundColor="#FBBC05" height="100vh">
  Features

app/styles/Flex.styled.ts

@@ -3,6 +3,7 @@ import isPropValid from "@emotion/is-prop-valid";
 
 interface FlexProps {
  backgroundColor?: string;
+ background?: string;
  textColor?: string;
  padding?: string;
  margin?: string;
@@ -53,6 +54,7 @@ const Flex = styled.div.withConfig({
  shouldForwardProp: (prop) => isPropValid(prop)
 })<FlexProps>`
  background-color: ${({ backgroundColor }) => backgroundColor};
+ background: ${({ background }) => background};
  color: ${({ textColor }) => textColor};
  padding: ${({ padding }) => padding};
  margin: ${({ margin }) => margin};