team-dev-docs · tim-dev-docs · Oct 2, 2024 · Oct 2, 2024 · Oct 2, 2024 · Oct 2, 2024
diff --git a/src/components/landing-page-components/context-providers/mobile-context-provider.jsx b/src/components/landing-page-components/context-providers/mobile-context-provider.jsx
@@ -4,10 +4,13 @@ const MobileContext = createContext(true);
 
 export const MobileContextProvider = ({ children }) => {
   const [isMobile, setIsMobile] = useState(true);
+  const [isTablet, setIsTablet] = useState(false);
 
   useEffect(() => {
+    if (!window) return;
     const handleResize = () => {
       setIsMobile(window.innerWidth < 896);
+      setIsTablet(window.innerWidth < 1024);
     };
     handleResize();
     window.addEventListener('resize', handleResize);
@@ -18,7 +21,7 @@ export const MobileContextProvider = ({ children }) => {
   }, []);
 
   return (
-    <MobileContext.Provider value={isMobile}>
+    <MobileContext.Provider value={{isMobile, isTablet}}>
       {children}
     </MobileContext.Provider>
   );

diff --git a/src/components/landing-page-components/parts/landing-page-card.jsx b/src/components/landing-page-components/parts/landing-page-card.jsx
@@ -5,7 +5,7 @@ const LandingPageCard = ({
   className = '',
   children,
 }) => {
-  const isMobile = useIsMobile();
+  const { isMobile } = useIsMobile();
 
   return (
     <div

diff --git a/src/components/landing-page-components/parts/landing-page-dropdown.jsx b/src/components/landing-page-components/parts/landing-page-dropdown.jsx
@@ -8,7 +8,7 @@ const LandingPageDropdown = ({
   description,
   borderBottom,
 }) => {
-  const isMobile = useIsMobile();
+  const { isMobile } = useIsMobile();
   const [isExpanded, setIsExpanded] = useState(false);
 
   const toggleExpand = () => {

diff --git a/src/components/landing-page-components/parts/landing-page-feature-card.jsx b/src/components/landing-page-components/parts/landing-page-feature-card.jsx
@@ -7,7 +7,7 @@ const LandingPageFeatureCard = ({
   title,
   description,
 }) => {
-  const isMobile = useIsMobile();
+  const { isMobile } = useIsMobile();
 
   return (
     <CardSpotlight

diff --git a/src/components/landing-page-components/parts/landing-page-quote-card.jsx b/src/components/landing-page-components/parts/landing-page-quote-card.jsx
@@ -9,7 +9,7 @@ const LandingPageQuoteCard = ({
 }) => {
   const cardRef = useRef(null);
   const [carWidth, setCardWidth] = useState(0);
-  const isMobile = useIsMobile();
+  const { isMobile } = useIsMobile();
 
   useEffect(() => {
     const handleResize = () => {

diff --git a/src/components/landing-page-components/parts/pricing-card.jsx b/src/components/landing-page-components/parts/pricing-card.jsx
@@ -11,7 +11,7 @@ const PricingCard = ({
   buttonTitle,
   href
 }) => {
-  const isMobile = useIsMobile();
+  const { isMobile } = useIsMobile();
 
   return (
     <div

diff --git a/src/components/landing-page-components/sections/landing-page-call-to-action.jsx b/src/components/landing-page-components/sections/landing-page-call-to-action.jsx
@@ -8,7 +8,7 @@ import { LINK_CHAT_WITH_FOUNDERS, LINK_GET_STARTED } from '@site/src/constants/l
 
 const LandingPageCallToAction = () => {
   const history = useHistory();
-  const isMobile = useIsMobile();
+  const { isMobile } = useIsMobile();
   return (
     <LandingPageCard>
       <div

diff --git a/src/components/landing-page-components/sections/landing-page-community.jsx b/src/components/landing-page-components/sections/landing-page-community.jsx
@@ -3,7 +3,7 @@ import PrimaryButtonWhiteText from '../parts/landing-page-button-primary-white-t
 import { useIsMobile } from '../context-providers/mobile-context-provider';
 
 const LandingPageCommunityCard = () => {
-  const isMobile = useIsMobile();
+  const { isMobile } = useIsMobile();
 
   return (
     <div

diff --git a/src/components/landing-page-components/sections/landing-page-demo-card.jsx b/src/components/landing-page-components/sections/landing-page-demo-card.jsx
@@ -4,7 +4,7 @@ import LandingPageLink from '../parts/landing-page-link';
 import { useIsMobile } from '../context-providers/mobile-context-provider';
 
 const LandingPageDemoCard = () => {
-  const isMobile = useIsMobile();
+  const { isMobile } = useIsMobile();
 
   return (
     <LandingPageCard>

diff --git a/src/components/landing-page-components/sections/landing-page-end.jsx b/src/components/landing-page-components/sections/landing-page-end.jsx
@@ -11,7 +11,7 @@ const BACKER_LOGOS_SRC = [
 ];
 
 const LandingPageEnd = () => {
-  const isMobile = useIsMobile();
+  const { isMobile } = useIsMobile();
 
   return (
     <div
@@ -23,7 +23,7 @@ const LandingPageEnd = () => {
     >
       <div
         className={isMobile ?
-          "text-[2rem] font-medium text-center tracking-[-0.075rem] flex flex-wrap items-center justify-center w-full mb-[3.46rem]"
+          "text-[2rem] font-medium text-center tracking-[-0.075rem] flex flex-wrap gap-[1rem] items-center justify-center w-full mb-[3.46rem]"
           :
           "text-[2.5rem] font-medium text-center tracking-[-0.075rem] flex flex-wrap gap-[1.25rem] items-center justify-center w-full mb-[4.69rem]"
         }

diff --git a/src/components/landing-page-components/sections/landing-page-faq.jsx b/src/components/landing-page-components/sections/landing-page-faq.jsx
@@ -19,7 +19,7 @@ const FAQS = [
 ];
 
 const LandingPageFaqCard = () => {
-  const isMobile = useIsMobile();
+  const { isMobile } = useIsMobile();
 
   return (
     <LandingPageCard>

diff --git a/src/components/landing-page-components/sections/landing-page-features-card.jsx b/src/components/landing-page-components/sections/landing-page-features-card.jsx
@@ -41,7 +41,7 @@ const FEATURES = [
 ];
 
 const LandingPageFeaturesCard = () => {
-  const isMobile = useIsMobile();
+  const { isMobile } = useIsMobile();
   const history = useHistory();
   return (
     <LandingPageCard

diff --git a/src/components/landing-page-components/sections/landing-page-footer.jsx b/src/components/landing-page-components/sections/landing-page-footer.jsx
@@ -12,7 +12,7 @@ const BACKER_LOGOS_SRC = [
 ];
 
 const LandingPageFooter = () => {
-  const isMobile = useIsMobile();
+  const { isMobile } = useIsMobile();
 
   return (
     <div
@@ -97,7 +97,7 @@ const LandingPageFooter = () => {
               >
                 Privacy policy
               </a>
-            
+
           </div>
           <div
             className="flex flex-col grow gap-[0.38rem]"

diff --git a/src/components/landing-page-components/sections/landing-page-has-your-back.jsx b/src/components/landing-page-components/sections/landing-page-has-your-back.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useIsMobile } from '../context-providers/mobile-context-provider';
 
 const LandingPageHasYourBack = () => {
-  const isMobile = useIsMobile();
+  const { isMobile } = useIsMobile();
 
   return (
     <div

diff --git a/src/components/landing-page-components/sections/landing-page-header.jsx b/src/components/landing-page-components/sections/landing-page-header.jsx
@@ -13,7 +13,7 @@ const LandingPageHeader = ({
   notFromHome = false
 }) => {
   const history = useHistory();
-  const isMobile = useIsMobile();
+  const { isMobile } = useIsMobile();
 
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 

diff --git a/src/components/landing-page-components/sections/landing-page-initial.jsx b/src/components/landing-page-components/sections/landing-page-initial.jsx
@@ -16,7 +16,7 @@ const BULLETS = [
 
 const LandingPageInitial = () => {
   const history = useHistory();
-  const isMobile = useIsMobile();
+  const { isTablet } = useIsMobile();
 
   return (
     <div
@@ -25,16 +25,16 @@ const LandingPageInitial = () => {
       <LandingPageHeader />
 
       <img
-        className={isMobile ?
-          'w-full p-8 m-0'
+        className={isTablet ?
+          "w-full p-8 m-0"
           :
-          'max-w-[50vw] max-h-[50vh] w-auto h-auto absolute bottom-0 right-[1rem] z-0 m-0'
+          "hidden"
         }
         src="/landing-page/robot.png"
       />
 
       <div
-        className={isMobile ?
+        className={isTablet ?
           "max-w-[64rem] text-[2.5rem] leading-[2.5rem] font-extrabold z-10 relative mt-[1.56rem] mx-4 text-center"
           :
           "max-w-[64rem] text-[5rem] leading-[5rem] font-extrabold z-10 relative mt-[9.38rem] ml-[7.19rem]"
@@ -57,73 +57,96 @@ const LandingPageInitial = () => {
       </div>
 
       <div
-        className={isMobile ?
-          "relative z-10 mx-4 my-[2.56rem]"
-          :
-          "relative z-10 ml-[7.19rem] my-[3.5rem] text-[1.125rem] max-w-[33rem]"
-        }
-        style={{
-          color: "rgba(236, 236, 236, 0.85)",
-          fontFeatureSettings: "'liga' off, 'clig' off",
-        }}
+        className="flex justify-between w-full h-full"
       >
-        Use AI to effortlessly generate context-aware, minimum viable documentation in <code className="bg-[#464646]">.md</code> from your codebase and existing docs.  With Dev-Docs, ensure your documentation and content stay accurate and up to date.
-      </div>
+        <div
+          className="shrink-0"
+        >
+          <div
+            className={isTablet ?
+              "relative z-10 mx-4 my-[2.56rem]"
+              :
+              "relative z-10 ml-[7.19rem] my-[3.5rem] text-[1.125rem] max-w-[33rem]"
+            }
+            style={{
+              color: "rgba(236, 236, 236, 0.85)",
+              fontFeatureSettings: "'liga' off, 'clig' off",
+            }}
+          >
+            Use AI to effortlessly generate context-aware, minimum viable documentation in <code className="bg-[#464646]">.md</code> from your codebase and existing docs.  With Dev-Docs, ensure your documentation and content stay accurate and up to date.
+          </div>
 
-      <div
-        className={isMobile ?
-          "relative z-10 mx-4 my-[2.56rem]"
-          :
-          "relative z-10 ml-[7.19rem] my-[3.5rem] text-[1.125rem] max-w-[33rem]"
-        }
-        style={{
-          color: "rgba(236, 236, 236, 0.85)",
-          fontFeatureSettings: "'liga' off, 'clig' off",
-        }}
-      >
-        {BULLETS.map((bullet, index) => (
           <div
-            key={`landing-page-initial-bullets-${index}`}
-            className="flex items-center gap-[1rem]"
+            className={isTablet ?
+              "relative z-10 mx-4 my-[2.56rem]"
+              :
+              "relative z-10 ml-[7.19rem] my-[3.5rem] text-[1.125rem] max-w-[33rem]"
+            }
+            style={{
+              color: "rgba(236, 236, 236, 0.85)",
+              fontFeatureSettings: "'liga' off, 'clig' off",
+            }}
           >
-            <img
-              className="w-[1.25rem] h-[1.25rem]"
-              src="/landing-page/rocket-bullet.svg"
-            />
-            {bullet}
+            {BULLETS.map((bullet, index) => (
+              <div
+                key={`landing-page-initial-bullets-${index}`}
+                className="flex items-center gap-[1rem]"
+              >
+                <img
+                  className="w-[1.25rem] h-[1.25rem]"
+                  src="/landing-page/rocket-bullet.svg"
+                />
+                {bullet}
+              </div>
+            ))}
           </div>
-        ))}
-      </div>
 
-      <div
-        className={isMobile ?
-          "relative z-10 w-full flex flex-col gap-[1.56rem] items-center"
-          :
-          "relative z-10 ml-[7.19rem] flex gap-[1rem]"
-        }
-      >
-        <PrimaryButton
-          className={isMobile ?
-            "px-[1.5rem] py-[0.75rem] text-[1.125rem]"
-            :
-            ""
-          }
-          onClick={() => history.push(LINK_GET_STARTED)}
-        >
-          Get started for free
-        </PrimaryButton>
+          <div
+            className={isTablet ?
+              "relative z-10 w-full flex flex-col gap-[1.56rem] items-center"
+              :
+              "relative z-10 ml-[7.19rem] flex gap-[1rem]"
+            }
+          >
+            <PrimaryButton
+              className={isTablet ?
+                "px-[1.5rem] py-[0.75rem] text-[1.125rem]"
+                :
+                ""
+              }
+              onClick={() => history.push(LINK_GET_STARTED)}
+            >
+              Get started for free
+            </PrimaryButton>
 
-        <SecondaryButton
-          className={isMobile ?
-            "px-[1.5rem] py-[0.75rem] text-[1.125rem]"
+            <SecondaryButton
+              className={isTablet ?
+                "px-[1.5rem] py-[0.75rem] text-[1.125rem]"
+                :
+                ""
+              }
+              onClick={() => window.open(LINK_BOOK_MEETING, '_blank')}
+            >
+              Chat with us
+            </SecondaryButton>
+          </div>
+        </div>
+
+        <div
+          className={isTablet ?
+            "hidden"
             :
-            ""
+            "z-0 m-0 shrink grow ml-[-2rem] max-h-full relative"
           }
-          onClick={() => window.open(LINK_BOOK_MEETING, '_blank')}
         >
-          Chat with us
-        </SecondaryButton>
+          <img
+            className="absolute bottom-0 right-0 m-0 mr-1"
+            src="/landing-page/robot.png"
+          />
+        </div>
+
       </div>
+
     </div>
   );
 };

diff --git a/src/components/landing-page-components/sections/landing-page-integrations-card.jsx b/src/components/landing-page-components/sections/landing-page-integrations-card.jsx
@@ -27,7 +27,7 @@ const INTEGRATIONS = [
 ];
 
 const LandingPageIntegrationsCard = () => {
-  const isMobile = useIsMobile();
+  const { isMobile } = useIsMobile();
 
   const [selectedIndex, setSelectedIndex] = React.useState(0);
 

diff --git a/src/components/landing-page-components/sections/landing-page-quotes.jsx b/src/components/landing-page-components/sections/landing-page-quotes.jsx
@@ -56,7 +56,7 @@ const QUOTES = [
 ];
 
 const LandingPageQuotes = () => {
-  const isMobile = useIsMobile();
+  const { isMobile } = useIsMobile();
 
   return (
     <div
@@ -77,6 +77,7 @@ const LandingPageQuotes = () => {
 
       <InfiniteMovingCards
         items={QUOTES}
+        speed="slow"
       />
 
       {/* <div

diff --git a/src/components/landing-page-components/sections/landing-page-workflow-card.jsx b/src/components/landing-page-components/sections/landing-page-workflow-card.jsx
@@ -26,7 +26,7 @@ const WORDS = [
 ];
 
 const LandingPageWorkflowCard = () => {
-  const isMobile = useIsMobile();
+  const { isMobile } = useIsMobile();
 
   return (
     <LandingPageCard>

diff --git a/src/pages/pricing/index.jsx b/src/pages/pricing/index.jsx
@@ -11,7 +11,7 @@ import PricingCards from '@site/src/components/landing-page-components/sections/
 
 
 const PricingPage = () => {
-  const isMobile = useIsMobile();
+  const { isMobile } = useIsMobile();
 
   return (
     <MobileContextProvider>

diff --git a/static/landing-page/footer-img.png b/static/landing-page/footer-img.png