diff --git a/app/Home.css b/app/Home.css
index 6c1cbed..c863e03 100644
--- a/app/Home.css
+++ b/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) {
diff --git a/app/page.tsx b/app/page.tsx
index 4099366..d095fe5 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,7 @@
"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";
@@ -9,11 +9,10 @@ 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"
>
-
- BYTEPING
-
-
-
+
+
+ BYTEPING
+
+
+
+
IMPRESSIVE EXPERIENCES THAT DELIVER
-
- Features
-
-
+
+
);
diff --git a/public/images/1.jpg b/public/images/1.jpg
new file mode 100644
index 0000000..f544453
Binary files /dev/null and b/public/images/1.jpg differ
diff --git a/public/images/2.jpg b/public/images/2.jpg
new file mode 100644
index 0000000..78df384
Binary files /dev/null and b/public/images/2.jpg differ
diff --git a/public/images/art.jpg b/public/images/art.jpg
new file mode 100644
index 0000000..bf978e1
Binary files /dev/null and b/public/images/art.jpg differ
diff --git a/public/images/friends.jpg b/public/images/friends.jpg
new file mode 100644
index 0000000..a5c1498
Binary files /dev/null and b/public/images/friends.jpg differ
diff --git a/public/images/signInUpPreview.svg b/public/images/signInUpPreview.svg
new file mode 100644
index 0000000..f5debd9
--- /dev/null
+++ b/public/images/signInUpPreview.svg
@@ -0,0 +1,9 @@
+