From 8b9a2ae1312a569761f23b49d18062817d8b5ec1 Mon Sep 17 00:00:00 2001
From: GraphieDK <chamiv06@gmail.com>
Date: Sat, 29 Mar 2025 14:04:38 +0100
Subject: [PATCH] Refactoring code
---
Workly/src/components/Stats.tsx | 0
Workly/src/pages/Home/Home.Modules.css | 114 ------------------
Workly/src/pages/Home/Home.tsx | 82 +------------
.../pages/Home/components/Stats.Modules.css | 90 ++++++++++++++
Workly/src/pages/Home/components/Stats.tsx | 60 +++++++++
.../pages/Home/components/Trusted.Modules.css | 51 ++++++++
Workly/src/pages/Home/components/Trusted.tsx | 56 +++++++++
7 files changed, 261 insertions(+), 192 deletions(-)
delete mode 100644 Workly/src/components/Stats.tsx
create mode 100644 Workly/src/pages/Home/components/Stats.Modules.css
create mode 100644 Workly/src/pages/Home/components/Stats.tsx
create mode 100644 Workly/src/pages/Home/components/Trusted.Modules.css
create mode 100644 Workly/src/pages/Home/components/Trusted.tsx
diff --git a/Workly/src/components/Stats.tsx b/Workly/src/components/Stats.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/Workly/src/pages/Home/Home.Modules.css b/Workly/src/pages/Home/Home.Modules.css
index bca6350..295d477 100644
--- a/Workly/src/pages/Home/Home.Modules.css
+++ b/Workly/src/pages/Home/Home.Modules.css
@@ -114,117 +114,3 @@
-
-
-
-.TrustedCompanies
-{
- margin-top: 2rem;
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-.TrustedCompanies .Text {
- color: black;
-}
-
-.TrustedCompanies .Companies
-{
- background-color: black;
- width: 80%;
- height: 3rem;
- border-radius: 0.4rem;
- display: flex;
- justify-content: center;
- overflow: hidden;
- user-select: none;
- align-items: center;
- font-weight: bold;
- font-size: 0.8rem;
-}
-
-
-.Companies ul {
- list-style: none;
- display: flex;
- justify-content: space-between;
- flex-shrink: 0;
- gap: 2rem;
- min-width: 100%;
- animation: scroll 35s linear infinite;
-}
-
-@keyframes scroll {
- to {
- transform: translateX(-100%);
- }
-}
-
-.Stats
-{
- margin-top: 4rem;
- width: 100%;
- height: 45rem;
- position: relative;
-}
-
-.Stats .Members
-{
- position: absolute;
- margin: 5rem;
- width: 85%;
- color: black;
- display: flex;
- flex-direction: column;
-}
-
-.Members .regular-text
-{
- font-size: 2rem;
- font-style: italic;
- letter-spacing: 1rem;
-}
-
-.Members .Container p {
- font-size: 4rem;
- letter-spacing: 0.2rem;
-}
-
-.Members .Container {
- margin-top: -0.5rem;
- height: 4rem;
- position: relative;
-}
-
-.Container .Text
-{
- position: absolute;
- overflow: hidden;
- height: 100%;
- display: flex;
- align-items: center;
-}
-
-
-.Members .Bar
-{
- margin-top: 0.2rem;
- height: 0.2rem;
- border-radius: 0.4rem;
- background-color: black;
-}
-
-
-.Stats img
-{
- margin-top: -4.5rem;
- position: absolute;
- width: 50%;
- margin-left: 50%;
-}
-
-.Stats .Description
-{
- width: 50%;
-}
\ No newline at end of file
diff --git a/Workly/src/pages/Home/Home.tsx b/Workly/src/pages/Home/Home.tsx
index 9733cae..3ab1f17 100644
--- a/Workly/src/pages/Home/Home.tsx
+++ b/Workly/src/pages/Home/Home.tsx
@@ -1,30 +1,15 @@
import "./home.modules.css";
-import { useEffect, useRef } from "react";
-import { useScroll, motion, useTransform, useMotionValueEvent } from "framer-motion";
import { useNavigate } from 'react-router-dom';
+import Trusted from "./components/Trusted";
+import Stats from "./components/Stats";
import icon2 from '../../assets/Icon2.png';
import icon1 from '../../assets/Icon1.png';
-import icon3 from '../../assets/Icon3.png';
-import { option, view } from "framer-motion/client";
const Home = () => {
const navigate = useNavigate();
- const { scrollY } = useScroll();
- useMotionValueEvent(scrollY, "change", (val) => {
- console.log(val);
- })
-
- const posY = useTransform(scrollY, [475, 620], ["0px", "-110px"]);
- const posX = useTransform(scrollY, [200, 475], ["0px", "720px"]);
- const fadeDown = useTransform(scrollY, [499, 550], ["0px", "50px"]);
- const fadeUp = useTransform(scrollY, [499, 550], ["50px", "0px"]);
- const opaDown = useTransform(scrollY, [499, 548], [1, 0]);
- const opaUp = useTransform(scrollY, [499, 548], [0, 1]);
- const opaImg = useTransform(scrollY, [200, 548], [0, 1]);
-
return (
<>
@@ -48,67 +33,8 @@ const Home = () => {
<img src={icon2} alt="Hire Icon" />
</div>
</div>
- <div className="TrustedCompanies">
- <div className="Text">
- <p>Trusted by over <span className="bold-text">500+</span> companies all over the world</p>
- </div>
- <div className="Companies">
- <ul>
- <span className="Company">DANSKE BANK</span>
- <span className="Company">SYSTEMATIC</span>
- <span className="Company">UBER</span>
- <span className="Company">MOBILEPAY</span>
- <span className="Company">VERTICA</span>
- <span className="Company">BANK DATA</span>
- <span className="Company">XFLOW</span>
- <span className="Company">DELEGATE</span>
- <span className="Company">AFRY</span>
- <span className="Company">NORMAL</span>
- <span className="Company">SALLING GROUP</span>
- </ul>
- <ul aria-hidden="true">
- <span className="Company">DANSKE BANK</span>
- <span className="Company">SYSTEMATIC</span>
- <span className="Company">UBER</span>
- <span className="Company">MOBILEPAY</span>
- <span className="Company">VERTICA</span>
- <span className="Company">BANK DATA</span>
- <span className="Company">XFLOW</span>
- <span className="Company">DELEGATE</span>
- <span className="Company">AFRY</span>
- <span className="Company">NORMAL</span>
- <span className="Company">SALLING GROUP</span>
- </ul>
- <ul aria-hidden="true">
- <span className="Company">DANSKE BANK</span>
- <span className="Company">SYSTEMATIC</span>
- <span className="Company">UBER</span>
- <span className="Company">MOBILEPAY</span>
- <span className="Company">VERTICA</span>
- <span className="Company">BANK DATA</span>
- <span className="Company">XFLOW</span>
- <span className="Company">DELEGATE</span>
- <span className="Company">AFRY</span>
- <span className="Company">NORMAL</span>
- <span className="Company">SALLING GROUP</span>
- </ul>
- </div>
- </div>
- <div className="Stats">
- <div className="Members">
- <span className="regular-text">MORE THAN</span>
- <div className="Container">
- <div className="Text">
- <motion.p style={{y: fadeDown, opacity: opaDown}}><span className="bold-text">500</span> ACTIVE<span className="bold-text"> APPLIERS</span></motion.p>
- </div>
- <div className="Text">
- <motion.p style={{y: fadeUp, opacity: opaUp}}><span className="bold-text">423</span><span className="bold-text"> RECRUITERS</span></motion.p>
- </div>
- </div>
- <motion.div className="Bar" style={{y: posY, width: posX}}/>
- </div>
- <motion.img src={icon3} alt="Icon3" style={{opacity: opaImg}}/>
- </div>
+ <Trusted />
+ <Stats />
</>
);
};
diff --git a/Workly/src/pages/Home/components/Stats.Modules.css b/Workly/src/pages/Home/components/Stats.Modules.css
new file mode 100644
index 0000000..e9d6658
--- /dev/null
+++ b/Workly/src/pages/Home/components/Stats.Modules.css
@@ -0,0 +1,90 @@
+.Stats
+{
+ margin-top: 4rem;
+ width: 100%;
+ height: 45rem;
+ position: relative;
+}
+
+.Stats .Members
+{
+ position: absolute;
+ margin: 5rem;
+ width: 85%;
+ color: black;
+ display: flex;
+ flex-direction: column;
+}
+
+.Members .regular-text
+{
+ font-size: 2rem;
+ font-style: italic;
+ letter-spacing: 1rem;
+}
+
+.Members .Container p {
+ font-size: 4rem;
+ letter-spacing: 0.2rem;
+}
+
+.Members .Container {
+ margin-top: -0.5rem;
+ height: 4rem;
+ position: relative;
+}
+
+.Container .Text
+{
+ position: absolute;
+ overflow: hidden;
+ height: 100%;
+ display: flex;
+ align-items: center;
+}
+
+
+.Members .Bar
+{
+ margin-top: 0.2rem;
+ height: 0.2rem;
+ border-radius: 0.4rem;
+ background-color: black;
+}
+
+
+.Stats img
+{
+ margin-top: -4.5rem;
+ position: absolute;
+ width: 50%;
+ margin-left: 50%;
+}
+
+.Stats .Description
+{
+ width: 50%;
+
+}
+
+
+.Members .Numbers
+{
+ margin-top: 2rem;
+ height: 12rem;
+ width: 100%;
+ display: flex;
+ gap: 4rem;
+ align-items: center;
+}
+
+.Numbers .Number
+{
+ height: 10rem;
+ width: 10rem;
+ display: flex;
+ flex-direction: column;
+ outline: 1px solid black;
+ align-items: center;
+ position: relative;
+}
diff --git a/Workly/src/pages/Home/components/Stats.tsx b/Workly/src/pages/Home/components/Stats.tsx
new file mode 100644
index 0000000..81346ea
--- /dev/null
+++ b/Workly/src/pages/Home/components/Stats.tsx
@@ -0,0 +1,60 @@
+import { useScroll, motion, useTransform, useMotionValueEvent } from "framer-motion";
+import './Stats.Modules.css'
+import icon3 from '../../../assets/Icon3.png';
+
+
+
+
+
+
+const Stats = () => {
+ const { scrollY } = useScroll();
+ useMotionValueEvent(scrollY, "change", (val) => {
+ console.log(val);
+ })
+
+ const posY = useTransform(scrollY, [475, 620], ["0px", "-110px"]);
+ const posX = useTransform(scrollY, [200, 475], ["0px", "720px"]);
+ const fadeDown = useTransform(scrollY, [499, 550], ["0px", "50px"]);
+ const fadeUp = useTransform(scrollY, [499, 550], ["50px", "0px"]);
+ const opaDown = useTransform(scrollY, [499, 548], [1, 0]);
+ const opaUp = useTransform(scrollY, [499, 548], [0, 1]);
+ const opaImg = useTransform(scrollY, [200, 548], [0, 1]);
+
+ return (
+ <div className="Stats">
+ <div className="Members">
+ <span className="regular-text">MORE THAN</span>
+ <div className="Container">
+ <div className="Text">
+ <motion.p style={{y: fadeDown, opacity: opaDown}}><span className="bold-text">500</span> ACTIVE<span className="bold-text"> APPLIERS</span></motion.p>
+ </div>
+ <div className="Text">
+ <motion.p style={{y: fadeUp, opacity: opaUp}}><span className="bold-text">423</span><span className="bold-text"> RECRUITERS</span></motion.p>
+ </div>
+ </div>
+ <motion.div className="Bar" style={{y: posY, width: posX}}/>
+ <div className="Description">
+ <p>Workly connects over 500 job seekers with 423 recruiters, making hiring easier, faster and smarter.</p>
+ </div>
+ <div className="Numbers">
+ <div className="Number">
+ <div className="Icon"></div>
+ <p>100</p>
+ </div>
+ <div className="Number">
+ <div className="Icon"></div>
+ <p>100</p>
+ </div>
+ <div className="Number">
+ <div className="Icon"></div>
+ <p>100</p>
+ </div>
+ </div>
+ </div>
+ <motion.img src={icon3} alt="Icon3" style={{opacity: opaImg}}/>
+ </div>
+ );
+};
+
+export default Stats;
\ No newline at end of file
diff --git a/Workly/src/pages/Home/components/Trusted.Modules.css b/Workly/src/pages/Home/components/Trusted.Modules.css
new file mode 100644
index 0000000..9c36165
--- /dev/null
+++ b/Workly/src/pages/Home/components/Trusted.Modules.css
@@ -0,0 +1,51 @@
+.TrustedCompanies
+{
+ margin-top: 2rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.TrustedCompanies .Text {
+ color: black;
+}
+
+.TrustedCompanies .Companies
+{
+ background-color: black;
+ width: 80%;
+ height: 3rem;
+ border-radius: 0.4rem;
+}
+
+.Companies .Container
+{
+ background-color: black;
+ -webkit-mask: linear-gradient(90deg, transparent, white 40%, white 60%, transparent);
+ mask: linear-gradient(90deg, transparent, white 40%, white 60%, transparent);
+ display: flex;
+ justify-content: center;
+ overflow: hidden;
+ user-select: none;
+ align-items: center;
+ font-weight: bold;
+ font-size: 0.8rem;
+ border-radius: 0.4rem;
+ width: 100%;
+}
+
+.Container ul {
+ list-style: none;
+ display: flex;
+ justify-content: space-between;
+ flex-shrink: 0;
+ gap: 2rem;
+ min-width: 100%;
+ animation: scroll 35s linear infinite;
+}
+
+@keyframes scroll {
+ to {
+ transform: translateX(-100%);
+ }
+}
\ No newline at end of file
diff --git a/Workly/src/pages/Home/components/Trusted.tsx b/Workly/src/pages/Home/components/Trusted.tsx
new file mode 100644
index 0000000..2b236ea
--- /dev/null
+++ b/Workly/src/pages/Home/components/Trusted.tsx
@@ -0,0 +1,56 @@
+import "./Trusted.Modules.css"
+
+const Trusted = () => {
+ return (
+ <div className="TrustedCompanies">
+ <div className="Text">
+ <p>Trusted by over <span className="bold-text">500+</span> companies all over the world</p>
+ </div>
+ <div className="Companies">
+ <div className="Container">
+ <ul>
+ <span className="Company">DANSKE BANK</span>
+ <span className="Company">SYSTEMATIC</span>
+ <span className="Company">UBER</span>
+ <span className="Company">MOBILEPAY</span>
+ <span className="Company">VERTICA</span>
+ <span className="Company">BANK DATA</span>
+ <span className="Company">XFLOW</span>
+ <span className="Company">DELEGATE</span>
+ <span className="Company">AFRY</span>
+ <span className="Company">NORMAL</span>
+ <span className="Company">SALLING GROUP</span>
+ </ul>
+ <ul aria-hidden="true">
+ <span className="Company">DANSKE BANK</span>
+ <span className="Company">SYSTEMATIC</span>
+ <span className="Company">UBER</span>
+ <span className="Company">MOBILEPAY</span>
+ <span className="Company">VERTICA</span>
+ <span className="Company">BANK DATA</span>
+ <span className="Company">XFLOW</span>
+ <span className="Company">DELEGATE</span>
+ <span className="Company">AFRY</span>
+ <span className="Company">NORMAL</span>
+ <span className="Company">SALLING GROUP</span>
+ </ul>
+ <ul aria-hidden="true">
+ <span className="Company">DANSKE BANK</span>
+ <span className="Company">SYSTEMATIC</span>
+ <span className="Company">UBER</span>
+ <span className="Company">MOBILEPAY</span>
+ <span className="Company">VERTICA</span>
+ <span className="Company">BANK DATA</span>
+ <span className="Company">XFLOW</span>
+ <span className="Company">DELEGATE</span>
+ <span className="Company">AFRY</span>
+ <span className="Company">NORMAL</span>
+ <span className="Company">SALLING GROUP</span>
+ </ul>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default Trusted;
\ No newline at end of file
--
GitLab