style(login): style sign in/up container ui

app/Home.css

@@ -9,6 +9,46 @@
  position: absolute;
  top: 48px;
  left: 48px;
+ text-decoration: none;
+}
+
+.text-with-border::before {
+ content: "";
+ background-color: white;
+ height: 2px;
+ bottom: 0;
+ position: absolute;
+ left: 50%;
+ opacity: 0;
+ width: 0;
+ transition:
+ width 0.3s ease,
+ left 0.3s ease,
+ right 0.3s ease,
+ opacity 0.3s ease;
+}
+
+.text-with-border:hover::before {
+ left: 0;
+ right: 16px;
+ width: calc(100% - 16px);
+ opacity: 1;
+}
+
+.sign-in-up-preview {
+ background: #b369c6;
+ border-radius: 8px;
+ box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
+ transform: perspective(800px) rotateY(10deg) rotateX(-10deg);
+ transition: transform 0.3s ease-in-out;
+ background: url(../public/images/friends.jpg);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+.sign-in-up-preview:hover {
+ transform: perspective(800px) rotateY(-10deg) rotateX(10deg);
 }
 
 @media (max-width: 1280px) {

app/page.tsx

@@ -1,19 +1,18 @@
 "use client";
 
 import "./Home.css";
-import React, { useContext, useEffect } from "react";
+import React, { 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 { DarkLightModeContext } from "./contexts/DarkLightModeProvider";
+import Link from "next/link";
 
 const Home = () => {
  const router = useRouter();
- const { isDark } = useContext(DarkLightModeContext)!;
 
  useEffect(() => {
  const userInfoString = localStorage.getItem("userInfo");
@@ -34,37 +33,37 @@ const Home = () => {
  justifyContent="flex-end"
  mJustifyContent="flex-start"
  >
- <Text
- className="hero-img-logo"
- fontSize="2rem"
- mFontSize="1rem"
- fontWeight="900"
- letterSpacing="16px"
- 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">
+ <Link href={"/"} className="hero-img-logo">
+ <Text
+ className="text-with-border"
+ fontSize="2rem"
+ mFontSize="1rem"
+ fontWeight="900"
+ letterSpacing="16px"
+ color={Theme.colors.white}
+ >
+ BYTEPING
+ </Text>
+ </Link>
+ <Container border="2px solid white" padding="48px" mPadding="24px" width="528px" mWidth="324px">
+ <Text fontSize="3.5rem" mFontSize="32px" fontWeight="100" color={Theme.colors.white} letterSpacing="4px">
  IMPRESSIVE EXPERIENCES THAT DELIVER
  </Text>
  </Container>
  </Flex>
- <Flex backgroundColor="#FBBC05" height="100vh">
- Features
- </Flex>
  <Flex
- backgroundColor={isDark ? Theme.colors.black : Theme.colors.white}
+ backgroundColor={Theme.colors.white}
  height="100vh"
  padding="48px"
  mPadding="24px"
  justifyContent="center"
  alignItems="center"
  >
- <Flex mFlexDirection="column" gap="32px">
+ <Flex mFlexDirection="column" width="50%">
  <Login />
  <SignUp />
  </Flex>
+ <Flex className="sign-in-up-preview" $mDisplay="none" width="45%" height="75%" margin="0 24px 0 0"></Flex>
  </Flex>
  </Container>
  );