feat: gtags and footer

GDGVIT · Nov 8, 2023 · b36cc38 · b36cc38
1 parent f9b9066
commit b36cc38
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 49 deletions.
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
@@ -1,11 +1,11 @@
-
-import './globals.css'
-import localFont from "next/font/local"
+import Script from 'next/script';
+import './globals.css';
+import localFont from 'next/font/local';
 
 const neue_machina = localFont({
   src: '/NeueMachina-Regular.otf',
-  variable: '--font-neuemachina'
-})
+  variable: '--font-neuemachina',
+});
 
 export const metadata = {
   title: 'GDSC VIT',
@@ -24,16 +24,40 @@ export const metadata = {
       },
     ],
   },
-}
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className={`${neue_machina.variable} text-[10px] md:text-[16px]`} >
-      <body className='overflow-hidden bg-dark'>{children}</body>
-    </ html>
-  )
+    <html
+      lang="en"
+      className={`${neue_machina.variable} text-[10px] md:text-[16px]`}
+    >
+      <head>
+        <Script id="gtag" strategy="afterInteractive">
+          {`
+    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-M4WQ5S5N');
+  `}
+        </Script>
+      </head>
+      <body className="overflow-hidden bg-dark">
+        <div
+          dangerouslySetInnerHTML={{
+            __html: `
+        <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M4WQ5S5N"
+        height="0" width="0" style="display:none;visibility:hidden"></iframe>
+      `,
+          }}
+        />
+        {children}
+      </body>
+    </html>
+  );
 }
diff --git a/web/components/Footer.tsx b/web/components/Footer.tsx
@@ -1,68 +1,113 @@
-import Image from 'next/image'
-import { useRouter } from 'next/navigation'
-import React from 'react'
-import { FC } from 'react'
-import { scroller } from 'react-scroll'
-import socials from "@/content/social.json"
-import Icon from './Icons'
-import Link from 'next/link'
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { FC } from 'react';
+import { scroller } from 'react-scroll';
+import socials from '@/content/social.json';
+import Icon from './Icons';
+import Link from 'next/link';
 
 interface Props {
-    bg?: string
+  bg?: string;
 }
 
-const Footer: FC<Props> = ({bg}) => {
-  const router = useRouter()
+const Footer: FC<Props> = ({ bg }) => {
+  const router = useRouter();
 
   const scrollToSection = (section: string) => {
-    router.push("/")
-    localStorage.setItem("visited", 'true')
+    router.push('/');
+    localStorage.setItem('visited', 'true');
     scroller.scrollTo(section, {
       duration: 1500,
       delay: 150,
       smooth: true,
       containerId: 'main-thing',
       // offset: 50,
-    })
-  }
+    });
+  };
   return (
     // <div className={`w-full p-16 ${bg}`}>
     //     <p className="text-center">Made with &#9829; by GDSC-VIT</p>
     // </div>
     <div className={`relative w-[100vw] text-white max-h-fit snap-y`}>
       <div className={`"absolute w-full bg-${bg} top-0 -mt-1 py-2"`}></div>
       {/* add an image sticking to the bottom of this div and with some margin on top */}
-      <Image alt='footer' src={"/footer-clouds.svg"} width={200} height={200} className={`w-full h-auto pt-8 bg-${bg}`} />
-      <div className='absolute bottom-0 w-full flex flex-col lg:px-32 px-20 xl:gap-14 lg:gap-10 gap-4 items-center'>
+      <Image
+        alt="footer"
+        src={'/footer-clouds.svg'}
+        width={200}
+        height={200}
+        className={`w-full h-auto pt-8 bg-${bg}`}
+      />
+      <div className="absolute bottom-0 w-full flex flex-col lg:px-32 px-20 xl:gap-10 lg:gap-6 sm:gap-4 gap-8 ga items-center">
         <div className="sm:flex hidden w-full flex-row justify-between gap-5 flex-wrap">
-          <Link target='blank' href={"https://gdsc.community.dev/vellore-institute-of-technology-vit-vellore/"} className='flex flex-col gap-2'>
-            <Image className='h-8 w-20 mb-3' src={"/newlogowhite.svg"} width={80} height={100} alt='Logo' />
-            <p className='pl-2 uppercase'>Google Developer</p>
-            <p className='pl-2 uppercase'>Students Clubs VIT</p>
+          <Link
+            target="blank"
+            href={
+              'https://gdsc.community.dev/vellore-institute-of-technology-vit-vellore/'
+            }
+            className="flex flex-col gap-2"
+          >
+            <Image
+              className="h-8 w-20 mb-3"
+              src={'/newlogowhite.svg'}
+              width={80}
+              height={100}
+              alt="Logo"
+            />
+            <p className="pl-2 uppercase">Google Developer</p>
+            <p className="pl-2 uppercase">Students Clubs VIT</p>
           </Link>
-          <div className='flex flex-col xl:gap-4 gap-2 uppercase'>
-            <h1 onClick={() => scrollToSection("fame")} className='font-bold w-min cursor-pointer'>
+          <div className="flex flex-col xl:gap-4 gap-2 uppercase">
+            <h1
+              onClick={() => scrollToSection('fame')}
+              className="font-bold w-min cursor-pointer"
+            >
               Achievements
             </h1>
-            <h1 onClick={() => scrollToSection("events")} className='font-bold w-min cursor-pointer'>
+            <h1
+              onClick={() => scrollToSection('events')}
+              className="font-bold w-min cursor-pointer"
+            >
               Events
             </h1>
-            <h1 onClick={() => router.push("/team")} className='font-bold w-min cursor-pointer'>
+            <h1
+              onClick={() => router.push('/team')}
+              className="font-bold w-min cursor-pointer"
+            >
               Team
             </h1>
-            <h1 onClick={() => scrollToSection("projects")} className='font-bold w-min cursor-pointer'>
+            <h1
+              onClick={() => scrollToSection('projects')}
+              className="font-bold w-min cursor-pointer"
+            >
               Projects
             </h1>
           </div>
         </div>
-        <p className='pl-2 flex gap-1 text-sm items-center'><Icon icon='mail' xsmall name='mail' link='mailto:[email protected]' /> [email protected]</p>
-        <div className='lg:m-0 gap-3 flex justify-between'>
-          {socials.map((social, i) => <Icon small key={"soc" + i} {...social} />)}
+        <p className="pl-2 gap-1 text-sm items-center sm:flex hidden">
+          <Icon
+            icon="mail"
+            xsmall
+            name="mail"
+            link="mailto:[email protected]"
+          />{' '}
+          [email protected]
+        </p>
+        <div className="lg:m-0 gap-3 flex justify-between">
+          {socials.map((social, i) => (
+            <Icon small key={'soc' + i} {...social} />
+          ))}
         </div>
-        <p className='pb-6 px-3 font-light text-gray-300'>Made with &#128153; by GDSC-VIT</p>
+        <p className="px-3 font-light text-gray-300">
+          Made with &#128153; by GDSC-VIT
+        </p>
+        <p className="pb-6 -mt-2 px-3 font-light text-sm text-gray-300">
+          Copyright &copy;{new Date().getFullYear()}, All rights reserved.
+        </p>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Footer
+export default Footer;
diff --git a/web/content/fame.json b/web/content/fame.json
@@ -1,18 +1,18 @@
 [
   {
     "title": "Best Club Award 2020",
-    "img":"/fame.png"
+    "img": "/vit.jpeg"
   },
   {
-    "title": "Poll Police Project",
-    "img":"/fame.png"
+    "title": "Election Eye",
+    "img": "/fame.png"
   },
   {
     "title": "Built the tech for some of India's largest college fests",
-    "img":"/riviera.png"
+    "img": "/riviera.png"
   },
   {
     "title": "2000+ participants in events",
-    "img":"/2000.jpeg"
+    "img": "/2000.jpeg"
   }
 ]
diff --git a/web/public/vit.jpeg b/web/public/vit.jpeg