Feat/poc presentation

.vscode/settings.json

@@ -14,4 +14,4 @@
   "[css]": {
     "editor.defaultFormatter": "vscode.css-language-features"
   }
-}
+}

components/camp/aboutDeco/index.tsx

@@ -0,0 +1,48 @@
+export interface Props {
+  title: string;
+  /**
+   * @format textarea
+   */
+  text: string;
+  videoHeightDesktop: number;
+  videoWidthDesktop: number;
+  videoWidthMobile: number;
+  videoHeightMobile: number;
+  videoUrlCode: string;
+}
+
+export default function AboutDeco(props: Props) {
+  return (
+    <section class="bg-dark-green py-14 px-6">
+      <div class="md:max-w-[999px] mx-auto">
+        <p class="font-regular mb-7 text-white text-[32px] md:text-center">
+          {props.title}
+        </p>
+        <div
+          class="font-regular text-xl text-white mb-11"
+          dangerouslySetInnerHTML={{ __html: props.text }}
+        />
+        <iframe
+          width={props.videoWidthDesktop}
+          height={props.videoHeightDesktop}
+          src={"https://www.youtube.com/embed/" +
+            props.videoUrlCode + "?autoplay=1"}
+          frameBorder="0"
+          allowFullScreen
+          className="w-full hidden md:block"
+        >
+        </iframe>
+        <iframe
+          width={props.videoWidthMobile}
+          height={props.videoHeightMobile}
+          src={"https://www.youtube.com/embed/" +
+            props.videoUrlCode + "?autoplay=1"}
+          frameBorder="0"
+          allowFullScreen
+          className="w-full md:hidden"
+        >
+        </iframe>
+      </div>
+    </section>
+  );
+}

components/camp/companySection/index.tsx

@@ -0,0 +1,28 @@
+import Logo, { ILogo } from "./logo.tsx";
+import Image, { IImage } from "deco-sites/starting/components/ui/Image.tsx";
+
+export interface Props {
+  logo: ILogo;
+  logoImage?: IImage;
+  /**
+   * @format textarea
+   */
+  text: string;
+}
+
+export default function CompanySection(props: Props) {
+  return (
+    <section class="px-10 py-32 space-y-8 md:space-y-0 md:py-[76px] flex items-center flex-col">
+      <div>
+        {props.logo
+          ? <Logo height="60px" id={props.logo} />
+          : <Image className="h-[60px]" image={props.logoImage} />}
+      </div>
+
+      <div
+        class="font-regular text-[32px] text-dark-green text-center max-w-[757px]"
+        dangerouslySetInnerHTML={{ __html: props.text }}
+      />
+    </section>
+  );
+}

components/camp/companySection/logo.tsx

@@ -0,0 +1,43 @@
+import { asset } from "$fresh/runtime.ts";
+import type { JSX } from "preact";
+
+export type ILogo =
+  | "MaeztraLogo"
+  | "CorebizLogo"
+  | "QualityLogo"
+  | "EplusLogo"
+  | "InfraCommerceLogo"
+  | "CodebyLogo"
+  | "N1Logo"
+  | "FrnLogo"
+  | "WeDigiLogo"
+  | "EnextLogo"
+  | "CodeblueLogo"
+  | "VndaLogo";
+
+interface Props extends JSX.SVGAttributes<SVGSVGElement> {
+  /**
+   * Symbol id from element to render. Take a look at `/static/icons.svg`.
+   *
+   * Example: <Icon id="Bell" />
+   */
+  id: ILogo;
+  size?: number;
+}
+
+function Logo(
+  { id, strokeWidth = 16, size, width, height, ...otherProps }: Props,
+) {
+  return (
+    <svg
+      {...otherProps}
+      width={width ?? size}
+      height={height ?? size}
+      strokeWidth={strokeWidth}
+    >
+      <use href={asset(`/sprites.svg#${id}`)} />
+    </svg>
+  );
+}
+
+export default Logo;

components/camp/linkToStoreSection/index.tsx

@@ -0,0 +1,17 @@
+export interface Props {
+  /**
+   * @format textarea
+   */
+  title: string;
+}
+
+export default function LinkToStoreSection(props: Props) {
+  return (
+    <section class="flex flex-col justify-center bg-contact-us-bg-gradient py-[12px] md:py-[32px]">
+      <div
+        class="font-inter font-regular text-[32px] text-dark-green px-10 py-16 text-center md:text-5xl md:leading-[53px]"
+        dangerouslySetInnerHTML={{ __html: props.title }}
+      />
+    </section>
+  );
+}

components/camp/pageSpeed/cardInfo.tsx

@@ -0,0 +1,13 @@
+export interface Props {
+  title: string;
+  text: string;
+}
+
+export default function CardInfo(props: Props) {
+  return (
+    <div class="bg-almost-white text-dark-green rounded-3xl md:rounded-tr-3xl rounded-tr-none px-10 pb-10 pt-12">
+      <p class="text-dark-green text-[32px] font-400 mb-4">{props.title}</p>
+      <p class="text-dark-green text-xl font-400">{props.text}</p>
+    </div>
+  );
+}

components/camp/pageSpeed/index.tsx

@@ -0,0 +1,95 @@
+import Image, { IImage } from "deco-sites/starting/components/ui/Image.tsx";
+import ArrowRight from "deco-sites/starting/components/ui/icons/ArrowRight.tsx";
+import Icon from "deco-sites/starting/components/ui/Icon.tsx";
+import { Props as PropsCalculator } from "deco-sites/starting/components/ui/ImpactCalculator.tsx";
+import ImpactCalculator from "deco-sites/starting/islands/ImpactCalculator.tsx";
+import CardInfo from "deco-sites/starting/components/camp/pageSpeed/cardInfo.tsx";
+
+export interface Props {
+  title: string;
+  subtitle: string;
+  text: string;
+  pageSpeed: {
+    label: string;
+    store: IImage;
+    deco: IImage;
+  }[];
+  calculator: PropsCalculator;
+}
+
+export default function PageSpeed(props: Props) {
+  return (
+    <section class="bg-dark-green px-6 py-14">
+      <div class="max-w-[1280px] mx-auto">
+        <h3 class="font-inter font-regular text-5xl text-almost-white mb-10 md:text-center">
+          {props.title}
+        </h3>
+
+        <div class="md:flex justify-between items-center md:px-10 lg:px-[80px]">
+          <div class="mb-8 md:max-w-[345px] lg:max-w-[400px]">
+            <div>
+              <p class="font-medium text-xl lg:text-[50px] text-almost-white mb-6">
+                {props.subtitle}
+              </p>
+
+              <p class="font-regular text-xl lg:text-[21px] text-almost-white">
+                {props.text}
+              </p>
+            </div>
+          </div>
+
+          <div class="flex flex-col gap-[20px]">
+            {props.pageSpeed.map((page, index) => (
+              <>
+                {index === 0 && (
+                  <div class="flex justify-around md:justify-between
+                   items-center">
+                    <p class="font-regular text-xl text-almost-white ml-[0px] lg:ml-[206px]">
+                      Atual
+                    </p>
+                    <Icon id="DecoIconWhite" size={57} />
+                  </div>
+                )}
+
+                <div class="flex flex-col lg:flex-row justify-between items-center">
+                  <p class="font-regular text-xl text-almost-white text-center m-4">
+                    {page.label}
+                  </p>
+
+                  <div key={page.label} class="flex justify-between gap-[30px]">
+                    <Image image={page.store} />
+                    <div class="flex flex-col justify-center">
+                      <ArrowRight />
+                    </div>
+                    <Image image={page.deco} />
+                  </div>
+                </div>
+              </>
+            ))}
+          </div>
+        </div>
+
+        <div class="mt-28 mb-14">
+          {props.calculator && (
+            <ImpactCalculator isAdditionalComponent {...props.calculator} />
+          )}
+        </div>
+
+        <div class="flex flex-col md:grid md:grid-cols-3 md:px-2 gap-10">
+          <CardInfo
+            title="Aumente a conversão"
+            text="Melhore a conversão por meio da navegação sem interrupções, aumentando a satisfação e o engajamento do cliente."
+          />
+          <CardInfo
+            title="Aumente o tráfego orgânico"
+            text="Eleve o ranking de SEO, visibilidade online e confiança com tempos de carregamento ultrarrápidos."
+          />
+          <CardInfo
+            title="Menos despesas com PPC"
+            text="Reduza as despesas com mídia paga, diminuindo as taxas de rejeição, aumentando as pontuações de qualidade e otimizando os investimentos em anúncios."
+          />
+        </div>
+      </div>
+    </section>
+  );
+}

components/camp/performance/countButton.tsx

@@ -0,0 +1,28 @@
+import { ComponentChildren, JSX } from "preact";
+
+interface Props extends JSX.HTMLAttributes<HTMLButtonElement> {
+  variant?: "outline" | "filled";
+  className?: string;
+  children: ComponentChildren;
+}
+
+export default function CountButton(
+  { variant, children, className, ...rest }: Props,
+) {
+  const variantStyle = {
+    outline: `bg-almost-white border border-dark-green  gap-2`,
+    filled: `bg-[#06E474] border-0`,
+  };
+
+  return (
+    <button
+      class={`w-full py-[17px] rounded text-base font-500 font-inter text-dark-green flex justify-center items-center
+        ${variant ? variantStyle[variant] : ""} 
+        ${className ?? ""}
+      `}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}

components/camp/performance/counter.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from "preact/hooks";
+
+interface Props {
+  maxTime: { seconds: number; milliseconds: number };
+  onTimeUpdate: (
+    tempo: { seconds: number; milliseconds: number },
+  ) => void;
+  resetCounter: boolean;
+}
+
+const Counter = ({ onTimeUpdate, maxTime, resetCounter }: Props) => {
+  const [time, setTime] = useState({ seconds: 0, milliseconds: 0 });
+
+  useEffect(() => {
+    let intervalId = 0;
+
+    const startCounter = () => {
+      intervalId = setInterval(() => {
+        setTime((previousTime) => {
+          const newMilliseconds = previousTime.milliseconds + 1;
+          let newSeconds = previousTime.seconds;
+
+          if (newMilliseconds >= 100) {
+            newSeconds += 1;
+          }
+
+          if (
+            newSeconds >= maxTime.seconds &&
+            newMilliseconds >= maxTime.milliseconds
+          ) {
+            clearInterval(intervalId);
+            onTimeUpdate(maxTime);
+            return maxTime;
+          }
+
+          const newTime = {
+            seconds: newSeconds,
+            milliseconds: newMilliseconds >= 100 ? 0 : newMilliseconds,
+          };
+
+          onTimeUpdate(newTime);
+          return newTime;
+        });
+      }, 10);
+    };
+
+    if (resetCounter) {
+      setTime({ seconds: 0, milliseconds: 0 });
+      clearInterval(intervalId);
+      startCounter();
+    } else {
+      startCounter();
+    }
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [resetCounter]);
+
+  const exibirTempo = time.seconds >= maxTime.seconds &&
+      time.milliseconds >= maxTime.milliseconds
+    ? `${maxTime.seconds}.${maxTime.milliseconds}s`
+    : `${time.seconds}.${time.milliseconds}s`;
+
+  return <>{exibirTempo}</>;
+};
+
+export default Counter;