Feat/hacktoberfest bi

components/Common/ContentBox/index.jsx

@@ -1,7 +1,25 @@
 import PropTypes from 'prop-types';
 import Button from '../Button';
+import * as analytics from '../../../lib/analytics';
+import { useCallback } from 'react';
+
+const ContentBox = ({
+  title,
+  body,
+  ctaLabel,
+  ctaUrl,
+  className,
+  eventName,
+}) => {
+  const handleCtaClick = useCallback(() => {
+    analytics.event({
+      action: eventName,
+      params: {
+        ctaLabel: ctaLabel,
+      },
+    });
+  }, [eventName, ctaLabel]);
 
-const ContentBox = ({ title, body, ctaLabel, ctaUrl, className }) => {
   return (
     <>
       <div className={`text-sm font-normal ${className} `}>
@@ -13,7 +31,7 @@ const ContentBox = ({ title, body, ctaLabel, ctaUrl, className }) => {
             backgroundColor="transparent"
             hoverBackgroundColor="transparent"
             isLink={true}
-            //onClick={handleStartNowClick}
+            onClick={handleCtaClick}
             href={ctaUrl}
             className="mt-8 border border-1 border-white rounded !py-1.5 !px-3 inline-flex"
             delayLinkMs={300}
@@ -30,6 +48,7 @@ ContentBox.propTypes = {
   ctaLabel: PropTypes.string,
   ctaUrl: PropTypes.string,
   className: PropTypes.string,
+  eventName: PropTypes.string,
 };
 
 ContentBox.defaultProps = {
@@ -38,6 +57,7 @@ ContentBox.defaultProps = {
   ctaLabel: '',
   ctaUrl: '',
   className: '',
+  eventName: '',
 };
 
 export default ContentBox;

components/Header/TopBar/hacktoberfest.jsx

@@ -0,0 +1,16 @@
+import Link from 'next/link';
+
+const HacktoberfestBar = () => {
+  return (
+    <div className="relative z-10 w-full bg-light-blue laptop:mb-[-1px]">
+      <Link href="/hacktoberfest-2023">
+        <a className="font-jetbrains w-full flex justify-center text-xs text-center items-center max-w-container m-container p-container py-2 cursor-pointer hover:opacity-50 transition-opacity duration-300">
+          Amplication is a proud sponsor of Hacktoberfest 2023. Click here to
+          participate.
+        </a>
+      </Link>
+    </div>
+  );
+};
+
+export default HacktoberfestBar;

components/Header/index.jsx

@@ -1,13 +1,14 @@
-import TopBar from './TopBar';
+// import TopBar from './TopBar';
+import HacktoberfestBar from './TopBar/hacktoberfest';
 import MainBar from './MainBar';
 import BottomBar from './BottomBar';
 
-const Header = () => {
+const Header = ({ hideBar = false }) => {
   return (
     <>
       <header className="z-20 font-poppins laptop:fixed laptop:w-full laptop:top-0 h-[150px]">
         <div className="fixed w-full">
-          <TopBar />
+          {!hideBar && <HacktoberfestBar />}
           <MainBar />
           <BottomBar />
         </div>

components/Sections/Hacktoberfest/Steps/how-to1.jsx

@@ -32,6 +32,7 @@ const HowTo1 = () => {
             ctaLabel="See issues"
             ctaUrl="https://github.com/amplication/amplication/issues?q=is%3Aopen+is%3Aissue+label%3A%22open+to+community%22"
             className="pl-36 z-20"
+            eventName={'ClickHacktoberfestIssues'}
           />
         </>
       }

components/Sections/Hacktoberfest/Steps/how-to2.jsx

@@ -34,6 +34,7 @@ const HowTo2 = () => {
             ctaLabel="Check plugin ideas"
             ctaUrl="https://github.com/amplication/amplication/issues/7027"
             className="pl-36 z-20"
+            eventName={'ClickHacktoberfestPlugins'}
           />
         </>
       }

components/Sections/Hacktoberfest/Steps/how-to3.jsx

@@ -33,6 +33,7 @@ const HowTo3 = () => {
             ctaLabel="Learn More"
             ctaUrl="https://github.com/amplication/amplication/issues/7028"
             className="pl-36 z-20"
+            eventName={'ClickHacktoberfestBuildApp'}
           />
         </>
       }

components/Sections/Hacktoberfest/Steps/open-source.jsx

@@ -24,6 +24,7 @@ const OpenSource = () => {
           }
           ctaLabel="How to contribute"
           ctaUrl="https://github.com/amplication/amplication/issues/7026"
+          eventName={'ClickHacktoberfestHowToContribute'}
         />
       }
       SecondSectionNode={

components/Sections/Hacktoberfest/Steps/win.jsx

@@ -17,6 +17,7 @@ const Win = () => {
       }
       ctaLabel="Read the rules"
       ctaUrl="https://github.com/amplication/amplication/issues/7030"
+      eventName={'ClickHacktoberfestRules'}
     />
   );
 };

layouts/main.js

@@ -9,6 +9,7 @@ const MainLayout = ({
   footerCompactView,
   footerClass,
   paddingTopClasses,
+  hideTopBar = false
 }) => {
   return (
     <div
@@ -17,7 +18,7 @@ const MainLayout = ({
         paddingTopClasses,
       )}
     >
-      <Header />
+      <Header hideBar={hideTopBar} />
       {children}
       <Footer
         customClass={footerClass}
@@ -34,13 +35,15 @@ MainLayout.propTypes = {
   footerCompactView: PropTypes.bool,
   footerClass: PropTypes.string,
   paddingTopClasses: PropTypes.string,
+  hideTopBar: PropTypes.bool
 };
 
 MainLayout.defaultProps = {
   hideFooterBanner: false,
   footerCompactView: false,
   footerClass: '',
   paddingTopClasses: 'laptop:pt-[110px]',
+  hideTopBar: false
 };
 
 export { MainLayout };

pages/hacktoberfest-2023.js

@@ -55,6 +55,6 @@ Hacktoberfest.defaultProps = {
 };
 
 Hacktoberfest.getLayout = function getLayout(page) {
-  return <MainLayout paddingTopClasses={"laptop:pt-[90px]"} hideFooterBanner={false} >{page}</MainLayout>;
+  return <MainLayout hideTopBar={true} paddingTopClasses={"laptop:pt-[90px]"} hideFooterBanner={false} >{page}</MainLayout>;
 };
 export default Hacktoberfest;