From 0f04d4678e6398b9e9e648cbac10980c7b574e05 Mon Sep 17 00:00:00 2001 From: JainamShah28 Date: Sat, 21 Dec 2024 22:09:42 +0530 Subject: [PATCH 1/6] refactor: updated home page as per figma --- src/assets/images/home/grid_first_image.svg | 248 ++++++++++++------ .../images/home/grid_first_image_old.svg | 101 +++++++ src/assets/images/home/grid_second_image.svg | 189 ++++++++----- .../images/home/grid_second_image_old.svg | 84 ++++++ src/assets/images/home/grid_third_image.svg | 221 ++++++++++------ .../images/home/grid_third_image_old.svg | 99 +++++++ src/assets/images/home/hero_background.svg | 48 ++++ .../home/howKleoWorks/automate_flow.svg | 4 + .../home/howKleoWorks/automation_script.svg | 11 + .../images/home/howKleoWorks/earn_coins.svg | 6 + .../images/home/partners-horizontal.svg | 72 +++-- src/assets/images/home/partners-vertical.svg | 18 +- src/pages/home/FeatureGridSection.tsx | 66 +++-- src/pages/home/FooterSection.tsx | 43 ++- src/pages/home/HeroSection.tsx | 128 ++------- src/pages/home/HowKleoWorksSection.tsx | 59 ++--- src/pages/home/OurPartners.tsx | 8 +- src/shared/navbar/Navbar.tsx | 7 - 18 files changed, 925 insertions(+), 487 deletions(-) create mode 100644 src/assets/images/home/grid_first_image_old.svg create mode 100644 src/assets/images/home/grid_second_image_old.svg create mode 100644 src/assets/images/home/grid_third_image_old.svg create mode 100644 src/assets/images/home/hero_background.svg create mode 100644 src/assets/images/home/howKleoWorks/automate_flow.svg create mode 100644 src/assets/images/home/howKleoWorks/automation_script.svg create mode 100644 src/assets/images/home/howKleoWorks/earn_coins.svg diff --git a/src/assets/images/home/grid_first_image.svg b/src/assets/images/home/grid_first_image.svg index 4632c22..03d3ff8 100644 --- a/src/assets/images/home/grid_first_image.svg +++ b/src/assets/images/home/grid_first_image.svg @@ -1,101 +1,185 @@ - - - - - - + + + + + + + + + + + + + + + + + + + + - - + + + + + + - - - - - - - - - - - - - - + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - + + - - + + - - - - - - + + + + + + + + + + + + + + + + + + + + + - - + + + - + - - - + + + - - - - - + + + + + + - - + + + diff --git a/src/assets/images/home/grid_first_image_old.svg b/src/assets/images/home/grid_first_image_old.svg new file mode 100644 index 0000000..4632c22 --- /dev/null +++ b/src/assets/images/home/grid_first_image_old.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/home/grid_second_image.svg b/src/assets/images/home/grid_second_image.svg index 86fc3ea..240d949 100644 --- a/src/assets/images/home/grid_second_image.svg +++ b/src/assets/images/home/grid_second_image.svg @@ -1,84 +1,137 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - - - - - - + + + + + + + + + + + + - - - + + + - - - + + + - + - + - - + + - + + diff --git a/src/assets/images/home/grid_second_image_old.svg b/src/assets/images/home/grid_second_image_old.svg new file mode 100644 index 0000000..86fc3ea --- /dev/null +++ b/src/assets/images/home/grid_second_image_old.svg @@ -0,0 +1,84 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/home/grid_third_image.svg b/src/assets/images/home/grid_third_image.svg index 6b85c08..97d83a4 100644 --- a/src/assets/images/home/grid_third_image.svg +++ b/src/assets/images/home/grid_third_image.svg @@ -1,99 +1,154 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + - + - + - + - - + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/home/grid_third_image_old.svg b/src/assets/images/home/grid_third_image_old.svg new file mode 100644 index 0000000..6b85c08 --- /dev/null +++ b/src/assets/images/home/grid_third_image_old.svg @@ -0,0 +1,99 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/home/hero_background.svg b/src/assets/images/home/hero_background.svg new file mode 100644 index 0000000..3141ca2 --- /dev/null +++ b/src/assets/images/home/hero_background.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/home/howKleoWorks/automate_flow.svg b/src/assets/images/home/howKleoWorks/automate_flow.svg new file mode 100644 index 0000000..4c8078b --- /dev/null +++ b/src/assets/images/home/howKleoWorks/automate_flow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/home/howKleoWorks/automation_script.svg b/src/assets/images/home/howKleoWorks/automation_script.svg new file mode 100644 index 0000000..cdf6b08 --- /dev/null +++ b/src/assets/images/home/howKleoWorks/automation_script.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/images/home/howKleoWorks/earn_coins.svg b/src/assets/images/home/howKleoWorks/earn_coins.svg new file mode 100644 index 0000000..77450bd --- /dev/null +++ b/src/assets/images/home/howKleoWorks/earn_coins.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/images/home/partners-horizontal.svg b/src/assets/images/home/partners-horizontal.svg index 43380a8..bad68ae 100644 --- a/src/assets/images/home/partners-horizontal.svg +++ b/src/assets/images/home/partners-horizontal.svg @@ -1,50 +1,44 @@ - - - - - - - - - - - - - - - + + + + + + + + + + + + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - - - - - - - - - + + + + + + diff --git a/src/assets/images/home/partners-vertical.svg b/src/assets/images/home/partners-vertical.svg index bc6584e..14025c7 100644 --- a/src/assets/images/home/partners-vertical.svg +++ b/src/assets/images/home/partners-vertical.svg @@ -4,7 +4,7 @@ - + @@ -12,10 +12,8 @@ - - - - + + @@ -30,16 +28,13 @@ - + - - - - + @@ -47,9 +42,8 @@ - + - diff --git a/src/pages/home/FeatureGridSection.tsx b/src/pages/home/FeatureGridSection.tsx index 2344a65..ac85eec 100644 --- a/src/pages/home/FeatureGridSection.tsx +++ b/src/pages/home/FeatureGridSection.tsx @@ -4,75 +4,73 @@ import { ReactComponent as GridThirdImage } from '../../assets/images/home/grid_ export const FeatureGridSection = () => { return ( -
-
+
+
{/* Pair - 1 */} -
+
{/* Image */} {/* Text */}
- Own A Stake For Your Data + AI agents that help you own your data
-

- Every individual generates a massive amount of data essential - for LLMs and AI models. Currently, centralized entities build - billion-dollar IPs without you receiving anything in return.{' '} -

- It's time to reclaim ownership of your data as a user. +

+ Earn from your extension! Be a part of Kleo Data DAO, +
+
+ Personalise your DAPP.

{/* Pair - 2 */} -
+
{/* Image */} {/* Text */}
- Proof of Contribution + AI agent to own your data.
-

- Earn Kleo XP points based on the intelligence and complexity of - your actions within the browser. While we're transparent about - activities that maximize your Kleo points, the exact algorithm - remains proprietary to prevent farming. +

+ Machine Learning Models / Analytics Houses want this data. Kleo + and VANA DAO will come up with a proof of contribution which + will then decide on user contribution tokens/$ amount that will + be shared based on the requirement. Rest assured no personally + identifiable information will be leaked.

- - Continue your usual activities and earn rewards based on your - engagement. - + We will be using snapshot for Kleo token holders to manage + conversation between data requirement and data liquidity + provider

{/* Pair - 3 */} -
+
{/* Image */} {/* Text */}
- Kleo SDK + Make life easier
-

- We want your users to earn from your extension! Join the Kleo - Data DAO. If you're a crypto wallet and want this feature - enabled, please reach out to us on Discord. +

+ Based on intelligence and complexity of your actions inside + the browser, kleo will reward kleo XP points. Kleo will be + transparent about the activity that helps you get the maximum + kleo points but the exact algorithm will be closed source to + ensure there is no farming.  +
+
+ Just do what you do and earn rewards on the basis of the + activity.

- - Talk to us -
diff --git a/src/pages/home/FooterSection.tsx b/src/pages/home/FooterSection.tsx index 8959e38..d7d59d1 100644 --- a/src/pages/home/FooterSection.tsx +++ b/src/pages/home/FooterSection.tsx @@ -1,17 +1,32 @@ import { ReactComponent as FooterKleoLogo } from '../../assets/images/home/footer/logo_footer.svg' -import { ReactComponent as PhoneIcon } from '../../assets/images/home/footer/phone.svg' import { ReactComponent as EmailIcon } from '../../assets/images/home/footer/email.svg' import { ReactComponent as LinkedIn } from '../../assets/images/home/footer/linkedIn.svg' -import { ReactComponent as FaceBook } from '../../assets/images/home/footer/facebook.svg' -import { ReactComponent as Instagram } from '../../assets/images/home/footer/instagram.svg' import { ReactComponent as Discord } from '../../assets/images/home/footer/discord.svg' import { ReactComponent as Grid } from '../../assets/images/home/footer/grid.svg' +import { useLocation } from 'react-router-dom' + +interface ContactChipProps { + iconPath: string + text: string +} + +const ContactChip = ({ iconPath, text }: ContactChipProps) => { + return ( +
+ Phone +
{text}
+
+ ) +} export const FooterSection = () => { + const location = useLocation() + const { pathname } = location + return (
{/* Footer section */} -
+
{/* Company Logo and Text */} @@ -43,10 +58,14 @@ export const FooterSection = () => { {/* Navigation Links */} {/* Social Media Links */} + {/* TODO: @Vaibhav please update the social media links */} {/* All rights reserved */} -
+
All rights reserved. www.kleo.network
@@ -101,12 +120,12 @@ export const FooterSection = () => {
{/* Text */} -
+
Still have questions?
- Can't find the answer you're looking for? Please chat to our + Can’t find the answer you’re looking for? Please chat to our friendly team. We will do our best to assist you with the questions.
@@ -122,7 +141,7 @@ export const FooterSection = () => {

Join Our Discord

- +
diff --git a/src/pages/home/HeroSection.tsx b/src/pages/home/HeroSection.tsx index f181ddb..62679a1 100644 --- a/src/pages/home/HeroSection.tsx +++ b/src/pages/home/HeroSection.tsx @@ -1,116 +1,26 @@ -import { useEffect, useRef, useState } from 'react' - -type BackgroundGrid = { - columns: number - rows: number -} +import { ReactComponent as HeroBackground } from '../../assets/images/home/hero_background.svg'; export const HeroSection = () => { - const bgGridContainerRef = useRef(null), - [bgGrid, setBgGrid] = useState({ - columns: 0, - rows: 0 - }), - cursorRef = useRef(null) - - function calculateGridSize(): void { - if (bgGridContainerRef.current) { - const columns = Math.ceil(bgGridContainerRef.current.clientWidth / 64), - rows = Math.ceil(bgGridContainerRef.current.clientHeight / 64) - - setBgGrid({ columns, rows }) - } - } - - function moveCursorBackDrop(event: MouseEvent): void { - if (cursorRef.current && window.innerWidth >= 1280) { - const x = event.clientX, - y = event.clientY - - cursorRef.current.style.left = x + 'px' - cursorRef.current.style.top = y + 'px' - } - } - - useEffect(() => { - window.addEventListener('resize', calculateGridSize) - calculateGridSize() - - if (bgGridContainerRef.current) { - bgGridContainerRef.current.addEventListener( - 'mousemove', - moveCursorBackDrop - ) - } - - return () => { - window.removeEventListener('resize', calculateGridSize) - - if (bgGridContainerRef.current) { - bgGridContainerRef.current.removeEventListener( - 'mousemove', - moveCursorBackDrop - ) - } - } - }, []) - return ( -
- {/* Background Grid */} -
-
-
-
- {Array.from({ length: bgGrid.rows }, (_, i) => i + 1).map((row) => ( -
- {Array.from({ length: bgGrid.columns }, (_, i) => i + 1).map( - (column) => ( -
- ) - )} -
- ))} +
+ {/* Hero Background Image */} +
+
-
- {/* Hero Text */} -
- {/* Earn Your + Stack in the AI */} -
- EARN YOUR - - STAKE IN THE AI - -
- {/* Revolution + Create Account */} -
- - REVOLUTION - -
-
- Earn, Govern and Own your data. -
- - Create Account - -
-
+ {/* Hero Text */} +
+
+

AI Agents

+

+ For Your +

+

Browser

+ + Create Account +
diff --git a/src/pages/home/HowKleoWorksSection.tsx b/src/pages/home/HowKleoWorksSection.tsx index 9ea183d..abedf4c 100644 --- a/src/pages/home/HowKleoWorksSection.tsx +++ b/src/pages/home/HowKleoWorksSection.tsx @@ -1,6 +1,6 @@ -import { ReactComponent as Govern } from '../../assets/images/home/howKleoWorks/govern.svg' -import { ReactComponent as Own } from '../../assets/images/home/howKleoWorks/own.svg' -import { ReactComponent as RemovePII } from '../../assets/images/home/howKleoWorks/removePII.svg' +import { ReactComponent as AutomationScript } from '../../assets/images/home/howKleoWorks/automation_script.svg' +import { ReactComponent as AutomateFlow } from '../../assets/images/home/howKleoWorks/automate_flow.svg' +import { ReactComponent as EarnCoins } from '../../assets/images/home/howKleoWorks/earn_coins.svg' export const HowKleoWorksSection = () => { return ( @@ -8,13 +8,13 @@ export const HowKleoWorksSection = () => {
{/* How Kleo Works Question & Answer */} -
+
How Kleo Works?
-
+
Kleo has a three step process to ensure that you are in control of - your data and your data earns while you sleep. + your EarnCoins data and yet get maximum benefits from it.
@@ -23,61 +23,46 @@ export const HowKleoWorksSection = () => { {/* Card - 1 */}
{/* Icon */} - + {/* Text */}
- Confidential + Developers Create Automation Scripts
-
- We prioritize your privacy. Kleo removes all personally - identifiable information, including names, emails, usernames, - addresses, specific locations, and{' '} - - more. - +
+ Skilled developers design custom automation scripts tailored + to solve specific challenges and streamline workflows.
{/* Card - 2 */}
{/* Icon */} - + {/* Text */}
- You Govern Your Data + Use those scripts to automate your flow
-
- Through decentralized smart contracts, your data can only be - accessed if approved by a majority{' '} - - vote on snapshot.org - +
+ With just a few clicks, you can integrate automation scripts + into your processes, eliminating manual tasks and boosting + productivity.
{/* Card - 3 */}
{/* Icon */} - + {/* Text */}
- Ownership + Share your data to earn coins to spend on scripts
-
- Fair Equity Ownership.
- Your rewards are determined by the quantity and quality of - your data contributions. Earn upto $400/month! +
+ Contribute your data securely to earn coins, which can be used + to access or purchase more advanced automation scripts.
diff --git a/src/pages/home/OurPartners.tsx b/src/pages/home/OurPartners.tsx index 3aeafc9..5ae9a30 100644 --- a/src/pages/home/OurPartners.tsx +++ b/src/pages/home/OurPartners.tsx @@ -7,13 +7,13 @@ export const OurPartnersSection = () => {
{/* Text Of Partners */} -
+
Our Partners
-
- We've collaborated with industry leaders to build and scale our - solution. Notable partners include. +
+ We have partnered with industry leaders to help us build and scale + this solution. Notable partners are mentioned here.
diff --git a/src/shared/navbar/Navbar.tsx b/src/shared/navbar/Navbar.tsx index 70ad155..fa54e30 100644 --- a/src/shared/navbar/Navbar.tsx +++ b/src/shared/navbar/Navbar.tsx @@ -106,13 +106,6 @@ const Navbar = () => { > About - - Memo - Date: Sat, 21 Dec 2024 22:14:57 +0530 Subject: [PATCH 2/6] refactor: removed unwanted images --- .../images/home/grid_first_image_old.svg | 101 ------------------ .../images/home/grid_second_image_old.svg | 84 --------------- .../images/home/grid_third_image_old.svg | 99 ----------------- 3 files changed, 284 deletions(-) delete mode 100644 src/assets/images/home/grid_first_image_old.svg delete mode 100644 src/assets/images/home/grid_second_image_old.svg delete mode 100644 src/assets/images/home/grid_third_image_old.svg diff --git a/src/assets/images/home/grid_first_image_old.svg b/src/assets/images/home/grid_first_image_old.svg deleted file mode 100644 index 4632c22..0000000 --- a/src/assets/images/home/grid_first_image_old.svg +++ /dev/null @@ -1,101 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/home/grid_second_image_old.svg b/src/assets/images/home/grid_second_image_old.svg deleted file mode 100644 index 86fc3ea..0000000 --- a/src/assets/images/home/grid_second_image_old.svg +++ /dev/null @@ -1,84 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/home/grid_third_image_old.svg b/src/assets/images/home/grid_third_image_old.svg deleted file mode 100644 index 6b85c08..0000000 --- a/src/assets/images/home/grid_third_image_old.svg +++ /dev/null @@ -1,99 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - From bcba0ed63caaa44f4d24a7568c8614836dd29d22 Mon Sep 17 00:00:00 2001 From: JainamShah28 Date: Sat, 21 Dec 2024 22:39:09 +0530 Subject: [PATCH 3/6] fix: lint errors --- src/pages/home/FeatureGridSection.tsx | 4 ++-- src/pages/home/FooterSection.tsx | 32 ++------------------------- src/pages/home/HeroSection.tsx | 2 +- 3 files changed, 5 insertions(+), 33 deletions(-) diff --git a/src/pages/home/FeatureGridSection.tsx b/src/pages/home/FeatureGridSection.tsx index ac85eec..8079b0f 100644 --- a/src/pages/home/FeatureGridSection.tsx +++ b/src/pages/home/FeatureGridSection.tsx @@ -65,8 +65,8 @@ export const FeatureGridSection = () => { transparent about the activity that helps you get the maximum kleo points but the exact algorithm will be closed source to ensure there is no farming.  -
-
+
+
Just do what you do and earn rewards on the basis of the activity.

diff --git a/src/pages/home/FooterSection.tsx b/src/pages/home/FooterSection.tsx index d7d59d1..5061591 100644 --- a/src/pages/home/FooterSection.tsx +++ b/src/pages/home/FooterSection.tsx @@ -5,24 +5,10 @@ import { ReactComponent as Discord } from '../../assets/images/home/footer/disco import { ReactComponent as Grid } from '../../assets/images/home/footer/grid.svg' import { useLocation } from 'react-router-dom' -interface ContactChipProps { - iconPath: string - text: string -} - -const ContactChip = ({ iconPath, text }: ContactChipProps) => { - return ( -
- Phone -
{text}
-
- ) -} - export const FooterSection = () => { const location = useLocation() - const { pathname } = location - + const { pathname } = location + return (
{/* Footer section */} @@ -36,17 +22,8 @@ export const FooterSection = () => { Kleo Network is a user owned data DAO.
- {/* Contact Number and Email */}
- {/* Phone Number Pill */} - {/*
- -
- -
-
*/} - {/* Email Pill */}
@@ -55,7 +32,6 @@ export const FooterSection = () => {
- {/* Navigation Links */} - {/* Social Media Links */} - {/* TODO: @Vaibhav please update the social media links */} - {/* All rights reserved */}
All rights reserved. www.kleo.network @@ -130,7 +103,6 @@ export const FooterSection = () => { questions.
- {/* Discord Button */} { return ( From ed354b6ea57283f2b5e39ff8599680e751d7fc30 Mon Sep 17 00:00:00 2001 From: JainamShah28 Date: Sat, 21 Dec 2024 22:43:10 +0530 Subject: [PATCH 4/6] fix: lint error --- src/pages/home/FeatureGridSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/FeatureGridSection.tsx b/src/pages/home/FeatureGridSection.tsx index 8079b0f..c5cebfb 100644 --- a/src/pages/home/FeatureGridSection.tsx +++ b/src/pages/home/FeatureGridSection.tsx @@ -64,7 +64,7 @@ export const FeatureGridSection = () => { the browser, kleo will reward kleo XP points. Kleo will be transparent about the activity that helps you get the maximum kleo points but the exact algorithm will be closed source to - ensure there is no farming.  + ensure there is no farming.

Just do what you do and earn rewards on the basis of the From ee05f57986dfd62b46aac3dee55557c6489e9e95 Mon Sep 17 00:00:00 2001 From: JainamShah28 Date: Sat, 21 Dec 2024 22:48:18 +0530 Subject: [PATCH 5/6] fix: lint errors --- src/pages/home/FeatureGridSection.tsx | 4 ++-- src/pages/home/HeroSection.tsx | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pages/home/FeatureGridSection.tsx b/src/pages/home/FeatureGridSection.tsx index c5cebfb..d68d469 100644 --- a/src/pages/home/FeatureGridSection.tsx +++ b/src/pages/home/FeatureGridSection.tsx @@ -65,8 +65,8 @@ export const FeatureGridSection = () => { transparent about the activity that helps you get the maximum kleo points but the exact algorithm will be closed source to ensure there is no farming. -
-
+
+
Just do what you do and earn rewards on the basis of the activity.

diff --git a/src/pages/home/HeroSection.tsx b/src/pages/home/HeroSection.tsx index 46b00ee..6c399e8 100644 --- a/src/pages/home/HeroSection.tsx +++ b/src/pages/home/HeroSection.tsx @@ -14,7 +14,9 @@ export const HeroSection = () => {

For Your

-

Browser

+

+ Browser +

Date: Sun, 22 Dec 2024 20:19:39 +0530 Subject: [PATCH 6/6] feat: added details of new team member --- src/assets/images/about/tabs/team/jainam.svg | 21 +++++++++++++++++++ .../about/sections/aboutTabs/TeamTab.tsx | 13 ++++++++++++ 2 files changed, 34 insertions(+) create mode 100644 src/assets/images/about/tabs/team/jainam.svg diff --git a/src/assets/images/about/tabs/team/jainam.svg b/src/assets/images/about/tabs/team/jainam.svg new file mode 100644 index 0000000..1e54030 --- /dev/null +++ b/src/assets/images/about/tabs/team/jainam.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/about/sections/aboutTabs/TeamTab.tsx b/src/pages/about/sections/aboutTabs/TeamTab.tsx index f9ac932..867d774 100644 --- a/src/pages/about/sections/aboutTabs/TeamTab.tsx +++ b/src/pages/about/sections/aboutTabs/TeamTab.tsx @@ -2,6 +2,7 @@ import VaibhavProfileImage from '../../../../assets/images/about/tabs/team/vaibh import PratikProfileImage from '../../../../assets/images/about/tabs/team/pratik.svg' import RuchiProfileImage from '../../../../assets/images/about/tabs/team/ruchi.svg' import PrinceProfileImage from '../../../../assets/images/about/tabs/team/prince.svg' +import JainamProfileImage from '../../../../assets/images/about/tabs/team/jainam.svg' import LinkedinIconPath from '../../../../assets/images/about/tabs/team/linkedinIcon.svg' import PortfolioIconPath from '../../../../assets/images/about/tabs/team/portfolioIcon.svg' @@ -73,6 +74,18 @@ const ABOUT_TEAM_TAB_DATA = { link: 'https://princedalsaniya.vercel.app/' } ] + }, + { + name: 'Jainam Shah', + profilePath: JainamProfileImage, + role: 'FRONTEND DEVELOPER', + bio: 'Recent Ahmedabad University graduate with 1 year of experience as a full stack developer, passionate about full stack development and UI/UX design. Part time on Kleo for last 2 months.', + socials: [ + { + iconPath: LinkedinIconPath, + link: 'https://www.linkedin.com/in/jainam-shah-61250020b/' + } + ] } ] }