feat: add SEO

src/app/layout.js

@@ -12,6 +12,7 @@ import {
 } from 'next/font/google';
 import { Toaster } from 'react-hot-toast';
 import Hoc from '@/components/shared/HOC/Hoc';
+import { description, metadataBase, title, url, images } from '@/config/SEO/config';
 
 const spaceX = localFont({
   src: '../fonts/SpaceX.ttf',
@@ -68,8 +69,14 @@ const spaceGrotesk = SpaceGrotesk({
 });
 
 export const metadata = {
-  title: 'Innovision 2024',
-  description: 'Created by GDSC NIT Rourkela',
+  metadataBase: metadataBase,
+  title: title,
+  openGraph: {
+    url: url,
+    description: description,
+    images: images,
+  },
+  description: description,
 };
 
 export default function RootLayout({ children }) {

src/app/robots.js

@@ -0,0 +1,10 @@
+export default function robots() {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: ['/', '/events', '/register', '/refundPolicy'],
+      disallow: [],
+    },
+    sitemap: 'https://innonitrkl.in/sitemap.xml',
+  };
+}

src/app/sitemap.js

@@ -0,0 +1,28 @@
+export default function sitemap() {
+  return [
+    {
+      url: 'https://innonitrkl.in/',
+      lastModified: new Date(),
+      changeFrequency: 'yearly',
+      priority: 1,
+    },
+    {
+      url: 'https://innonitrkl.in/events',
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 0.8,
+    },
+    {
+      url: 'https://innonitrkl.in/register',
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 0.8,
+    },
+    {
+      url: 'https://innonitrkl.in/refundPolicy',
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 0.5,
+    },
+  ];
+}

src/components/EventsPage/Carousel/DescriptionCarousel/DescriptionCarousel.jsx

@@ -3,7 +3,6 @@ import DetailsCard from '../../CardComponents/DetailsCard/DetailsCard';
 import tw, { styled } from 'twin.macro';
 import { memo } from 'react';
 
-// Styled components
 const DescriptionContainer = styled.div`
   ${tw`w-full mt-8 mb-20 h-auto relative`};
 `;
@@ -12,14 +11,12 @@ const DescriptionSlide = styled(motion.div)`
   ${tw`w-full`};
 `;
 
-// Framer Motion variants outside the component to avoid recalculating
 const slideVariants = {
   enter: { x: 50, opacity: 0 },
   center: { x: 0, opacity: 1 },
   exit: { x: -50, opacity: 0 },
 };
 
-// Memoized DetailsCard for preventing unnecessary re-renders
 const MemoizedDetailsCard = memo(DetailsCard);
 
 const DescriptionCarousel = ({ currentIndex, descriptionItems }) => {
@@ -34,7 +31,6 @@ const DescriptionCarousel = ({ currentIndex, descriptionItems }) => {
           exit='exit'
           transition={{ duration: 0.5 }}
         >
-          {/* Use memoized DetailsCard */}
           <MemoizedDetailsCard {...descriptionItems[currentIndex]} />
         </DescriptionSlide>
       </AnimatePresence>

src/components/EventsPage/index.jsx

@@ -1,6 +1,4 @@
-// import DualCarousel from './Carousel/DualCarousel/DualCarousel';
 import { SliderEventsWrapper } from './Carousel/PreviewCarousel/EventWrapper';
-
 const MainCarousel = ({ previewItems, descriptionItems }) => {
   return (
     <>

src/components/EventsSection/wrapperComponents/Main.jsx

@@ -1,5 +1,4 @@
 import { Header } from '../Header.jsx/header';
-import { SubHeader } from '../Header.jsx/SubHeader';
 import { Body } from './Body';
 
 export const EventSectionMain = () => {

src/components/SEO/Checker.jsx

@@ -0,0 +1,197 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import { Check, X, AlertCircle, ChevronDown, ChevronUp } from 'lucide-react';
+
+const SEOChecker = () => {
+  const [seoResults, setSeoResults] = useState({
+    title: { present: false, content: '' },
+    description: { present: false, content: '' },
+    ogTags: {
+      present: false,
+      title: '',
+      description: '',
+      image: '',
+      url: '',
+    },
+    structuredData: { present: false, content: '' },
+  });
+  const [expandedSections, setExpandedSections] = useState({});
+
+  useEffect(() => {
+    checkSEO();
+  }, []);
+
+  const checkSEO = () => {
+    // Check title
+    const title = document.title;
+
+    // Check meta description
+    const description = document.querySelector('meta[name="description"]')?.content;
+
+    console.log(document.querySelector('meta[name="url"]'));
+    // Check OG tags
+    const ogTitle = document.querySelector('meta[property="og:title"]')?.content;
+    const ogDescription = document.querySelector('meta[property="og:description"]')?.content;
+    const ogImage = document.querySelector('meta[property="og:image"]')?.content;
+    const ogUrl = document.querySelector('meta[property="og:url"]')?.content;
+
+    // Check structured data
+    const structuredData = document.querySelector(
+      'script[type="application/ld+json"]',
+    )?.textContent;
+
+    setSeoResults({
+      title: {
+        present: !!title,
+        content: title || '',
+      },
+      description: {
+        present: !!description,
+        content: description || '',
+      },
+      ogTags: {
+        present: !!(ogTitle && ogDescription && ogImage && ogUrl),
+        title: ogTitle || '',
+        description: ogDescription || '',
+        image: ogImage || '',
+        url: ogUrl || '',
+      },
+      structuredData: {
+        present: !!structuredData,
+        content: structuredData || '',
+      },
+    });
+  };
+
+  const toggleSection = (section) => {
+    setExpandedSections((prev) => ({
+      ...prev,
+      [section]: !prev[section],
+    }));
+  };
+
+  const renderContent = (section, content) => {
+    if (!expandedSections[section]) return null;
+    return (
+      <div className='mt-2 p-3 bg-gray-100 rounded-md text-sm overflow-auto'>
+        <pre className='whitespace-pre-wrap break-words'>
+          {typeof content === 'string' ? content : JSON.stringify(content, null, 2)}
+        </pre>
+      </div>
+    );
+  };
+
+  return (
+    <div className='max-w-2xl mx-auto my-8 p-6 bg-white rounded-lg shadow-lg text-black'>
+      <div className='flex items-center gap-2 mb-6'>
+        <AlertCircle className='w-5 h-5 text-blue-500' />
+        <h2 className='text-xl font-bold'>SEO Check Results</h2>
+      </div>
+
+      <div className='space-y-4'>
+        <div className='border rounded-md'>
+          <div
+            className='flex items-center justify-between p-3 cursor-pointer hover:bg-gray-50'
+            onClick={() => toggleSection('title')}
+          >
+            <span className='font-medium'>Page Title</span>
+            <div className='flex items-center gap-2'>
+              {seoResults.title.present ? (
+                <Check className='w-5 h-5 text-green-500' />
+              ) : (
+                <X className='w-5 h-5 text-red-500' />
+              )}
+              {expandedSections.title ? (
+                <ChevronUp className='w-4 h-4' />
+              ) : (
+                <ChevronDown className='w-4 h-4' />
+              )}
+            </div>
+          </div>
+          {renderContent('title', seoResults.title.content)}
+        </div>
+
+        <div className='border rounded-md'>
+          <div
+            className='flex items-center justify-between p-3 cursor-pointer hover:bg-gray-50'
+            onClick={() => toggleSection('description')}
+          >
+            <span className='font-medium'>Meta Description</span>
+            <div className='flex items-center gap-2'>
+              {seoResults.description.present ? (
+                <Check className='w-5 h-5 text-green-500' />
+              ) : (
+                <X className='w-5 h-5 text-red-500' />
+              )}
+              {expandedSections.description ? (
+                <ChevronUp className='w-4 h-4' />
+              ) : (
+                <ChevronDown className='w-4 h-4' />
+              )}
+            </div>
+          </div>
+          {renderContent('description', seoResults.description.content)}
+        </div>
+
+        <div className='border rounded-md'>
+          <div
+            className='flex items-center justify-between p-3 cursor-pointer hover:bg-gray-50'
+            onClick={() => toggleSection('ogTags')}
+          >
+            <span className='font-medium'>Open Graph Tags</span>
+            <div className='flex items-center gap-2'>
+              {seoResults.ogTags.present ? (
+                <Check className='w-5 h-5 text-green-500' />
+              ) : (
+                <X className='w-5 h-5 text-red-500' />
+              )}
+              {expandedSections.ogTags ? (
+                <ChevronUp className='w-4 h-4' />
+              ) : (
+                <ChevronDown className='w-4 h-4' />
+              )}
+            </div>
+          </div>
+          {renderContent('ogTags', {
+            title: seoResults.ogTags.title,
+            description: seoResults.ogTags.description,
+            image: seoResults.ogTags.image,
+            url: seoResults.ogTags.url,
+          })}
+        </div>
+
+        <div className='border rounded-md'>
+          <div
+            className='flex items-center justify-between p-3 cursor-pointer hover:bg-gray-50'
+            onClick={() => toggleSection('structuredData')}
+          >
+            <span className='font-medium'>Structured Data</span>
+            <div className='flex items-center gap-2'>
+              {seoResults.structuredData.present ? (
+                <Check className='w-5 h-5 text-green-500' />
+              ) : (
+                <X className='w-5 h-5 text-red-500' />
+              )}
+              {expandedSections.structuredData ? (
+                <ChevronUp className='w-4 h-4' />
+              ) : (
+                <ChevronDown className='w-4 h-4' />
+              )}
+            </div>
+          </div>
+          {renderContent('structuredData', seoResults.structuredData.content)}
+        </div>
+
+        {!Object.values(seoResults).every((item) => item.present) && (
+          <div className='mt-6 p-4 bg-yellow-50 text-yellow-800 rounded-md'>
+            <p className='text-sm'>
+              Some SEO elements are missing. Click on each section to view details.
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SEOChecker;

src/components/SEO/EventStructureData.jsx

@@ -0,0 +1,38 @@
+import Head from 'next/head';
+
+const EventStructuredData = ({
+  name,
+  startDate,
+  endDate,
+  location,
+  description,
+  organizerName,
+}) => {
+  const structuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'Event',
+    name: name,
+    startDate: startDate,
+    endDate: endDate,
+    location: {
+      '@type': 'Place',
+      name: location,
+    },
+    description: description,
+    organizer: {
+      '@type': 'Organization',
+      name: organizerName,
+    },
+  };
+
+  return (
+    <Head>
+      <script
+        type='application/ld+json'
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
+      />
+    </Head>
+  );
+};
+
+export default EventStructuredData;

src/components/SEO/SEO.jsx

@@ -0,0 +1,17 @@
+import Head from 'next/head';
+
+const SEO = ({ title, description, ogImage, ogUrl }) => {
+  return (
+    <Head>
+      <title>{title}</title>
+      <meta name='description' content={description} />
+      <meta property='og:title' content={title} />
+      <meta property='og:description' content={description} />
+      <meta property='og:image' content={ogImage} />
+      <meta property='og:url' content={ogUrl} />
+      <meta name='twitter:card' content='summary_large_image' />
+    </Head>
+  );
+};
+
+export default SEO;

src/config/SEO/config.js

@@ -0,0 +1,12 @@
+const images = [
+  'https://media.licdn.com/dms/image/v2/C510BAQHGzzyb-fVW7g/company-logo_200_200/company-logo_200_200/0/1630615007266/innovision_nitrkl_logo?e=2147483647&v=beta&t=CNUAlswYqI6pCQD4ZSUZINQ1vqwJnYuf0jG08PKdvZo',
+  'https://www.nitrkl.ac.in/assets/images/gallery3.jpg',
+  'https://www.nitrkl.ac.in/assets/images/gallery1.jpg',
+];
+const description =
+  'Join us for the biggest college event of the year! Featuring workshops, competitions, and networking opportunities.';
+const metadataBase = new URL('https://innonitrkl.in/');
+const title = { default: 'INNOVISION 2024 | NIT ROURKELA', template: `%s | INNOVISION` };
+const url = 'https://innonitrkl.in/';
+
+export { metadataBase, title, url, description, images };

src/config/content/Footer.js

@@ -48,7 +48,7 @@ export const secondcol = [
 export const thirdcol = [
   {
     id: 1,
-    title: 'Event Brouchere',
+    title: 'Event Brochure',
     url: 'https://drive.google.com/file/d/1jWXT8ShzBW5KTn50DrTsgSqLgmSJMwTO/view?usp=sharing',
   },
   {