feat: agent lading page updated #1

Kleo-Network · Feb 1, 2025 · b4cd291 · b4cd291
1 parent 20627ed
commit b4cd291
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 47 deletions.
diff --git a/src/assets/images/about/tabs/team/ujj.svg b/src/assets/images/about/tabs/team/ujj.svg
diff --git a/src/pages/about/sections/AboutFooterSection.tsx b/src/pages/about/sections/AboutFooterSection.tsx
@@ -1,5 +1,4 @@
 import KleoLogoWithName from '../../../assets/images/footer/kleoLogoWithName.svg'
-import PhoneIcon from '../../../assets/images/footer/phoneIcon.svg'
 import EmailIcon from '../../../assets/images/footer/emailIcon.svg'
 import LinkedinIcon from '../../../assets/images/footer/linkedinIcon.svg'
 import InstagramIcon from '../../../assets/images/footer/instagramIcon.svg'
@@ -10,10 +9,6 @@ const ABOUT_FOOTER_DATA = {
   kleoLogoWithNamePath: KleoLogoWithName,
   kleoIntroText: 'Kleo Network is a user owned data DAO.',
   contactChips: [
-    {
-      iconPath: PhoneIcon,
-      text: '+91 8369683781'
-    },
     {
       iconPath: EmailIcon,
       text: 'contact@kleo.network'

diff --git a/src/pages/about/sections/AboutHeroSection.tsx b/src/pages/about/sections/AboutHeroSection.tsx
@@ -11,13 +11,13 @@ const ABOUT_HERO_DATA = {
     {
       icon: Download,
       title: 'Downloads',
-      count: '30,000+',
+      count: '85,000+',
       type: 'LIGHT'
     },
     {
       icon: ActiveUsers,
-      title: 'Active Users',
-      count: '28,000+',
+      title: 'Token Holders',
+      count: '3000+',
       type: 'DARK'
     },
     {

diff --git a/src/pages/about/sections/aboutTabs/RoadmapTab.tsx b/src/pages/about/sections/aboutTabs/RoadmapTab.tsx
@@ -1,13 +1,12 @@
 import WhiteTickIconPath from '../../../../assets/images/about/tabs/roadmap/whiteTick.svg'
 
-// TODO: @vaibhav Please update all the dates for the events right now all are March 2024.
 export const RoadmapTab = () => {
   return (
     <div className="max-w-[440px] sm:max-w-[488px] md:max-w-[664px] lg:max-w-[980px] xl:max-w-[1140px] mac:max-w-[1140px] 2xl:max-w-[1520px] w-full px-6 flex justify-center">
       <div className="flex flex-col gap-12 w-full justify-center">
         <div className="flex flex-col gap-4 w-full text-center">
           <h1 className="font-semibold text-6xl">Roadmap</h1>
-          <h4 className="font-nokora font-normal text-2xl">2022 - 2025</h4>
+          <h4 className="font-nokora font-normal text-2xl">2024 - 2025</h4>
         </div>
 
         {/* Roadmap Timeline */}
@@ -84,29 +83,14 @@ export const RoadmapTab = () => {
             </div>
           </div>
 
-          {/* Event-4 */}
-          <div className="flex md:contents flex-row-reverse">
-            {/* Content For Item1 */}
-            <div className="relative py-4 px-7 -top-5 md:-top-4 mb-48 flex flex-col gap-4 rounded-full bg-grayblue-700 col-start-1 col-end-5 mr-auto md:mr-0 md:ml-auto">
-              <h2 className="font-semibold text-2xl text-white">We Are Here</h2>
-            </div>
-            {/* Line and Dot for Item1 */}
-            <div className="relative col-start-5 col-end-6 mr-7 md:mx-auto">
-              <div className="flex items-center justify-center w-6 h-full">
-                <div className="w-2 h-full bg-white rounded-t-full"></div>
-              </div>
-              <div className="absolute w-[44px] h-[44px] sm:w-[50px] sm:h-[50px] md:w-[68px] md:h-[68px] -mt-5 -ml-4 sm:-ml-5 md:-ml-6 bg-primary-600 rounded-full top-0 flex justify-center items-center border-[8px] sm:border-[10px] md:border-[14px] border-primary-300" />
-            </div>
-          </div>
-
           {/* Event-5 */}
           <div className="flex md:contents">
             {/* Line and Dot for Item1 */}
             <div className="relative col-start-5 col-end-6 mr-7 md:mx-auto">
               <div className="flex items-center justify-center w-6 h-full">
-                <div className="w-2 h-full bg-white rounded-t-full"></div>
+                <div className="w-2 h-full bg-primary-600 rounded-t-full"></div>
               </div>
-              <div className="absolute w-10 h-10 -mt-5 -ml-2 bg-white rounded-full top-0 flex justify-center items-center">
+              <div className="absolute w-10 h-10 -mt-5 -ml-2 bg-primary-600 rounded-full top-0 flex justify-center items-center">
                 <img src={WhiteTickIconPath} alt="" />
               </div>
             </div>
@@ -130,22 +114,37 @@ export const RoadmapTab = () => {
               <h3 className="text-base font-normal text-primary-700">
                 January 2025
               </h3>
-              <h1 className="font-semibold text-4xl">SDK Launch</h1>
+              <h1 className="font-semibold text-4xl">Agentic Browser Launch</h1>
               <p className="text-lg font-normal">
-                Launching SDK for organisations to query data.
+                AI agents to scrape data from specific website!
               </p>
             </div>
             {/* Line and Dot for Item1 */}
             <div className="relative col-start-5 col-end-6 mr-7 md:mx-auto">
               <div className="flex items-center justify-center w-6 h-full">
-                <div className="w-2 h-full bg-white rounded-t-full"></div>
+                <div className="w-2 h-full bg-primary-600 rounded-t-full"></div>
               </div>
-              <div className="absolute w-10 h-10 -mt-5 -ml-2 bg-white rounded-full top-0 flex justify-center items-center">
+              <div className="absolute w-10 h-10 -mt-5 -ml-2 bg-primary-600 rounded-full top-0 flex justify-center items-center">
                 <img src={WhiteTickIconPath} alt="" />
               </div>
             </div>
           </div>
 
+          {/* We Are Here */}
+          <div className="flex md:contents flex-row-reverse">
+            {/* Content For Item1 */}
+            <div className="relative py-4 px-7 -top-5 md:-top-4 mb-48 flex flex-col gap-4 rounded-full bg-grayblue-700 col-start-1 col-end-5 mr-auto md:mr-0 md:ml-auto">
+              <h2 className="font-semibold text-2xl text-white">We Are Here</h2>
+            </div>
+            {/* Line and Dot for Item1 */}
+            <div className="relative col-start-5 col-end-6 mr-7 md:mx-auto">
+              <div className="flex items-center justify-center w-6 h-full">
+                <div className="w-2 h-full bg-white rounded-t-full"></div>
+              </div>
+              <div className="absolute w-[44px] h-[44px] sm:w-[50px] sm:h-[50px] md:w-[68px] md:h-[68px] -mt-5 -ml-4 sm:-ml-5 md:-ml-6 bg-primary-600 rounded-full top-0 flex justify-center items-center border-[8px] sm:border-[10px] md:border-[14px] border-primary-300" />
+            </div>
+          </div>
+
           {/* Event-7 */}
           <div className="flex md:contents">
             {/* Line and Dot for Item1 */}
@@ -159,10 +158,10 @@ export const RoadmapTab = () => {
               <h3 className="text-base font-normal text-primary-700">
                 March 2025
               </h3>
-              <h1 className="font-semibold text-4xl">Airdrop 1</h1>
+              <h1 className="font-semibold text-4xl">User Downloads</h1>
               <p className="text-lg font-normal">
-                Giving users first airdrop once we reach active data
-                commissioning by 10 organizations.
+                100,000 users+ on our extension along with more actions on our
+                agentic browsers.
               </p>
             </div>
           </div>

diff --git a/src/pages/about/sections/aboutTabs/TeamTab.tsx b/src/pages/about/sections/aboutTabs/TeamTab.tsx
@@ -2,18 +2,18 @@ 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 UjjwalProfileImage from '../../../../assets/images/about/tabs/team/ujj.svg'
 
 import LinkedinIconPath from '../../../../assets/images/about/tabs/team/linkedinIcon.svg'
 import PortfolioIconPath from '../../../../assets/images/about/tabs/team/portfolioIcon.svg'
-import { profile } from 'console'
 
 // TODO: Update Bellow Social Links and add any social by adding an icon and the config if you want
 const ABOUT_TEAM_TAB_DATA = {
   teamMembers: [
     {
       name: 'Vaibhav Maheshwari',
       profilePath: VaibhavProfileImage,
-      role: 'FOUNDER',
+      role: 'CHIEF EXECUTIVE OFFICER',
       bio: "NIT Surat alumnus with a Master's in Mathematics. 4 years of full-stack dev experience, and active in web3 space for last 3 years. Full time on Kleo Network for last 2 years.",
       socials: [
         {
@@ -26,6 +26,22 @@ const ABOUT_TEAM_TAB_DATA = {
         }
       ]
     },
+    {
+      name: 'Ujjwal Kumar',
+      profilePath: UjjwalProfileImage,
+      role: 'CHIEF TECHNOLOGY OFFICER',
+      bio: 'NIT Surat alumnus with a degree in Computer Science. 4 years of full-stack web3 development experience, and active in web3 space for last 3 years.',
+      socials: [
+        {
+          iconPath: LinkedinIconPath,
+          link: 'https://www.linkedin.com/in/vaibhavgeek/'
+        },
+        {
+          iconPath: PortfolioIconPath,
+          link: 'https://vaibhavgeek.blogspot.com'
+        }
+      ]
+    },
     {
       name: 'Pratik Ostwal',
       profilePath: PratikProfileImage,

diff --git a/src/pages/about/sections/aboutTabs/TreasuryTab.tsx b/src/pages/about/sections/aboutTabs/TreasuryTab.tsx
@@ -20,24 +20,24 @@ const ABOUT_TREASURY_DATA = {
       id: '2',
       iconPath: TotalSpentIconPath,
       title: 'Total Spent',
-      amount: '$24,000',
+      amount: '$33,000',
       theme: 'WHITE'
     },
     {
       id: '3',
       iconPath: RemainingBalanceIconPath,
       title: 'Remaining Balance',
-      amount: '$40,000',
+      amount: '$31,000',
       theme: 'PURPLE'
     }
   ],
   spendBreakdown: {
     graphConfig: [
-      { percentage: 46.82, color: '#8C65E0', label: 'Building Tech' },
-      { percentage: 18.16, color: '#B692F6', label: 'Marketing' },
-      { percentage: 32.38, color: '#E9D7FE', label: 'Team' }
+      { percentage: 60.61, color: '#8C65E0', label: 'Building Tech' },
+      { percentage: 15.15, color: '#B692F6', label: 'Marketing' },
+      { percentage: 24.24, color: '#E9D7FE', label: 'Team' }
     ],
-    totalAmount: '$24,000',
+    totalAmount: '$33,000',
     title: 'Spend Breakdown',
     description:
       "Here's how we allocate your contributions to make a meaningful impact:"
@@ -48,19 +48,19 @@ const ABOUT_TREASURY_DATA = {
       {
         iconPath: BuildingTechIconPath,
         title: 'Building Tech',
-        percentage: 45.8,
-        amount: '$11,000'
+        percentage: 60.61,
+        amount: '$20,000'
       },
       {
         iconPath: MarketingIconPath,
         title: 'Marketing',
-        percentage: 20.8,
+        percentage: 15.15,
         amount: '$5,000'
       },
       {
         iconPath: TeamIconPath,
         title: 'Team',
-        percentage: 33.3,
+        percentage: 24.24,
         amount: '$8,000'
       }
     ]
@@ -77,10 +77,14 @@ const ABOUT_TREASURY_DATA = {
         name: 'Vaibhav Maheshwari',
         amount: '$40,000',
         description: 'Investment'
+      },
+      {
+        name: 'POL Token',
+        amount: '58,000 POL',
+        description: 'Token Grant'
       }
     ]
   },
-  // TODO: @vaibhav Update this Zapper Link and wallet address both
   treasuryTracking: {
     title: 'Treasury Tracking',
     walletAddress: '0x86b06319b906e61631f7edbe5a3fe2edb95a3fae',

diff --git a/src/pages/about/sections/aboutTabs/UpdatesTab.tsx b/src/pages/about/sections/aboutTabs/UpdatesTab.tsx
@@ -22,6 +22,27 @@ interface Update {
 
 const ABOUT_UPDATES_DATA = {
   updates: [
+    {
+      date: 'January 22nd, 2025',
+      highlights: [
+        'Reached 85,000+ extension users with enhanced server infrastructure',
+        'Created AI Agents with browswer automation capabilities',
+        'Onboarded a new member for technical head in the Kleo Team',
+        'Launched KDAT token on VANA MAINNET'
+      ]
+    },
+
+    {
+      date: 'January 15th, 2025',
+      highlights: [
+        {
+          iconPath: DownloadsIconPath,
+          title: 'Extension Downloads',
+          number: '80,000',
+          progressRate: '166.67%'
+        }
+      ]
+    },
     {
       date: 'November 24th, 2024',
       highlights: [