Merge pull request #6 from panoptic-labs/main

latest round of tweaks

src/components/NewHomePage/Button/Button.css

@@ -11,7 +11,6 @@
 
 .primary-button:hover:not([disabled]) {
   transform: scale(1.05);
-  border: 2px solid #4E14D0;
   box-shadow: 0px 0px 256px 0px rgba(70,20,208,.5);
   cursor: pointer;
   border-radius: 50px;

src/components/NewHomePage/DemoPage/DemoPage.css

@@ -253,7 +253,7 @@
   }
 
   .demo-details {
-    width: 380px;
+    width: 469px;
   }
 
 }
@@ -316,6 +316,9 @@
   .demo-subtitle {
     font-size: 22px;
   }
+  .demo-details {
+    width: 310px;
+  }
 }
 
 @media screen and (max-width: 380px) { 

src/components/NewHomePage/DemoPage/DemoPage.jsx

@@ -69,24 +69,22 @@ const DemoPage = () => {
             <div className="text-purple">performance.</div>
           </div>
           <div className="demo-details">
-            {!is440 &&
-              <>
+            {/* {!is440 &&
+              <> */}
                 <div>
-                  {`Swap assets and options fully liquidly powered by our integration, the `}
-                  <PillText>Uniswap v3</PillText>
+                  Immerse yourself in a thrilling financial revolution powered by our integration with <PillText>Uniswap v3</PillText> - the reigning champion of Ethereum-based decentralized exchanges. Embrace complete autonomy with the ability to seamlessly swap assets and options, fully liquid, like never before.                  
                 </div>
-                <div>largest decentralized exchange on Ethereum</div>
-              </>
-            }
-            {is440 &&
+              {/* </>
+            } */}
+            {/* {is440 &&
               <>
                 <div>
                   {`Swap assets and options fully liquidly powered by our integration, the `}
                   <PillText>Uniswap v3</PillText>
                   {` largest decentralized exchange on Ethereum`}
                 </div>
               </>
-            }
+            } */}
           </div>
           <div className="hovering-arrow-container">
             <img src={`/img/new-home-page/hovering-arrow.svg`} alt="hovering-arrow" className="hovering-arrow"/>
@@ -103,7 +101,7 @@ const DemoPage = () => {
                 onOpenChange={setOptionMenuOpen}
               />
             </div>
-            <img src={`/img/new-home-page/demo-placeholder.png`}  alt="demo placeholder" />
+            <img src={`/img/new-home-page/interactive-demo.png`}  alt="demo placeholder" />
             <Button className="explode-button" onClick={() => explode()}>Mint It!</Button>
             <div className="demo-interactive-details">
               <div className="demo-interactive-details-left">
@@ -153,8 +151,8 @@ const VideoDialog = ({trigger}) => (
 const OptionsPopover = ({handleOptionTypeChange, title, onOpenChange, open}) => (
   <Popover.Root onOpenChange={onOpenChange} open={open}>
     <Popover.Trigger asChild>
-      <div>
-        <span className="select-trigger">{title}</span>
+      <div className="select-trigger">
+        <span className="select-trigger-title">{title}</span>
         <img className="select-arrow" src={`/img/new-home-page/demo-dropdown-arrow.svg`}  alt="dropdown arrow" />
       </div>
     </Popover.Trigger>

src/components/NewHomePage/DemoPage/Select.css

@@ -1,4 +1,8 @@
 .select-trigger {
+  cursor: pointer;
+}
+
+.select-trigger-title {
   background-color: rgb(0,0,0,0);
   border: none;
   font-size: 36px;

src/components/NewHomePage/FAQPage/FAQPage.css

@@ -69,7 +69,7 @@
 }
 
 .accordion-trigger[data-state='open'] > .faq-arrow-container .faq-arrow {
-  animation: bounce 2000ms infinite; 
+  animation: faqbounce 2000ms infinite; 
 }
 
 /* Content */
@@ -90,7 +90,7 @@
   100% { transform: rotate(0deg)} 
 }
 
-@keyframes bounce { 
+@keyframes faqbounce { 
   0% { transform: translateX(0); } 
   50% { transform: translateX(-10px); } 
   100% { transform: translateX(0); } 

src/components/NewHomePage/LoadingScreen/LoadingScreen.css

@@ -17,35 +17,52 @@
 }
 
 .curtain-left {
-  animation: swipe-left 2000ms linear forwards;
-  background-image: url("/img/loading-curtain-left.svg");
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: top right;
-  background-size: 100%;
+  animation: swipe-left 1500ms linear forwards;
+
+	width: 100vw;
+  height: 80vh;
+  background-color: #4E14D0;
+  transform:skew(315deg);
+  position: absolute;
+  right: 39vh;
+  top: 0;
+
+}
+
+.curtain-right-base {
+  animation: swipe-right 1500ms linear forwards;
+
+  width: 100vw;
+  height: 21vh;
+  background-color: #4E14D0;
+  position: absolute;
+  top: 79vh;
+  border: none;
 
 }
 
-.curtain-right {
-  animation: swipe-right 2000ms linear forwards;
-  background-image: url("/img/loading-curtain-right.svg");
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: top right;
-  background-size: 100% 100%;
+.curtain-right-top {
+  animation: swipe-right 1500ms linear forwards;
+
+  position: absolute;
+  right: 0;
+  width: 0;
+  height: 0;
+  border-bottom: 80vh solid #4E14D0;
+  border-left: 80vh solid transparent
 }
 
 @keyframes swipe-left {
   0% {
-    transform: translate(0, 0);
+    transform: translate(0, 0) skew(315deg);
   }
 
-  50% {
-    transform: translate(0, 0);
+  75% {
+    transform: translate(0, 0) skew(315deg);
   }
 
   100% {
-    transform: translate(-100%, -40%);
+    transform: translate(-100%, -40%) skew(315deg);
   }
 }
 
@@ -54,7 +71,7 @@
     transform: translate(0, 0);
   }
 
-  50% {
+  75% {
     transform: translate(0, 0);
   }
 

src/components/NewHomePage/LoadingScreen/LoadingScreen.jsx

@@ -9,7 +9,8 @@ const LaunchPage = () => {
         <img src={`/img/logo-dark.svg`} alt="logo" className="loading-logo"/>
       </div>
       <div className="curtain curtain-left"/>
-      <div className="curtain curtain-right"/>
+      <div className="curtain curtain-right-base"/>
+      <div className="curtain curtain-right-top"/>
     </div>
   )
 }

src/components/NewHomePage/PartnerPage/PartnerPage.jsx

@@ -7,15 +7,15 @@ const PartnerPage = () => {
   const investors = [
     "gumi-crypos",
     "uniswap",
-    "zee-drime-capital",
-    "sevenx",
-    "hailstone",
     "coinbase",
     "jane-street",
-    "big-brain",
-    "mh",
-    "divergence",
     "blizzard",
+    "hailstone",
+    "sevenx",
+    "divergence",
+    "zee-drime-capital",
+    "mh",
+    "big-brain",
   ];
 
   return (

src/components/NewHomePage/SecurityPage/SecurityPage.css

@@ -56,10 +56,6 @@ h4 {
   text-transform: uppercase;
 }
 
-.abdk-icons {
-  display: flex;
-}
-
 .arrow-container {
   display: flex;
   justify-content: center;

src/components/NewHomePage/SecurityPage/SecurityPage.jsx

@@ -63,11 +63,6 @@ const SecurityPage = () => {
             <p className="no-break">standards for </p>
             <p className="no-break">platform security</p>
           </div>
-          <div className="abdk-icons">
-            <AbdkIcon />
-            <AbdkIcon />
-            <AbdkIcon />
-          </div>
           <div className="arrow-container">
             <div className="arrow hovering-arrow">
               <ArrowIcon />
@@ -100,40 +95,17 @@ const SecurityPage = () => {
             </Tabs.List>
             <Tabs.Content className="tabs-content" value="tab1">
               {/* <p className="text"> */}
-                Using simulations and agent-based modeling, we stress-tested and
-                fine-tuned parameters to revolutionize our understanding of its
-                economic dynamics. This comprehensive approach identified
-                vulnerabilities and ensured stability under different market
-                conditions. Our economic audit sets us apart, inspiring
-                confidence among users and investors. With a solid foundation,
-                our protocol thrives, attracting a growing community that values
-                its resilience.
+              Employing cutting-edge tools, frameworks, and renowned security firms, we perform stringent audits on our blockchain smart contracts. Our approach integrates modern technologies with industry-best practices to scrutinize and optimize these contracts. The use of such avant-garde resources facilitates thorough audit processes, strengthening the integrity of our blockchain. Consequently, our resilient smart contracts are backed by rigorous audits, raising the bar for blockchain security and instilling unparalleled confidence among our users.
               {/* </p> */}
             </Tabs.Content>
             <Tabs.Content className="tabs-content" value="tab2">
               {/* <p className="text"> */}
-                We have revolutionized security standards by conducting holistic
-                audits of both our frontend and backend systems. By thoroughly
-                examining every aspect of our protocol, we ensure comprehensive
-                protection. This approach goes beyond just smart contract
-                security, encompassing the entire system.Our diligent audits
-                address vulnerabilities in both frontend and backend components,
-                fortifying our protocol against potential risks. As a result, we
-                have set a new benchmark for security, instilling trust and
-                confidence among our users.
+              Implementing revolutionary security measures, we conduct exhaustive audits on our frontend and backend systems. Through rigorous scrutiny of our entire protocol, we deliver all-encompassing protection. Our method extends beyond mere smart contract security, covering the full system scope. Our diligent audits target and address vulnerabilities in frontend and backend elements, bolstering our protocol against possible risks. Consequently, we’ve established a new gold standard for security, fostering unshakeable trust among our users.
               {/* </p> */}
             </Tabs.Content>
             <Tabs.Content className="tabs-content" value="tab3">
               {/* <p className="text"> */}
-                Our protocol's resilience has been greatly strengthened through
-                an in-depth economic audit. Using simulations and agent-based
-                modeling, we stress-tested and fine-tuned parameters to
-                revolutionize our understanding of its economic dynamics. This
-                comprehensive approach identified vulnerabilities and ensured
-                stability under different market conditions. Our economic audit
-                sets us apart, inspiring confidence among users and investors.
-                With a solid foundation, our protocol thrives, attracting a
-                growing community that values its resilience.
+              Harnessing advanced simulations and agent-based modeling, we've meticulously optimized parameters to redefine economic dynamics. Our comprehensive approach unearths vulnerabilities, fortifying stability in varied market conditions. Our distinctive economic audit cultivates trust among users and investors. Built on a robust foundation, our protocol flourishes, attracting a community that values resilience.
               {/* </p> */}
             </Tabs.Content>
           </Tabs.Root>

src/components/NewHomePage/TitlePage/TitlePage.css

@@ -19,7 +19,7 @@
   padding-top: 58px;
   display: flex;
   justify-content: space-between;
-  animation: fade-in-title 2600ms linear;
+  animation: fade-in-title 2300ms linear;
 }
 
 @keyframes fade-in-title {
@@ -38,12 +38,11 @@
 
 .title-page-info {
   margin-left: 96px;
-  margin-top: 37px;
 }
 
 .title {
   font-family: Alice;
-  font-size: 76px;
+  font-size: 92px;
   font-weight: 400;
   color: #4E14D0;
   line-height: 100%;
@@ -63,9 +62,10 @@
   margin-right: 5px;
 }
 
-.screenshot-container {
+.app-screenshot {
+  box-shadow: 0px 4px 180px 3px rgba(0, 0, 0, 0.20);
   max-width: 735px;
-  width: 55vw;
+  width: 40vw;
   height: auto;
 }
 
@@ -77,20 +77,31 @@
 }
 
 @media screen and (max-width: 1400px) { 
+  .app-screenshot {
+    width: 35vw;
+  }
   .screenshot-container { 
-    margin-top: 80px;
-    width: 40vw; 
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
   } 
+}
 
-  .title-page-flex {
-    padding-top: 0px;
+@media screen and (max-width: 1200px) { 
+  .title {
+    font-size: 76px;
   }
+
 }
 
 @media screen and (max-width: 1050px) { 
   .screenshot-container { 
     display: none;
   } 
+
+  .title {
+    font-size: 92px;
+  }
 }
 
 @media screen and (max-width: 1024px) { 
@@ -99,13 +110,16 @@
   }
 }
 
+@media screen and (max-width: 815px) { 
+  .title {
+    font-size: 86px;
+  }
+}
+
 @media screen and (max-width: 767px) { 
   .title-page {
     height: calc(100vh - 106px);
-  }
-
-  .title {
-    font-size: 48px;
+    min-height: 500px;
   }
 
   .title-page-info {
@@ -121,6 +135,18 @@
   }
 }
 
+@media screen and (max-width: 600px) { 
+  .title {
+    font-size: 64px;
+  }
+}
+
+@media screen and (max-width: 510px) { 
+  .title {
+    font-size: 48px;
+  }
+}
+
 @media screen and (max-width: 405px) { 
   .title {
     font-size: 38px;