feat: index page almost completed

Author: adityadafe

src/components/BlogHero.astro

@@ -0,0 +1,8 @@
+---
+const {blogTitle,blogDescription} = Astro.props
+---
+
+<article class="flex justify-between text-white text-xl font-sans">
+  <span>{blogTitle}</span>
+  <span>{blogDescription}</span>
+</article>

src/components/Container.astro

@@ -0,0 +1,16 @@
+---
+const { projectTitle, projectDescription } = Astro.props
+---
+
+<div class="border border-slate-600 rounded-lg relative  bg-background h-32 md:w-[13.2rem] my-1 transition-all hover:scale-105 duration-300">
+   <svg class="absolute inset-0 w-full h-full [mask-image:radial-gradient(400px_circle_at_center,white,transparent)]">
+            <filter id="n">
+              <feTurbulence
+                type="fractalNoise"
+                baseFrequency="0.9"
+                stitchTiles="stitch"
+              />
+            </filter>
+            <rect width="100%" height="100%" filter="url(#n)" opacity="0.40" />
+  </svg>
+</div>

src/components/Footer.astro

@@ -0,0 +1,11 @@
+---
+
+---
+
+<footer class="flex justify-between text-white font-sans">
+  <span >built with {"<3"} by kakashi </span>
+  <div>
+    <div class="i-mdi:github" title="GitHub"></div>
+  </div>
+
+</footer>

src/components/Navbar.astro

@@ -1,12 +1,12 @@
 ---
 
 ---
-<nav class="flex flex-row justify-between items-center py-8">
+<nav class="flex flex-row justify-between items-center py-4">
   <div class="flex flex-row items-center">
     <img src="/android-chrome-512x512.png" class='rounded-full h-20 w-20' alt="og"/>
     <div class="flex flex-col ml-3">
-      <span class='font-sans font-bold text-4xl text-white '> kakashifr </span>
-        <small class="text-gray-600 dark:text-gray-500">
+      <h1 class='font-sans font-bold text-4xl text-white '> kakashifr </h1>
+        <small class="text-gray-600 dark:text-gray-100">
          IPA /kɑːˈkɑː.ʃi/ — カカシ 
       </small>
     </div>

src/components/Ruler.astro

@@ -0,0 +1,3 @@
+---
+---
+<hr class="border-slate-600 my-4"/>

src/layouts/Base.astro

@@ -25,6 +25,6 @@ import Grain from "../lib/grainsbg/Grain.astro"
     <slot/>
     </div>
     <Grain opacity={100}/>
-    <Plum client:only/>
+    <!-- <Plum client:only/> -->
   </body>
 </html>

src/pages/index.astro

@@ -1,11 +1,54 @@
 ---
 import Base from './../layouts/Base.astro'
 import Navbar from '../components/Navbar.astro'
-
+import Ruler from '../components/Ruler.astro' 
+import Container from '../components/Container.astro'
+import BlogHero from '../components/BlogHero.astro'
+import Footer from '../components/Footer.astro'
 const title = "home >> kakashifr "
+//const Projects 
 ---
 
 <Base description="" title={title}>
   <Navbar/>
+
+  <Ruler/>
+
+  <main>
+    <p class="text-white w-full font-sans">
+      Lorem ipsum, dolor sit amet consectetur  awaa adipisicing elit. Sed id reiciendis consequuntur labore hic magnam officiis libero incidunt velit illum repudiandae est at ut harum culpa, animi optio, nostrum fuga!
+      Lorem ipsum, dolor sit amet consectetur  awaa adipisicing elit. Sed id reiciendis consequuntur labore hic magnam officiis libero incidunt velit illum repudiandae est at ut harum culpa, animi optio, nostrum fuga!
+      Lorem ipsum, dolor sit amet consectetur  awaa adipisicing elit. Sed id reiciendis consequuntur labore hic magnam officiis libero incidunt velit illum repudiandae est at ut harum culpa, animi optio, nostrum fuga!
+    </p>
+  </main>
+
+  <Ruler/>
+
+  <h2 class="my-4 font-sans font-bold text-3xl text-white ">Projects</h2>
+
+  <div class="grid grid-cols-1 md:grid-cols-3">
+    <Container/>
+    <Container/>
+    <Container/>
+    <Container/>
+    <Container/>
+    <Container/>
+  </div>
+
+  <Ruler/>
+
+  <h2 class="my-4 font-sans font-bold text-3xl text-white">Latest blogs</h2>
+
+  <div>
+    <BlogHero blogTitle='lorem' blogDescription='lorem ipsum lorem'/>
+    <BlogHero blogTitle='lorem' blogDescription='lorem ipsum lorem'/>
+    <BlogHero blogTitle='lorem' blogDescription='lorem ipsum lorem'/>
+    <BlogHero blogTitle='lorem' blogDescription='lorem ipsum lorem'/>
+  </div>
+
+  <Ruler/>
+
+  <Footer/>
+
 </Base>