feat: Syncloop Hackthon

src/content/Hackathons/index.js

@@ -3,8 +3,19 @@ import PastEvent8 from 'assets/events/past-event-8.jpeg';
 import NapptiveBanner from 'assets/hackathon/napptive/Banner.jpg';
 
 import NapptiveHackathonContent from '@/content/Hackathons/napptive';
+import SyncloopHackathon from '@/content/Hackathons/syncloop';
 
 export const hackathonDataList = [
+  {
+    title: SyncloopHackathon.title,
+    description: SyncloopHackathon.description,
+    image: SyncloopHackathon.image,
+    url: `/events/hackathons/${SyncloopHackathon.slug}`,
+    btnText: 'Learn more',
+    content: SyncloopHackathon,
+    hasContent: true,
+    date: SyncloopHackathon.to,
+  },
   {
     title: NapptiveHackathonContent.title,
     description: NapptiveHackathonContent.description,

src/content/Hackathons/syncloop.js

@@ -0,0 +1,128 @@
+import SyncloopBanner from 'assets/hackathon/syncloop/Banner.png';
+import HeroImg from 'assets/hackathon/syncloop/theme.png';
+
+import HackthonPageContent from '@/content/Hackathons/ParticularHackathonPageContent';
+
+const SyncloopHackathon = {
+  header: HackthonPageContent.header,
+  faq: HackthonPageContent.faq,
+  CTA: HackthonPageContent.CTA,
+  slug: 'syncloop',
+  title: 'Unleash the API Creativity with Syncloop',
+  by: 'Powered by Syncloop',
+  description:
+    'Unleash the API Creativity with Syncloop: Forge Seamless Connections, Elevate Developer Prowess, and Empower the Future of APIs',
+  hero: HeroImg,
+  image: SyncloopBanner,
+  // !NOTE: Please add the respective youtube video embed URL
+  videoUrl: null,
+  // !NOTE: Please add the respective youtube live stream URL
+  liveUrl: 'https://www.youtube.com/watch?v=sST7JGLq2as',
+  about: [
+    'Syncloop is excited to host a virtual API Innovation Hackathon, bringing together developers, architects, and tech enthusiasts to showcase their creativity, problem-solving skills, and innovation in API development.',
+    'The goal of this hackathon is to encourage participants to build groundbreaking API solutions using the Syncloop platform, driving advancements in API development and integration.',
+  ],
+  rules: [
+    'Please check out the various theme requirements to be eligible for prizes.The theme is open-ended, but using Syncloop is mandatory. Submissions made without using Syncloop will NOT be considered.',
+    'You can submit to as many prize categories as you want.',
+    'All design elements, code, hardware builds, etc. for your project must be created during the event. However, the use of third-party tools and frameworks is allowed along with your normal tooling. ',
+    'While you are NOT supposed to begin coding in advance, you may plan and discuss the project with your team in advance. Written documents and design sketches are allowed. You may also incorporate pre-existing material that is freely available to the public such as open source components, libraries, APIs and platforms into your project.',
+    'Teams must be comprised of 1-4 people.',
+    'Any intellectual property developed during the hackathon will belong to the team that developed it. The IP must be open source and you confirm you are legally entitled to create and distribute your submission material.',
+    'AI-generated content will not be accepted.',
+    'Submitted content must comply with the platform guidelines, terms of use, and acceptable use policy.',
+    'Please treat all other hackers with the utmost respect. We ask that you act kindly, behave professionally, and do not insult or put down other attendees. Remember that harassment and racist, sexist, or exclusionary jokes are not appropriate for this event. If at any point you see a fellow hacker being harassed, please talk to the nearest hackathon organizer.',
+    "Please treat our sponsors, organizers, and judges with the utmost respect. Without them, nothing would be possible. Consider taking some time out of your work to go meet and speak with them. If they come over to talk to you, we ask that you give them a bit of your time. They're here for you. Show them you appreciate it!",
+  ],
+  criteria: [
+    {
+      name: 'Innovation',
+      description:
+        'The uniqueness and creativity of the API solutions presented.',
+    },
+    {
+      name: 'Functionality',
+      description: 'The effectiveness and functionality of the developed APIs.',
+    },
+    {
+      name: 'Integration',
+      description:
+        'The level of seamless integration demonstrated with other services or applications.',
+    },
+    {
+      name: 'User Experience',
+      description:
+        'The user-friendliness and visual experience of the APIs created.',
+    },
+    {
+      name: 'Presentation',
+      description: 'The clarity and effectiveness of the final presentation.',
+    },
+  ],
+  // !NOTE: Please add the respective prize list
+  prizes: [
+    {
+      title: 'Real-Time Data Synchronisation',
+      description:
+        'Build APIs that enable real-time synchronisation of data between multiple applications.',
+      gift: ['To be announced'],
+    },
+    {
+      title: 'API Integration Showcase',
+      description:
+        'Participants can create projects that demonstrate creative integration of Syncloop APIs with popular platforms and services.',
+      gift: ['To be announced'],
+    },
+    {
+      title: 'Developers Toolkit',
+      description:
+        'Create tools, plugins, or libraries that extend the capabilities of the Syncloop platform and enhance developers productivity.',
+      gift: ['To be announced'],
+    },
+    {
+      title: 'Industry-Specific Solutions',
+      description:
+        'Hackathon participants can design API-driven solutions tailored for specific industries such as healthcare, e-commerce, education, etc.',
+      gift: ['To be announced'],
+    },
+  ],
+  judges: [],
+  takepart: [
+    {
+      title: 'Check out the youtube channel of',
+      link: {
+        title: 'Syncloop Platform',
+        href: 'https://www.youtube.com/@syncloop',
+      },
+    },
+    {
+      title: 'Checkout the documentation of',
+      link: {
+        title: 'Syncloop Platform',
+        href: 'https://www.syncloop.com/documentation.html?utm_source=Website&utm_medium=click&utm_id=documentation&utm_content=top-navbar',
+      },
+    },
+    {
+      title: 'Learn from udemy course of',
+      link: {
+        title: 'Syncloop',
+
+        href: 'https://www.udemy.com/user/ekaapi/',
+      },
+    },
+    {
+      title: 'Join the community of',
+      link: {
+        title: 'Syncloop Discord',
+        href: 'https://discord.gg/Nm4kvHRdch',
+      },
+    },
+  ],
+  // !NOTE: Please add the respective timeline
+  timeline: [],
+  from: 'Mon, 14 Aug 2023 02:30:00 GMT',
+  to: 'Mon, 28 Aug 2023 14:30:00 GMT',
+  // !NOTE: Please add the respective registration form link
+  winnerAnnouc: 'Fri, 1 Sept 2023 11:30:00 GMT',
+};
+export default SyncloopHackathon;

src/pages/PerticularhackathonPage.jsx

@@ -21,13 +21,24 @@ const PerticularhackathonPage = ({ content }) => {
         <div className='layout flex flex-col items-center justify-center gap-4 py-32'>
           <h1 className='heading highlight'>{content.title}</h1>
           <h2>{content.by}</h2>
-          <iframe
-            src={content.videoUrl}
-            title='YouTube video player'
-            allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
-            allowFullScreen
-            className='mt-8 block aspect-video h-full w-full max-w-[50rem] rounded-xl border-2 object-cover shadow-[0_1rem_3rem] shadow-primary/80'
-          ></iframe>
+          {content.videoUrl ? (
+            <iframe
+              src={content.videoUrl}
+              title='YouTube video player'
+              allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+              allowFullScreen
+              className='mt-8 block aspect-video h-full w-full max-w-[50rem] rounded-xl border-2 object-cover shadow-[0_1rem_3rem] shadow-primary/80'
+            ></iframe>
+          ) : content.image ? (
+            <img
+              alt='blog'
+              className='mt-8 block aspect-video h-full w-full max-w-[50rem] rounded-xl border-2 object-cover shadow-[0_1rem_3rem] shadow-primary/80'
+              src={content.image}
+            />
+          ) : (
+            `Add videoUrl or image to ${content.slug}.json file`
+          )}
+
           <div className='h2 mt-10 font-normal'>
             <span className='font-bold'>Start: </span>
             {getDateTime(content.from)}