updates

README.md

@@ -1,10 +1,10 @@
-# OpenQ-Frontend 
- 
+# OpenQ-Frontend
+
 ## Boot Locally
 
 If the work you are engaged in doesn't require the Fullstack, you can boot just the OpenQ-Frontend by following these instructions. We normally work on the 'staging' branch, so make sure have all latest changes from it and do your Pull Requests to 'staging' unless instructed otherwise.
 
-Note: the instructions should work if you are using Mac OS, Linux, but if you are on Windows, make sure to be using (Windows Sublinux System (WSL))[https://learn.microsoft.com/en-us/windows/wsl/install]. 
+Note: the instructions should work if you are using Mac OS, Linux, but if you are on Windows, make sure to be using (Windows Sublinux System (WSL))[https://learn.microsoft.com/en-us/windows/wsl/install].
 
 ### 1 Get the right .env variables
 
@@ -26,6 +26,13 @@ yarn json-server
 ### 3 Boot the App
 
 ```bash
+For Powershell Users:
+$env:DEPLOY_ENV = "staging"
+
+yarn next dev
+
+OR
+
 yarn boot:local-targeting-staging
 ```
 

components/Sales/drm/devrel-hero.jsx

@@ -1,20 +1,32 @@
 import React from 'react';
 import UpperAnim from '../../animations/UpperAnim';
+import LeftAnim from '../../animations/LeftAnim';
+import RightAnim from '../../animations/rightAnim';
 
 const DevRelHero = () => {
   return (
-    <div className='flex flex-col justify-content-center items-center bg-white'>
-      <div className='pt-16 pr-96'>
-        <UpperAnim />
-      </div>
-      <div className='flex flex-col justify-center items-center text-center'>
-        <div className='text-gray-400 text-sm font-normal'>Developer Relationship Management Platform</div>
-        <div className='text-black text-4xl font-extrabold pt-3 w-[40rem]'>
-          Supercharge developer relations without manual work.
+    <div className=' bg-white pt-16'>
+      <div className='flex flex-row items-center justify-between'>
+        <div className='mt-48 ml-44'>
+          <LeftAnim />
+        </div>
+        <div className='flex flex-col justify-content-center items-center '>
+          <div className=''>
+            <UpperAnim />
+          </div>
+          <div className='flex flex-col justify-center items-center text-center'>
+            <div className='text-gray-400 text-sm font-normal'>Developer Relationship Management Platform</div>
+            <div className='text-black text-4xl font-extrabold pt-3 w-[40rem]'>
+              Supercharge developer relations without manual work.
+            </div>
+            <div className='text-gray-800 text-lg pt-5 w-[32rem]'>
+              OpenQ's DRM Platform offers real-time insights into developer activities, tracks project relevance, and
+              enhances interactions for efficient and informed collaborations. It's time to calculate and validate ROI.
+            </div>
+          </div>
         </div>
-        <div className='text-gray-800 text-lg pt-5 w-[32rem]'>
-          OpenQ's DRM Platform offers real-time insights into developer activities, tracks project relevance, and
-          enhances interactions for efficient and informed collaborations. It's time to calculate and validate ROI.
+        <div className='mt-48 mr-44'>
+          <RightAnim />
         </div>
       </div>
     </div>

components/Sales/drm/elements/step-two-content.jsx

@@ -5,6 +5,7 @@ import TableRow from './table-row.jsx';
 const StepTwoContent = () => {
   const [tableData, setTableData] = useState(null);
   const [, setIsVisibleStates] = useState([false, false, false, false, false, false, false]);
+
   const parentRef = useRef(null);
 
   useEffect(() => {

components/animations/LeftAnim.js

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 export default function UpperAnim() {
   return (
     <object
-      data='/left-anim.svg'
+      data='/left-anim-6.svg'
       style={{
         width: '528px', // set the width
         height: '209px', // set the height

components/animations/RightAnim.js

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import { useEffect } from 'react';
+export default function RightAnim() {
+  return (
+    <object
+      data='/right-anim-4.svg'
+      style={{
+        width: '528px', // set the width
+        height: '209px', // set the height
+      }}
+    />
+  );
+}

components/animations/UpperAnim.js

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 export default function UpperAnim() {
   return (
     <object
-      data='/original-infite-2.svg'
+      data='/upper-anim-2.svg'
       style={{
         width: '528px', // set the width
         height: '209px', // set the height