UI refinements

docusaurus.config.ts

@@ -64,12 +64,12 @@ const config: Config = {
 
   themeConfig: {
     // Replace with your project's social card
-    image: 'img/clsf.png',
+    image: 'img/clsf_logo.jpg',
     navbar: {
       title: 'CLSF',
       logo: {
-        alt: 'My Site Logo',
-        src: 'img/clsf.svg',
+        alt: 'CLSF Logo',
+        src: 'img/clsf_logo.jpg',
       },
       items: [
         {
@@ -127,7 +127,7 @@ const config: Config = {
           ],
         },
       ],
-      copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
+      copyright: `🅭 <a target="_BLANK" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International</a> License  ${new Date().getFullYear()} CLSFramework. Built with <a  target="_BLANK" href="https://docusaurus.io/">Docusaurus</a>`
     },
     prism: {
       theme: prismThemes.github,

src/components/HomepageFeatures/index.tsx

@@ -24,7 +24,7 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: 'Soccer Simulation 2D',
-    Svg: require('@site/static/img/ss2d.svg').default,
+    Svg: require('@site/static/img/ss2d_logo.svg').default,
     description: (
       <>
         The RoboCup 2D Simulated Soccer League is the oldest of the RoboCup Soccer Simulation Leagues. It consists of a number of competitions with computer simulated soccer matches as the main event.
@@ -47,13 +47,15 @@ const FeatureList: FeatureItem[] = [
 
 function Feature({title, Svg, description, link}: FeatureItem) {
   return (
-    <div className={clsx('col col--4')}>
+    <div className={clsx('col col--4')} style={{padding:'20px'}}>
       <div className="text--center" style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
         <Svg className={styles.featureSvg} role="img" style={{height: '150px', width: '220px', margin: 'auto'}}/>
       </div>
-      <div className="text--center padding-horiz--md">
+      <div className="text--center padding-horiz--md" style={{paddingBottom:'20px', paddingTop:'20px'}}>
         <Heading as="h3">{title}</Heading>
-        <p>{description}</p>
+        <p style={{textAlign:'justify'}}>
+          {description}
+          </p>
         {link && (
           <Link
             className="button button--secondary button--lg"

src/pages/index.module.css

@@ -3,17 +3,28 @@
  * and scoped locally.
  */
 
-.heroBanner {
+ .heroBanner {
   padding: 4rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
+  color: white;
 }
 
+
+
 @media screen and (max-width: 996px) {
   .heroBanner {
     padding: 2rem;
   }
+  .heroBanner h1 {
+    font-size: 2em!important;
+    text-align: left!important;
+  }
+  .heroBanner p {
+    font-size: 1em;
+    text-align: left;
+  }
 }
 
 .buttons {
@@ -23,8 +34,23 @@
 }
 
 .heroBanner {
-  background-image: url('/img/ss2d.svg'); /* Relative to the `static` folder */
-  background-size: cover; /* Ensures the image covers the entire area */
   background-position: center; /* Centers the image */
+  position: relative;
   color: white;
+  z-index: 0; /* Ensure the heroBanner content is above the pseudo-element */
+}
+
+.heroBanner::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: url('/img/ss2d.svg'); /* Relative to the `static` folder */
+  background-size: cover;
+  background-position: center;
+  filter: blur(5px); /* Adjust the value as needed */
+  z-index: -1; /* Ensure the pseudo-element is behind the content */
+  pointer-events: none; /* Allow interactions with content above the pseudo-element */
 }