Updated

src/components/Article.astro

@@ -14,38 +14,72 @@ interface Props {
 const { title, subtitle, date, imageA, imageW, alt, minutes } = Astro.props
 ---
 
-<section class="article">
-  <Column gap={1} content="top">
+<section class='article'>
+  <Row
+    wrap
+    gap={1}
+    content='left'>
     <Row gap={1}>
       <picture>
-        <source srcset={imageA} type="image/avif" />
-        <source srcset={imageW} type="image/webp" />
-        <img style={`border-radius: 0.5rem`} width="200" height="auto" decoding="async" loading="lazy" alt={alt} />
+        <source
+          srcset={imageA}
+          type='image/avif'
+        />
+        <source
+          srcset={imageW}
+          type='image/webp'
+        />
+        <img
+          style={`border-radius: 0.5rem`}
+          width='200'
+          height='auto'
+          decoding='async'
+          loading='lazy'
+          alt={alt}
+        />
       </picture>
       <div>
-        <span class="article__title">{title}</span>
-        <h2 class="article__subtitle">{subtitle}</h2>
+        <span class='article__title'>{title}</span>
+        <h2 class='article__subtitle'>{subtitle}</h2>
       </div>
     </Row>
-    <Row gap={1} content="left">
-      <span>{date}</span>
-      <span>:</span>
-      <span>{minutes} min read</span>
-    </Row>
-  </Column>
+    <div
+      class='dateandtime'
+      style='width: 100%'>
+      <Row
+        gap={1}
+        content='right'>
+        <span>{date}</span>
+        <span>:</span>
+        <span>{minutes} min read</span>
+      </Row>
+    </div>
+  </Row>
 </section>
 
-<style lang="sass">
+<style lang='sass'>
+  // @use '../../configs/design/colors' as colors
+  @use 'sass:color'
+
   .article
+    width: 25rem
+    height: auto
     font-size: 1rem
-    border: 1px solid white
+    background-color: color.adjust(#0A0A0A, $lightness: 9%)
+    padding: 1.25rem
+    border-radius: 1rem
+    cursor: pointer
 
     &__title
-      font-size: 2rem
+      font-size: 1.5rem
       font-weight: 700
 
     &__subtitle
-      font-size: 1.25rem
+      font-size: 1rem
       font-weight: 500
       opacity: 0.8
+
+  .dateandtime
+    font-size: 0.75rem
+    opacity: 0.6
 </style>

src/components/Input/Input.tsx

@@ -1,12 +0,0 @@
-import Input from '../../../@dasig/components/Input'
-import { createSignal } from 'solid-js'
-
-const [sample, setSample] = createSignal('')
-
-export default () => {
-  return (
-    <>
-      <Input onChange={(val) => setSample(val)}></Input>
-    </>
-  )
-}

src/pages/index.astro

@@ -7,13 +7,39 @@ import AA from '../../@dasig/images/sample.avif'
 import AW from '../../@dasig/images/sample.webp'
 ---
 
-<Layout title="Articles - Pat Alcala">
-  <Page alignment="column">
-    <Article title="How to sample" subtitle="This is just a sample" date="Feb 10, 2026" imageA={AA.src} imageW={AW.src} alt="aaa" minutes={5} />
+<Layout title='Articles - Pat Alcala'>
+  <Page alignment='column'>
+    <Row
+      wrap
+      gap={0}
+      content='center'>
+      <div style='width: 500px'>
+        <Article
+          title='How to sample'
+          subtitle='This is just a sample'
+          date='Feb 10, 2026'
+          imageA={AA.src}
+          imageW={AW.src}
+          alt='aaa'
+          minutes={5}
+        />
+      </div>
+      <div style='width: 500px'>
+        <Article
+          title='How to sample'
+          subtitle='This is just a sample'
+          date='Feb 10, 2026'
+          imageA={AA.src}
+          imageW={AW.src}
+          alt='aaa'
+          minutes={5}
+        />
+      </div>
+    </Row>
   </Page>
-</Layout>
 
-<style lang="sass">
-  h1
-    color: #3377AC
-</style>
+  <style lang='sass'>
+    h1
+      color: #3377AC
+  </style>
+</Layout>