diff --git a/pages/index.hbs b/pages/index.hbs
new file mode 100644
index 0000000..87f8439
--- /dev/null
+++ b/pages/index.hbs
@@ -0,0 +1,283 @@
+<div id="ai_body" data-hbs-id="f5wkafp">
+  <div class="hero-section relative flex items-center justify-center bg-gray-900 overflow-hidden" data-hbs-id="p52rynq">
+    <!-- Background Image with Overlay -->
+    <div class="absolute inset-0 z-0" data-hbs-id="638urlg">
+      <img
+        src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1920&h=600"
+        alt="Blog Hero"
+        class="w-full h-full object-cover opacity-50"
+      / data-hbs-id="zbp4ndx">
+      <!-- Dark Overlay -->
+      <div class="absolute inset-0 bg-black/60" data-hbs-id="wihdftt"></div>
+      <!-- Brand Color Overlay -->
+      <div class="absolute inset-0 cms-bg-primary opacity-10" data-hbs-id="w9w9onn"></div>
+    </div>
+
+    <!-- Animated Background Elements -->
+    <div class="absolute inset-0 z-5" data-hbs-id="io78qdr">
+      <div class="absolute top-20 left-10 w-2 h-2 bg-white/20 rounded-full animate-pulse" data-hbs-id="ewdlbs9"></div>
+      <div class="absolute top-40 right-20 w-3 h-3 cms-bg-accent opacity-60 rounded-full animate-bounce" style="animation-delay: 1s;" data-hbs-id="ez619vk"></div>
+      <div class="absolute bottom-32 left-1/4 w-1 h-1 bg-white/30 rounded-full animate-pulse" style="animation-delay: 2s;" data-hbs-id="q3azffo"></div>
+      <div class="absolute bottom-20 right-1/3 w-2 h-2 cms-bg-accent opacity-40 rounded-full animate-bounce" style="animation-delay: 0.5s;" data-hbs-id="j2dvhs2"></div>
+    </div>
+
+    <!-- Hero Content -->
+    <div class="relative z-10 text-center px-4 max-w-6xl mx-auto" data-hbs-id="6fery8w">
+      <!-- Badge -->
+      <div class="inline-flex items-center px-4 py-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full text-white text-sm font-medium mb-8" data-hbs-id="wl1gvwn">
+        <div class="w-2 h-2 cms-bg-accent rounded-full mr-2 animate-pulse" data-hbs-id="3fhypml"></div>
+        Latest Tech Insights
+      </div>
+
+      <!-- Main Heading -->
+      <h1 class="cms-h1 text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight" data-hbs-id="t92vb9t">
+        Explore Today's
+        <span class="block cms-text-accent bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent" data-hbs-id="b0ccm0z">
+          Technology
+        </span>
+      </h1>
+
+      <!-- Subtitle -->
+      <p class="cms-body text-xl md:text-2xl text-white mb-10 max-w-3xl mx-auto leading-relaxed" data-hbs-id="bngq0lq">
+        Insights, analysis and trends shaping the future of tech and innovation. Stay ahead with expert perspectives and cutting-edge discoveries.
+      </p>
+
+      <!-- CTA Buttons -->
+      <div class="flex flex-col sm:flex-row gap-4 justify-center items-center" data-hbs-id="nvza0wb">
+        <a href="#latest-insights" class="cms-btn cms-bg-primary hover:cms-bg-accent text-white px-8 py-4 text-lg font-semibold rounded-lg shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all duration-300 flex items-center" data-hbs-id="dagxhew">
+          Start Exploring
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" data-hbs-id="n57wq41">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+          </svg>
+        </a>
+        <a href="#featured-posts" class="cms-btn bg-transparent border-2 border-white text-white hover:bg-white hover:text-gray-600 px-8 py-4 text-lg font-semibold rounded-lg backdrop-blur-sm transition-all duration-300" data-hbs-id="kdhlp3p">
+          View Featured
+        </a>
+      </div>
+    </div>
+
+    <!-- Scroll Indicator -->
+    <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10" data-hbs-id="khdy6rj">
+      <div class="flex flex-col items-center text-white/60 animate-bounce" data-hbs-id="scd5y16">
+        <span class="text-xs text-white uppercase tracking-wider mb-2" data-hbs-id="0wbtkrl">Scroll Down</span>
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" data-hbs-id="z6aupn1">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+        </svg>
+      </div>
+    </div>
+  </div>
+
+  <!-- Blog Posts Section -->
+  <section class="py-20 px-4 bg-gray-50" data-hbs-id="qdqt18v">
+    <div class="max-w-7xl mx-auto" data-hbs-id="htzuo9c">
+      <!-- Section Header -->
+      <div class="text-center mb-16" data-hbs-id="diyut6k">
+        <div class="inline-flex items-center px-4 py-2 cms-bg-accent/10 cms-border-accent border rounded-full text-sm font-medium cms-text-accent mb-4" data-hbs-id="av98fng">
+          <i class="fas fa-newspaper mr-2" data-hbs-id="gu5tfil"></i>
+          Latest Insights
+        </div>
+        <h2 class="cms-h2 text-4xl md:text-5xl font-bold cms-text-dark mb-4" data-hbs-id="c0e7ffx">
+          Recent Blog Posts
+        </h2>
+        <p class="cms-body text-lg text-gray-600 max-w-2xl mx-auto" data-hbs-id="jql8ahv">
+          Discover the latest articles, insights, and stories from our community of writers and experts.
+        </p>
+      </div>
+
+      <!-- Blog Posts Grid -->
+      {{faster:posts limit="9" key="blog-posts-grid" post-item-class="blog-post-card" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"}}
+        <article class="blog-post-card cms-card bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 flex flex-col" data-hbs-id="mlnx3m0">
+          <!-- Featured Image -->
+          {{#if feature_image}}
+            <div class="relative h-56 overflow-hidden bg-gray-200" data-hbs-id="svd8ysg">
+              <img
+                src="{{feature_image}}"
+                alt="{{title}}"
+                class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
+              />
+              <!-- Reading Time Badge -->
+              <div class="absolute top-4 right-4 px-3 py-1 cms-bg-primary text-white text-xs font-semibold rounded-full backdrop-blur-sm bg-opacity-90" data-hbs-id="tslfefi">
+                <i class="fas fa-clock mr-1" data-hbs-id="idljvbg"></i>
+                {{reading_time}} min read
+              </div>
+            </div>
+          {{else}}
+            <div class="relative h-56 cms-bg-accent/10 flex items-center justify-center" data-hbs-id="fpko2pm">
+              <i class="fas fa-image text-6xl cms-text-accent opacity-30" data-hbs-id="ayrjd6w"></i>
+            </div>
+          {{/if}}
+
+          <!-- Post Content -->
+          <div class="p-6 flex flex-col flex-grow" data-hbs-id="9q93fyh">
+            <!-- Post Title -->
+            <h3 class="cms-h3 text-xl font-bold cms-text-dark mb-3 leading-tight hover:cms-text-accent transition-colors duration-200" data-hbs-id="2huh0vs">
+              <a href="{{url}}" class="hover:underline">
+                {{title}}
+              </a>
+            </h3>
+
+            <!-- Post Excerpt -->
+            <p class="cms-body text-gray-600 mb-6 leading-relaxed flex-grow" data-hbs-id="9mg63py">
+              {{excerpt words=25}}
+            </p>
+
+            <!-- Post Meta -->
+            <div class="flex items-center justify-between pt-4 border-t border-gray-100" data-hbs-id="pov02du">
+              <!-- Author Info -->
+              <div class="flex items-center space-x-3" data-hbs-id="76j0ktn">
+                {{#if primary_author.profile_image}}
+                  <img
+                    src="{{primary_author.profile_image}}"
+                    alt="{{primary_author.name}}"
+                    class="w-10 h-10 rounded-full object-cover border-2 cms-border-accent"
+                  />
+                {{else}}
+                  <div class="w-10 h-10 rounded-full cms-bg-accent/20 flex items-center justify-center" data-hbs-id="6ufa3gp">
+                    <i class="fas fa-user cms-text-accent" data-hbs-id="dfwapb0"></i>
+                  </div>
+                {{/if}}
+                <div class="flex flex-col" data-hbs-id="ejjz4il">
+                  <span class="text-sm font-semibold cms-text-dark" data-hbs-id="ed7b60q">
+                    {{primary_author.name}}
+                  </span>
+                  <span class="text-xs text-gray-500" data-hbs-id="cuki0c8">
+                    {{date published_at "MMM DD, YYYY"}}
+                  </span>
+                </div>
+              </div>
+
+              <!-- Read More Arrow -->
+              <a href="{{url}}" class="cms-text-accent hover:cms-text-primary transition-colors duration-200">
+                <i class="fas fa-arrow-right text-lg" data-hbs-id="ihlcw5h"></i>
+              </a>
+            </div>
+          </div>
+        </article>
+      {{/faster:posts}}
+
+      <!-- Load More Button -->
+      <div class="text-center mt-12" data-hbs-id="xeapy7j">
+        {{faster:button type="posts" key="blog-posts-grid" auto-load="false"}}
+          <span class="inline-flex items-center" data-hbs-id="2wfbr44">
+            <i class="fas fa-sync-alt mr-2" data-hbs-id="z2h1mrc"></i>
+            Load More Posts
+          </span>
+        {{/faster:button}}
+      </div>
+    </div>
+  </section>
+
+</div>
+
+<style>
+  .hero-section {
+    height: 800px;
+  }
+  .hero-bg-image {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+  }
+
+  .hero-bg-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0.5;
+  }
+
+  /* Card styling enhancements */
+  .post-feature-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 150ms ease;
+  }
+
+  .cms-card:hover .post-feature-image {
+    transform: scale(1.05);
+  }
+
+  .post-tag {
+    color: var(--brand-accent);
+    font-size: 14px;
+    font-weight: 500;
+    text-decoration: none;
+    transition: color 150ms ease;
+  }
+
+  .post-tag:hover {
+    color: var(--brand-primary);
+  }
+
+  .post-title {
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--dark-gray);
+    transition: color 150ms ease;
+  }
+
+  .cms-card:hover .post-title {
+    color: var(--brand-accent);
+  }
+
+  .post-content {
+    color: var(--medium-gray);
+    font-size: 16px;
+    line-height: 24px;
+    flex-grow: 1;
+  }
+
+  .post-meta {
+    color: var(--medium-gray);
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    margin-top: auto;
+  }
+
+  .post-meta i {
+    margin-right: var(--space-2);
+  }
+
+  /* Section heading styling */
+  .section-heading {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--dark-gray);
+    text-align: center;
+    position: relative;
+    display: inline-block;
+    padding-bottom: var(--space-2);
+  }
+
+  .section-heading::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 64px;
+    height: 4px;
+    background-color: var(--brand-accent);
+    border-radius: var(--space-1);
+  }
+
+  /* Grid layout */
+  .site-posts-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--space-8);
+  }
+
+  /* Post item positioning */
+  .post-item {
+    position: relative;
+  }
+
+  .post-link {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+  }
+</style>