From a15f4947e30dda724e4d6cbd80f8975fae8d7edd Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Wed, 27 Aug 2025 16:51:59 +0800
Subject: [PATCH] Used page component and button

---
 src/pages/index.astro | 22 ++++++++--------------
 src/pages/next.astro  | 12 ++++++++----
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index dcb6894..69b8529 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,29 +3,23 @@ import Layout from '../layouts/Layout.astro'
 import Button from '../builtin-components/Button/Button.tsx'
 import Image from '../builtin-components/Image/Image'
 import Link from '../builtin-components/Link/Link'
-import Counter from '../components/Counter.tsx'
+import Counter from '../components/Counter/Counter.tsx'
+import Page from '../builtin-components/Page/Page'
 ---
 
 <Layout title="FWT">
-  <main class="page">
+  <Page alignment="column">
     <Link to="https://git.patalcala.com/patalcala9/fwt">
       <Image src="fwt.png" size={250} />
     </Link>
 
     <h1>Fast WebApp Template</h1>
-    <Counter client:load/>
-    <Button label="Next Page" to="/next" />
-  </main>
+    <Counter client:load />
+    <Button edges="rounded" label="Show Built-in Components" to="/next" />
+  </Page>
 
   <style lang="sass">
-    .page
-      display: flex
-      flex-direction: column
-      flex-wrap: wrap
-      justify-content: center
-      align-items: center
-      align-content: center
-      margin: 2rem
-      height: 90vh
+    h1
+      color: #3377AC
   </style>
 </Layout>
diff --git a/src/pages/next.astro b/src/pages/next.astro
index 3e5696e..c34b93b 100644
--- a/src/pages/next.astro
+++ b/src/pages/next.astro
@@ -2,17 +2,21 @@
 import Layout from '../layouts/Layout.astro'
 import Button from '../builtin-components/Button/Button.tsx'
 import Image from '../builtin-components/Image/Image'
+import Page from '../builtin-components/Page/Page'
 ---
 
 <Layout title="Home">
-  <main class="page">
-    <h1>Second Page</h1>
-    <Button label="Back to Home" to="/" />
+  <Page alignment='column'>
+    <h1>Built-in Components</h1>
+    <Button edges='rounded' label="Back to Home" to="/" />
 
     <section class="image">
       <Image src="sample.png" alt="Example Image" size={400} />
+      <Image src="sample.png" alt="Example Image" size={400} />
+      <Image src="sample.png" alt="Example Image" size={400} />
+      <Image src="sample.png" alt="Example Image" size={400} />
     </section>
-  </main>
+  </Page>
 </Layout>
 
 <style lang="sass">