css changes and pages added

8 files changed, 201 insertions, 200 deletions

diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
index dd401c5..cd59d91 100644
--- a/src/assets/css/custom.css
+++ b/src/assets/css/custom.css
@@ -75,14 +75,15 @@
    color:#f50000;
    font-size: 1.5rem;
    font-weight: 500;
-   padding: 1.5rem 2rem;
+   padding-top: 4rem;
+   /* padding: 1.5rem 2rem; */
  /* padding-top: 4vw; */
    transition: 1.3s;
 }
 
  @media screen and (max-width: 983px) {
 .section-title{
-   font-size:2rem;
+   font-size:1.5rem;
    padding: 1rem 2rem;
    /* text-shadow: 2px 2px #0a4850; */
 }  
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 1865503..d8ffefd 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -18,22 +18,23 @@ import { Image } from "astro:assets"
 
     <!-- <div class=" flex flex-col lg:grid lg:grid-cols-2 gap-3 items-center"> -->
       
-        <div class="flex flex-col justify-center items-center md:pt-20 space-y-5">
-          <h2 class="text-white md:text-4xl text-2xl font-bold">A global challenge for bright minds</h2>
+        <div class="flex flex-col justify-center items-center md:pt-5 space-y-5">
+          <h3 class="text-white md:text-[30pt] text-2xl ">A global challenge for bright minds</h3>
           <br>
         
-          <h6 class="text-white md:text-xl text-lg font-bold">
-           <p> An initiative of the FOSSEE Project,</p>
-            <p>Indian Institute of Technology Bombay, India </p></h6>
-            <br>
-          <h1 class="text-white md:text-6xl text-4xl font-bold drop-shadow-lg text-shadow">Scilab Case Study </h1>
-          <h1 class="text-white md:text-6xl text-4xl  font-bold"><span class="text-red-600">Hackathon</span></h1>
+          <h6 class="text-white md:text-lg text-md">
+           <p class="text-center"> An initiative of the FOSSEE Project,<br>
+            Indian Institute of Technology Bombay, India </p></h6>
+         
+          <h1 class="text-white md:text-6xl text-4xl font-extrabold ">Scilab <span class="text-[#f50000]">Case Study</span> </h1>
+          <h1 class="text-white md:text-6xl text-4xl  font-extrabold">Hackathon</h1>
           <br>
-          <h3 class="text-white text-xl font-bold">Registration date: <span class="text-2xl">20 December 2024</span></h3>
-          <h3 class="text-white text-xl font-bold"> Submission end date: <span class=" text-2xl">10 February 2025</span></h3>
-          <br />
-<p class="bg-[#fefe16] py-4 px-4 text-red-600"> *Anyone can register and submit their case study from 20 December 2024 to 10 February 2025</p>
-
+          <h3 class="text-white text-xl font-extrabold">Registration date: <span class=" text-[#f50000]">23 December 2024</span><br>
+         Submission end date: <span class=" text-[#f50000]">10 February 2025</span></h3>
+          <!-- <br /> -->
+<p class="text-white text-lg font-bold ">*Anyone can register and submit their case study from 23 December 2024 to 10 February 2025</p>
+<p class="text-white text-lg font-bold">Cash prizes, eCertificate and internship opportunities</p>
+<br>
           <div class="py-4">  
              <a href="/#register"><button class="neon-button">Register</button></a>
 
@@ -100,6 +101,7 @@ import { Image } from "astro:assets"
     border-radius:0 12rem  0 12rem ;
   }
   .bg-secondPatch{
+    background: black;
     background: url(../assets/img/patch-01.png) center fixed;
     background-position:center;
     background-size:cover;
@@ -110,11 +112,12 @@ import { Image } from "astro:assets"
     /* background-position: -20px -20px; */
     background-repeat: no-repeat;
     background-attachment: fixed;
+    
   
 }
 
 .hero{
-        background: url(../assets/img/bg-01.png);
+        background: url(../assets/img/bg-01.png)  top center;
         /* background-attachment:fixed; */
         background-size: cover;
        overflow: hidden;
@@ -172,50 +175,7 @@ import { Image } from "astro:assets"
 
 
 
-/*********neon button********** */
-
-
-.neon-button {
-    padding: 15px 30px;
-    font-size: 18px;
-    color: white;
-    background-color: black;
-    border: 2px solid red;
-    border-radius: 5px;
-    cursor: pointer;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    position: relative;
-    overflow: hidden;
-    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-    box-shadow: 0 0 10px red, 0 0 20px red, 0 0 30px red;
-}
-
-.neon-button::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: red;
-    filter: blur(10px);
-    z-index: -1;
-    transition: opacity 0.3s ease-in-out;
-    opacity: 0.8;
-}
-
-.neon-button:hover {
-    color: black;
-    background-color: red;
-    box-shadow: 0 0 15px red, 0 0 30px red, 0 0 45px red;
-}
-
-.neon-button:hover::before {
-    opacity: 1;
-}
 
-/*********end neon button********** */
 
 
 
diff --git a/src/components/HomeBody.astro b/src/components/HomeBody.astro
index 3c8c64d..d48706c 100644
--- a/src/components/HomeBody.astro
+++ b/src/components/HomeBody.astro
@@ -58,7 +58,7 @@ import process from "../assets/img/process.png";
 <!-- Introduction -->
 <div id="home">
     <Hero />
-<div class="bg-[#ffffff]">
+<div class="bg-gray-50 ">
     <div class="md:px-20 px-3">
     <h1 class=" item-center text-center section-title mx-4 px-4" id="about">About</h1>
     <!-- <h2 class="welcome-heading"> Welcome to the Open Source Hardware IoT GIS Hackathon!</h2> -->
@@ -103,15 +103,15 @@ import process from "../assets/img/process.png";
           <tbody class="">
             <tr>
               <td class="border border-gray-300 px-4 py-2">Registration Opens</td>
-              <td class="border border-gray-300 px-4 py-2">20 December 2024</td>
+              <td class="border border-gray-300 px-4 py-2">23 December 2024</td>
             </tr>
-            <tr class="bg-gray-50">
+            <!-- <tr class="bg-gray-50">
               <td class="border border-gray-300 px-4 py-2">Pre-Hackathon/Inaugural Event</td>
               <td class="border border-gray-300 px-4 py-2">TBD</td>
-            </tr>
+            </tr> -->
             <tr>
               <td class="border border-gray-300 px-4 py-2">Hackathon Start Date</td>
-              <td class="border border-gray-300 px-4 py-2">20 December 2024</td>
+              <td class="border border-gray-300 px-4 py-2">23 December 2024</td>
             </tr>
             <tr class="bg-gray-50">
               <td class="border border-gray-300 px-4 py-2">Submission Deadline</td>
@@ -128,7 +128,7 @@ import process from "../assets/img/process.png";
   </div>
   
   
-  <div class="grid grid-cols-1 md:grid-cols-2 gap-0 bg-red-100 ">
+  <div class="grid grid-cols-1 md:grid-cols-1 gap-0 ">
   <div class=" md:px-4 border-b-2 border-white border-">
     <div class="md:px-20 px-3">
       <h1 class="text-center section-title mx-4" id="who-can-participate">
@@ -144,57 +144,12 @@ import process from "../assets/img/process.png";
   
 
 
-  <div class=" md:px-4 border-l-2 border-b-2 border-white pb-5">
-    <div class="md:px-20 px-3">
-      <h1 class="text-center section-title mx-4" id="why-participate">
-        Why Participate?
-      </h1>
-      <ul class="list-disc list-outside space-y-1">
-        <li>Open to everyone.</li>
-        <li>Gain visibility in the Scilab and open-source communities.</li>
-        <li>Win cash rewards for top-performing projects.</li>
-        <li>Top performers may be offered internships with FOSSEE.</li>
-        <li>Gain hands-on experience with Scilab for solving real-world problems.</li>
-      </ul>
-    </div>
-  </div>
+  
   
 
 
 
-<div class=" md:px-4 pb-5">
-    <div class="md:px-20 px-3">
-      <h1 class=" text-center section-title mx-4 mb-5" id="problem-statement">
-        Problem Statement
-      </h1>
-      <p class="leading-relaxed mb-4">Participants are required to:</p>
-      <ul class="list-disc list-inside space-y-1">
-        <li>Select a published research paper as a reference.</li>
-        <li>Reproduce its results using Scilab.</li>
-        <li>Present the Scilab-based solution, workflow, and comparison with the original results along with a report.</li>
-      </ul>
-    </div>
-  </div>
 
-<div class="md:px-4 pb-5 border-l-2 border-white">
-    <div class="md:px-20 px-3">
-      <h1 class=" text-center section-title mx-4 mb-5" id="topics">
-        Case study topics can be chosen from the following domains for the Hackathon
-      </h1>
-   
-        <!-- Card 1 -->
-        <ul class="list-disc list-outside space-y-1">
-          <li>Robotics and Autonomous Systems</li>
-          <li>Data Analytics and Machine Learning</li>
-          <li>Artificial Intelligence and Optimization</li>
-          <li>Renewable Energy and Sustainability</li>
-          <li>Computational Biology and Healthcare Analytics</li>
-          <li>Control Systems</li>
-          <li>Space and Aerospace Simulations</li>
-          <li>Digital Signal and Image Processing</li>
-          </ul>
-     <mark>Any other domain/topic can also be proposed (subject to approval by IIT Bombay-FOSSEE-Scilab team)</mark>
-    </div>
   </div>
 </div>
 
@@ -205,12 +160,12 @@ import process from "../assets/img/process.png";
       </h1>
       
         <h1 class="font-bold text-gray-900 mb-4">To participate in the hackathon, please follow these mandatory steps: </h1>
-        <ol class="list-decimal list-outside space-y-4">
+        <ol class="text-justify list-decimal list-outside space-y-4">
             <li class="leading-6">
               Before proceeding, it is mandatory to fill out this Google Form: 
                 <a href="https://docs.google.com/forms/d/e/1FAIpQLSc7sSXer3wta4B9QuT_x7xa2tx53_2uJ6PJM7t0oCdww1rPgA/viewform?usp=sf_link" 
                    target="_blank" 
-                   class="text-blue-600  hover:underline">Click here </a>to open<br />
+                   class="text-red-600 hover:text-red-400  hover:underline">Click here </a>to open.
                    Your participation will not be considered if this form is not filled out.
 
             </li>
@@ -218,7 +173,7 @@ import process from "../assets/img/process.png";
               After completing the form, visit this website to read all the instructions: 
                 <a href="https://scilab.in/case-study-portal/case-study-project" 
                    target="_blank" 
-                   class="text-blue-600 hover:underline">Click here </a><br />
+                   class="text-red-600 hover:text-red-400   hover:underline">Click here</a>.
                    Please go through all the links provided under the Case Study Project tab.
             </li>
             <li class="leading-6">
@@ -250,89 +205,9 @@ import process from "../assets/img/process.png";
     </div>
   </div>
 
-  <div class="grid grid-cols-1 md:grid-cols-2 gap-0 bg-red-100 ">
-  <div class="md:px-4 pb-5">
-    <div class="md:px-20 px-3">
-      <h1 class="text-center section-title mx-4 px-4" id="resources">Evaluation Criteria:</h1>
-      <ul class="list-disc list-outside space-y-1">
-  <li>Complexity of the problem, including its technical depth and challenges. &nbsp;</li>
-  <li>Quality of the journal, considering its credibility and impact factor. &nbsp;</li>
-  <li>Novelty of the topic, focusing on originality and innovation. &nbsp;&nbsp;</li>
-  <li>Accuracy of the reproduced results compared to the reference paper. &nbsp;</li>
-  <li>Effective and innovative use of Scilab features and toolboxes. &nbsp;</li>
-  <li>Readability, proper documentation, and adherence to best coding practices. &nbsp;</li>
-  </ul>
-    </div>
-  </div>
 
-  <div class=" md:px-4 pb-5">
-    <div class="md:px-20 px-3">
-      <h1 class="text-center section-title mx-4 px-4" id="resources">Resources</h1>
-  
-      <div class="mt-4 text-lg">
-        <h3 class="text-left">
-          Explore the Spoken Tutorial series on Scilab to strengthen your understanding of Scilab concepts. These tutorials cover a wide range of topics. 
-          <span class="block mt-2 ">
-            Access them here: 
-            <span class=" mt-2 text-blue-600"> <a target="_blank"  href="https://spoken-tutorial.org/tutorial-search/?search_foss=Scilab&amp;search_language=English" class="underline" target="_blank">Spoken Tutorial Series on Scilab</a>
-          </span></span>
-        </h3>
-      </div>
-    </div>
-  </div>
   
-</div>
-<div class="bg-[#ffffff] md:px-4 pb-5">
-    <div class="md:px-20 px-3">
-      <h1 class="text-center section-title mx-4 px-4" id="about">System Requirements</h1>
-  
-     
-  
-      <!-- Grid Container for Two Columns and Three Cards in Second Row -->
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        
-        <!-- Linux Section Card -->
-        <div class="bg-gray-100 p-5 rounded-lg shadow-md">
-          <h4 class="text-xl font-semibold mb-3"><strong>Linux:</strong></h4>
-          <ul class="space-y-2">
-            <li><h3>OS: Ubuntu 22.04+ </h3></li>
-            <li><h3>Scilab: <a target="_blank"  href="https://www.scilab.org/download" class="text-blue-500 hover:underline">Download latest version</a></h3></li>
-          </ul>
-        </div>
-  
-        <!-- Mac Section Card -->
-        <div class="bg-gray-100 p-5 rounded-lg shadow-md">
-          <h4 class="text-xl font-semibold mb-3"><strong>Mac:</strong></h4>
-          <ul class="space-y-2">
-            <li><h3>OS: macOS 10.13+</h3></li>
-            <li><h3>Scilab: <a target="_blank" href="https://www.scilab.org/download" class="text-blue-500 hover:underline">Download latest version</a></h3></li>
-          </ul>
-        </div>
-  
-        <!-- Windows Section Card -->
-        <div class="bg-gray-100 p-5 rounded-lg shadow-md">
-          <h4 class="text-xl font-semibold mb-3"><strong>Windows:</strong></h4>
-          <ul class="space-y-2">
-            <li><h3>OS: Windows 10 or 11</h3></li>
-          </ul>
-          <p>Scilab: <a target="_blank"  href="https://www.scilab.org/download" class="text-blue-500 hover:underline">Download latest version</a></p>
-        </div>
-  
-      </div>
-       <!-- General Section Card centered -->
-       <div class="bg-gray-100 p-5 rounded-lg shadow-md max-w-md mx-auto my-4">
-        <h4 class="text-xl font-semibold mb-3"><strong>General:</strong></h4>
-        <ul class="space-y-2">
-          <li><h3><strong>RAM:</strong> 4 GB (8 GB recommended)</h3></li>
-          <li><h3><strong>Processor:</strong> Dual-core or higher</h3></li>
-          <li><h3><strong>Storage:</strong> 2 GB free space</h3></li>
-          <li><h3><strong>Internet:</strong> Stable connection</h3></li>
-        </ul>
-      </div>
-    </div>
-  </div>
-  
-  <div class="bg-white md:px-4 pb-5">
+  <div class="bg-gray-50 md:px-4 pb-5">
     <div class="md:px-20 px-3">
       <h1 class="text-center section-title mx-4 px-4" id="rules">Rules and Regulations</h1>
   
@@ -349,9 +224,23 @@ import process from "../assets/img/process.png";
       </div>
     </div>
   </div>
-  
+  <div class=" md:px-4 border-l-2 border-b-2 border-white pb-5">
+    <div class="md:px-20 px-3">
+      <h1 class="text-center section-title mx-4" id="why-participate">
+        Benefits to participate
+      </h1>
+      <ul class="list-disc list-outside space-y-1">
+        <li>Free registration and open to everyone.</li>
+        <li>Gain hands-on experience with Scilab for solving real-world problems.</li>
+        <li>Win cash prize for top-performing projects.</li>
+        <li>eCertificates for good submissions.</li>
+        <li>Exclusive recognition for outstanding projects on the FOSSEE,IIT Bombay - Scilab website.</li>
+        <li>Top performers may be offered internships with FOSSEE, IIT Bombay.</li>
+        </ul>
+    </div>
+  </div>
   <div class="max-w-lg mx-auto mt-10 p-6 bg-white rounded-lg shadow-md border">
-    <h1 class="text-center section-title mx-4 px-4" id="rules">Awards</h1>
+    <h1 class="text-center section-title mx-4 px-4" id="rules">Rewards</h1>
     <ul class="space-y-4">
         <li class="flex justify-between border-b pb-2">
             <span>First Prize:</span>
diff --git a/src/components/layout/Footer.astro b/src/components/layout/Footer.astro
index b65a2f5..38a98f8 100644
--- a/src/components/layout/Footer.astro
+++ b/src/components/layout/Footer.astro
@@ -62,7 +62,7 @@ import st from "../../assets/img/spoken.png";
             <h5 class="text-xl font-semibold mb-4">Resources</h5>
             <ul class="space-y-2 text-sm">
               <li><a class="text-gray-400 hover:text-white" href="https://www.scilab.org/" target="_blank">Scilab.org</a></li>
-              <li><a class="text-gray-400 hover:text-white" href="https://atoms.scilab.org/" target="_blank">ATOMS</a></li>
+              <!-- <li><a class="text-gray-400 hover:text-white" href="https://atoms.scilab.org/" target="_blank">ATOMS</a></li> -->
             </ul>
           </div>
       
diff --git a/src/components/layout/nav-links.json b/src/components/layout/nav-links.json
index dd4e128..8dec5c4 100644
--- a/src/components/layout/nav-links.json
+++ b/src/components/layout/nav-links.json
@@ -1,10 +1,11 @@
 [
  
     { "label": "About", "href": "/#about" },
-    {"label": "Problem-Statement", "href": "/#problem-statement"},
+    {"label": "Problem-Statement", "href": "/problem-statement"},
     {"label": "Register", "href": "/#register"},
+    {"label": "Submission-guidelines", "href": "/submission-guidelines"},
+    { "label": "Resources", "href": "/resources" },
     {"label": "Results", "href": "/results"},
-    { "label": "Resources", "href": "/#resources" },
     { "label": "Contact", "href": "/#contact" }
   
   ]
\ No newline at end of file
diff --git a/src/pages/problem-statement.astro b/src/pages/problem-statement.astro
new file mode 100644
index 0000000..15950d7
--- /dev/null
+++ b/src/pages/problem-statement.astro
@@ -0,0 +1,46 @@
+---
+import Layout from '../layouts/Layout.astro';
+import Card from '../components/Card.astro';
+import Nav from '../components/layout/Nav.astro';
+import HomeBody from '../components/HomeBody.astro';
+---
+
+<Layout title="Scilab Case Study Hackathon">
+<div class=" md:px-4 pb-5">
+    <div class="md:px-20 px-3">
+      <h1 class=" text-center section-title mx-4 mb-5" id="problem-statement">
+        Problem Statement
+      </h1>
+      <p class="leading-relaxed mb-4">Participants are required to:</p>
+      <ul class="list-disc list-inside space-y-1">
+        <li>Select a published research paper as a reference.</li>
+        <li>Reproduce its results using Scilab.</li>
+        <li>Present the Scilab-based solution, workflow, and comparison with the original results along with a report.</li>
+      </ul>
+    </div>
+  </div>
+
+<div class="md:px-4 pb-5 border-l-2 border-white">
+    <div class="md:px-20 px-3">
+      <h1 class=" text-center section-title mx-4 mb-5" id="topics">
+        Case study topics can be chosen from the following domains for the Hackathon
+      </h1>
+   
+        <!-- Card 1 -->
+        <ul class="list-disc list-outside space-y-1">
+          <li>Robotics and Autonomous Systems</li>
+          <li>Data Analytics and Machine Learning</li>
+          <li>Artificial Intelligence and Optimization</li>
+          <li>Renewable Energy and Sustainability</li>
+          <li>Computational Biology and Healthcare Analytics</li>
+          <li>Control Systems</li>
+          <li>Space and Aerospace Simulations</li>
+          <li>Digital Signal and Image Processing</li>
+          </ul>
+     <mark>Any other domain/topic can also be proposed (subject to approval by IIT Bombay-FOSSEE-Scilab team)</mark>
+    </div>
+
+
+
+</Layout>
+
diff --git a/src/pages/resources.astro b/src/pages/resources.astro
new file mode 100644
index 0000000..75950db
--- /dev/null
+++ b/src/pages/resources.astro
@@ -0,0 +1,28 @@
+---
+import Layout from '../layouts/Layout.astro';
+import Card from '../components/Card.astro';
+import Nav from '../components/layout/Nav.astro';
+import HomeBody from '../components/HomeBody.astro';
+---
+
+<Layout title="Scilab Case Study Hackathon">
+    <div class=" md:px-4 pb-5 min-h-[50vh]">
+    <div class="md:px-20 px-3">
+      <h1 class="text-center section-title mx-4 px-4" id="resources">Resources</h1>
+  
+      <div class="mt-4">
+        <h3 class="text-left">
+          Explore the Spoken Tutorial series on Scilab to strengthen your understanding of Scilab concepts. These tutorials cover a wide range of topics. 
+          <span class="block mt-2 ">
+            Access them here: 
+            <span class="block mt-2 text-blue-600"> <a target="_blank"  href="https://spoken-tutorial.org/tutorial-search/?search_foss=Scilab&amp;search_language=English" class="underline" target="_blank">Spoken Tutorial Series of Scilab</a>
+          </span>
+          <span class="block mt-2 text-blue-600"> <a href="https://spoken-tutorial.org/tutorial-search/?search_foss=GUI+in+Scilab&amp;search_language=English" target="_blank" class="underline" >Spoken Tutorial Series of GUI in Scilab</a></span></span>
+        </h3>
+      </div>
+    </div>
+  </div>
+
+
+  
+</Layout>
\ No newline at end of file
diff --git a/src/pages/submission-guidelines.astro b/src/pages/submission-guidelines.astro
new file mode 100644
index 0000000..4d611e3
--- /dev/null
+++ b/src/pages/submission-guidelines.astro
@@ -0,0 +1,76 @@
+---
+import Layout from '../layouts/Layout.astro';
+import Card from '../components/Card.astro';
+import Nav from '../components/layout/Nav.astro';
+import HomeBody from '../components/HomeBody.astro';
+---
+
+<Layout title="Scilab Case Study Hackathon">
+<!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-0 bg-gray-200 "> -->
+    <div class="md:px-4 pb-5">
+      <div class="md:px-20 px-3">
+        <h1 class="text-left section-title pl-4" id="evaluation">Evaluation Criteria</h1>
+        <ul class="list-disc list-inside space-y-2 pt-4">
+    <li>Complexity of the problem, including its technical depth and challenges. &nbsp;</li>
+    <li>Quality of the journal, considering its credibility and impact factor. &nbsp;</li>
+    <li>Novelty of the topic, focusing on originality and innovation. &nbsp;&nbsp;</li>
+    <li>Accuracy of the reproduced results compared to the reference paper. &nbsp;</li>
+    <li>Effective and innovative use of Scilab features and toolboxes. &nbsp;</li>
+    <li>Readability, proper documentation, and adherence to best coding practices. &nbsp;</li>
+    </ul>
+      </div>
+    </div>
+  
+    <div class="md:px-4 pb-5">
+      <div class="md:px-20 px-3">
+        <h1 class="text-center section-title mx-4 px-4 mb-5" id="about">System Requirements</h1>
+    
+       
+    
+        <!-- Grid Container for Two Columns and Three Cards in Second Row -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+          
+          <!-- Linux Section Card -->
+          <div class="bg-gray-100 p-5 rounded-lg shadow-md">
+            <h4 class="text-xl font-semibold mb-1"><strong>Linux:</strong></h4>
+            <ul class="space-y-1">
+              <li><h3>OS: Ubuntu 22.04+ </h3></li>
+              <li><h3>Scilab: <a target="_blank"  href="https://www.scilab.org/download" class="text-blue-500 hover:underline">Download latest version</a></h3></li>
+            </ul>
+          </div>
+    
+          <!-- Mac Section Card -->
+          <div class="bg-gray-100 p-5 rounded-lg shadow-md">
+            <h4 class="text-xl font-semibold mb-1"><strong>Mac:</strong></h4>
+            <ul class="space-y-1">
+              <li><h3>OS: macOS 10.13+</h3></li>
+              <li><h3>Scilab: <a target="_blank" href="https://www.scilab.org/download" class="text-blue-500 hover:underline">Download latest version</a></h3></li>
+            </ul>
+          </div>
+    
+          <!-- Windows Section Card -->
+          <div class="bg-gray-100 p-5 rounded-lg shadow-md">
+            <h4 class="text-xl font-semibold mb-1"><strong>Windows:</strong></h4>
+            <ul class="space-y-1">
+              <li><h3>OS: Windows 10 or 11</h3></li>
+            </ul>
+            <p>Scilab: <a target="_blank"  href="https://www.scilab.org/download" class="text-blue-500 hover:underline">Download latest version</a></p>
+          </div>
+    
+        </div>
+         <!-- General Section Card centered -->
+         <div class="bg-gray-100 p-5 rounded-lg shadow-md max-w-md mx-auto my-4">
+          <h4 class="text-xl font-semibold mb-1"><strong>General:</strong></h4>
+          <ul class="space-y-1">
+            <li><h3><strong>RAM:</strong> 4 GB (8 GB recommended)</h3></li>
+            <li><h3><strong>Processor:</strong> Dual-core or higher</h3></li>
+            <li><h3><strong>Storage:</strong> 2 GB free space</h3></li>
+            <li><h3><strong>Internet:</strong> Stable connection</h3></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    
+    
+  <!-- </div> -->
+</Layout>
\ No newline at end of file