package.json

@@ -22,7 +22,7 @@
     "@astrolib/analytics": "^0.5.0",
     "@astrolib/seo": "^1.0.0-beta.5",
     "@fontsource-variable/inter": "^5.0.18",
-    "astro": "^4.9.2",
+    "astro": "^4.10.0",
     "astro-embed": "^0.7.2",
     "astro-icon": "^1.1.0",
     "limax": "4.1.0",
@@ -30,7 +30,7 @@
     "unpic": "^3.18.0"
   },
   "devDependencies": {
-    "@astrojs/mdx": "^3.0.1",
+    "@astrojs/mdx": "^3.1.0",
     "@astrojs/partytown": "^2.1.0",
     "@astrojs/tailwind": "5.1.0",
     "@eslint/js": "^9.2.0",

src/components/Logo.astro

@@ -2,8 +2,7 @@
 import { SITE } from 'astrowind:config';
 ---
 
-<span
-  class="self-center ml-2 rtl:ml-0 rtl:mr-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white"
->
+<span class="flex items-center self-center ml-2 rtl:ml-0 rtl:mr-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white">
+  <img src="/assets/images/logo.svg" alt="Site Logo" class="h-8 w-auto mr-2" />
   {SITE?.name}
 </span>

src/components/widgets/Hero.astro

@@ -29,9 +29,11 @@ const {
 <section class="relative md:-mt-[76px] not-prose" {...id ? { id } : {}}>
   <div class="absolute inset-0 pointer-events-none" aria-hidden="true"></div>
   <div class="relative max-w-7xl mx-auto px-4 sm:px-6">
-    <div class="pt-0 md:pt-[76px] pointer-events-none"></div>
-    <div class="py-12 md:py-20">
-      <div class="text-center pb-10 md:pb-16 max-w-5xl mx-auto">
+    <div class="pt-0 md:pt-12 pointer-events-none"></div>
+    <div class="py-8 md:py-20">
+      <div class="text-center pb-8 md:pb-16 max-w-5xl mx-auto">
+        <!-- Add the logo before the tagline -->
+        <img src="/assets/images/logo.svg" alt="Logo" class=" mx-auto mb-4 h-65 sm:h-23 w-auto" />
         {
           tagline && (
             <p
@@ -43,7 +45,7 @@ const {
         {
           title && (
             <h1
-              class="text-5xl md:text-6xl font-bold leading-tighter tracking-tighter mb-4 font-heading dark:text-gray-200"
+              class="text-3xl md:text-6xl font-bold leading-tighter tracking-tighter mb-2 font-heading dark:text-gray-200"
               set:html={title}
             />
           )
@@ -51,13 +53,13 @@ const {
         {
           title2 && (
             <h3
-              class="text-5xl md:text-4xl font-bold leading-tighter tracking-tighter mb-4 font-heading dark:text-gray-200"
+              class="text-xl md:text-4xl font-bold leading-tighter tracking-tighter mb-4 font-heading dark:text-gray-200"
               set:html={title2}
             />
           )
         }
         <div class="max-w-3xl mx-auto">
-          {subtitle && <p class="text-xl text-muted mb-6 dark:text-slate-300" set:html={subtitle} />}
+          {subtitle && <p class="text-xl text-muted mb-8 dark:text-slate-300 max-w-m md:max-w-3xl" set:html={subtitle} />}
           {
             actions && (
               <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">

src/pages/index.astro

@@ -40,23 +40,28 @@ const metadata = {
       },
       { text: 'Learn more', href: '#technology' },
     ]}
+
+
     tagline="Welcome to"
-    image={{ src: '~/assets/images/background.png', alt: '' }}
+
+    
   >
 	  <Fragment slot="title">
-      Project Internet Capacity<br> The Decentralized Autonomous Cloud
+      Project <span class="text-blue-600">IN</span>ternet <span class="text-blue-600">CA</span>pacity
+    </Fragment>
+
+    <Fragment slot="title2">
+      The Decentralized Autonomous Cloud
     </Fragment>
 
     <Fragment slot="subtitle">
-      <span class="hidden sm:inline">
-        We are a community-driven and open-source project<br> that built a self-healing and autonomous cloud engine<br> allowing <span class="font-semibold">anyone</span> to become a <span class="font-semibold">cloud service provider</span>!<br>
-      </span>
-      <span class="block mb-1 sm:hidden font-bold text-blue-600">
+        We are a community-driven and open-source project that built a self-healing and autonomous cloud engine allowing <span class="font-semibold">anyone</span> to become a <span class="font-semibold">cloud service provider</span>.
+      <span class="block my-4 font-bold text-blue-600">
         Internet Capacity, DePIN Cloud
       </span>
-      <i><br>Compute is the currency of the future...<br>
+      <i>Compute is the currency of the future.
+        <br>
       Earn rewards by providing <span class="font-semibold">Internet Capacity</span> to the world!</i>
-
     </Fragment>
   </Hero>