added districts and improved layout

20 files changed, 163 insertions, 26 deletions

diff --git a/public/images/districts/internal/arcadia.png b/public/images/districts/internal/arcadia.png
new file mode 100644
index 0000000..5eddacc
--- /dev/null
+++ b/public/images/districts/internal/arcadia.png
diff --git a/public/images/districts/internal/arles.png b/public/images/districts/internal/arles.png
new file mode 100644
index 0000000..2895a5e
--- /dev/null
+++ b/public/images/districts/internal/arles.png
diff --git a/public/images/districts/internal/hollywood.png b/public/images/districts/internal/hollywood.png
new file mode 100644
index 0000000..b305095
--- /dev/null
+++ b/public/images/districts/internal/hollywood.png
diff --git a/public/images/districts/internal/oxford.png b/public/images/districts/internal/oxford.png
new file mode 100644
index 0000000..a69b566
--- /dev/null
+++ b/public/images/districts/internal/oxford.png
diff --git a/public/images/districts/internal/petsburg.png b/public/images/districts/internal/petsburg.png
new file mode 100644
index 0000000..2c8ba4f
--- /dev/null
+++ b/public/images/districts/internal/petsburg.png
diff --git a/public/images/districts/internal/purgatory.png b/public/images/districts/internal/purgatory.png
new file mode 100644
index 0000000..9e6b8d9
--- /dev/null
+++ b/public/images/districts/internal/purgatory.png
diff --git a/public/images/districts/internal/silicon.png b/public/images/districts/internal/silicon.png
new file mode 100644
index 0000000..de0097c
--- /dev/null
+++ b/public/images/districts/internal/silicon.png
diff --git a/public/images/districts/internal/silver.png b/public/images/districts/internal/silver.png
new file mode 100644
index 0000000..9ee177f
--- /dev/null
+++ b/public/images/districts/internal/silver.png
diff --git a/public/images/districts/internal/stratford.png b/public/images/districts/internal/stratford.png
new file mode 100644
index 0000000..48dbac0
--- /dev/null
+++ b/public/images/districts/internal/stratford.png
diff --git a/public/images/districts/internal/tokyo.png b/public/images/districts/internal/tokyo.png
new file mode 100644
index 0000000..1182779
--- /dev/null
+++ b/public/images/districts/internal/tokyo.png
diff --git a/src/components/AnnouncementsMarqueeComponent.astro b/src/components/AnnouncementsMarqueeComponent.astro
index df9e30d..ea5ca39 100644
--- a/src/components/AnnouncementsMarqueeComponent.astro
+++ b/src/components/AnnouncementsMarqueeComponent.astro
@@ -1,15 +1,11 @@
 ---
-import type { Announcement } from '../types/Announcement';
-import announcementsData from '../data/announcements.json';
+import { getAnnouncements, Announcement } from '../data/announcements';
 import SingleAnnouncementComponent from './SingleAnnouncementComponent.astro';
 
-const announcements: Announcement[] = announcementsData;
-const sortedAnnouncements = announcements.sort((a, b) => {
-    return new Date(b.date).getTime() - new Date(a.date).getTime();
-});
+const announcements: Announcement[] = getAnnouncements();
 ---
 <marquee behavior="scroll" direction="up" scrollamount="1" scrolldelay="30" onmouseover="this.stop()" onmouseout="this.start()" class="h-[180px] w-[672px] border-b-2 border-white/75 relative left-2">
-    {sortedAnnouncements.map((announcement) => (
+    {announcements.map((announcement) => (
         <SingleAnnouncementComponent isNew={announcement.isNew} date={announcement.date}>
             {announcement.text}
         </SingleAnnouncementComponent>
diff --git a/src/components/DistrictCardComponent.astro b/src/components/DistrictCardComponent.astro
new file mode 100644
index 0000000..6da9aa2
--- /dev/null
+++ b/src/components/DistrictCardComponent.astro
@@ -0,0 +1,12 @@
+---
+const { district } = Astro.props;
+---
+<a class={`flex flex-row bg-${district.id} rounded items-center px-4 py-2`} href={`/districts/${district.id}`}>
+    <div class="w-2/3">
+        <h2 class="text-lg saira">{district.name}</h2>
+        <p class="text-xs">{district.description}</p>
+    </div>
+    <div class="w-1/3 flex justify-end">
+        <img src={district.image} alt={district.name} class="max-h-[70px]" />
+    </div>
+</a>
\ No newline at end of file
diff --git a/src/data/announcements.json b/src/data/announcements.json
deleted file mode 100644
index 47b43ee..0000000
--- a/src/data/announcements.json
+++ /dev/null
@@ -1,12 +0,0 @@
-[
-    {
-        "text": "Welcome to Pagoda on Neocities. The site is currently under construction and as we progress and add more features and content, this announcement section will get updated alongside it. Stay tuned for more updates!",
-        "date": "2025-05-13 02:00",
-        "isNew": false
-    },
-    {
-        "text": "Announcement section and Districts are now added!",
-        "date": "2025-05-13 02:15",
-        "isNew": true
-    }
-]
\ No newline at end of file
diff --git a/src/data/announcements.ts b/src/data/announcements.ts
new file mode 100644
index 0000000..33a7fb0
--- /dev/null
+++ b/src/data/announcements.ts
@@ -0,0 +1,24 @@
+export interface Announcement {
+  text: string;
+  date: string;
+  isNew: boolean;
+}
+
+const announcements: Announcement[] = [
+  {
+    text: "Welcome to Pagoda on Neocities. The site is currently under construction and as we progress and add more features and content, this announcement section will get updated alongside it. Stay tuned for more updates!",
+    date: "2025-05-13 02:00",
+    isNew: false,
+  },
+  {
+    text: "Announcement section and Districts are now added!",
+    date: "2025-05-13 02:15",
+    isNew: true,
+  },
+];
+
+export const getAnnouncements = (): Announcement[] => {
+  return announcements.sort((a, b) => {
+    return new Date(b.date).getTime() - new Date(a.date).getTime();
+  });
+};
diff --git a/src/data/districts.ts b/src/data/districts.ts
new file mode 100644
index 0000000..0428b59
--- /dev/null
+++ b/src/data/districts.ts
@@ -0,0 +1,73 @@
+export interface District {
+  id: string;
+  name: string;
+  description: string;
+  image: string;
+}
+
+export const districts: District[] = [
+  {
+    id: "arcadia",
+    name: "Arcadia",
+    description: "Video games, puzzles, toys",
+    image: "/images/districts/internal/arcadia.png",
+  },
+  {
+    id: "arles",
+    name: "Arles",
+    description: "Drawings, photos, visual art",
+    image: "/images/districts/internal/arles.png",
+  },
+  {
+    id: "hollywood",
+    name: "Hollywood",
+    description: "Cartoons, movies, western media",
+    image: "/images/districts/internal/hollywood.png",
+  },
+  {
+    id: "oxford",
+    name: "Oxford",
+    description: "Books, literature, poetry",
+    image: "/images/districts/internal/oxford.png",
+  },
+  {
+    id: "petsburg",
+    name: "Petsburg",
+    description: "Animals and people who love them",
+    image: "/images/districts/internal/petsburg.png",
+  },
+  {
+    id: "purgatory",
+    name: "Purgatory",
+    description: "Horror, dark, gothic",
+    image: "/images/districts/internal/purgatory.png",
+  },
+  {
+    id: "silicon-valley",
+    name: "Silicon Valley",
+    description: "Tech, programming, computers",
+    image: "/images/districts/internal/silicon.png",
+  },
+  {
+    id: "silver-lake",
+    name: "Silver Lake",
+    description: "Music, bands, concerts",
+    image: "/images/districts/internal/silver.png",
+  },
+  {
+    id: "stratford-upon-avon",
+    name: "Stratford-upon-Avon",
+    description: "Writers and their writing",
+    image: "/images/districts/internal/stratford.png",
+  },
+  {
+    id: "tokyo",
+    name: "Tokyo",
+    description: "Anime, manga, and the far east",
+    image: "/images/districts/internal/tokyo.png",
+  },
+];
+
+export const getDistrictById = (id: string): District | undefined => {
+  return districts.find((district) => district.id === id);
+};
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 7d73fc0..c191e4d 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -24,10 +24,16 @@ const { title } = Astro.props;
     </nav>
     <main class="w-[1080px] m-auto flex flex-row gap-4">
       <LeftSidebar />
-      <div class="w-2/3 text-sm py-4 bg-black/50">
+      <div class="w-2/3 py-4 bg-black/50">
         <slot />
       </div>
       <RightSidebar />
     </main>
+    <footer class="w-[1080px] m-auto text-center mt-8">
+      <hr> 
+      <p class="text-xs py-4">
+        &copy; {new Date().getFullYear()} Pagoda on Neocities. All rights reserved. Brought to you by <a href="https://shi.foo" target="_blank" rel="noopener noreferrer" class="text-pagodapurple-shine hover:text-pagodapink-shine hover:decoration-dotted hover:underline">shi.foo</a>.
+      </p>
+    </footer>
   </body>
 </html>
diff --git a/src/pages/districts/[district].astro b/src/pages/districts/[district].astro
new file mode 100644
index 0000000..c576fe1
--- /dev/null
+++ b/src/pages/districts/[district].astro
@@ -0,0 +1,18 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import DistrictCardComponent from "../../components/DistrictCardComponent.astro";
+import { districts, getDistrictById, District } from "../../data/districts";
+
+export function getStaticPaths() {
+  return districts.map(district => ({
+    params: { district: district.id }
+  }));
+}
+
+const { district } = Astro.params;
+const districtData = getDistrictById(district);
+---
+
+<Layout title={`${districtData.name || district} District`}>
+    <DistrictCardComponent district={districtData} />
+</Layout>
\ No newline at end of file
diff --git a/src/pages/districts/index.astro b/src/pages/districts/index.astro
new file mode 100644
index 0000000..94161b4
--- /dev/null
+++ b/src/pages/districts/index.astro
@@ -0,0 +1,20 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import DistrictCardComponent from "../../components/DistrictCardComponent.astro";
+import { districts, Districts } from "../../data/districts";
+---
+<Layout title="Districts">
+    <h1 class="text-2xl saira">Districts on Pagoda</h1>
+    <div class="text-justify mb-8 text-sm">
+        <p>Districts are collections of Neocities sites that share a common theme or interest. Each district has its own unique style and personality, and you can find a variety of sites to explore within each one. You can also find districts that are dedicated to specific topics, such as art, music, or gaming.</p>
+        <p>Each district contains a curated list of sites that are related to the district's theme. You can explore these sites and discover new content that you may not have found otherwise. Districts are a great way to connect with other Neocities users who share your interests, and to find new sites to explore.</p>
+        <p>Districts are constantly evolving, and new districts are being added all the time. If you have a site that you think would be a good fit for a district, check out the <a class="link" href="/faq">FAQ</a> for more information on how to get your site added to a district.</p>
+    </div>
+    <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 mt-4">
+        {districts.map((district) => (
+            <DistrictCardComponent district={district} />
+        ))}
+    </section>
+
+
+</Layout>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d98d71c..e84a590 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,7 +4,12 @@ import AnnouncementsMarqueeComponent from "../components/AnnouncementsMarqueeCom
 ---
 
 <Layout title="Home">
-  <section class="text-justify mb-8">
+  <section class="mb-4 bg-yellow-500/20 px-2 pt-1 rounded text-xs">
+    <marquee behavior="scroll" direction="left" scrollamount="5" scrolldelay="30" onmouseout="this.start()" onmouseover="this.stop()">
+      <p class="text-pagodagreen-shine">Pagoda is currently under construction and breaking changes may occur. You are welcome to browse around, but please be aware that the site is not yet complete. Potential breaking changes include, but are not limited to: Design, UI, and UX changes, changes to the Page Layouts and Components, as well as the addition of new features and tools that may not be fully functional yet. We are working hard to get everything up and running as soon as possible, so please bear with us! Thank you for your understanding and support!</p>
+    </marquee>
+  </section>
+  <section class="text-justify mb-8 text-sm">
     <p>Welcome to <em>Pagoda</em> on <a class="link" href="https://neocities.org" target="_blank" rel="noopener noreferrer">Neocities</a>! This is a project dedicated to provide a collection of resources and tools for the Neocities community. Pagoda is a hub for all things Neocities, where you can find avatars, backgrounds, blinkies, flags, stamps, and more. Pagoda also offers a variety of services to enhance your own Neocities site, like guestbooks, comments, and webrings. Whether you're a new user or a seasoned veteran, Pagoda has something for everyone.</p>
     <p>Additionally, you can also find <a class="link" href="/guides">guides</a> to help you with efficiently running and maintaining your Neocities site. These guides cover a wide range of topics, from basic HTML and CSS to more advanced techniques. We also have <a class="link" href="/districts">Districts</a> that you can explore, which are collections of Neocities sites that share a common theme or interest. Each district has its own unique style and personality, and you can find a variety of sites to explore within each one.</p>
     <p>Pagoda is constantly evolving, and always looking for new ways to improve and expand the project and its offerings. Any feedback or suggestions are always welcome! If you would like to contribute to Pagoda, or want to get your own site added or a district, or if you have any questions or concerns, please check out the <a class="link" href="/faq">FAQ</a> for more information.
diff --git a/src/types/Announcement.ts b/src/types/Announcement.ts
deleted file mode 100644
index 8044471..0000000
--- a/src/types/Announcement.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-type Announcement = {
-  text: string;
-  date: string;
-  isNew: boolean;
-};