modularization by using md filesHEAD main

author: Manurbhav Arya 2024-06-29 14:15:08 +0530
committer: Manurbhav Arya 2024-06-29 14:15:08 +0530
commit: 13950e5ece10c782671239e11a2d258965a79141 (patch)
tree: e7f85e58e09652086b0a40a24568d95756b92650
parent: 6f9a937965134c28ef18c9ec4a46f12143a52983 (diff)
download: Astro-animate2024-13950e5ece10c782671239e11a2d258965a79141.tar.gz
Astro-animate2024-13950e5ece10c782671239e11a2d258965a79141.tar.bz2
Astro-animate2024-13950e5ece10c782671239e11a2d258965a79141.zip
32 files changed, 1554 insertions, 950 deletions
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..bc7db4d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,30 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+#result timer
+config.json
+
+# dependencies
+node_modules/
+
+#sample md
+fruits/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
diff --git a/package-lock.json b/package-lock.json
index 3218161..ffd2d50 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,9 @@
         "tailwindcss": "^3.4.1"
       },
       "devDependencies": {
-        "@tailwindcss/typography": "^0.5.10"
+        "@tailwindcss/typography": "^0.5.10",
+        "prettier": "^3.3.2",
+        "prettier-plugin-astro": "^0.14.0"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -1413,9 +1415,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001561",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001561.tgz",
-      "integrity": "sha512-NTt0DNoKe958Q0BE0j0c1V9jbUzhBxHIEJy7asmGrpE0yG63KTV7PLHPnK2E1O9RsQrQ081I3NLuXGS6zht3cw==",
+      "version": "1.0.30001636",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz",
+      "integrity": "sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==",
       "funding": [
         {
           "type": "opencollective",
@@ -4577,6 +4579,41 @@
         "node": ">=8.15"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz",
+      "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-astro": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.14.0.tgz",
+      "integrity": "sha512-7jRGJsexaRIyUzTk8uzXlP45cw6DQ5Ci4bTe0xCBCcuO1Fff8jJy9oI+kRCQKSdDFTSAArMSg8GpvzlKBtSaZA==",
+      "dev": true,
+      "dependencies": {
+        "@astrojs/compiler": "^1.5.5",
+        "prettier": "^3.0.0",
+        "sass-formatter": "^0.7.6"
+      },
+      "engines": {
+        "node": "^14.15.0 || >=16.0.0"
+      }
+    },
+    "node_modules/prettier-plugin-astro/node_modules/@astrojs/compiler": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-1.8.2.tgz",
+      "integrity": "sha512-o/ObKgtMzl8SlpIdzaxFnt7SATKPxu4oIP/1NL+HDJRzxfJcAkOTAb/ZKMRyULbz4q+1t2/DAebs2Z1QairkZw==",
+      "dev": true
+    },
     "node_modules/prismjs": {
       "version": "1.29.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
@@ -5062,6 +5099,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/s.color": {
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/s.color/-/s.color-0.0.15.tgz",
+      "integrity": "sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==",
+      "dev": true
+    },
     "node_modules/sade": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
@@ -5097,6 +5140,15 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "node_modules/sass-formatter": {
+      "version": "0.7.9",
+      "resolved": "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.9.tgz",
+      "integrity": "sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw==",
+      "dev": true,
+      "dependencies": {
+        "suf-log": "^2.5.3"
+      }
+    },
     "node_modules/sax": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
@@ -5803,6 +5855,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/suf-log": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/suf-log/-/suf-log-2.5.3.tgz",
+      "integrity": "sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==",
+      "dev": true,
+      "dependencies": {
+        "s.color": "0.0.15"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/package.json b/package.json
index f274ffa..bf87230 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,8 @@
     "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.10"
+    "@tailwindcss/typography": "^0.5.10",
+    "prettier": "^3.3.2",
+    "prettier-plugin-astro": "^0.14.0"
   }
 }
diff --git a/src/content/aboutPage/eligibility.md b/src/content/aboutPage/eligibility.md
new file mode 100644
index 0000000..edffd15
--- /dev/null
+++ b/src/content/aboutPage/eligibility.md
@@ -0,0 +1,8 @@
+---
+---
+
+- The hackathon is open to all.
+- Participants can join as individuals or in teams (maximum of 4 members).
+- High school/college students, faculty, and professionals (such as animators, designers, etc.) from any field who are interested in creating animations are welcome.
+- Knowledge of basic graphics, design, and animation is required.
+- The main objective of this event is to promote learning of Synfig Studio. If you are self-motivated and want to participate, you can self-learn Synfig Studio using [Spoken tutorials](spoken-tutorial.org). These tutorials are available in English, Hindi, Kannada, Marathi, Malayalam, Tamil, and Telugu.
diff --git a/src/content/guidelinesPage/evaluation.md b/src/content/guidelinesPage/evaluation.md
new file mode 100644
index 0000000..3bb889c
--- /dev/null
+++ b/src/content/guidelinesPage/evaluation.md
@@ -0,0 +1,11 @@
+---
+heading: "Evaluation"
+---
+
+- Animations will be evaluated based on the following criteria:
+  - Creativity and Originality
+  - Technical Skill and Execution
+  - Adherence to Submission Guidelines (including software usage, duration, quality settings, resolution, and frame rate)
+  - Overall Impact and Effectiveness of the Animation
+- Judges' decisions will be final and binding.
+- Results will be announced on [FOSSEE](https://fossee.in/animate) website.
diff --git a/src/content/guidelinesPage/preparation.md b/src/content/guidelinesPage/preparation.md
new file mode 100644
index 0000000..abf3be5
--- /dev/null
+++ b/src/content/guidelinesPage/preparation.md
@@ -0,0 +1,11 @@
+---
+heading: "Preparation for submission"
+---
+
+- Create a folder with the name of your Team-ID.
+- The folder should consist of the following files:
+  - Source files generated in Synfig Studio - .sifz/.sif
+  - The video output (Avi/Mov/Fla/Ogg/Mp4)
+  - Source files of artwork, illustrations, images, editing files, fonts etc.
+- Compress the folder and upload in zip format only.
+- The last date of submission is **20 May 2024** till midnight. The participants can modify their submission anytime within this deadline.
diff --git a/src/content/guidelinesPage/properties.md b/src/content/guidelinesPage/properties.md
new file mode 100644
index 0000000..1b8afed
--- /dev/null
+++ b/src/content/guidelinesPage/properties.md
@@ -0,0 +1,9 @@
+---
+heading: "Properties of animation"
+---
+
+- Software for creating the animation - Synfig Studio
+- Animation duration - **3 minutes or less**
+- Minimum render setting quality at **8**
+- Minimum resolution - **720 x 480 px**
+- Frame rate - **24 fps**
diff --git a/src/content/guidelinesPage/steps.md b/src/content/guidelinesPage/steps.md
new file mode 100644
index 0000000..40f0269
--- /dev/null
+++ b/src/content/guidelinesPage/steps.md
@@ -0,0 +1,11 @@
+---
+heading: "Steps to submit animation"
+---
+
+- Go to [https://learn.fossee.in](https://learn.fossee.in)
+- Enter the username and password as received over mail and click on "Log in".
+- After logging in for the first time, you will be prompted to update the password.
+- Click on the **"Animate 2024"** Course available in the left panel of your dashboard.
+- Scroll down and go to the "Animation Submission Upload" section.
+- Go to "Click here to add your submission" to submit your files for the hackathon.
+- To see the steps to upload your animation, please watch [this](https://youtu.be/3MrEhbK7g3o) video.
diff --git a/src/content/guidelinesPage/submission.md b/src/content/guidelinesPage/submission.md
new file mode 100644
index 0000000..a51f3a2
--- /dev/null
+++ b/src/content/guidelinesPage/submission.md
@@ -0,0 +1,7 @@
+---
+heading: "Submission Guidelines"
+---
+
+- The team lead have to submit the animations at [https://learn.fossee.in](https://learn.fossee.in).
+- The login instructions have been emailed to the team leads.
+- Reach us at info[at]fossee[dot] in case you did not receive the login instructions.
diff --git a/src/content/registerPage/registerRules.md b/src/content/registerPage/registerRules.md
new file mode 100644
index 0000000..1d68bfa
--- /dev/null
+++ b/src/content/registerPage/registerRules.md
@@ -0,0 +1,12 @@
+---
+heading: "Read before registration"
+---
+
+- Participate as an individual or as a team (max. 4 members).
+- Ideally, a team can consist of individuals like: Synfig Studio user / animator / graphic designer / story narrator / video editor / etc.
+- Use ONLY open source software for creating animations.
+  - **You are not allowed to use any proprietary software in your animation in any aspect. If found, you and your team will be disqualified.**
+- Submissions will be accepted in 3 categories:
+  1. Under 18 - Junior Animation Mavericks
+  2. College Students - College Creators
+  3. Working Professionals - Professional Prodigies
diff --git a/src/content/resourcesPage/resources.md b/src/content/resourcesPage/resources.md
new file mode 100644
index 0000000..c7c7c02
--- /dev/null
+++ b/src/content/resourcesPage/resources.md
@@ -0,0 +1,10 @@
+---
+---
+
+- To download Synfig Studio version 1.4.4: [click here](https://static.fossee.in/focal/Synfig%20Studio%20version%201.4.4/)
+- Self-learn Synfig Studio using [Spoken Tutorials](https://spoken-tutorial.org/tutorial-search/?search_foss=Synfig&search_language=). These tutorials are available in English, Hindi, Kannada, Marathi, Malayalam, Tamil, and Telugu.
+- For creating graphics, recording audio, etc., you can use other software. However, since there is a requirement to strictly use Open Source Software in this hackathon, you can use GIMP, Audacity, Inkscape, Openshot Video Editor, etc. You can self-learn these software using the Spoken Tutorials, which are freely available in English, Hindi, Kannada, Marathi, Malayalam, Tamil and Telugu.
+- For writing your script, you can learn about storytelling using [Communication Spoken Tutorials](https://spoken-tutorial.org/tutorial-search/?search_foss=Communication+Series&search_language=English) available in English.
+- Refer graphics from our [FOCAL (free and open source creative art library)](https://focal.fossee.in/) repository.
+- Self-learn video editing using Blender. These tutorials are available in English - [click here](https://spoken-tutorial.org/tutorial-search/?search_foss=Video+Editing+using+Blender&search_language=English)
+- Download Blender by visiting the following link - [blender](https://www.blender.org/download/)
diff --git a/src/content/rulesPage/rules.md b/src/content/rulesPage/rules.md
new file mode 100644
index 0000000..d8adcf5
--- /dev/null
+++ b/src/content/rulesPage/rules.md
@@ -0,0 +1,11 @@
+---
+---
+
+- The same person cannot participate in more than one team.
+- If a person is found participating in more than one team, both teams will be disqualified from the Hackathon.
+- Use ONLY Synfig Studio for creating animations. Create the supporting graphics, audio, etc. using only open source software. You are not allowed to use any proprietary software in your animation in any aspect. If found, you or your team will be disqualified.
+- You can choose to narrate in **English** or in the **22 scheduled Indian languages** given below.
+  - _(1) Assamese, (2) Bengali, (3) Gujarati, (4) Hindi, (5) Kannada, (6) Kashmiri, (7) Konkani, (8) Malayalam, (9) Manipuri, (10) Marathi, (11) Nepali, (12) Oriya, (13) Punjabi, (14) Sanskrit, (15) Sindhi, (16) Tamil, (17) Telugu, (18) Urdu, (19) Bodo, (20) Santhali, (21) Maithili, and (22) Dogri_.
+- The team lead will be the only point of contact with the organizers. Any participant found to be indulging in any form of malpractice will be immediately disqualified.
+- The decision of the review committee and organizers in declaring the results will be final. No queries in this regard will be entertained.
+- The accepted submissions shall be released and published under open source license in the public domain. The copyright should be transferred to the FOSSEE project.
diff --git a/src/content/themePage/theme.md b/src/content/themePage/theme.md
new file mode 100644
index 0000000..baf6cba
--- /dev/null
+++ b/src/content/themePage/theme.md
@@ -0,0 +1,15 @@
+---
+heading: Celebrating India's Innovation
+---
+
+We invite participants to submit animation videos, no longer than 3 minutes, on the theme "Celebrating India's Innovation," where they showcase a problem, the action taken, and the innovative solution presented. Whether it's a simple yet ingenious solution found in your grandmother's kitchen or a groundbreaking innovation that has captured the nation's attention, we want to celebrate it all.
+
+Please find below a list of examples of innovation:
+
+1. A farmer's inventive irrigation system that maximizes crop yield.
+2. A student's eco-friendly solution to a local environmental challenge.
+3. A startup's groundbreaking technology revolutionizing healthcare accessibility.
+4. A traditional artisan's adaptation of age-old techniques for modern markets.
+   - And many, many more.
+
+Let's come together to celebrate India's rich culture of innovation and showcase the ingenuity of our nation. Embrace the challenge, unleash your creativity, and be a part of this exciting journey to celebrate India's innovation!
diff --git a/src/content/webinarPage/webinar.md b/src/content/webinarPage/webinar.md
new file mode 100644
index 0000000..b2cb51a
--- /dev/null
+++ b/src/content/webinarPage/webinar.md
@@ -0,0 +1,26 @@
+---
+---
+
+1. Q and A on Submission guidelines for ANIMATE 2024
+
+   - 27 May 2024 | 3 - 3.45 PM (Presenter: Khushalsingh)
+   - Weblink to the recording: [View](https://static.fossee.in/focal/animate_webinar/Q%20%26%20A%20Session%20for%20Animate%202024%2027-05-2024.mp4)
+
+2. Q and A on Submission for ANIMATE 2024
+
+   - 9 May 2024 | 3 - 3.45 PM (Presenter: Khushalsingh)
+   - Weblink to the recording: [View](https://static.fossee.in/focal/animate_webinar/Webinar%20on%20Q%20and%20A%20on%20Submission%20for%20ANIMATE%202024%2009-05-2024.mp4)
+
+3. How to choose your topic?
+
+   - 3rd May | 5 - 6 PM (Presenter: Dr. Sanjukta Ghosh, Head of Studies, Design Led Innovation Program, Srishti Manipal Institute, MAHE - Bangalore)
+   - Weblink to the recording: [View](https://static.fossee.in/focal/animate_webinar/Webinar%20on%20How%20to%20choose%20your%20topic%2020240503.mp4)
+
+4. How to use Synfig Studio to create animation?
+
+   - 30th April | 3 - 3.45 PM (Presenter: Khushalsingh)
+   - Weblink to the recording: [View](https://static.fossee.in/focal/animate_webinar/Webinar%20on%20Q%20%26%20A%20on%20How%20to%20use%20Synfig%20Studio%20to%20Create%20Animations%2020240430.mp4)
+
+5. How to learn Synfig Studio Using a Spoken Tutorial?
+   - 18th April | 3 - 3.45 PM (Presenter: Khushalsingh)
+   - Weblink to the recording: [View](https://static.fossee.in/focal/animate_webinar/Webinar%20on%20Q%20and%20A%20Session%20on%20How%20to%20use%20Spoken%20Tutorial%20to%20Learn%20Synfig%20Studio.mp4)
diff --git a/src/env.d.ts b/src/env.d.ts
index f964fe0..acef35f 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
index 411a459..87ecc61 100644
--- a/src/layouts/layout.astro
+++ b/src/layouts/layout.astro
@@ -1,17 +1,15 @@
 ---
 import navLinks from "./nav-links.json";
-import regi from '../images/btn-01-a.png';
-import { slide } from 'astro:transitions';
-import theme from '../images/btn-02-a.png';
-import guide from '../images/btn-03-a.png';
-import result from '../images/btn-04-a.png';
-import logo from '../images/Logo-Animate.png';
-import fos from '../images/fossee-logo.png';
-import iit from '../images/IITB-logo.png';
+import regi from "../images/btn-01-a.png";
+import { slide } from "astro:transitions";
+import theme from "../images/btn-02-a.png";
+import guide from "../images/btn-03-a.png";
+import result from "../images/btn-04-a.png";
+import logo from "../images/Logo-Animate.png";
+import fos from "../images/fossee-logo.png";
+import iit from "../images/IITB-logo.png";
 ---
 
-
-
 <div class="relative">
   <!-- <div id="lightbox" aria-label="lightbox" tab-index="0" role="button"
     class="z-20 top-0 left-0 w-screen h-screen bg-custom-background opacity-80"
@@ -22,30 +20,55 @@ import iit from '../images/IITB-logo.png';
       id="sidebar"
       class="lg:block hidden fixed z-30 inset-0 transition-all duration-300 w-[25rem] py-4 px-0 justify-center pt-4"
       style="background:#f70000;"
-      
-    
     >
       <!-- style="background: linear-gradient(180deg, rgb(255, 30, 30) 0%, rgb(216, 7, 38) 65%, rgb(255, 59, 108) 100%)""bg-gradient-to-bl from-rose-700 via-red-500 to-rose-500 -->
-    <div class="flex flex-row px-2" style="background-color:#fff8dd" data-astro-cid-mmggtga4="">
-    <div class="flex items-start w-1/2 float-start" data-astro-cid-mmggtga4="">
-    <a href="https://www.iitb.ac.in/" target="_blank">
-    <img src={iit.src} alt="iitb" decoding="async" data-astro-cid-mmggtga4=""
-    style="width: 150px;">
-    </a>
-    </div>
-    <div class="flex items-end justify-end float-right w-1/2" data-astro-cid-mmggtga4="">
-    <a href="https://fossee.in" target="_blank">
-    <img class=" float-right" src={fos.src} alt="fossee" decoding="async" data-astro-cid-mmggtga4="" 
-    style="width: 150px;">
-    </a>
-    </div>
-    </div>
+      <div
+        class="flex flex-row px-2"
+        style="background-color:#fff8dd"
+        data-astro-cid-mmggtga4=""
+      >
+        <div
+          class="flex items-start w-1/2 float-start"
+          data-astro-cid-mmggtga4=""
+        >
+          <a href="https://www.iitb.ac.in/" target="_blank">
+            <img
+              src={iit.src}
+              alt="iitb"
+              decoding="async"
+              data-astro-cid-mmggtga4=""
+              style="width: 150px;"
+            />
+          </a>
+        </div>
+        <div
+          class="flex items-end justify-end float-right w-1/2"
+          data-astro-cid-mmggtga4=""
+        >
+          <a href="https://fossee.in" target="_blank">
+            <img
+              class="float-right"
+              src={fos.src}
+              alt="fossee"
+              decoding="async"
+              data-astro-cid-mmggtga4=""
+              style="width: 150px;"
+            />
+          </a>
+        </div>
+      </div>
 
-      <div class="px-5 pt-7 flex flex-row align-items-center justify-center pb-2">
-        
-        <img  src={logo.src} style="width: 85%;" alt="ANIMATE 2024" decoding="async" />
+      <div
+        class="px-5 pt-7 flex flex-row align-items-center justify-center pb-2"
+      >
+        <img
+          src={logo.src}
+          style="width: 85%;"
+          alt="ANIMATE 2024"
+          decoding="async"
+        />
       </div>
-   
+
       <!-- <div class="row-span-1 pt-4 flex items-center justify-center"><ul>
         <li class="text-red-300"><a href="/register" class="flex-1 border-indigo-600 items-center justify-center rounded-md overflow-hidden">
     
@@ -56,63 +79,99 @@ import iit from '../images/IITB-logo.png';
       </ul>
      
     </div> -->
-        <div class="grid grid-rows-4 sm:grid-rows-4 pt-4">
-          <div class="row-span-1">
-            <div class="flex items-center justify-center flex-col gap-3 min-[500px]:flex-row">
-              <div class="dates items-center" style="color:#e7dacb">
-                <!-- <p class="important-date flex items-center justify-center text-2xl md:text-left lg:text-2xl"><strong> - Registrations are in Progress -</strong></p> --> 
-                <p class="important-date flex items-center justify-center text-2xl md:text-center lg:text-2xl text-center"><strong> - Registrations are closed -</strong></p>
-                <p class="important-date flex items-center justify-center text-2xl md:text-center lg:text-2xl text-center"><strong> - Last date of submission -</strong></p>
-                <p class="important-date flex items-center justify-center text-2xl md:text-center lg:text-2xl"> 23 June 2024</p>                
-                <!-- <p class="important-date flex items-center justify-center text-2xl md:text-left lg:text-2xl"><strong> - Last date of submission -</strong></p> -->
-                <!-- <p class="important-date flex items-center justify-center text-2xl md:text-left lg:text-2xl"> 15 May 2024</p> -->
-                
-              </div>
-            </div>
+      <div class="grid grid-rows-4 sm:grid-rows-4 pt-4">
+        <div class="row-span-1">
+          <div
+            class="flex items-center justify-center flex-col gap-3 min-[500px]:flex-row"
+          >
+            <div class="dates items-center" style="color:#e7dacb">
+              <!-- <p class="important-date flex items-center justify-center text-2xl md:text-left lg:text-2xl"><strong> - Registrations are in Progress -</strong></p> -->
+              <p
+                class="important-date flex items-center justify-center text-2xl md:text-center lg:text-2xl text-center"
+              >
+                <strong> - Registrations are closed -</strong>
+              </p>
+              <p
+                class="important-date flex items-center justify-center text-2xl md:text-center lg:text-2xl text-center"
+              >
+                <strong> - Last date of submission -</strong>
+              </p>
+              <p
+                class="important-date flex items-center justify-center text-2xl md:text-center lg:text-2xl"
+              >
+                23 June 2024
+              </p>
+              <!-- <p class="important-date flex items-center justify-center text-2xl md:text-left lg:text-2xl"><strong> - Last date of submission -</strong></p> -->
+              <!-- <p class="important-date flex items-center justify-center text-2xl md:text-left lg:text-2xl"> 15 May 2024</p> -->
             </div>
           </div>
         </div>
-          
-      
-   
+      </div>
+    </div>
 
-    <main class="lg:pl-[25rem] ">
-     
+    <main class="lg:pl-[25rem]">
       <!-- <div class="mx-auto px-0 sm:px-4 lg:px-16 py-8 max-w-none xl:ml-0 xl:mr-[0rem]">   -->
-        <div class="flex items-end justify-end">  
-         
-<nav class="float-end mb-3 pb-2">
-  <div class="mx-auto px-4 lg:px-16 pt-4 max-w-none xl:ml-0 xl:mr-[0rem] ">
-      <button class='inline-flex items-center justify-center md:hidden' data-collapse-toggle="main-navigation" type="button" aria-controls="main-navigation" aria-expanded="false">
-        <span class="sr-only">Open main menu</span>
-        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
-        </svg>
-    </button>
-    <div class="hidden w-full items-end md:block menu-item" id="main-navigation">
-      <ul class="menu items-end justify-end bebas-neue-regular">
-        {
-          navLinks.map((link) => {
-            const { label, href } = link;
+      <div class="flex items-end justify-end">
+        <nav class="float-end mb-3 pb-2">
+          <div
+            class="mx-auto px-4 lg:px-16 pt-4 max-w-none xl:ml-0 xl:mr-[0rem]"
+          >
+            <button
+              class="inline-flex items-center justify-center md:hidden"
+              data-collapse-toggle="main-navigation"
+              type="button"
+              aria-controls="main-navigation"
+              aria-expanded="false"
+            >
+              <span class="sr-only">Open main menu</span>
+              <svg
+                class="w-5 h-5"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 17 14"
+              >
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M1 1h15M1 7h15M1 13h15"></path>
+              </svg>
+            </button>
+            <div
+              class="hidden w-full items-end md:block menu-item"
+              id="main-navigation"
+            >
+              <ul class="menu items-end justify-end bebas-neue-regular">
+                {
+                  navLinks.map((link) => {
+                    const { label, href } = link;
 
-            return (
-              <li>
-                <a class="nav-link text-brown-300 hover:text-red-600 transition duration-300" href={href}>{label}</a>
-              </li>
-            );
-          })
-        }
-      </ul>
-      
-    </div>
-  </div>
-</nav>
-</div>
-      
-  <!-- </div> -->
+                    return (
+                      <li>
+                        <a
+                          class="nav-link text-brown-300 hover:text-red-600 transition duration-300"
+                          href={href}
+                        >
+                          {label}
+                        </a>
+                      </li>
+                    );
+                  })
+                }
+              </ul>
+            </div>
+          </div>
+        </nav>
+      </div>
 
-    <div class="mx-auto px-4 lg:px-16 max-w-none xl:ml-0 xl:mr-[0rem]"
-    transition:animate={slide({ duration: '0.4s' })}>
+      <!-- </div> -->
+
+      <div
+        class="mx-auto px-4 lg:px-16 max-w-none xl:ml-0 xl:mr-[0rem]"
+        transition:animate={slide({ duration: "0.4s" })}
+      >
         <slot />
       </div>
     </main>
@@ -124,7 +183,6 @@ import iit from '../images/IITB-logo.png';
     margin-bottom: 5px;
     display: inline-block;
     font-size: larger;
-
   }
 
   ul.menu li {
@@ -137,70 +195,63 @@ import iit from '../images/IITB-logo.png';
 
   @media only screen and (max-width: 600px;) {
     nav,
-  ul {
-    display:block;
-  }
+    ul {
+      display: block;
+    }
 
-  ul.menu li {
-    display:block;
+    ul.menu li {
+      display: block;
+    }
+  }
+  ul.menu li a {
+    text-decoration: none;
+    color: #6c5353;
   }
+  ul.menu li:hover {
+    color: red;
+    /* background-color: purple; */
   }
-  ul.menu li a{
-  text-decoration: none;
-  color:#6c5353;
-}
-ul.menu li:hover{
-color: red;
-/* background-color: purple; */
+  ul.menu li a:hover {
+    color: red;
+  }
+  .menu-item a.active {
+    color: #f70000 !important;
+    /* background-color: blue; */
+  }
+  ul.menu li:last-child {
+    border-right: none;
+  }
+  /* ul.menu li:hover, */
+  /* a.active {color: aqua;} */
+  ul.menu li a.active {
+    color: #f70000;
   }
-ul.menu li a:hover{
-  color:red;
-}
-.menu-item a.active{
-  color:#f70000 !important;
-  /* background-color: blue; */
-}
-ul.menu li:last-child{  
-  border-right: none;
-}
-/* ul.menu li:hover, */
-/* a.active {color: aqua;} */
-ul.menu li a.active{
-  color:#f70000;
-}
 </style>
 
 <script>
- 
- document.addEventListener('astro:page-load', () => {
-if(window.location.hash){
-var currentUrl = window.location.pathname.replace(/\/+$/, '') + window.location.hash.replace(/\/+$/, '');
-}
-else{
-
-  var currentUrl = window.location.pathname.replace(/\/+$/, '');
-}
-
-
-  var menuItems = document.querySelectorAll('.nav-link');
-
-console.log(currentUrl);
-  menuItems.forEach(function(item) {
-   
-    var menuItemUrl = item.getAttribute('href');
-console.log(menuItemUrl);
-    // Check if the current URL matches the menu item's href
-    if (currentUrl === menuItemUrl) {
-      // Add the 'active' class to the matching menu item
-      item.classList.add('active');
+  document.addEventListener("astro:page-load", () => {
+    if (window.location.hash) {
+      var currentUrl =
+        window.location.pathname.replace(/\/+$/, "") +
+        window.location.hash.replace(/\/+$/, "");
     } else {
-      // Remove the 'active' class from other menu items
-      item.classList.remove('active');
+      var currentUrl = window.location.pathname.replace(/\/+$/, "");
     }
-  });
-
- });
-
 
+    var menuItems = document.querySelectorAll(".nav-link");
 
+    console.log(currentUrl);
+    menuItems.forEach(function (item) {
+      var menuItemUrl = item.getAttribute("href");
+      console.log(menuItemUrl);
+      // Check if the current URL matches the menu item's href
+      if (currentUrl === menuItemUrl) {
+        // Add the 'active' class to the matching menu item
+        item.classList.add("active");
+      } else {
+        // Remove the 'active' class from other menu items
+        item.classList.remove("active");
+      }
+    });
+  });
 </script>
diff --git a/src/layouts/main.astro b/src/layouts/main.astro
index cf8fbfb..c104072 100644
--- a/src/layouts/main.astro
+++ b/src/layouts/main.astro
@@ -1,43 +1,47 @@
 ---
-import Layout from './layout.astro';
-import '../css/custom.css';
-import '@astrojs/tailwind/base.css';
+import Layout from "./layout.astro";
+import "../css/custom.css";
+import "@astrojs/tailwind/base.css";
 // import { ViewTransitions } from 'astro:transitions';
 ---
 
-<html lang='en'>
+<html lang="en">
   <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <meta charset='utf-8' />
-    
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
-   <title>ANIMATE 2024</title>
+    <meta charset="utf-8" />
+
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css"
+      rel="stylesheet"
+    />
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"
+    ></script>
+    <title>ANIMATE 2024</title>
     <!-- <ViewTransitions /> -->
-   
   </head>
-  <body class='prose max-w-none ' style="background-color:#e7dacb ;">
+  <body class="prose max-w-none" style="background-color:#e7dacb ;">
     <Layout>
-    <div class="lg:hidden border-t-2 border-t-gray-800 mb-6 pb-6">
-    </div>
+      <div class="lg:hidden border-t-2 border-t-gray-800 mb-6 pb-6"></div>
       <slot />
       <!-- back to home -->
-      
     </Layout>
     <div class="absolute z-10">
-    <div class="!fixed bottom-5 end-5 rounded-full bg-red-500 m-3 p-3 text-xs font-medium uppercase leading-tight text-white shadow-md transition duration-300 ease-in-out hover:bg-red-600 hover:shadow-lg "
-    >
-
-        <a href="/"
-        type="button"
-        data-twe-ripple-init
-        data-twe-ripple-color="light"
-        class="focus:bg-red-600 focus:shadow-lg focus:outline-none  focus:ring-0 active:bg-blue-800 active:shadow-lg"
-       
-        ><i class="far fa-home text-red-50 text-3xl z-10 hover:animate-bounce duration-700 ease-in-out"></i>
-      </a>
+      <div
+        class="!fixed bottom-5 end-5 rounded-full bg-red-500 m-3 p-3 text-xs font-medium uppercase leading-tight text-white shadow-md transition duration-300 ease-in-out hover:bg-red-600 hover:shadow-lg"
+      >
+        <a
+          href="/"
+          type="button"
+          data-twe-ripple-init
+          data-twe-ripple-color="light"
+          class="focus:bg-red-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg"
+          ><i
+            class="far fa-home text-red-50 text-3xl z-10 hover:animate-bounce duration-700 ease-in-out"
+          ></i>
+        </a>
+      </div>
     </div>
-  </div>
   </body>
 </html>
diff --git a/src/layouts/nav-links.json b/src/layouts/nav-links.json
index ca2893b..c19d039 100644
--- a/src/layouts/nav-links.json
+++ b/src/layouts/nav-links.json
@@ -1,5 +1,4 @@
 [
- 
   { "label": "About", "href": "/about" },
   { "label": "Theme", "href": "/theme" },
   { "label": "Register", "href": "/register" },
@@ -9,5 +8,5 @@
   { "label": "Webinar", "href": "/webinar" },
   { "label": "Partners", "href": "/partners" },
   { "label": "Contact", "href": "/contact" },
-  {"label": "FAQs", "href": "/contact#faq"}
+  { "label": "FAQs", "href": "/contact#faq" }
 ]
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 28926e9..90b36ea 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,66 +1,101 @@
 ---
-import Main from '../layouts/main.astro';
-import eligibility from '../images/eligibility.png';
-import { slide } from 'astro:transitions';
+import Main from "../layouts/main.astro";
+import eligibility from "../images/eligibility.png";
+import { slide } from "astro:transitions";
+
+const eligibilityContent = await Astro.glob("../content/aboutPage/*.md");
 ---
 
 <Main>
   <section id="about">
-  
-
     <div class="flex flex-col md:flex-row pt-16 mt-3">
       <!-- heading on bottom of div -->
       <div class="w-full md:w-1/2 relative min-h-full">
         <div class="md:absolute bottom-0">
-        <h1 class="justify-end text-4xl ">About ANIMATE 2024</h1>
-
-      </div>
+          <h1 class="justify-end text-4xl">About ANIMATE 2024</h1>
+        </div>
       </div>
       <div class="w-1/2">
-        <iframe width="400" height="280" src="https://www.youtube.com/embed/rUBhBL6UaaM?si=t8pNyO8ed7ufcJXJ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen
-        transition:animate={slide({ duration: '0.6s', delay: '1s' , direction: 'backward'})}></iframe>
+        <iframe
+          width="400"
+          height="280"
+          src="https://www.youtube.com/embed/rUBhBL6UaaM?si=t8pNyO8ed7ufcJXJ"
+          title="YouTube video player"
+          frameborder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          allowfullscreen
+          transition:animate={slide({
+            duration: "0.6s",
+            delay: "1s",
+            direction: "backward",
+          })}></iframe>
       </div>
     </div>
-    
+
     <!-- conten -->
     <div class="mt-4">
       <div class="pt-4 leading-normal sm:leading-loose">
-      
         <p class="text-pretty md:text-xl text-sm playfair-display-normal">
-          ANIMATE 2024 is an online Synfig Studio 2D Animation Hackathon organized by FOSSEE, IIT Bombay. The FOSSEE project is part of the National Mission on Education through Information and Communication Technology (ICT), Ministry of Education (MoE), Government of India. India is known for its creativity and resourcefulness, with innovation happening everywhere, from busy cities to quiet villages. With ANIMATE 2024, themed as Celebrating India's Innovation, we want to highlight and celebrate India's innovative spirit. So get started, avail this opportunity to upgrade your skills, and enhance your career. We welcome newbies and veterans - from school students to professionals and FLOSS enthusiasts - to take part in this Hackathon.
-           </p>
+          ANIMATE 2024 is an online Synfig Studio 2D Animation Hackathon
+          organized by FOSSEE, IIT Bombay. The FOSSEE project is part of the
+          National Mission on Education through Information and Communication
+          Technology (ICT), Ministry of Education (MoE), Government of India.
+          India is known for its creativity and resourcefulness, with innovation
+          happening everywhere, from busy cities to quiet villages. With ANIMATE
+          2024, themed as Celebrating India's Innovation, we want to highlight
+          and celebrate India's innovative spirit. So get started, avail this
+          opportunity to upgrade your skills, and enhance your career. We
+          welcome newbies and veterans - from school students to professionals
+          and FLOSS enthusiasts - to take part in this Hackathon.
+        </p>
       </div>
     </div>
-</section>
-<section id="eligibility">
-  
-
-  <div class="flex flex-col md:flex-row pt-3 mt-3">
-    <!-- heading on bottom of div -->
-    <div class="w-full md:w-1/2 relative min-h-full">
-      <div class="md:absolute bottom-0">
-      <h1 class="justify-end text-4xl mb-4">Eligibility to participate:</h1>
-    </div>
-    </div>
-    <div class="w-1/2">
-      <img  src={eligibility.src} alt="WELCOM TO SYNFIG STUDIO HACKATHON" decoding="async" width="50%"
-      transition:animate={slide({ duration: '0.6s', delay: '1s' , direction: 'backward'})} />
+  </section>
+  <section id="eligibility">
+    <div class="flex flex-col md:flex-row pt-3 mt-3">
+      <!-- heading on bottom of div -->
+      <div class="w-full md:w-1/2 relative min-h-full">
+        <div class="md:absolute bottom-0">
+          <h1 class="justify-end text-4xl mb-4">Eligibility to participate:</h1>
+        </div>
+      </div>
+      <div class="w-1/2">
+        <img
+          src={eligibility.src}
+          alt="WELCOM TO SYNFIG STUDIO HACKATHON"
+          decoding="async"
+          width="50%"
+          transition:animate={slide({
+            duration: "0.6s",
+            delay: "1s",
+            direction: "backward",
+          })}
+        />
+      </div>
     </div>
-  </div>
-  
-  <!-- conten -->
-  <div class="mt-4">
-    <div class="pt-4 leading-normal sm:leading-loose">
-    
-      <div class="text-justify md:text-xl text-sm playfair-display-normal"><ul class="list-disc">
-          <li>The hackathon is open to all.</li>
-          <li>Participants can join as individuals or in teams (maximum of 4 members).</li>
-          <li>High school/college students, faculty, and professionals (such as animators, designers, etc.) from any field who are interested in creating animations are welcome.</li>
-          <li>Knowledge of basic graphics, design, and animation is required.</li>
-          <li>The main objective of this event is to promote learning of Synfig Studio. If you are self-motivated and want to participate, you can self-learn Synfig Studio using <a href="spoken-tutorial.org">Spoken tutorials</a>. These tutorials are available in English, Hindi, Kannada, Marathi, Malayalam, Tamil, and Telugu.</li>
-          </ul>
+
+    <!-- content -->
+    <div class="mt-4">
+      <div class="pt-4 leading-normal sm:leading-loose">
+        <div
+          class="eligible text-justify md:text-xl text-sm playfair-display-normal"
+        >
+          {
+            eligibilityContent.map((content) => {
+              const Content = content.Content;
+              // console.log(Content);
+              return <Content />;
+            })
+          }
         </div>
+      </div>
     </div>
-  </div>
-</section>
+  </section>
 </Main>
+
+<script>
+  const eligible = document.querySelector(".eligible");
+  const eligibleUL = eligible.querySelector("ul");
+  const eligibleLI = eligible.querySelectorAll("ul li");
+  eligibleUL.classList.add("list-disc");
+</script>
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index be1be5e..8fb3742 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -1,99 +1,164 @@
 ---
-import Main from '../layouts/main.astro';
+import Main from "../layouts/main.astro";
 ---
 
 <Main>
-<section id="faq">
- <div class="py-3">
-            <!-- 1/4 Width Column -->
-            <!-- <div class="col-span-1 bg-gray-300 p-4">
+  <section id="faq">
+    <div class="py-3">
+      <!-- 1/4 Width Column -->
+      <!-- <div class="col-span-1 bg-gray-300 p-4">
                 <img src=""/>
                 <h1 class="section-title">Celebrating India's Innovation</h1>
                 
                 
             </div> -->
-            <!-- 3/4 Width Column -->
-            <div class="col-span-1 p-4">
-                
-                <h1 class="section-title text-4xl pb-3">
-                FAQs
-                </h1>
-            <div class="p-4 playfair-display-normal">
-           <p class="text-xl">Please refer to <a class="hover:text-red-400 text-red-700" href="https://docs.google.com/document/d/e/2PACX-1vQp9kFiMEdqMDcWkLUQLWN4GjKEUgQsswd_KcjMw1ub8N1tbG4eqZlt141-ewggqkBZ7e9dDKO7Z0q1/pub" target="_blank">this</a> document for FAQs on ANIMATE 2024.
-</p>
-        </div>
+      <!-- 3/4 Width Column -->
+      <div class="col-span-1 p-4">
+        <h1 class="section-title text-4xl pb-3">FAQs</h1>
+        <div class="p-4 playfair-display-normal">
+          <p class="text-xl">
+            Please refer to <a
+              class="hover:text-red-400 text-red-700"
+              href="https://docs.google.com/document/d/e/2PACX-1vQp9kFiMEdqMDcWkLUQLWN4GjKEUgQsswd_KcjMw1ub8N1tbG4eqZlt141-ewggqkBZ7e9dDKO7Z0q1/pub"
+              target="_blank">this</a
+            > document for FAQs on ANIMATE 2024.
+          </p>
         </div>
-       
-
-</section>
- <section id="contact">
-    <div class="lg:grid grid-cols-2 gap-4">
-    <div class="text-center md:text-2xl text-sm">
-        <h1 class="justify-end text-4xl mb-4">Contact Us</h1>
-          <p class=" playfair-display-normal">For any queries, write to us at </p>
-          <ul class=" playfair-display-normal">
-            <li><a class=" hover:text-red-400 text-red-700" href="mailto:info@fossee.in">info@fossee.in</a></li>
-            <li><a class=" hover:text-red-400 text-red-700" href="mailto:contact-focal@fossee.in">contact-focal@fossee.in</a></li>
-
+      </div>
+    </div>
+    <section id="contact">
+      <div class="lg:grid grid-cols-2 gap-4">
+        <div class="text-center md:text-2xl text-sm">
+          <h1 class="justify-end text-4xl mb-4">Contact Us</h1>
+          <p class="playfair-display-normal">For any queries, write to us at</p>
+          <ul class="playfair-display-normal">
+            <li>
+              <a
+                class="hover:text-red-400 text-red-700"
+                href="mailto:info@fossee.in">info@fossee.in</a>
+            </li>
+            <li>
+              <a
+                class="hover:text-red-400 text-red-700"
+                href="mailto:contact-focal@fossee.in"
+                >contact-focal@fossee.in</a>
+            </li>
           </ul>
-          </div>
-    <div class="text-center">
-        <h1 class="justify-end text-4xl mb-4">Follow Us</h1>
-        <div class="grid grid-cols-5 gap-2">
-          <div>
-          <a class="bg-blue-500 p-2 font-semibold text-white inline-flex items-center space-x-2 rounded" href="https://www.facebook.com/FOSSEENMEICT" target="_blank">
-                <svg class="w-10 h-10 fill-current" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" /></svg>
-              </a>
-          </div>
-          <div>
-          <a class="bg-black p-2 font-semibold text-white inline-flex items-center space-x-2 rounded" href="https://twitter.com/FOSSEE" target="_blank">
-                <svg  class="w-10 h-10 fill-current"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      viewBox="0 0 512 512">
-      <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-      <path
-        d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
-    </svg>
+        </div>
+        <div class="text-center">
+          <h1 class="justify-end text-4xl mb-4">Follow Us</h1>
+          <div class="grid grid-cols-5 gap-2">
+            <div>
+              <a
+                class="bg-blue-500 p-2 font-semibold text-white inline-flex items-center space-x-2 rounded"
+                href="https://www.facebook.com/FOSSEENMEICT"
+                target="_blank"
+              >
+                <svg
+                  class="w-10 h-10 fill-current"
+                  role="img"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  ><path
+                    d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"
+                  ></path></svg
+                >
               </a>
-          </div>
-          <div>
-          <a href="https://www.instagram.com/fossee_nmeict/" target="_blank" class="bg-[#c13584] p-2 font-semibold text-white inline-flex items-center space-x-2 rounded">
-                <svg class="w-10 h-10 fill-current"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      viewBox="0 0 448 512">
-      <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-      <path
-        d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z" />
-    </svg>
+            </div>
+            <div>
+              <a
+                class="bg-black p-2 font-semibold text-white inline-flex items-center space-x-2 rounded"
+                href="https://twitter.com/FOSSEE"
+                target="_blank"
+              >
+                <svg
+                  class="w-10 h-10 fill-current"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 512 512"
+                >
+                  <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                  <path
+                    d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
+                  ></path>
+                </svg>
               </a>
-          </div>
-          <div>
-          <a class="bg-blue-600 p-2 font-semibold text-white inline-flex items-center space-x-2 rounded" href="https://in.linkedin.com/company/fossee-iitb" target="_blank">
-                <svg class="w-10 h-10 fill-current" role="img" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
-            <g><path d="M218.123122,218.127392 L180.191928,218.127392 L180.191928,158.724263 C180.191928,144.559023 179.939053,126.323993 160.463756,126.323993 C140.707926,126.323993 137.685284,141.757585 137.685284,157.692986 L137.685284,218.123441 L99.7540894,218.123441 L99.7540894,95.9665207 L136.168036,95.9665207 L136.168036,112.660562 L136.677736,112.660562 C144.102746,99.9650027 157.908637,92.3824528 172.605689,92.9280076 C211.050535,92.9280076 218.138927,118.216023 218.138927,151.114151 L218.123122,218.127392 Z M56.9550587,79.2685282 C44.7981969,79.2707099 34.9413443,69.4171797 34.9391618,57.260052 C34.93698,45.1029244 44.7902948,35.2458562 56.9471566,35.2436736 C69.1040185,35.2414916 78.9608713,45.0950217 78.963054,57.2521493 C78.9641017,63.090208 76.6459976,68.6895714 72.5186979,72.8184433 C68.3913982,76.9473153 62.7929898,79.26748 56.9550587,79.2685282 M75.9206558,218.127392 L37.94995,218.127392 L37.94995,95.9665207 L75.9206558,95.9665207 L75.9206558,218.127392 Z M237.033403,0.0182577091 L18.8895249,0.0182577091 C8.57959469,-0.0980923971 0.124827038,8.16056231 -0.001,18.4706066 L-0.001,237.524091 C0.120519052,247.839103 8.57460631,256.105934 18.8895249,255.9977 L237.033403,255.9977 C247.368728,256.125818 255.855922,247.859464 255.999,237.524091 L255.999,18.4548016 C255.851624,8.12438979 247.363742,-0.133792868 237.033403,0.000790807055"></path></g>
+            </div>
+            <div>
+              <a
+                href="https://www.instagram.com/fossee_nmeict/"
+                target="_blank"
+                class="bg-[#c13584] p-2 font-semibold text-white inline-flex items-center space-x-2 rounded"
+              >
+                <svg
+                  class="w-10 h-10 fill-current"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 448 512"
+                >
+                  <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                  <path
+                    d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
+                  ></path>
+                </svg>
               </a>
-          </div>
-          <div>
-          <a href="https://www.youtube.com/@fosseeiitbombay" target="_blank" class="bg-red-600 p-2 font-semibold text-white inline-flex items-center space-x-2 rounded">
-                <svg class="w-10 h-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z" /></svg>
+            </div>
+            <div>
+              <a
+                class="bg-blue-600 p-2 font-semibold text-white inline-flex items-center space-x-2 rounded"
+                href="https://in.linkedin.com/company/fossee-iitb"
+                target="_blank"
+              >
+                <svg
+                  class="w-10 h-10 fill-current"
+                  role="img"
+                  viewBox="0 0 256 256"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    ><path
+                      d="M218.123122,218.127392 L180.191928,218.127392 L180.191928,158.724263 C180.191928,144.559023 179.939053,126.323993 160.463756,126.323993 C140.707926,126.323993 137.685284,141.757585 137.685284,157.692986 L137.685284,218.123441 L99.7540894,218.123441 L99.7540894,95.9665207 L136.168036,95.9665207 L136.168036,112.660562 L136.677736,112.660562 C144.102746,99.9650027 157.908637,92.3824528 172.605689,92.9280076 C211.050535,92.9280076 218.138927,118.216023 218.138927,151.114151 L218.123122,218.127392 Z M56.9550587,79.2685282 C44.7981969,79.2707099 34.9413443,69.4171797 34.9391618,57.260052 C34.93698,45.1029244 44.7902948,35.2458562 56.9471566,35.2436736 C69.1040185,35.2414916 78.9608713,45.0950217 78.963054,57.2521493 C78.9641017,63.090208 76.6459976,68.6895714 72.5186979,72.8184433 C68.3913982,76.9473153 62.7929898,79.26748 56.9550587,79.2685282 M75.9206558,218.127392 L37.94995,218.127392 L37.94995,95.9665207 L75.9206558,95.9665207 L75.9206558,218.127392 Z M237.033403,0.0182577091 L18.8895249,0.0182577091 C8.57959469,-0.0980923971 0.124827038,8.16056231 -0.001,18.4706066 L-0.001,237.524091 C0.120519052,247.839103 8.57460631,256.105934 18.8895249,255.9977 L237.033403,255.9977 C247.368728,256.125818 255.855922,247.859464 255.999,237.524091 L255.999,18.4548016 C255.851624,8.12438979 247.363742,-0.133792868 237.033403,0.000790807055"
+                    ></path></g
+                  >
+                </svg>
               </a>
+              <div>
+                <a
+                  href="https://www.youtube.com/@fosseeiitbombay"
+                  target="_blank"
+                  class="bg-red-600 p-2 font-semibold text-white inline-flex items-center space-x-2 rounded"
+                >
+                  <svg
+                    class="w-10 h-10 fill-current"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 16 16"
+                    ><path
+                      d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"
+                    ></path></svg
+                  >
+                </a>
+              </div>
+            </div>
           </div>
         </div>
-          
-          </div>
-    </div>
-  </section>
-
-</Main>
-<footer class="fixed  lg:pl-[25rem] bottom-0 right-0 w-full p-4 bg-white border-t border-gray-200 shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800 dark:border-gray-600">
-  <div class="w-full bg-gray-800 text-white p-4 md:ml-8">
-<!-- Centered Text in the Footer -->
-<div class="text-center">
-  <p class="text-center text-xs">This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.</p>
-         <p class="text-center text-xs">The FOSSEE project is funded by the National Mission on Education through ICT, Ministry of Education, Government of India.</p>
-      
-</div>
-</div>
-</footer>
-\ No newline at end of file
+      </div>
+    </section>
+    <footer
+      class="fixed lg:pl-[25rem] bottom-0 right-0 w-full p-4 bg-white border-t border-gray-200 shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800 dark:border-gray-600"
+    >
+      <div class="w-full bg-gray-800 text-white p-4 md:ml-8">
+        <!-- Centered Text in the Footer -->
+        <div class="text-center">
+          <p class="text-center text-xs">
+            This work is licensed under a Creative Commons
+            Attribution-ShareAlike 4.0 International License.
+          </p>
+          <p class="text-center text-xs">
+            The FOSSEE project is funded by the National Mission on Education
+            through ICT, Ministry of Education, Government of India.
+          </p>
+        </div>
+      </div>
+    </footer>
+  </section></Main
+>
diff --git a/src/pages/eligibility.astro b/src/pages/eligibility.astro
index e1b8328..2995436 100644
--- a/src/pages/eligibility.astro
+++ b/src/pages/eligibility.astro
@@ -1,42 +1,58 @@
 ---
-import Main from '../layouts/main.astro';
-import eligibility from '../images/eligibility.png';
-import { slide } from 'astro:transitions';
+import Main from "../layouts/main.astro";
+import eligibility from "../images/eligibility.png";
+import { slide } from "astro:transitions";
 ---
 
 <Main>
   <section id="eligibility">
-  
-
     <div class="flex flex-col md:flex-row pt-3 mt-3">
       <!-- heading on bottom of div -->
       <div class="w-full md:w-1/2 relative min-h-full">
         <div class="md:absolute bottom-0">
-        <h1 class="justify-end text-4xl mb-4">Eligibility to participate:</h1>
-      </div>
+          <h1 class="justify-end text-4xl mb-4">Eligibility to participate:</h1>
+        </div>
       </div>
       <div class="w-1/2">
-        <img  src={eligibility.src} alt="WELCOM TO SYNFIG STUDIO HACKATHON" decoding="async"
-        transition:animate={slide({ duration: '0.6s', delay: '1s' , direction: 'backward'})} />
+        <img
+          src={eligibility.src}
+          alt="WELCOM TO SYNFIG STUDIO HACKATHON"
+          decoding="async"
+          transition:animate={slide({
+            duration: "0.6s",
+            delay: "1s",
+            direction: "backward",
+          })}
+        />
       </div>
     </div>
-    
+
     <!-- conten -->
     <div class="mt-4">
       <div class="pt-4 leading-normal sm:leading-loose">
-      
-        <div class="text-justify md:text-2xl text-sm playfair-display-normal"><ul style="list-style:disc;" class="list-inside">
+        <div class="text-justify md:text-2xl text-sm playfair-display-normal">
+          <ul style="list-style:disc;" class="list-inside">
             <li>The hackathon is open to all.</li>
             <li>Participate as an individual or as a team (max. 4 members).</li>
-            <li>High school/college students, faculty, professionals (animators, designers etc.) from any field who are interested in creating animations.</li>
-            <li>Knowledge of basic graphics, designing and animation is required.</li>
-            <li>Prior knowledge of using Synfig Studio to create 2D animation is expected. If you are self motivated and want to participate you can self learn Synfig Studio using <a href="spoken-tutorial.org">Spoken tutorials</a>. These are available in English, Hindi, Kannada, Marathi, Malayalam, Tamil and Telugu.</li>
-            </ul>
-          </div>
+            <li>
+              High school/college students, faculty, professionals (animators,
+              designers etc.) from any field who are interested in creating
+              animations.
+            </li>
+            <li>
+              Knowledge of basic graphics, designing and animation is required.
+            </li>
+            <li>
+              Prior knowledge of using Synfig Studio to create 2D animation is
+              expected. If you are self motivated and want to participate you
+              can self learn Synfig Studio using <a href="spoken-tutorial.org"
+                >Spoken tutorials</a
+              >. These are available in English, Hindi, Kannada, Marathi,
+              Malayalam, Tamil and Telugu.
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
-</section>
+  </section>
 </Main>
-
-
-
diff --git a/src/pages/guidelines.astro b/src/pages/guidelines.astro
index 831a9fc..d2eb932 100644
--- a/src/pages/guidelines.astro
+++ b/src/pages/guidelines.astro
@@ -1,109 +1,158 @@
 ---
-import Main from '../layouts/main.astro';
-import Folder_jpg from '../images/folder_1.png' 
----
+import Main from "../layouts/main.astro";
+import Folder_jpg from "../images/folder_1.png";
 
+const guidelinesContent = await Astro.glob("../content/guidelinesPage/*.md");
+---
 
 <Main>
-        <section id="guidelines">
+  <section id="guidelines">
     <div class="container py-3 grid grid-cols-1 sm:grid-cols-4 gap-4">
-          <!-- 1/4 Width Column -->
-          <!-- <div class="items-center  justify-center col-span-1 bg-gray-300 p-4" style="text-align: center;">
-            <img src=""/>
-            <h1 class="section-title"> Guidelines and Submissions</h1><br />
-    <div>Submit animation at <a target="_blank" class="hover:text-red-400 text-red-700" href=" https://learn.fossee.in">https://learn.fossee.in</a>.</div>
-    <img class="logos" src={Folder_jpg.src} alt="regi" decoding="async" />
-        </div> -->
-        <!-- 3/4 Width Column -->
-        <div class="col-span-5 p-4">
-            
-                <h1 class="section-title  text-4xl pb-3">Submission Guidelines
-                </h1>
-                <ul style="list-style: circle;" class="text-xl  playfair-display-normal ">
-                    
-                        <li>The team lead have to submit the animations at <a target="_blank" class="hover:text-red-400 text-red-700"  href="https://learn.fossee.in" target="_blank">https://learn.fossee.in.</a></li>
-                        <li>The login instructions have been emailed to the team leads.</li>
-                                <li>Reach us at info[at]fossee[dot] in case you did not receive the login instructions.</li>
-                        </ul>
-                        <h1 class="section-title text-4xl pb-3">Properties of animation:
-                        </h1>
-                        <ul style="list-style: circle;" class="text-xl  playfair-display-normal ">
-                            
-                            <li>Software for creating the animation - Synfig Studio</li>
-                            <li>Animation duration - <span class="text-2xl text-red-700">3 minutes or less</span></li>
-                            <li>Minimum render setting quality at <span class="text-2xl text-red-700">8</span></li>
-                            <li>Minimum resolution - <span class="text-2xl text-red-700">720 x 480 px</span></li>
-                            <li>Frame rate - <span class="text-2xl text-red-700">24 fps</span></li>
-                            </ul>
-                            <h1 class="section-title text-4xl pb-3">Preparation for submission:
-                            </h1>
-                            <ul style="list-style: circle;" class="text-xl  playfair-display-normal ">
-                                
-                               
-                                    <li>Create a folder with the name of your Team-ID.</li>
-                                    <li>The folder should consist of the following files:
-                                    <ul style="list-style: square;" class="ml-5">
-                                    <li>Source files generated in Synfig Studio - .sifz/.sif</li>
-                                    <li>The video output (Avi/Mov/Fla/Ogg/Mp4)</li>
-                                    <li>Source files of artwork, illustrations, images, <br />editing files, fonts etc.</li>
-                                    </ul>
-                                    </li>
-                                    <li>Compress the folder and upload in zip format only.</li>
-                                    <li>The last date of submission is <span class="text-blue-800 text-3xl">20 May 2024 </span> till midnight. The participants can modify their submission anytime within this deadline.</li>
-                                    </ul>
-                                    <h1 class="section-title text-4xl pb-3">Steps to submit animation
-                                    </h1>
-                                    <ul style="list-style: circle;" class="text-xl  playfair-display-normal ">
-                                        
-                                       
-                                      <li>Go to <a target="_blank" class="hover:text-red-400 text-red-700"  href="https://learn.fossee.in">https://learn.fossee.in</a></li>
-                                      <li>Enter the username and password as received over mail and click on "Log in".</li>
-                                      <li>After logging in for the first time, you will be prompted to update the password.</li>
-                                      <li>Click on the <span class="hover:text-red-400 text-red-700">"Animate 2024"</span> Course available in the left panel of your dashboard.</li>
-                                      <li>Scroll down and go to the "Animation Submission Upload" section.</li>
-                                      <li>Go to "Click here to add your submission" to submit your files for the hackathon.</li>
-                                      <li>To see the steps to upload your animation, please watch <a href="https://youtu.be/3MrEhbK7g3o" target="_blank" class="text-red-700 hover:text-red-400">this</a> video.</li>
-                                      </ul>
-          
-        </div>
-      
-      
+      <!-- 3/4 Width Column -->
+      <div class="col-span-5 p-4">
+        <h1 class="section-title text-4xl pb-3">Submission Guidelines</h1>
+        <ul style="list-style: circle;" class="text-xl playfair-display-normal">
+          <li>
+            The team lead have to submit the animations at <a
+              target="_blank"
+              class="hover:text-red-400 text-red-700"
+              href="https://learn.fossee.in"
+              target="_blank">https://learn.fossee.in.</a
+            >
+          </li>
+          <li>The login instructions have been emailed to the team leads.</li>
+          <li>
+            Reach us at info[at]fossee[dot] in case you did not receive the
+            login instructions.
+          </li>
+        </ul>
+        <h1 class="section-title text-4xl pb-3">Properties of animation:</h1>
+        <ul style="list-style: circle;" class="text-xl playfair-display-normal">
+          <li>Software for creating the animation - Synfig Studio</li>
+          <li>
+            Animation duration - <span class="text-2xl text-red-700"
+              >3 minutes or less</span
+            >
+          </li>
+          <li>
+            Minimum render setting quality at <span
+              class="text-2xl text-red-700">8</span
+            >
+          </li>
+          <li>
+            Minimum resolution - <span class="text-2xl text-red-700"
+              >720 x 480 px</span
+            >
+          </li>
+          <li>
+            Frame rate - <span class="text-2xl text-red-700">24 fps</span>
+          </li>
+        </ul>
+        <h1 class="section-title text-4xl pb-3">Preparation for submission:</h1>
+        <ul style="list-style: circle;" class="text-xl playfair-display-normal">
+          <li>Create a folder with the name of your Team-ID.</li>
+          <li>
+            The folder should consist of the following files:
+            <ul style="list-style: square;" class="ml-5">
+              <li>Source files generated in Synfig Studio - .sifz/.sif</li>
+              <li>The video output (Avi/Mov/Fla/Ogg/Mp4)</li>
+              <li>
+                Source files of artwork, illustrations, images, <br />editing
+                files, fonts etc.
+              </li>
+            </ul>
+          </li>
+          <li>Compress the folder and upload in zip format only.</li>
+          <li>
+            The last date of submission is <span class="text-blue-800 text-3xl"
+              >20 May 2024
+            </span> till midnight. The participants can modify their submission anytime
+            within this deadline.
+          </li>
+        </ul>
+        <h1 class="section-title text-4xl pb-3">\ Steps to submit animation</h1>
+        <ul style="list-style: circle;" class="text-xl playfair-display-normal">
+          <li>
+            Go to <a
+              target="_blank"
+              class="hover:text-red-400 text-red-700"
+              href="https://learn.fossee.in">https://learn.fossee.in</a
+            >
+          </li>
+          <li>
+            Enter the username and password as received over mail and click on
+            "Log in".
+          </li>
+          <li>
+            After logging in for the first time, you will be prompted to update
+            the password.
+          </li>
+          <li>
+            Click on the <span class="hover:text-red-400 text-red-700"
+              >"Animate 2024"</span
+            > Course available in the left panel of your dashboard.
+          </li>
+          <li>
+            Scroll down and go to the "Animation Submission Upload" section.
+          </li>
+          <li>
+            Go to "Click here to add your submission" to submit your files for
+            the hackathon.
+          </li>
+          <li>
+            To see the steps to upload your animation, please watch <a
+              href="https://youtu.be/3MrEhbK7g3o"
+              target="_blank"
+              class="text-red-700 hover:text-red-400">this</a
+            > video.
+          </li>
+        </ul>
       </div>
+    </div>
 
-
-      <div class="container grid grid-cols-1 sm:grid-cols-4 gap-4">
-        <!-- 1/4 Width Column -->
-        <!-- <div class="items-center  justify-center col-span-1 bg-gray-300 p-4" style="text-align: center;">
-          <img src=""/>
-          <h1 class="section-title">Evaluation and Winner/Result</h1>
-          <div>Click here to see 
-            Successful participant and 
-            winner’s list.</div>
-          
-      
-      </div> -->
+    <div class="container grid grid-cols-1 sm:grid-cols-4 gap-4">
       <!-- 3/4 Width Column -->
       <div class="col-span-5 p-4">
-          
-          <h1 class="section-title text-4xl pb-3">Evaluation of animation</h1>
-          <ul style="list-style: circle;"  class="text-xl  playfair-display-normal ">
-<li>Submitted animations will go through the Technical Judgment round. The eligible animations will go to the next round of Creative Judgment.</li>
-<li>Technical and Creative scores will be added to declare the final winners.</li>
-<li>All the submissions which pass the Technical Judgment round will get a Completion certificate for the hackathon.</li>
-</ul>
-<p class="text-xl  playfair-display-normal "><span class="text-red-700 text-2xl">Note:</span> The participants are free to interpret the stories/ use creativity according to the current situations happening across the world.</p>
-<p class="text-2xl  playfair-display-normal pt-3">The following will result in the rejection of the submissions:</p>
-<ul style="list-style: circle;"  class="text-xl  playfair-display-normal ">
-<li>Using proprietary software to create the animation.</li>
-<li>Partial submission of files mentioned in the Submission checklist.</li>
-<li>Any form of plagiarism.</li>
-<li>Narration in any language other than the scheduled 22 Indian languages.</li>
-<li>Content depicting violence/abuse/improper use of illustration/nudity &amp; sexuality/hate towards any specific religion.</li>
-</ul>
-        
+        <h1 class="section-title text-4xl pb-3">Evaluation of animation</h1>
+        <ul style="list-style: circle;" class="text-xl playfair-display-normal">
+          <li>
+            Submitted animations will go through the Technical Judgment round.
+            The eligible animations will go to the next round of Creative
+            Judgment.
+          </li>
+          <li>
+            Technical and Creative scores will be added to declare the final
+            winners.
+          </li>
+          <li>
+            All the submissions which pass the Technical Judgment round will get
+            a Completion certificate for the hackathon.
+          </li>
+        </ul>
+        <p class="text-xl playfair-display-normal">
+          <span class="text-red-700 text-2xl">Note:</span> The participants are free
+          to interpret the stories/ use creativity according to the current situations
+          happening across the world.
+        </p>
+        <p class="text-2xl playfair-display-normal pt-3">
+          The following will result in the rejection of the submissions:
+        </p>
+        <ul style="list-style: circle;" class="text-xl playfair-display-normal">
+          <li>Using proprietary software to create the animation.</li>
+          <li>
+            Partial submission of files mentioned in the Submission checklist.
+          </li>
+          <li>Any form of plagiarism.</li>
+          <li>
+            Narration in any language other than the scheduled 22 Indian
+            languages.
+          </li>
+          <li>
+            Content depicting violence/abuse/improper use of illustration/nudity
+            &amp; sexuality/hate towards any specific religion.
+          </li>
+        </ul>
       </div>
-    
-    
     </div>
-</section>
-</Main>
-\ No newline at end of file
+  </section>
+</Main>
diff --git a/src/pages/partners.astro b/src/pages/partners.astro
index fffe50b..fceebf9 100644
--- a/src/pages/partners.astro
+++ b/src/pages/partners.astro
@@ -1,173 +1,185 @@
 ---
-import Main from '../layouts/main.astro';
-import edivgibidivty from '../images/edivgibidivty.png';
+import Main from "../layouts/main.astro";
+import edivgibidivty from "../images/edivgibidivty.png";
 // import { sdivde } from 'astro:transitions';
-import fossee from '../images/fossee-logo.png';
-import iitb from '../images/IITB-logo.png';
-import focal from '../images/focal.png';
-import spoken from '../images/spoken.png';
-import srishti from '../images/srishti-manipal-logo.png';
-import manipal from '../images/manipal-logo.png';
-import ww from '../images/whistling-wood-logo.png';
-import mbc from '../images/manipal-bangalore-camp.png';
+import fossee from "../images/fossee-logo.png";
+import iitb from "../images/IITB-logo.png";
+import focal from "../images/focal.png";
+import spoken from "../images/spoken.png";
+import srishti from "../images/srishti-manipal-logo.png";
+import manipal from "../images/manipal-logo.png";
+import ww from "../images/whistling-wood-logo.png";
+import mbc from "../images/manipal-bangalore-camp.png";
 ---
 
 <Main>
-    <section id="partner">
-         <div class="flex items-center justify-center mb-2 mt-4">
-        <h1 class="justify-end text-4xl">Knowledge Partner: <span class="text-lg justify-center">Design Led Innovation Program, Srishti Manipal Institute, MAHE - Bangalore</span></h1>
-      </div>
+  <section id="partner">
+    <div class="flex items-center justify-center mb-2 mt-4">
+      <h1 class="justify-end text-4xl">
+        Knowledge Partner: <span class="text-lg justify-center"
+          >Design Led Innovation Program, Srishti Manipal Institute, MAHE -
+          Bangalore</span
+        >
+      </h1>
+    </div>
     <!-- First Row -->
-    <div class="border-4 border-[#1f2937] rounded-t-[18px] border-b-[23px] rounded-b-lg p-4 text-white" style="border: ;">
+    <div
+      class="border-4 border-[#1f2937] rounded-t-[18px] border-b-[23px] rounded-b-lg p-4 text-white"
+      style="border: ;"
+    >
       <!-- Your content for the first row goes here -->
       <!-- <p>Partners </p> -->
-      <div class="grid gap-4 grid-cols-3 place-items-center items-center justify-center">
-
+      <div
+        class="grid gap-4 grid-cols-3 place-items-center items-center justify-center"
+      >
         <div class="text-red-300">
-          <a href="https://srishtimanipalinstitute.in/" target="_blank" class="flex-1 border-indigo-600 items-center justify-center rounded-md overflow-hidden">
-      
+          <a
+            href="https://srishtimanipalinstitute.in/"
+            target="_blank"
+            class="flex-1 border-indigo-600 items-center justify-center rounded-md overflow-hidden"
+          >
             <img class="logos" src={srishti.src} alt="regi" decoding="async" />
-            <!-- <img src="../images/register.png" alt="Image 1" class="w-1/4 w-25"> -->
-        
-            
-          </a></div>
-          <div class="text-red-300">
-          <a href="https://www.manipal.edu/mu.html" target="_blank" class="flex-1 border-indigo-600 items-center justify-center rounded-md overflow-hidden">
-      
+          </a>
+        </div>
+        <div class="text-red-300">
+          <a
+            href="https://www.manipal.edu/mu.html"
+            target="_blank"
+            class="flex-1 border-indigo-600 items-center justify-center rounded-md overflow-hidden"
+          >
             <img class="logos" src={manipal.src} alt="regi" decoding="async" />
-            <!-- <img src="../images/register.png" alt="Image 1" class="w-1/4 w-25"> -->
-        
-            
           </a>
-          </div>
-          <div class="text-red-300">
-            <a href="https://www.manipal.edu/mu.html" target="_blank" class="flex-1 border-indigo-600 items-center justify-center rounded-md overflow-hidden">
-        
-              <img class="logos" src={mbc.src} alt="manipal Banglore Campus" decoding="async" />
-              <!-- <img src="../images/register.png" alt="Image 1" class="w-1/4 w-25"> -->
-          
-              
-            </a>
-            </div>
-      
-
         </div>
+        <div class="text-red-300">
+          <a
+            href="https://www.manipal.edu/mu.html"
+            target="_blank"
+            class="flex-1 border-indigo-600 items-center justify-center rounded-md overflow-hidden"
+          >
+            <img
+              class="logos"
+              src={mbc.src}
+              alt="manipal Banglore Campus"
+              decoding="async"
+            />
+          </a>
         </div>
-<div class="grid grid-cols-2 gap-4 mb-2 mt-2">
-<div class="flex items-center justify-center">
-  <h1 class="justify-end text-4xl">Execution Partner</h1>
-</div>
-<div class="flex items-center justify-center">
-  <h1 class="justify-end text-4xl">Youth Partner</h1>
-</div>
-</div>
-<div class="grid grid-cols-2 gap-4">
-<!-- First Row -->
-<div class="border-4 border-[#1f2937] rounded-t-[18px] border-b-[23px] rounded-b-lg p-4 text-white" style="border: ;">
-<!-- Your content for the first row goes here -->
-<!-- <p>Partners </p> -->
-<div class="grid gap-4 grid-cols-1 place-items-center items-center justify-center">
-  <div class="text-red-300">
-    <a href="https://www.whistlingwoods.net/" target="_blank" class="flex-1 border-indigo-600 items-center justify-center rounded-md overflow-hidden">
-
-      <img class="logos" src={ww.src} alt="regi" decoding="async" width="200px" />
-      <!-- <img src="../images/register.png" alt="Image 1" class="w-1/4 w-25"> -->
-  
-      
-    </a></div>
-
-
-  </div>
-  </div>
-
-<!-- First Row -->
-<div class="border-4 border-[#1f2937] rounded-t-[18px] border-b-[23px] rounded-b-lg p-4 text-white" style="border: ;">
-<!-- Your content for the first row goes here -->
-<!-- <p>Partners </p> -->
-<div class="grid gap-4 grid-cols-1 place-items-center items-center justify-center">
-  <div class="text-red-300">
-    <a href="https://yas.nic.in/" target="_blank" class="flex-1 border-indigo-600 items-center justify-center rounded-md overflow-hidden">
-
-      <img class="logos" src="https://yas.nic.in/sites/all/themes/youthaffair/logo.png" alt="regi" decoding="async" />
-      <!-- <img src="../images/register.png" alt="Image 1" class="w-1/4 w-25"> -->
-  
-      
-    </a></div>
-
-
-  </div>
-  </div>   
-  </div>
-      <!-- Second partners -->
-<div class="grid grid-cols-2 gap-4 mt-4 mb-2">
- <div class="flex items-center justify-center">
-        <h1 class="justify-end text-4xl">Resource Partner</h1>
+      </div>
+    </div>
+    <div class="grid grid-cols-2 gap-4 mb-2 mt-2">
+      <div class="flex items-center justify-center">
+        <h1 class="justify-end text-4xl">Execution Partner</h1>
       </div>
       <div class="flex items-center justify-center">
-            <h1 class="justify-end text-4xl">Learning Partner</h1>
+        <h1 class="justify-end text-4xl">Youth Partner</h1>
+      </div>
+    </div>
+    <div class="grid grid-cols-2 gap-4">
+      <!-- First Row -->
+      <div
+        class="border-4 border-[#1f2937] rounded-t-[18px] border-b-[23px] rounded-b-lg p-4 text-white"
+        style="border: ;"
+      >
+        <!-- Your content for the first row goes here -->
+        <!-- <p>Partners </p> -->
+        <div
+          class="grid gap-4 grid-cols-1 place-items-center items-center justify-center"
+        >
+          <div class="text-red-300">
+            <a
+              href="https://www.whistlingwoods.net/"
+              target="_blank"
+              class="flex-1 border-indigo-600 items-center justify-center rounded-md overflow-hidden"
+            >
+              <img
+                class="logos"
+                src={ww.src}
+                alt="regi"
+                decoding="async"
+                width="200px"
+              />
+            </a>
           </div>
+        </div>
       </div>
 
-      <div class="grid grid-cols-2 gap-4">
-      <div class="border-4 border-[#1f2937] rounded-t-[18px] border-b-[23px] rounded-b-lg p-4 text-white" style="border: ;">
+      <!-- First Row -->
+      <div
+        class="border-4 border-[#1f2937] rounded-t-[18px] border-b-[23px] rounded-b-lg p-4 text-white"
+        style="border: ;"
+      >
         <!-- Your content for the first row goes here -->
         <!-- <p>Partners </p> -->
-        <div class="grid gap-4 sm:grid-cols-1 grid-cols-1 place-items-center items-center justify-center">
-          
-          <!-- <div class="text-red-300">
-          <a href="https://www.iitb.ac.in/" target="_blank" class="flex-1 border-indigo-600 items-center justify-center rounded-md overflow-hidden">
-      
-            <img class="logos" src={iitb.src} alt="regi" decoding="async" />
-            
-        
-            
-          </a></div> -->
-          <!-- <div class="text-red-300">
-          <a href="https://fossee.in" target="_blank" class="flex-1 border-indigo-600 items-center justify-center rounded-md overflow-hidden">
-      
-              <img class="logos" src={fossee.src} alt="regi" decoding="async" />
-              
-          
-              
-            </a></div> -->
-           
-            <div class="text-red-300">
-            <a href="https://focal.fossee.in" target="_blank" class="flex-1 border-indigo-600 items-center justify-center rounded-md overflow-hidden">
-      
-              <img class="logos" src={focal.src} alt="regi" decoding="async" />
-              <!-- <img src="../images/register.png" alt="Image 1" class="w-1/4 w-25"> -->
-          
-              
-            </a></div>
-            <div class="hidden sm:block"></div>
-
+        <div
+          class="grid gap-4 grid-cols-1 place-items-center items-center justify-center"
+        >
+          <div class="text-red-300">
+            <a
+              href="https://yas.nic.in/"
+              target="_blank"
+              class="flex-1 border-indigo-600 items-center justify-center rounded-md overflow-hidden"
+            >
+              <img
+                class="logos"
+                src="https://yas.nic.in/sites/all/themes/youthaffair/logo.png"
+                alt="regi"
+                decoding="async"
+              />
+            </a>
+          </div>
         </div>
-
-
+      </div>
+    </div>
+    <!-- Second partners -->
+    <div class="grid grid-cols-2 gap-4 mt-4 mb-2">
+      <div class="flex items-center justify-center">
+        <h1 class="justify-end text-4xl">Resource Partner</h1>
+      </div>
+      <div class="flex items-center justify-center">
+        <h1 class="justify-end text-4xl">Learning Partner</h1>
+      </div>
     </div>
-  
-        <!-- First Row -->
-        <div class="border-4 border-[#1f2937] rounded-t-[18px] border-b-[23px] rounded-b-lg p-4 text-white" style="border: ;">
-          <!-- Your content for the first row goes here -->
-          <!-- <p>Partners </p> -->
-          <div class="grid gap-4 sm:grid-cols-1 grid-cols-1 place-items-center items-center justify-center">
-                        <div class="text-red-300">
-              <a href="https://spoken-tutorial.org/" target="_blank" class="flex-1 border-indigo-600 items-center justify-center rounded-md overflow-hidden">
-        
-                <img class="logos" src={spoken.src} alt="regi" decoding="async" />
-                <!-- <img src="../images/register.png" alt="Image 1" class="w-1/4 w-25"> -->
-            
-                
-              </a></div>
-             
-              
 
+    <div class="grid grid-cols-2 gap-4">
+      <div
+        class="border-4 border-[#1f2937] rounded-t-[18px] border-b-[23px] rounded-b-lg p-4 text-white"
+        style="border: ;"
+      >
+        <div
+          class="grid gap-4 sm:grid-cols-1 grid-cols-1 place-items-center items-center justify-center"
+        >
+          <div class="text-red-300">
+            <a
+              href="https://focal.fossee.in"
+              target="_blank"
+              class="flex-1 border-indigo-600 items-center justify-center rounded-md overflow-hidden"
+            >
+              <img class="logos" src={focal.src} alt="regi" decoding="async" />
+            </a>
           </div>
-
-</div>
+          <div class="hidden sm:block"></div>
+        </div>
       </div>
 
-     
-      </section>
-      
-    </Main>
-\ No newline at end of file
+      <!-- First Row -->
+      <div
+        class="border-4 border-[#1f2937] rounded-t-[18px] border-b-[23px] rounded-b-lg p-4 text-white"
+        style="border: ;"
+      >
+        <div
+          class="grid gap-4 sm:grid-cols-1 grid-cols-1 place-items-center items-center justify-center"
+        >
+          <div class="text-red-300">
+            <a
+              href="https://spoken-tutorial.org/"
+              target="_blank"
+              class="flex-1 border-indigo-600 items-center justify-center rounded-md overflow-hidden"
+            >
+              <img class="logos" src={spoken.src} alt="regi" decoding="async" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</Main>
diff --git a/src/pages/register.astro b/src/pages/register.astro
index 8411ed2..ea6b4df 100644
--- a/src/pages/register.astro
+++ b/src/pages/register.astro
@@ -1,55 +1,72 @@
 ---
-import Main from '../layouts/main.astro';
-import qrcode from '../images/qrcode-register.png';
+import Main from "../layouts/main.astro";
+import qrcode from "../images/qrcode-register.png";
+
+const registerContent = await Astro.glob("../content/registerPage/*.md");
 ---
 
 <Main>
-<section id="register">
+  <section id="register">
     <div class="container grid grid-cols-1 sm:grid-cols-4 gap-4">
-        <!-- 1/4 Width Column -->
-        <div class="place-items-center justify-center col-span-1 bg-gray-300 p-4  playfair-display-normal" style="text-align: center;">
-          <div>
+      <div
+        class="place-items-center justify-center col-span-1 bg-gray-300 p-4 playfair-display-normal"
+        style="text-align: center;"
+      >
+        <div>
           <div class="pb-2 mb-2">
-<a href="https://docs.google.com/forms/d/e/1FAIpQLScZlC-2OHmOVRnK6PAleW35z7Do1jDZsMd6v6zu0v2kj97PEQ/viewform" target="_blank" style="color:#e7dacb;" class="bg-[#f70000] hover:bg-blue-800 text-xl rounded-lg px-5 py-2.5">
-<strong>Register</strong></a>
-</div>
-      <p class="text-xl">    Scan QR code for registration or 
-          click on  - I like to participate - Link of Google form</p>
+            <a
+              href="https://docs.google.com/forms/d/e/1FAIpQLScZlC-2OHmOVRnK6PAleW35z7Do1jDZsMd6v6zu0v2kj97PEQ/viewform"
+              target="_blank"
+              style="color:#e7dacb;"
+              class="bg-[#f70000] hover:bg-blue-800 text-xl rounded-lg px-5 py-2.5"
+            >
+              <strong>Register</strong></a
+            >
+          </div>
+          <p class="text-xl">
+            Scan QR code for registration or click on - I like to participate -
+            Link of Google form
+          </p>
         </div>
         <div class="place-items-center pt-2">
-        <img class="items-center ml-3" src={qrcode.src} style="width: 85%;" alt="ANIMATE 2024" decoding="async" />
+          <img
+            class="items-center ml-3"
+            src={qrcode.src}
+            style="width: 85%;"
+            alt="ANIMATE 2024"
+            decoding="async"
+          />
         </div>
-      <!-- <imsrc qr code -->
+        <!-- <imsrc qr code -->
       </div>
-      <!-- 3/4 Width Column -->
-      <div class="col-span-3 p-4">
-          
-              <h1 class="section-title text-4xl pb-3">Read before registration
-              </h1>
-              <ul  style="list-style: disc;" class="text-xl  playfair-display-normal ">
-                  <li>Participate as an individual or as a team (max. 4 members).</li>
-                  <!-- <li>The team lead will be only one point of contact with the organizers.</li>
-                  <li>The same person can not participate in more than one team.</li> -->
-                  <li>Ideally, a team can consist of individuals like: Synfig Studio user / animator / graphic designer / story narrator / video editor / etc.</li>
-                  <!-- <li class="text-red-500">If a person is found participating in more than one team, both the teams will be disqualified from the Hackathon.</li>
-                  <li class="text-red-500">If any participant/ team is found to be indulging in any form of malpractice, the team will be immediately disqualified.</li> -->
-                  <li>Use ONLY open source software for creating animations.
-                  <span class="text-red-700">You are not allowed to use any proprietary software in your animation in any aspect. If found, you and your team will be disqualified.</span></li>
-                  <li><div>Submissions will be accepted in 3 categories:&nbsp;</div>
-                    
-                    <ol class="list-decimal list-inside pt-1">
-                    <li>Under 18 - Junior Animation Mavericks</li>
-                    <li>College Students - College Creators</li>
-                    <li>Working Professionals - Professional Prodigies</li>
-                    </ol>
-                    </li>
-                  </ul>
-        
-        
+      <div class="registerRules col-span-3 p-4">
+        {
+          registerContent.map((content) => {
+            const Content = content.Content;
+            return (
+              <>
+                <h1 class="section-title text-4xl pb-3">
+                  {content.frontmatter.heading}
+                </h1>
+                <Content />
+              </>
+            );
+          })
+        }
       </div>
-    
-    
     </div>
-    </section>
-    
-</Main>
-\ No newline at end of file
+  </section>
+</Main>
+
+<script>
+  const register = document.querySelector(".registerRules");
+  const registerUL = register.querySelector("ul");
+  const registerLI = register.querySelectorAll("ul li");
+  const registerOL = register.querySelector("ol");
+  // console.log(registerOL);
+  registerUL.classList.add("list-disc", "text-xl", "playfair-display-normal");
+  registerLI[2]
+    .querySelector("strong")
+    .classList.add("text-red-700", "font-normal");
+  registerOL.classList.add("list-decimal", "list-inside", "pt-1");
+</script>
diff --git a/src/pages/resources.astro b/src/pages/resources.astro
index 7231ed4..5af34ad 100644
--- a/src/pages/resources.astro
+++ b/src/pages/resources.astro
@@ -1,45 +1,65 @@
 ---
-import Main from '../layouts/main.astro';
-import resources from '../images/resources.png';
-import { slide } from 'astro:transitions';
+import Main from "../layouts/main.astro";
+import resources from "../images/resources.png";
+import { slide } from "astro:transitions";
+
+const resourcesContent = await Astro.glob("../content/resourcesPage/*.md");
 ---
 
 <Main>
-  
   <section id="about">
-  
-
     <div class="flex flex-col md:flex-row pt-3 mt-3">
       <!-- heading on bottom of div -->
       <div class="w-full md:w-1/2 relative min-h-full">
         <div class="md:absolute bottom-0">
-        <h1 class="justify-end text-4xl mb-4">Some Helpful Resources for Hackathon:</h1>
-      </div>
+          <h1 class="justify-end text-4xl mb-4">
+            Some Helpful Resources for Hackathon:
+          </h1>
+        </div>
       </div>
       <div class="w-1/2">
-        <img  src={resources.src} alt="Resources list" decoding="async" width="50%"
-        transition:animate={slide({ duration: '0.6s', delay: '1s' , direction: 'backward'})} />
+        <img
+          src={resources.src}
+          alt="Resources list"
+          decoding="async"
+          width="50%"
+          transition:animate={slide({
+            duration: "0.6s",
+            delay: "1s",
+            direction: "backward",
+          })}
+        />
       </div>
     </div>
-    
-    <!-- conten -->
+
+    <!-- content -->
     <div class="mt-4">
       <div class="pt-4 leading-normal sm:leading-loose">
-      
-        <div class="text-justify md:text-xl text-sm playfair-display-normal mb-5 pb-5">
-          <ul style="list-style:disc;" >
-          <li>To download Synfig Studio version 1.4.4:
-            <a href="https://static.fossee.in/focal/Synfig%20Studio%20version%201.4.4/" target="_blank" class="hover:text-red-400 text-red-700">click here</a></li>
-          <li class="mb-2">Self-learn Synfig Studio using <span class="hover:text-red-400 text-red-700"><a href="https://spoken-tutorial.org/tutorial-search/?search_foss=Synfig&search_language=" target="_blank">Spoken Tutorials</a></span>. These tutorials are available in English, Hindi, Kannada, Marathi, Malayalam, Tamil, and Telugu.</li>
-          <li class="mb-2">For creating graphics, recording audio, etc., you can use other software. However, since there is a requirement to strictly use Open Source Software in this hackathon, you can use GIMP, Audacity, Inkscape, Openshot Video Editor, etc. You can self-learn these software using the Spoken Tutorials, which are freely available in English, Hindi, Kannada, Marathi, Malayalam, Tamil and Telugu.</li>
-          <!-- <li class="mb-2">For help in installing Synfig Studio, please <a href="https://www.synfig.org/" target="_blank" class="hover:text-red-400 text-red-700">click here</a>.</li> -->
-          <li class="mb-2">For writing your script, you can learn about storytelling using <a href="https://spoken-tutorial.org/tutorial-search/?search_foss=Communication+Series&search_language=English" target="_blank" class="hover:text-red-400 text-red-700">Communication Spoken Tutorials</a> available in English.</li>
-          <li class="mb-2">Refer graphics from our <a href="https://focal.fossee.in/" target="_blank" class="hover:text-red-400 text-red-700">FOCAL (free and open source creative art library)</a></span> repository.</li>
-          <li class="mb-2"><div>Self-learn video editing using Blender. These tutorials are available in English - <a class="hover:text-red-400 text-red-700" href="https://spoken-tutorial.org/tutorial-search/?search_foss=Video+Editing+using+Blender&amp;search_language=English" target="_blank">click here</a></div></li>
-          <li class="mb-2"><p>Download Blender by visiting the following link - <a class="hover:text-red-400 text-red-700" target="_blank" href="https://www.blender.org/download/">blender</a></p></li>
-        </ul>
-          </div>
+        <div
+          class="resource text-justify md:text-xl text-sm playfair-display-normal mb-5 pb-5"
+        >
+          {
+            resourcesContent.map((content) => {
+              const Content = content.Content;
+              return <Content />;
+            })
+          }
+        </div>
       </div>
     </div>
-</section>
+  </section>
 </Main>
+
+<script>
+  const resources = document.querySelector(".resource");
+  const resourcesUL = resources.querySelector("ul");
+  const resourcesLI = resources.querySelectorAll("ul li");
+  const resourcesA = resources.querySelectorAll("ul li a");
+  resourcesUL.classList.add("list-disc");
+  resourcesLI.forEach((li) => {
+    li.classList.add("mb-2");
+  });
+  resourcesA.forEach((a) => {
+    a.classList.add("hover:text-red-400", "text-red-700");
+  });
+</script>
diff --git a/src/pages/result.astro b/src/pages/result.astro
index 3d7ddae..d279c86 100644
--- a/src/pages/result.astro
+++ b/src/pages/result.astro
@@ -1,29 +1,33 @@
 ---
-import Main from '../layouts/main.astro';
-
+import Main from "../layouts/main.astro";
 ---
 
 <Main title="Results">
-    <section id="results" class="container pb-3">
-        <div class="md:flex py-3 my-3 justify-center flex-md-equal w-full md:my-4 md:pl-4">
-          <div class=" md:mr-4 overflow-hidden pl-4 pr-4">
-            <div class="py-3">
-              <h4 class="display-5 section-title text-center">Results</h4>
-            </div>
-    
-    <p>List of Winners :</p>
-                <table class="w-full max-w-full border mb-4 bg-transparent table-striped block w-full overflow-auto scrolling-touch">
-               <thead class="thead-dark">
-                
-  <tr><th>Sl No.</th>
-  <th>Name</th>
-  <th>Title of submission</th>
-  <th>University Name</th>
-  <th>Rank</th>
-                    </tr></thead>
-  <tbody>
-  <!-- <tr> -->
-  <!-- <td>1</td>
+  <section id="results" class="container pb-3">
+    <div
+      class="md:flex py-3 my-3 justify-center flex-md-equal w-full md:my-4 md:pl-4"
+    >
+      <div class="md:mr-4 overflow-hidden pl-4 pr-4">
+        <div class="py-3">
+          <h4 class="display-5 section-title text-center">Results</h4>
+        </div>
+
+        <p>List of Winners :</p>
+        <table
+          class="w-full max-w-full border mb-4 bg-transparent table-striped block w-full overflow-auto scrolling-touch"
+        >
+          <thead class="thead-dark">
+            <tr
+              ><th>Sl No.</th>
+              <th>Name</th>
+              <th>Title of submission</th>
+              <th>University Name</th>
+              <th>Rank</th>
+            </tr></thead
+          >
+          <tbody>
+            <!-- <tr> -->
+            <!-- <td>1</td>
   <td>Pranay Kumar Pandey</td>
   <td>1. Turbulent Flow Over Backward Facing Step 2. Detached Bow Shock Formation in a Supersonic Flow over a Wedge 3. Numerical Simulation of Non-Newtonian Fluid Flow across a Sinusoidal Microchannel 4. Mach Reflection: Flow over a Forward facing Step 5. Study of flow around a re-entry space capsule and a parachute using Openfoam 6. Different discretization schemes in OpenFOAM&nbsp;</td>
   <td>Amity University Mumbai</td>
@@ -50,50 +54,44 @@ import Main from '../layouts/main.astro';
   <td>Puducherry Technological University&nbsp;</td>
   <td>4</td>
   </tr> -->
-  </tbody>
-  </table>
-    
-            
-                    </div>
-                  </div>
+          </tbody>
+        </table>
+      </div>
+    </div>
 
-                  <!--<dialog>
+    <!--<dialog>
   <button autofocus>Close</button>
   <p>This modal dialog has a groovy backdrop!</p>
 </dialog>
 <button>Show the dialog</button>-->
-                  </section>
+  </section>
 </Main>
 
-
-
 <style>
   ::backdrop {
-  background-image: linear-gradient(
-    45deg,
-    magenta,
-    rebeccapurple,
-    dodgerblue,
-    green
-  );
-  opacity: 0.75;
-}
-
+    background-image: linear-gradient(
+      45deg,
+      magenta,
+      rebeccapurple,
+      dodgerblue,
+      green
+    );
+    opacity: 0.75;
+  }
 </style>
 
 <script lang="js">
   const dialog = document.querySelector("dialog");
-const showButton = document.querySelector("dialog + button");
-const closeButton = document.querySelector("dialog button");
-
-// "Show the dialog" button opens the dialog modally
-showButton.addEventListener("click", () => {
-  dialog.showModal();
-});
+  const showButton = document.querySelector("dialog + button");
+  const closeButton = document.querySelector("dialog button");
 
-// "Close" button closes the dialog
-closeButton.addEventListener("click", () => {
-  dialog.close();
-});
+  // "Show the dialog" button opens the dialog modally
+  showButton.addEventListener("click", () => {
+    dialog.showModal();
+  });
 
-</script>
-\ No newline at end of file
+  // "Close" button closes the dialog
+  closeButton.addEventListener("click", () => {
+    dialog.close();
+  });
+</script>
diff --git a/src/pages/reward.astro b/src/pages/reward.astro
index 7fbee2f..ab091d8 100644
--- a/src/pages/reward.astro
+++ b/src/pages/reward.astro
@@ -1,92 +1,77 @@
 ---
-import Main from '../layouts/main.astro';
+import Main from "../layouts/main.astro";
 ---
 
-
 <Main title="Submission">
-    <div class="container py-3 grid grid-cols-1 sm:grid-cols-4 gap-4">
-          <!-- 1/4 Width Column -->
-          <div class="col-span-1 bg-gray-300 p-4">
-            <img src=""/>
-            <h1 class="section-title">Exciting prizes for Animation, Storytelling, and Innovation categories with e-Certificates 
-                to the selected team.
-                 </h1>
-    
-        
-        </div>
-        <!-- 3/4 Width Column -->
-        <div class="col-span-3 p-4">
-            
-                <h1 class="section-title">Animation
-                </h1>
-                <ul style="list-style: circle;">
-                    
-                    <li>1st Winner Prize:&nbsp;</li>
-                
-                <li>2nd Winner Prize:</li>
-                </ul>
-                <p>&nbsp;</p>
-                <ul>
-                <li>3rd Winner Prize:&nbsp;</li>
-                </ul>
-                <p>&nbsp;</p>
-                <ul>
-                <li>Consolation Prize:</li>
-                </ul>
-                <p>&nbsp;</p>
-                <ul>
-                <li>Special Prize Winner:</li>
-                        </ul>
-                        <h1 class="section-title">Storytelling / Scripting
+  <div class="container py-3 grid grid-cols-1 sm:grid-cols-4 gap-4">
+    <!-- 1/4 Width Column -->
+    <div class="col-span-1 bg-gray-300 p-4">
+      <img src="" />
+      <h1 class="section-title">
+        Exciting prizes for Animation, Storytelling, and Innovation categories
+        with e-Certificates to the selected team.
+      </h1>
+    </div>
+    <!-- 3/4 Width Column -->
+    <div class="col-span-3 p-4">
+      <h1 class="section-title">Animation</h1>
+      <ul style="list-style: circle;">
+        <li>1st Winner Prize:&nbsp;</li>
 
-                        </h1>
-                        <ul style="list-style: circle;">
-                            
-                            <li>1st Winner Prize:&nbsp;</li>
-                        </ul>
-                        <p>&nbsp;</p>
-                        <ul>
-                        <li>2nd Winner Prize:</li>
-                        </ul>
-                        <p>&nbsp;</p>
-                        <ul>
-                        <li>3rd Winner Prize:&nbsp;</li>
-                        </ul>
-                        <p>&nbsp;</p>
-                        <ul>
-                        <li>Consolation Prize:</li>
-                        </ul>
-                        <p>&nbsp;</p>
-                        <ul>
-                        <li>Special Prize Winner:</li>
-                            </ul>
-                            <h1 class="section-title">Innovation Idea
-                            </h1>
-                            <ul style="list-style: circle;">
-                                
-                               
-                                <li>1st Winner Prize:&nbsp;</li>
-                            </ul>
-                            <p>&nbsp;</p>
-                            <ul>
-                            <li>2nd Winner Prize:</li>
-                            </ul>
-                            <p>&nbsp;</p>
-                            <ul>
-                            <li>3rd Winner Prize:&nbsp;</li>
-                            </ul>
-                            <p>&nbsp;</p>
-                            <ul>
-                            <li>Consolation Prize:</li>
-                            </ul>
-                            <p>&nbsp;</p>
-                            <ul>
-                            <li>Special Prize Winner:</li>
-                                      </ul>
-          
-        </div>
-      
-      
-      </div>
-      
-</Main>
-\ No newline at end of file
+        <li>2nd Winner Prize:</li>
+      </ul>
+      <p>&nbsp;</p>
+      <ul>
+        <li>3rd Winner Prize:&nbsp;</li>
+      </ul>
+      <p>&nbsp;</p>
+      <ul>
+        <li>Consolation Prize:</li>
+      </ul>
+      <p>&nbsp;</p>
+      <ul>
+        <li>Special Prize Winner:</li>
+      </ul>
+      <h1 class="section-title">Storytelling / Scripting</h1>
+      <ul style="list-style: circle;">
+        <li>1st Winner Prize:&nbsp;</li>
+      </ul>
+      <p>&nbsp;</p>
+      <ul>
+        <li>2nd Winner Prize:</li>
+      </ul>
+      <p>&nbsp;</p>
+      <ul>
+        <li>3rd Winner Prize:&nbsp;</li>
+      </ul>
+      <p>&nbsp;</p>
+      <ul>
+        <li>Consolation Prize:</li>
+      </ul>
+      <p>&nbsp;</p>
+      <ul>
+        <li>Special Prize Winner:</li>
+      </ul>
+      <h1 class="section-title">Innovation Idea</h1>
+      <ul style="list-style: circle;">
+        <li>1st Winner Prize:&nbsp;</li>
+      </ul>
+      <p>&nbsp;</p>
+      <ul>
+        <li>2nd Winner Prize:</li>
+      </ul>
+      <p>&nbsp;</p>
+      <ul>
+        <li>3rd Winner Prize:&nbsp;</li>
+      </ul>
+      <p>&nbsp;</p>
+      <ul>
+        <li>Consolation Prize:</li>
+      </ul>
+      <p>&nbsp;</p>
+      <ul>
+        <li>Special Prize Winner:</li>
+      </ul>
+    </div>
+  </div>
+</Main>
diff --git a/src/pages/rules.astro b/src/pages/rules.astro
index 572a3e5..f050601 100644
--- a/src/pages/rules.astro
+++ b/src/pages/rules.astro
@@ -1,46 +1,54 @@
 ---
-import Main from '../layouts/main.astro';
+import Main from "../layouts/main.astro";
+import { slide } from "astro:transitions";
 
-import { slide } from 'astro:transitions';
+const rulesContent = await Astro.glob("../content/rulesPage/*.md");
 ---
 
 <Main>
   <section id="rules">
-  
-
     <div class="flex flex-col md:flex-row pt-5 mt-3">
       <!-- heading on bottom of div -->
       <div class="w-full relative min-h-full">
         <div class="md:absolute bottom-0">
-        <h1 class="justify-end text-4xl mb-4">Rules and Regulations</h1>
-      </div>
+          <h1 class="justify-end text-4xl mb-4">Rules and Regulations</h1>
+        </div>
       </div>
-      <!-- <div class="w-1/2">
-        <img  src={eligibility.src} alt="WELCOM TO SYNFIG STUDIO HACKATHON" decoding="async" 
-        transition:animate={slide({ duration: '0.6s', delay: '1s' , direction: 'backward'})} />
-      </div> -->
     </div>
-    
+
     <!-- conten -->
     <div class="mt-4">
       <div class="pt-4 leading-normal sm:leading-loose">
-      
-        <div class="text-justify md:text-xl text-sm playfair-display-normal"><ul style="list-style:disc;">
-            <!-- <li class="mb-2">The decision of the review committee and organizers in declaring the results will be final. No queries in this regard will be entertained.</li> -->
-            <li class="mb-2">The same person can not participate in more than one team.</li>
-            <li class="mb-2">If a person is found participating in more than one team, both teams will be disqualified from the Hackathon.</li>
-            <li class="mb-2">Use ONLY Synfig Studio for creating animations. Create the supporting graphics, audio, etc. using only open source software. You are not allowed to use any proprietary software in your animation in any aspect. If found, you or your team will be disqualified.</li>
-            <li class="mb-2">You can choose to narrate in <span class="text-3xl text-red-700">English</span> or in the <span class="text-3xl text-red-700">22 scheduled Indian languages</span> given below.<br><span class="text-lg">(1) Assamese, (2) Bengali, (3) Gujarati, (4) Hindi, (5) Kannada, (6) Kashmiri, (7) Konkani, (8) Malayalam, (9) Manipuri, (10) Marathi, (11) Nepali, (12) Oriya, (13) Punjabi, (14) Sanskrit, (15) Sindhi, (16) Tamil, (17) Telugu, (18) Urdu (19) Bodo, (20) Santhali, (21) Maithili and (22) Dogri.</span></li>
-            <li class="mb-2">The team lead will be the only point of contact with the organizers. Any participant found to be indulging in any form of malpractice will be immediately disqualified.</li>
-            <li class="mb-2">The decision of the review committee and organizers in declaring the results will be final. No queries in this regard will be entertained.
-            </li>
-            <li class="mb-2">The accepted submissions shall be released and published under open source license in the public domain. The copyright should be transferred to the FOSSEE project.</li>
-            </ul>
-          </div>
+        <div
+          class="rules text-justify md:text-xl text-sm playfair-display-normal"
+        >
+          {
+            rulesContent.map((content) => {
+              const Content = content.Content;
+              return <Content />;
+            })
+          }
+        </div>
       </div>
     </div>
-</section>
+  </section>
 </Main>
 
+<script>
+  const rules = document.querySelector(".playfair-display-normal");
+  const rulesUL = rules.querySelector("ul");
+  const rulesLI = rules.querySelectorAll("ul li");
+  rulesUL.classList.add("list-disc");
+  rulesLI.forEach((li) => {
+    li.classList.add("mb-2");
+  });
 
+  const rulesStrong = rulesLI[3].querySelectorAll("strong");
+  rulesStrong.forEach((strong) => {
+    strong.classList.add("text-3xl", "text-red-700", "font-normal");
+  });
 
+  const rulesLanguages = rulesLI[3].querySelector("em");
+  // console.log(rulesLanguages);
+  rulesLanguages.classList.add("text-lg", "font-normal");
+</script>
diff --git a/src/pages/services.astro b/src/pages/services.astro
index af15f4e..206576f 100644
--- a/src/pages/services.astro
+++ b/src/pages/services.astro
@@ -1,17 +1,21 @@
 ---
-import Main from '../layouts/main.astro';
+import Main from "../layouts/main.astro";
 ---
 
 <Main>
   <h1>Services</h1>
   <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque suscipit, orci non vulputate porta, sem erat
-    lacinia sem, ac tincidunt nibh turpis a turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-    posuere cubilia curae; Proin ullamcorper ac diam et porttitor. Proin mollis enim eros, sed rutrum nunc fermentum
-    sed. Nullam fermentum auctor leo, in pretium turpis varius non. Cras euismod est eget dolor pharetra semper. Nulla
-    ut dictum dolor, vel vestibulum velit. Morbi arcu ipsum, interdum id iaculis id, rutrum sed enim. Orci varius
-    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam imperdiet turpis at risus rhoncus,
-    in mollis odio aliquam. Praesent eget eros purus. Praesent imperdiet id diam a rutrum. Nam laoreet ullamcorper
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
+    suscipit, orci non vulputate porta, sem erat lacinia sem, ac tincidunt nibh
+    turpis a turpis. Vestibulum ante ipsum primis in faucibus orci luctus et
+    ultrices posuere cubilia curae; Proin ullamcorper ac diam et porttitor.
+    Proin mollis enim eros, sed rutrum nunc fermentum sed. Nullam fermentum
+    auctor leo, in pretium turpis varius non. Cras euismod est eget dolor
+    pharetra semper. Nulla ut dictum dolor, vel vestibulum velit. Morbi arcu
+    ipsum, interdum id iaculis id, rutrum sed enim. Orci varius natoque
+    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam
+    imperdiet turpis at risus rhoncus, in mollis odio aliquam. Praesent eget
+    eros purus. Praesent imperdiet id diam a rutrum. Nam laoreet ullamcorper
     sapien, eget tincidunt magna dictum rutrum. Nam ut cursus magna
   </p>
 </Main>
diff --git a/src/pages/theme.astro b/src/pages/theme.astro
index d9384ce..02fa7c0 100644
--- a/src/pages/theme.astro
+++ b/src/pages/theme.astro
@@ -1,68 +1,61 @@
 ---
-import Main from '../layouts/main.astro';
+import Main from "../layouts/main.astro";
+const themeContent = await Astro.glob("../content/themePage/*.md");
 ---
 
-
 <Main>
-    <section>
-
-        <div class="py-3">
-            <!-- 1/4 Width Column -->
-            <!-- <div class="col-span-1 bg-gray-300 p-4">
-                <img src=""/>
-                <h1 class="section-title">Celebrating India's Innovation</h1>
-                
-                
-            </div> -->
-            <!-- 3/4 Width Column -->
-            <div class="col-span-1 p-4">
-                
-                <h1 class="section-title text-4xl pb-3">Theme of Hackathon - 2024
-                    
-                    
-                </h1>
-                <!-- <div class="leading-9 ">
-                    <p class="text-2xl">Tell Your Story/Present your story</p>
-                    <div class="md:text-xl text-sm playfair-display-normal ">
-                       <p class="py-3"> which has an element of innovation, through an animation. You can explain the story with the problem /cause, how did you handle it and what was the outcome of it. Some of the examples for the storylines are as follows:</p>
-                       <ol class="text-orange-900 leading-loose list-decimal mx-2">
-<li><h1>Any incident/person which gives you inspiration. </h1> </li>
-<li><h1>Your memorable moment which changed your life/perspective/morals</h1></li>
-<li><h1>Any innovation which you feel should be told</h1> </li>
-                           
-                           
-                           
-                        </ol>
-                    </div>
-                    
-                </div>
-                
-            </div> -->
-            <div class="leading-loose">
-            <p class="text-xl playfair-display-normal">We invite participants to submit animation videos, no longer than 3 minutes, on the theme "Celebrating India's Innovation," where they showcase a problem, the action taken, and the innovative solution presented. Whether it's a simple yet ingenious solution found in your grandmother's kitchen or a groundbreaking innovation that has captured the nation's attention, we want to celebrate it all.</p>
-            <p class="text-xl playfair-display-normal pt-2">Please find below a list of examples of innovation:</p>
-            <ol class="text-orange-900 leading-loose list-decimal mx-2 md:text-xl text-sm playfair-display-normal pt-3">
-                <li>A farmer's inventive irrigation system that maximizes crop yield.</li>
-                <li>A student's eco-friendly solution to a local environmental challenge.</li>
-                <li>A startup's groundbreaking technology revolutionizing healthcare accessibility.</li>
-                <li><p>A traditional artisan's adaptation of age-old techniques for modern markets.</p><p>And many, many more.</p></li>
-             </ol>
-            <p class="md:text-xl text-sm playfair-display-normal pt-3">Let's come together to celebrate India's rich culture of innovation and showcase the ingenuity of our nation. Embrace the challenge, unleash your creativity, and be a part of this exciting journey to celebrate India's innovation!</p>
-        </div>
+  <section>
+    <div class="py-3">
+      <div class="col-span-1 p-4">
+        <h1 class="section-title text-4xl pb-3">Theme of Hackathon - 2024</h1>
+        <div class="leading-loose">
+          {
+            themeContent.map((content) => {
+              const Content = content.Content;
+              return <Content />;
+            })
+          }
         </div>
-       
-       
-        </section>
-        <style>
-            tr,td{
-                border: 1px solid black;
-                padding: 10px;
-            }
-            @media  (min-width: 600px;) {
-                tr,td{
-                    
-                    padding: auto;
-                }
-            }
-        </style>
-</Main>
-\ No newline at end of file
+      </div>
+    </div>
+    <style>
+      tr,
+      td {
+        border: 1px solid black;
+        padding: 10px;
+      }
+      @media (min-width: 600px;) {
+        tr,
+        td {
+          padding: auto;
+        }
+      }
+    </style>
+  </section>
+</Main>
+
+<script>
+  const theme = document.querySelector(".leading-loose");
+  const themeP = theme.querySelectorAll("p");
+  const themeOL = theme.querySelector("ol");
+  const themeLI = theme.querySelectorAll("ol li");
+  themeP[0].classList.add("text-xl", "playfair-display-normal");
+  themeP[1].classList.add("text-xl", "playfair-display-normal", "pt-2");
+  themeP[2].classList.add(
+    "md:text-xl",
+    "text-sm",
+    "playfair-display-normal",
+    "pt-3"
+  );
+
+  themeOL.classList.add(
+    "text-orange-900",
+    "leading-loose",
+    "list-decimal",
+    "mx-2",
+    "md:text-xl",
+    "text-sm",
+    "playfair-display-normal",
+    "pt-3"
+  );
+</script>
diff --git a/src/pages/webinar.astro b/src/pages/webinar.astro
index 8fc04ed..268d589 100644
--- a/src/pages/webinar.astro
+++ b/src/pages/webinar.astro
@@ -1,82 +1,167 @@
 ---
-import Main from '../layouts/main.astro';
----
+import Main from "../layouts/main.astro";
 
+const webinarContent = await Astro.glob("../content/webinarPage/*.md");
+---
 
 <Main>
-    <section id="webinar">
+  <section id="webinar">
+    <div class="py-3">
+      <!-- 1/4 Width Column -->
 
-        <div class="py-3">
-            <!-- 1/4 Width Column -->
-            <!-- <div class="col-span-1 bg-gray-300 p-4">
-                <img src=""/>
-                <h1 class="section-title">Celebrating India's Innovation</h1>
-                
-                
-            </div> -->
-            <!-- 3/4 Width Column -->
-            <div class="col-span-1 p-4">
-                <h1 class="section-title text-4xl pb-3">
-                Attend our upcoming webinars
-                </h1>
-            <div class="leading-loose">
-<p class="text-xl playfair-display-normal">Instructions on attending the webinar will be emailed to the registered participants.</p>
-              <!-- <ol class="list-decimal mx-2 md:text-xl text-sm playfair-display-normal pt-3">
-                    <li class="text-2xl mb-4">Topic: Q and A on Submission for ANIMATE 2024
-                    <p class="text-xl"> Speaker: Khushalsingh</p>
-                    <p>Date: 9 May 2024</p>
-                    <p>Time: 3 - 3.45 PM</p>
-                </li>
-                  
-           
-             </ol> -->
+      <!-- 3/4 Width Column -->
+      <div class="col-span-1 p-4">
+        <h1 class="section-title text-4xl pb-3">
+          Attend our upcoming webinars
+        </h1>
+        <div class="leading-loose">
+          <p class="text-xl playfair-display-normal">
+            Instructions on attending the webinar will be emailed to the
+            registered participants.
+          </p>
         </div>
-                <h1 class="section-title text-4xl pb-3">
-                Webinars conducted for participants
-                </h1>
+        <h1 class="section-title text-4xl pb-3">
+          Webinars conducted for participants
+        </h1>
 
-            <div class="leading-loose">
-<p class="text-xl playfair-display-normal">Click on the weblink below to view the recording of the webinars conducted previously for registered participants.</p>
-                <ol class="list-decimal mx-2 md:text-xl text-sm playfair-display-normal pt-3">
-                <li class="text-2xl mb-4">Q and A on Submission guidelines for ANIMATE 2024
-                    <p class="text-xl">27 May 2024 | 3 - 3.45 PM (Presenter: Khushalsingh)</p>
-                    <p>Weblink to the recording: <span class="hover:text-red-400 text-red-700"><a href="https://static.fossee.in/focal/animate_webinar/Q%20%26%20A%20Session%20for%20Animate%202024%2027-05-2024.mp4" target="_blank">View</a></span>.</p>
-                    </li>
-                <li class="text-2xl mb-4">Q and A on Submission for ANIMATE 2024
-                    <p class="text-xl">9 May 2024 | 3 - 3.45 PM (Presenter: Khushalsingh)</p>
-                    <p>Weblink to the recording: <span class="hover:text-red-400 text-red-700"><a href="https://static.fossee.in/focal/animate_webinar/Webinar%20on%20Q%20and%20A%20on%20Submission%20for%20ANIMATE%202024%2009-05-2024.mp4" target="_blank">View</a></span>.</p>
-                    </li>
-                <li class="text-2xl mb-4">How to choose your topic? 
-                    <p class="text-xl"> 3rd May | 5 - 6 PM
-(Presenter: Dr. Sanjukta Ghosh, Head of Studies, Design Led Innovation Program , Srishti Manipal Institute , MAHE - Bangalore)
-.</p>
-                    <p>Weblink to the recording: <span class="hover:text-red-400 text-red-700"><a href="https://static.fossee.in/focal/animate_webinar/Webinar%20on%20How%20to%20choose%20your%20topic%2020240503.mp4" target="_blank">View</a></span>.</p>
-                </li>
-                    <li class="text-2xl mb-4">How to use Synfig Studio to create animation?  
-                    <p class="text-xl"> 30th April | 3 - 3.45 PM (Presenter - Khushalsingh).</p>
-                    <p>Weblink to the recording: <span class="hover:text-red-400 text-red-700"><a href="https://static.fossee.in/focal/animate_webinar/Webinar%20on%20Q%20%26%20A%20on%20How%20to%20use%20Synfig%20Studio%20to%20Create%20Animations%2020240430.mp4" target="_blank">View</a></span>.</p>
-                </li>
-                  <li class="text-2xl mb-4">How to learn Synfig Studio Using a Spoken Tutorial? 
-                    <p class="text-xl"> 18th April | 3 - 3.45 PM (Presenter - Khushalsingh).</p>
-                    <p>Weblink to the recording: <span class="hover:text-red-400 text-red-700"><a href="https://static.fossee.in/focal/animate_webinar/Webinar%20on%20Q%20and%20A%20Session%20on%20How%20to%20use%20Spoken%20Tutorial%20to%20Learn%20Synfig%20Studio.mp4" target="_blank">View</a></span>.</p>
-                </li>
-           
-             </ol>
-        </div>
+        <div class="webinars leading-loose">
+          <p class="text-xl playfair-display-normal">
+            Click on the weblink below to view the recording of the webinars
+            conducted previously for registered participants.
+          </p>{
+            webinarContent.map((content) => {
+              const Content = content.Content;
+              return <Content />;
+            })
+          }
+          <!-- <ol
+            class="list-decimal mx-2 md:text-xl text-sm playfair-display-normal pt-3"
+          >
+            <li class="text-2xl mb-4">
+              Q and A on Submission guidelines for ANIMATE 2024
+              <p class="text-xl">
+                27 May 2024 | 3 - 3.45 PM (Presenter: Khushalsingh)
+              </p>
+              <p>
+                Weblink to the recording: <span
+                  class="hover:text-red-400 text-red-700"
+                  ><a
+                    href="https://static.fossee.in/focal/animate_webinar/Q%20%26%20A%20Session%20for%20Animate%202024%2027-05-2024.mp4"
+                    target="_blank">View</a
+                  ></span
+                >.
+              </p>
+            </li>
+            <li class="text-2xl mb-4">
+              Q and A on Submission for ANIMATE 2024
+              <p class="text-xl">
+                9 May 2024 | 3 - 3.45 PM (Presenter: Khushalsingh)
+              </p>
+              <p>
+                Weblink to the recording: <span
+                  class="hover:text-red-400 text-red-700"
+                  ><a
+                    href="https://static.fossee.in/focal/animate_webinar/Webinar%20on%20Q%20and%20A%20on%20Submission%20for%20ANIMATE%202024%2009-05-2024.mp4"
+                    target="_blank">View</a
+                  ></span
+                >.
+              </p>
+            </li>
+            <li class="text-2xl mb-4">
+              How to choose your topic?
+              <p class="text-xl">
+                3rd May | 5 - 6 PM (Presenter: Dr. Sanjukta Ghosh, Head of
+                Studies, Design Led Innovation Program , Srishti Manipal
+                Institute , MAHE - Bangalore) .
+              </p>
+              <p>
+                Weblink to the recording: <span
+                  class="hover:text-red-400 text-red-700"
+                  ><a
+                    href="https://static.fossee.in/focal/animate_webinar/Webinar%20on%20How%20to%20choose%20your%20topic%2020240503.mp4"
+                    target="_blank">View</a
+                  ></span
+                >.
+              </p>
+            </li>
+            <li class="text-2xl mb-4">
+              How to use Synfig Studio to create animation?
+              <p class="text-xl">
+                30th April | 3 - 3.45 PM (Presenter - Khushalsingh).
+              </p>
+              <p>
+                Weblink to the recording: <span
+                  class="hover:text-red-400 text-red-700"
+                  ><a
+                    href="https://static.fossee.in/focal/animate_webinar/Webinar%20on%20Q%20%26%20A%20on%20How%20to%20use%20Synfig%20Studio%20to%20Create%20Animations%2020240430.mp4"
+                    target="_blank">View</a
+                  ></span
+                >.
+              </p>
+            </li>
+            <li class="text-2xl mb-4">
+              How to learn Synfig Studio Using a Spoken Tutorial?
+              <p class="text-xl">
+                18th April | 3 - 3.45 PM (Presenter - Khushalsingh).
+              </p>
+              <p>
+                Weblink to the recording: <span
+                  class="hover:text-red-400 text-red-700"
+                  ><a
+                    href="https://static.fossee.in/focal/animate_webinar/Webinar%20on%20Q%20and%20A%20Session%20on%20How%20to%20use%20Spoken%20Tutorial%20to%20Learn%20Synfig%20Studio.mp4"
+                    target="_blank">View</a
+                  ></span
+                >.
+              </p>
+            </li>
+          </ol> -->
         </div>
-       
-       
-        </section>
-        <style>
-            tr,td{
-                border: 1px solid black;
-                padding: 10px;
-            }
-            @media  (min-width: 600px;) {
-                tr,td{
-                    
-                    padding: auto;
-                }
-            }
-        </style>
-</Main>
-\ No newline at end of file
+      </div>
+    </div>
+    <style>
+      tr,
+      td {
+        border: 1px solid black;
+        padding: 10px;
+      }
+      @media (min-width: 600px;) {
+        tr,
+        td {
+          padding: auto;
+        }
+      }
+    </style>
+  </section>
+</Main>
+
+<script>
+  const webinars = document.querySelector(".webinars");
+
+  const webinarOL = webinars.querySelector("ol");
+  const webinarLIs = webinarOL.querySelectorAll("ol li");
+  const webinarDetails = webinars.querySelectorAll("ol li ul");
+  const webinarLinks = webinars.querySelectorAll("ol li ul li a");
+
+  webinarOL.classList.add(
+    "list-decimal",
+    "mx-2",
+    "md:text-xl",
+    "text-sm",
+    "playfair-display-normal",
+    "pt-3"
+  );
+
+  webinarLIs.forEach((li) => {
+    li.classList.add("text-2xl", "mb-4");
+  });
+
+  webinarDetails.forEach((detail) => {
+    const webinarDetailsLi = detail.querySelectorAll("li");
+    webinarDetailsLi[0].classList.add("text-xl", "mb-0");
+    webinarDetailsLi[1].classList.add("text-2xl", "mb-4");
+  });
+
+  webinarLinks.forEach((link) => {
+    link.classList.add("hover:text-red-400", "text-red-700");
+  });
+</script>
diff --git a/yarn.lock b/yarn.lock
index de20be0..322119b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15,6 +15,11 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@astrojs/compiler@^1.5.5":
+  version "1.8.2"
+  resolved "https://registry.npmjs.org/@astrojs/compiler/-/compiler-1.8.2.tgz"
+  integrity sha512-o/ObKgtMzl8SlpIdzaxFnt7SATKPxu4oIP/1NL+HDJRzxfJcAkOTAb/ZKMRyULbz4q+1t2/DAebs2Z1QairkZw==
+
 "@astrojs/compiler@^2.3.0":
   version "2.3.0"
   resolved "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.3.0.tgz"
@@ -283,15 +288,15 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
-"@esbuild/linux-x64@0.18.20":
+"@esbuild/win32-x64@0.18.20":
   version "0.18.20"
-  resolved "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz"
-  integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==
+  resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz"
+  integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
 
-"@esbuild/linux-x64@0.19.5":
+"@esbuild/win32-x64@0.19.5":
   version "0.19.5"
-  resolved "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.5.tgz"
-  integrity sha512-psagl+2RlK1z8zWZOmVdImisMtrUxvwereIdyJTmtmHahJTKb64pAcqoPlx6CewPdvGvUKe2Jw+0Z/0qhSbG1A==
+  resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.5.tgz"
+  integrity sha512-czTrygUsB/jlM8qEW5MD8bgYU2Xg14lo6kBDXW6HdxKjh8M5PzETGiSHaz9MtbXBYDloHNUAUW2tMiKW4KM9Mw==
 
 "@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
   version "0.3.3"
@@ -722,9 +727,9 @@ camelcase@^7.0.1:
   integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
 
 caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541:
-  version "1.0.30001561"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001561.tgz"
-  integrity sha512-NTt0DNoKe958Q0BE0j0c1V9jbUzhBxHIEJy7asmGrpE0yG63KTV7PLHPnK2E1O9RsQrQ081I3NLuXGS6zht3cw==
+  version "1.0.30001636"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz"
+  integrity sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==
 
 ccount@^2.0.0:
   version "2.0.1"
@@ -2669,6 +2674,20 @@ preferred-pm@^3.1.2:
     path-exists "^4.0.0"
     which-pm "2.0.0"
 
+prettier-plugin-astro@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.14.0.tgz"
+  integrity sha512-7jRGJsexaRIyUzTk8uzXlP45cw6DQ5Ci4bTe0xCBCcuO1Fff8jJy9oI+kRCQKSdDFTSAArMSg8GpvzlKBtSaZA==
+  dependencies:
+    "@astrojs/compiler" "^1.5.5"
+    prettier "^3.0.0"
+    sass-formatter "^0.7.6"
+
+prettier@^3.0.0, prettier@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz"
+  integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==
+
 prismjs@^1.29.0:
   version "1.29.0"
   resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz"
@@ -2898,6 +2917,11 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+s.color@0.0.15:
+  version "0.0.15"
+  resolved "https://registry.npmjs.org/s.color/-/s.color-0.0.15.tgz"
+  integrity sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==
+
 sade@^1.7.3:
   version "1.8.1"
   resolved "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz"
@@ -2915,6 +2939,13 @@ safe-buffer@^5.0.1, safe-buffer@~5.2.0:
   resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass-formatter@^0.7.6:
+  version "0.7.9"
+  resolved "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.9.tgz"
+  integrity sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw==
+  dependencies:
+    suf-log "^2.5.3"
+
 sax@^1.2.4:
   version "1.3.0"
   resolved "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz"
@@ -3149,6 +3180,13 @@ sucrase@^3.32.0:
     pirates "^4.0.1"
     ts-interface-checker "^0.1.9"
 
+suf-log@^2.5.3:
+  version "2.5.3"
+  resolved "https://registry.npmjs.org/suf-log/-/suf-log-2.5.3.tgz"
+  integrity sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==
+  dependencies:
+    s.color "0.0.15"
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
author	Manurbhav Arya	2024-06-29 14:15:08 +0530
committer	Manurbhav Arya	2024-06-29 14:15:08 +0530
commit	13950e5ece10c782671239e11a2d258965a79141 (patch)
tree	e7f85e58e09652086b0a40a24568d95756b92650
parent	6f9a937965134c28ef18c9ec4a46f12143a52983 (diff)
download	Astro-animate2024-13950e5ece10c782671239e11a2d258965a79141.tar.gz Astro-animate2024-13950e5ece10c782671239e11a2d258965a79141.tar.bz2 Astro-animate2024-13950e5ece10c782671239e11a2d258965a79141.zip