Merge pull request #18 from mctekk/feat/MR-20

Feat/mr 20

src/app/about-us/page.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import Header from "@/components/organism/header";
+import { Footer } from "@/components/organism/sections/footer";
+import { AboutUsHero } from "@/components/organism/sections/about-us/about-us-hero";
+import { AboutUsOurTeam } from "@/components/organism/sections/about-us/our-team";
+import { AboutUsTeam } from "@/components/organism/sections/about-us/team-members";
+import { GA } from "@/components/atoms/analitiycs";
+import { aboutUsData } from "@/model/api/about-us/data";
+import { ourTeamData } from "@/model/api/our-team/data";
+import { aboutTeamData } from "@/model/api/about-us-team/data";
+export default function page() {
+  return (
+    <>
+      <Header></Header>
+      <GA/>
+      <AboutUsHero data={aboutUsData}></AboutUsHero>
+      <AboutUsOurTeam data={ourTeamData}></AboutUsOurTeam>
+      <AboutUsTeam data={aboutTeamData}></AboutUsTeam>
+      <Footer kind="dark"></Footer>
+    </>
+  );
+}

src/app/globals.css

@@ -91,3 +91,11 @@ body {
   left: 0;
   background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
 }
+
+.d {
+  @apply fill-[#ffffff]
+}
+.inline-svg svg {
+  display: inline;
+  vertical-align: text-bottom;
+}

src/app/pricing/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { GA } from "@/components/atoms/analitiycs";
 import { Footer } from "@/components/organism/sections/footer";
 import { PricingComparison } from "@/components/organism/sections/princing/comparison";
 import { PricingHero } from "@/components/organism/sections/princing/princing-hero";
@@ -11,7 +12,8 @@ export default function page() {
   const handleIsFull = () => setIsFull(!isFull);
   return (
     <div>
-      <PricingHero/>
+      <PricingHero></PricingHero>
+      <GA/>
       <PricingPlans isClicked={isFull} onClick={handleIsFull}></PricingPlans>
       {isFull && <PricingComparison />}
       <PricingQuestions id="Q&A"></PricingQuestions>

src/app/privacy-policy/page.tsx

@@ -0,0 +1,17 @@
+import { Footer } from "@/components/organism/sections/footer";
+import Header from "@/components/organism/header";
+import { GA } from "@/components/atoms/analitiycs";
+import Info from "@/components/organism/sections/privacy-policy/info";
+
+function PrivacyPolicy() {
+  return (
+    <>
+      <GA />
+      <Header/>
+      <Info/>
+      <Footer kind="dark" />
+    </>
+  );
+}
+
+export default PrivacyPolicy;

src/app/terms-of-service/page.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import Header from "@/components/organism/header";
+import { Footer } from "@/components/organism/sections/footer";
+import Terms from "@/components/organism/sections/terms-of-service/terms";
+
+function TermsAndService() {
+  return (
+    <div >
+      <Header/>
+      <Terms/>
+      <Footer kind="dark" />
+    </div>
+  );
+}
+
+export default TermsAndService;

src/app/why-sales-assist/page.tsx

@@ -13,12 +13,14 @@ import { WhySalesAssistCompletingSalesIsPainless } from "@/components/organism/s
 import { Footer } from "@/components/organism/sections/footer";
 import { dataPainless } from "@/model/api/sales-painless/data";
 import { dataSlide } from "@/model/api/simplify-sales";
+import { GA } from "@/components/atoms/analitiycs";
 
 
 export default function page() {
   return (
     <main>
       <Header></Header>
+      <GA/>
       <WhySalesAssistHero data={dataHero}/>
       <Benefits data={dataBenefits}/>
       <HowItWorks data={howData}/>

src/components/atoms/analitiycs/index.tsx

@@ -0,0 +1,19 @@
+import Script from 'next/script';
+
+
+export function GA () {
+    return (
+        <>
+            <Script src='https://www.googletagmanager.com/gtag/js?id=G-YXW1Y5B8CM' strategy="afterInteractive"></Script>
+            <Script id="google-analytics" strategy="afterInteractive">
+                {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+        
+          gtag('config', 'G-YXW1Y5B8CM');
+        `}
+            </Script>
+        </>
+    )
+}

src/components/atoms/benefits-triangle/index.tsx

@@ -1,63 +1,55 @@
-import React from 'react'
-import { DashedAnimation } from '../animations/animatedTriangle'
-import { IconBox } from '../icon-box'
-import { useProgressWithInView } from '@/model/interactions/use-progress-in-view'
+import React from "react";
+import { DashedAnimation } from "../animations/animatedTriangle";
+import { IconBox } from "../icon-box";
+import { useProgressWithInView } from "@/model/interactions/use-progress-in-view";
 
-type Props = {}
+type Props = {};
 
 export default function BenefitsTriangle({}: Props) {
-    const {
-        isActive,
-        clickOnIcon,
-        currentStatus,
-        progressLeft,
-
-      } = useProgressWithInView();
+  const { isActive, currentStatus, progressLeft,  } =
+    useProgressWithInView();
   return (
     <div className="md:w-1/2 w-full md:h-full  pt-12 relative flex items-center justify-center">
-    <div className="flex-col gap-6 md:gap-0 items-center justify-center flex max-w-sm relative w-full">
-      <DashedAnimation active={currentStatus.current} />
-      <div className="flex items-center h-fit w-full justify-center md:px-16 md:justify-start">
-        <IconBox
-          text="Business"
-          icon="/images/Business_Icon.svg"
-          isActive={isActive(0)}
-          onClick={clickOnIcon(0, 1)}
-          progress={progressLeft}
-        />
-      </div>
+      <div className="flex-col gap-6 md:gap-0 items-center justify-center flex max-w-sm relative w-full">
+        <DashedAnimation active={currentStatus.current} />
+        <div className="flex items-center h-fit w-full justify-center md:px-16 md:justify-start cursor-not-allowed">
+          <IconBox
+            text="Business"
+            className="cursor-default"
+            icon="/images/Business_Icon.svg"
+            isActive={isActive(0)}
+            progress={progressLeft}
+          />
+        </div>
 
-      <div className="flex items-center h-fit w-full justify-between px-12 md:justify-end">
-        <IconBox
-          text="Salespeople"
-          icon="/images/SA_Sales_Icon.svg"
-          isActive={isActive(1)}
-          onClick={clickOnIcon(1, 168)}
-          className="order-2 md:order-1"
-          progress={progressLeft}
-        />
+        <div className="flex items-center h-fit w-full justify-between px-12 md:justify-end">
+          <IconBox
+            text="Salespeople"
+            icon="/images/SA_Sales_Icon.svg"
+            isActive={isActive(1)}
+            className="order-2 md:order-1 cursor-default"
+            progress={progressLeft}
+          />
 
-        <IconBox
-          text="Customer"
-          icon="/images/SA_Customer_Icon.svg"
-          className="md:hidden "
-          isActive={isActive(2)}
-          onClick={clickOnIcon(2, 373)}
-          progress={progressLeft}
-        />
-      </div>
+          <IconBox
+            text="Customer"
+            icon="/images/SA_Customer_Icon.svg"
+            className="md:hidden cursor-default"
+            isActive={isActive(2)}
+            progress={progressLeft}
+          />
+        </div>
 
-      <div className="w-full flex items-center  ">
-        <IconBox
-          text="Customer"
-          icon="/images/SA_Customer_Icon.svg"
-          className="hidden md:flex md:flex-col"
-          isActive={isActive(2)}
-          onClick={clickOnIcon(2, 373)}
-          progress={progressLeft}
-        />
+        <div className="w-full flex items-center  ">
+          <IconBox
+            text="Customer"
+            icon="/images/SA_Customer_Icon.svg"
+            className="hidden md:flex md:flex-col cursor-default"
+            isActive={isActive(2)}
+            progress={progressLeft}
+          />
+        </div>
       </div>
     </div>
-  </div>
-  )
-}
+  );
+}

src/components/atoms/footer-socials/index.tsx

@@ -13,7 +13,6 @@ const social = [
 export default function FooterSocials({kind}: Props) {
     const socialClasses = classNames(
         "text-[1.875rem] text-white rounded",
-        { "bg-white": kind === "dark" },
         { "bg-zinc-800": kind === "light" }
       );
   return (