adds tcs

Author: avb-is-me

src/components/landing-page-components/parts/landing-page-link.jsx

@@ -1,17 +1,33 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link} from 'react-router-dom';
 
 const LandingPageLink = ({
   href,
   children,
   className = '',
   style = {},
 }) => {
+  const handleClick = (e) => {
+    if (href.startsWith('#')) {
+      e.preventDefault();
+      const targetId = href.substring(1);
+      const targetElement = document.getElementById(targetId);
+      if (targetElement) {
+        targetElement.scrollIntoView({ behavior: 'smooth' });
+      } else {
+        // If the element doesn't exist on the current page, navigate to the home page with the hash
+        //navigate('/' + href);
+        return
+      }
+    }
+  };
+
   return (
     <Link
       to={href}
       className={`text-[#ECECEC] ${className}`}
       style={style}
+      onClick={handleClick}
     >
       {children}
     </Link>

src/components/landing-page-components/sections/landing-page-footer.jsx

@@ -3,7 +3,7 @@ import LandingPageLink from '../parts/landing-page-link';
 import icon from '/static/landing-page/icon.png';
 import logo from '/static/landing-page/logo.png';
 import { useIsMobile } from '../context-providers/mobile-context-provider';
-import { LINK_BLOG, LINK_GITHUB, LINK_LINKEDIN } from '@site/src/constants/landing-page-links-constants';
+import { LINK_BLOG, LINK_GITHUB, LINK_LINKEDIN, LINK_PRIVACY_POLICY, LINK_TERMS_OF_SERVICE } from '@site/src/constants/landing-page-links-constants';
 
 const BACKER_LOGOS_SRC = [
   "/landing-page/techstars.svg",
@@ -65,6 +65,40 @@ const LandingPageFooter = () => {
               >[email protected]</a>
             </div>
           </div>
+          <div
+            className="flex flex-col gap-[1rem] grow"
+          >
+            <div
+              className={isMobile ?
+                "text-[1.25rem] font-medium"
+                :
+                "text-[1.5rem] font-medium"
+              }
+            >
+              Company
+            </div>
+              <a
+                className={isMobile ?
+                  "font-light"
+                  :
+                  "text-[1.125rem] font-light"
+                }
+                href={LINK_TERMS_OF_SERVICE}
+              >
+                Terms of service
+              </a>
+              <a
+                className={isMobile ?
+                  "font-light"
+                  :
+                  "text-[1.125rem] font-light"
+                }
+                href={LINK_PRIVACY_POLICY}
+              >
+                Privacy policy
+              </a>
+            
+          </div>
           <div
             className="flex flex-col grow gap-[0.38rem]"
           >

src/components/landing-page-components/sections/landing-page-header.jsx

@@ -7,9 +7,11 @@ import PrimaryButton from '../parts/landing-page-button-primary';
 import SecondaryButton from '../parts/landing-page-button-secondary';
 import LandingPageLink from '../parts/landing-page-link';
 import { useIsMobile } from '../context-providers/mobile-context-provider';
-import { LINK_GET_STARTED, LINK_HOW_IT_WORKS, LINK_PRICING, LINK_DOCS, LINK_BLOG, LINK_SIGN_IN } from '../../../constants/landing-page-links-constants';
+import { LINK_GET_STARTED, LINK_HOW_IT_WORKS, LINK_PRICING, LINK_DOCS, LINK_BLOG, LINK_SIGN_IN, HOME_PAGE } from '../../../constants/landing-page-links-constants';
 
-const LandingPageHeader = () => {
+const LandingPageHeader = ({
+  notFromHome = false
+}) => {
   const history = useHistory();
   const isMobile = useIsMobile();
 
@@ -53,9 +55,9 @@ const LandingPageHeader = () => {
           style={{
             borderBottom: "1px solid #3741AC",
           }}
-          href={LINK_HOW_IT_WORKS}
+          href={notFromHome ? HOME_PAGE : LINK_HOW_IT_WORKS}
         >
-          How it works
+          {notFromHome ? "Home" : "How it works"}
         </LandingPageLink>
 
         <LandingPageLink
@@ -109,24 +111,24 @@ const LandingPageHeader = () => {
     </div>
   </>
 
-const scrollToHeader = (headerId) => {
-  const headerElement = document.getElementById(headerId);
-  if (headerElement) {
-    headerElement.scrollIntoView({ behavior: 'smooth' });
-  }
-};
+  const scrollToHeader = (headerId) => {
+    const headerElement = document.getElementById(headerId);
+    if (headerElement) {
+      headerElement.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
 
 
   const desktopLinks = <>
     <div
       className={`flex gap-[1.5rem] items-center`}
     >
-      <a style={{ color: 'white' }}
-       onClick={() => scrollToHeader('features')}
-      >
-        How it works
-      </a>
-      
+     <LandingPageLink
+          href={notFromHome ? HOME_PAGE : LINK_HOW_IT_WORKS}
+        >
+          {notFromHome ? "Home" : "How it works"}
+    </LandingPageLink>
+
 
 
       <LandingPageLink

src/constants/landing-page-links-constants.ts

@@ -7,4 +7,7 @@ export const LINK_SIGN_IN = 'https://dev-docs.io';
 export const LINK_BOOK_MEETING = 'https://dub.sh/devdocs';
 export const LINK_CHAT_WITH_FOUNDERS = 'https://dub.sh/devdocs';
 export const LINK_LINKEDIN = 'https://www.linkedin.com/company/dev-docs';
-export const LINK_GITHUB = 'https://github.com/team-dev-docs';
+export const LINK_GITHUB = 'https://github.com/team-dev-docs';
+export const HOME_PAGE = '/';
+export const LINK_PRIVACY_POLICY = 'https://app.termly.io/document/privacy-policy/f93b0777-1325-40b0-b83a-e8f1fc82c82c';
+export const LINK_TERMS_OF_SERVICE = 'https://app.termly.io/document/terms-of-use-for-saas/2089f33f-b962-4e79-b2c2-5d2832abb223';

src/pages/pricing/index.jsx

@@ -18,7 +18,7 @@ const PricingPage = () => {
       <div
         className={`w-full font-sans bg-repeat-y bg-cover bg-landing-page text-[#ECECEC] flex flex-col ${isMobile ? 'gap-4' : 'gap-[15.62rem]'}`}
       >
-        <LandingPageHeader />
+        <LandingPageHeader notFromHome={true} />
 
         <PricingCards />