add mobile res + improve layout

apps/warp-protocol-landing/src/animated-display/AnimatedDisplay.module.sass

@@ -4,3 +4,8 @@
   align-items: center
   // height: 100vh
   padding: 50px
+
+
+@media (max-width: 768px)
+  .container
+    padding: 20px

apps/warp-protocol-landing/src/animated-display/AnimatedText.module.sass

@@ -29,3 +29,18 @@
     opacity: 1
   100%
     opacity: 0
+
+@media (max-width: 768px)
+  .container
+    width: 100%
+    height: 100%
+
+  .label
+    font-size: 16px
+
+  .heading
+    font-size: 20px
+    margin: 20px 0
+
+  .text
+    font-size: 14px

apps/warp-protocol-landing/src/animated-display/WaveSlider.module.sass

@@ -19,3 +19,10 @@
   height: 20px
   width: 24px
   transition: left 0.5s ease-in-out
+
+.disabled
+  opacity: 0.6
+
+@media (max-width: 768px)
+  .tick
+    height: 120px

apps/warp-protocol-landing/src/animated-display/WaveSlider.tsx

@@ -19,7 +19,7 @@ const WaveSlider: React.FC<Props> = ({ currentTick, setCurrentTick }) => {
             key={idx}
             className={`${styles.tick} ${
               idx === currentTick ? styles.active : ''
-            }`}
+            } ${idx > 2 ? styles.disabled : ''}`}
           ></div>
         ))}
       <TickIcon className={styles.tickIcon} style={{ left: tickPosition }} />

apps/warp-protocol-landing/src/card-stack/CardStack.module.sass

@@ -1,9 +1,10 @@
 .card-stack
   position: relative
-  width: 653px
-  height: 250px
+  width: 100%
+  height: 100%
 
 .card
+  width: 100%
   position: absolute
   z-index: 1
   transform-origin: center bottom

apps/warp-protocol-landing/src/card-stack/CardStack.tsx

@@ -94,10 +94,11 @@ const CardStack: React.FC<CardStackProps> = (props) => {
         </CSSTransition>
       </TransitionGroup>
       {/* Thirdmost card */}
-      <div
-        className={`${styles.card} ${styles['card-third']}`}
-      >
-        <Frame {...cards[(currentCardIndex + 2) % cards.length]} isExecuted={false} />
+      <div className={`${styles.card} ${styles['card-third']}`}>
+        <Frame
+          {...cards[(currentCardIndex + 2) % cards.length]}
+          isExecuted={false}
+        />
       </div>
     </div>
   );

apps/warp-protocol-landing/src/frame/Frame.module.sass

@@ -6,7 +6,7 @@
   flex-direction: column
   gap: 37px
   padding: 28px
-  width: 653px
+  width: 100%
 
 .flexRow
   display: flex
@@ -77,4 +77,13 @@
   // height: 14px
   // width: 14px
 
+@media (max-width: 768px)
+  .textLarge
+    font-size: 20px
+
+  .frame
+    gap: 24px
+    padding: 20px
 
+  .text
+    font-size: 14px

apps/warp-protocol-landing/src/pages/home/Home.module.sass

@@ -48,10 +48,41 @@
 
 .card_stack
   margin: 72px auto
+  width: 653px !important
+  height: 250px !important
 
 .bold
   color: var(--text-color-primary)
 
-
 .animated_display
-  margin: 200px 240px
+  margin: 200px 240px
+
+@media (max-width: 768px)
+  .cards
+    margin-top: 140px
+
+    .title
+      width: 100%
+      font-size: 32px !important
+      line-height: 40px !important
+      justify-content: center
+
+    .description_top
+      width: 100% !important
+      padding: 0 20px !important
+      font-size: 14px !important
+
+    .description_below
+      width: 100% !important
+      padding: 0 20px !important
+      font-size: 14px !important
+
+    .card_stack
+      margin: 72px auto
+      width: 80% !important
+      height: 200px !important
+
+  .animated_display
+    height: 400px
+    flex-direction: column
+    margin: 120px 20px !important

apps/warp-protocol-landing/src/pages/home/features/MobileFeatures.module.sass

@@ -1,24 +1,23 @@
 .root
-  // position: relative
   display: flex
-  height: auto
   flex-direction: column
-  justify-content: center
-  align-items: flex-start
-  padding-top: 100px
-
-.watch
-  margin-bottom: 32px
+  padding: 20px
+  width: 100%
+  align-items: center
 
 .feature
   background: rgba(47, 51, 57, 0.6)
   backdrop-filter: blur(50px)
   border-radius: 16px
   padding: 20px
-  width: 300px
+  width: 100%
   cursor: pointer
+  position: relative
+  transition: height 0.3s ease-out, padding 0.3s ease-in-out
+  overflow: hidden
+  height: 70px
 
-  &:not(&:last-child)
+  &:not(&:first-child)
     margin-top: 16px
 
   > .description
@@ -32,41 +31,90 @@
     margin-bottom: 8px
 
 .selected_feature
+  height: 160px
   background: #D1E3FB
 
   > .description
     color: #292C2E !important
 
   > .heading
-    color: #292C2E !important
+    color: rgba(41, 44, 46, 0.40) !important
 
-.nav
-  margin-left: 32px
+  > .toggle
+    background: #B4C6DD
+
+    .chevron
+      transform: rotate(180deg)
+
+      path
+        fill: #292C2E !important
 
 .footer
-  margin-top: 40px
-  width: 300px
+  color: #292C2E
+  margin-top: 12px
 
   > .label
     margin-bottom: 8px
 
   > .description
     line-height: 20px
-    height: 100px
     display: flex
     flex-direction: column
     align-items: flex-end
 
 .slide
-  height: auto
-  margin-top: 20px
-  width: 600px
-  margin-left: 16px
+  height: 100%
+  width: 925px
   z-index: 1 !important
 
 .big_background
   position: absolute
   z-index: -1
   top: 380px
-  height: 600px
+  height: 1000px
   left: 35%
+
+.toggle
+  height: 32px
+  width: 32px
+  position: absolute
+  right: 20px
+  top: 14px
+  display: flex
+  padding: 20px 32px
+  justify-content: center
+  align-items: center
+  border-radius: 72px
+  background: #40454D
+
+  .chevron
+    width: 20px !important
+    height: 20px !important
+
+    path
+      fill: #DFE2E1 !important
+
+.title
+  display: flex
+  font-weight: 600
+  text-align: center
+  font-size: 28px
+  color: #DFE2E1
+
+.description_title
+  font-size: 14px
+  margin-top: 32px
+  margin-bottom: 32px
+  width: 100%
+  text-align: center
+  color: rgba(223, 226, 225, 0.40)
+
+.bold
+  color: var(--text-color-primary)
+
+.sdk_link
+  color: rgba(41, 44, 46, 0.40) !important
+
+@media (max-width: 768px)
+  .slide
+    z-index: 0 !important

apps/warp-protocol-landing/src/pages/home/features/MobileFeatures.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { UIElementProps } from '@terra-money/apps/components';
 import React, { forwardRef, useState } from 'react';
 import styles from './MobileFeatures.module.sass';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { Link } from '../../../link';
 
 type Feature = {
@@ -51,6 +52,7 @@ const features: Feature[] = [
           a few minutes.
         </span>
         <Link
+          className={styles.sdk_link}
           onClick={() => {
             window.open('https://github.com/terra-money/warp-sdk');
           }}
@@ -67,49 +69,50 @@ type MobileFeaturesContentProps = UIElementProps & {};
 export const MobileFeaturesContent = forwardRef(
   (props: MobileFeaturesContentProps, ref: React.Ref<HTMLDivElement>) => {
     const { className } = props;
-    const [selectedFeature, setSelectedFeature] = useState<Feature>(
-      features[0]
+    const [expandedFeatureId, setExpandedFeatureId] = useState<number | null>(
+      0
     );
 
+    const isExpanded = (id: number) => id === expandedFeatureId;
+
     return (
       <div className={classNames(styles.root, className)} ref={ref}>
-        <img
-          alt=""
-          src="images/BackgroundBigBall.png"
-          className={styles.big_background}
-        />
-        <div className={styles.nav}>
-          <Text variant="label" className={styles.watch}>
-            Features to watch
-          </Text>
-          {features.map((feature) => (
-            <div
-              className={classNames(
-                styles.feature,
-                feature.id === selectedFeature.id && styles.selected_feature
-              )}
-              onClick={() => setSelectedFeature(feature)}
-            >
-              <Text variant="label" className={styles.heading}>
-                {feature.heading}
-              </Text>
-              <Text variant="text" className={styles.description}>
-                {feature.description}
-              </Text>
+        <div className={styles.title}>Generic way of composing logic</div>
+        <div className={styles.description_title}>
+          Using Warp, developers (and their users) can queue{' '}
+          <span className={styles.bold}>
+            any transaction to be executed automatically in the future
+          </span>{' '}
+          based on any available on-chain data.
+        </div>
+        {features.map((feature) => (
+          <div
+            key={feature.id}
+            className={classNames(
+              styles.feature,
+              isExpanded(feature.id) && styles.selected_feature
+            )}
+            onClick={() =>
+              setExpandedFeatureId(isExpanded(feature.id) ? null : feature.id)
+            }
+          >
+            <div className={styles.toggle}>
+              <KeyboardArrowDownIcon className={styles.chevron} />
             </div>
-          ))}
-          <div className={styles.footer}>
-            <Text variant="text" className={styles.label}>
-              {selectedFeature.description}
+
+            <Text variant="label" className={styles.heading}>
+              {feature.heading}
             </Text>
-            <Text variant="label" className={styles.description}>
-              {selectedFeature.footer}
+            <Text variant="text" className={styles.description}>
+              {feature.description}
             </Text>
+            {isExpanded(feature.id) && (
+              <Text variant="label" className={styles.footer}>
+                {feature.footer}
+              </Text>
+            )}
           </div>
-        </div>
-        <div className={styles.slide}>
-          <img alt="" className={styles.slide} src={selectedFeature.imageUrl} />
-        </div>
+        ))}
       </div>
     );
   }