add carbon ads and update scroll behavior

Author: geovanesantana

components/home/terminal.tsx

@@ -136,7 +136,7 @@ export default function Terminal() {
                       !item.content.includes("💬") &&
                       !item.content.includes("🚨") && (
                         <button
-                          className="ml-2 rounded-md bg-slate px-2 py-2 transition-all duration-75 ease-in hover:bg-black-400 focus:outline-none focus:ring-2 focus:ring-gray"
+                          className="ml-2 rounded-md bg-slate px-2 py-2 transition-all duration-75 ease-in hover:bg-black-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-gray"
                           onClick={() => {
                             navigator.clipboard.writeText(item.content);
                             toast("Git command copied to clipboard.", {

components/layout/index.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
-import { ReactNode } from "react";
+import React, { useState } from "react";
+import { ReactNode, useEffect } from "react";
 import Meta from "./meta";
 
 export default function Layout({
@@ -13,6 +14,20 @@ export default function Layout({
   };
   children: ReactNode;
 }) {
+  const [terminalRef, setTerminalRef] = useState<null | HTMLElement>(null);
+
+  useEffect(() => {
+    return () => {
+      setTerminalRef(document.getElementById("terminal"));
+    };
+  }, []);
+
+  const scrollToTerminal = () => {
+    if (terminalRef !== null) {
+      terminalRef.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
   return (
     <>
       <Meta {...meta} />
@@ -28,11 +43,11 @@ export default function Layout({
             </Link>
 
             <div>
-              <a href="https://gitfluence.com/#terminal">
+              <button onClick={scrollToTerminal}>
                 <p className="bg-gradient-to-r from-yellow to-amber bg-clip-text text-base text-transparent hover:from-yellow-400 hover:to-amber-400">
                   Get Started
                 </p>
-              </a>
+              </button>
             </div>
           </div>
         </header>
@@ -51,11 +66,11 @@ export default function Layout({
           </p>
 
           <ul className="order-1 flex flex-wrap items-center text-sm md:order-2">
-            <li>
+            {/* <li>
               <Link href="/privacy" className="mr-4 hover:underline md:mr-6">
                 Privacy Policy
               </Link>
-            </li>
+            </li> */}
             <li>
               <a
                 href="mailto:[email protected]"

components/shared/carbonAds.tsx

@@ -0,0 +1,107 @@
+import Script from "next/script";
+import { useEffect, useRef } from "react";
+
+const carbonStyle = `
+  #carbonads {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
+    sans-serif;
+  }
+
+  #carbonads {
+    display: block;
+    overflow: hidden;
+    max-width: 728px;
+    position: relative;
+    background-color: hsl(0, 0%, 12%);
+    border: solid 1px hsl(0, 0%, 15%);
+    font-size: 22px;
+    box-sizing: content-box;
+    color: hsl(0, 0%, 90%);
+  }
+
+  #carbonads > span {
+    display: block;
+  }
+
+  #carbonads a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  #carbonads a:hover {
+    color: inherit;
+  }
+
+  .carbon-wrap {
+    display: flex;
+    align-items: center;
+  }
+
+  .carbon-img {
+    display: block;
+    margin: 0;
+    line-height: 1;
+  }
+
+  .carbon-img img {
+    display: block;
+    height: 100px;
+    width: auto;
+  }
+
+  .carbon-text {
+    display: block;
+    padding: 0 1em;
+    line-height: 1.35;
+    text-align: left;
+  }
+
+  .carbon-poweredby {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding: 6px 10px;
+    background: hsl(0, 0%, 15%);
+	  color: hsl(0, 0%, 90%);
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+    font-size: 8px;
+    border-top-left-radius: 4px;
+    line-height: 1;
+  }
+
+  @media only screen and (min-width: 320px) and (max-width: 759px) {
+    .carbon-text {
+      font-size: 14px;
+    }
+  }
+`;
+
+export default function CarbonAds() {
+  const dataFetch = useRef(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (dataFetch.current) return;
+    dataFetch.current = true;
+
+    const script = document.createElement("script");
+    script.id = "_carbonads_js";
+    script.src = `//cdn.carbonads.com/carbon.js?serve=CWYDC53J&placement=gitfluencecom'`;
+    containerRef.current?.appendChild(script);
+  }, []);
+
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: carbonStyle }} />
+      <div
+        className="mt-2 mb-10 flex w-full max-w-screen-xl animate-[slide-down-fade_0.5s_ease-in-out] justify-center px-5 xl:px-0"
+        ref={containerRef}
+      />
+    </>
+  );
+}

pages/_document.tsx

@@ -2,7 +2,7 @@ import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
-    <Html lang="en" className="scroll-smooth">
+    <Html lang="en">
       <Head />
       <body>
         <Main />

pages/index.tsx

@@ -1,11 +1,21 @@
 import Terminal from "@/components/home/terminal";
 import Layout from "@/components/layout";
+import CarbonAds from "@/components/shared/carbonAds";
 import { Copy, Keyboard, Prompt } from "@/components/shared/icons";
 import classNames from "classnames";
+import { useRef } from "react";
 import { Toaster } from "react-hot-toast";
 import Balancer from "react-wrap-balancer";
 
 export default function Home() {
+  const terminalRef = useRef<null | HTMLDivElement>(null);
+
+  const scrollToTerminal = () => {
+    if (terminalRef.current !== null) {
+      terminalRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
   return (
     <Layout>
       <div className="max-w-3xl px-5 xl:px-0">
@@ -24,20 +34,21 @@ export default function Home() {
           </Balancer>
         </p>
         <div className="mx-auto mt-10 flex items-center justify-center space-x-5">
-          <a
+          <button
             className="relative flex max-w-fit translate-y-[-1rem] animate-fade-in items-center justify-center rounded-md border border-amber-700 bg-black-600 px-14 py-3 text-sm opacity-0 transition-colors [--animation-delay:300ms] hover:border-amber-600 hover:bg-black-700"
-            href="#terminal"
+            onClick={scrollToTerminal}
           >
             <p className="bg-gradient-to-r from-yellow to-amber bg-clip-text text-base text-transparent hover:from-yellow-400 hover:to-amber-400">
               Get Started
             </p>
-          </a>
+          </button>
         </div>
       </div>
 
       <div
         className="relative w-full max-w-screen-xl -scroll-mt-10 pt-20 pb-8 xl:w-8/12 xl:-scroll-mt-16 xl:pt-36"
         id="terminal"
+        ref={terminalRef}
       >
         <Toaster
           position="bottom-right"
@@ -50,6 +61,8 @@ export default function Home() {
         <div className="absolute -bottom-44 -left-12 right-0 h-full w-full max-w-screen-xl rounded-[1000px] bg-feature-pattern opacity-10 blur-[160px] xl:h-[278px] xl:w-[748px] xl:opacity-30" />
       </div>
 
+      <CarbonAds />
+
       <div className="my-10 grid w-full max-w-screen-xl animate-[slide-down-fade_0.5s_ease-in-out] grid-cols-1 gap-12 px-5 md:grid-cols-3 xl:w-8/12 xl:gap-12 xl:px-0">
         {steps.map(({ icon, title, description }, index) => (
           <div