From 90f778fda4c4acae8f751269861b81502728bbb9 Mon Sep 17 00:00:00 2001
From: "Kent Joseph T. Palima" <admin@upiecep.org>
Date: Wed, 29 Apr 2026 23:16:03 +0800
Subject: [PATCH] Added Shop page

---
 src/components/Shop/shop.scss | 34 ++++++++++++++++++++++++++++++++++
 src/pages/shop.astro          | 17 +++++++++++++++--
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/components/Shop/shop.scss b/src/components/Shop/shop.scss
index 1437582..a61fd59 100644
--- a/src/components/Shop/shop.scss
+++ b/src/components/Shop/shop.scss
@@ -3,11 +3,45 @@
   grid-template-columns: repeat(1, 1fr);
   place-items: center;
   align-content: center;
+  padding-block: 6rem; /* Added padding so it doesn't hug the top navigation */
+  gap: 2rem; /* Adds space between the title, paragraph, and embed */
 
   h1 {
     font-size: 6rem;
+    text-align: center;
   }
+
+  p {
+    font-size: 1.5rem;
+    text-align: center;
+    margin-bottom: 1rem;
+  }
+
   strong {
     font-size: 3rem;
   }
+
+  /* Styling for the new Facebook Embed */
+  .fb-embed-container {
+    display: flex;
+    justify-content: center;
+    width: fit-content;
+    background-color: white; /* Ensures the widget has a clean background */
+    border-radius: 8px; /* Softens the corners */
+    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15); /* Adds a nice depth effect */
+    overflow: hidden;
+  }
 }
+
+/* Make sure it scales down nicely on mobile */
+@media screen and (max-width: 768px) {
+  .shop-section {
+    h1 {
+      font-size: 4rem;
+    }
+    p {
+      font-size: 1.25rem;
+      padding-inline: 2rem;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/pages/shop.astro b/src/pages/shop.astro
index 0c2803f..3ad7e11 100644
--- a/src/pages/shop.astro
+++ b/src/pages/shop.astro
@@ -5,6 +5,19 @@ import Layout from '../layouts/Layout.astro';
 <Layout title="Shop | UP IECEP">
   <section class="shop-section">
     <h1>Shop</h1>
-    <strong>Coming soon</strong>
+    <p>Check out our latest merchandise and updates directly from our page!</p>
+    
+    <div class="fb-embed-container">
+      <iframe 
+        src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D61579906016704&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" 
+        width="340" 
+        height="500" 
+        style="border:none;overflow:hidden" 
+        scrolling="no" 
+        frameborder="0" 
+        allowfullscreen="true" 
+        allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
+      </iframe>
+    </div>
   </section>
-</Layout>
+</Layout>
\ No newline at end of file