diff --git a/src/app/(frontend)/layout.tsx b/src/app/(frontend)/layout.tsx
index dd966af..a784041 100644
--- a/src/app/(frontend)/layout.tsx
+++ b/src/app/(frontend)/layout.tsx
@@ -15,7 +15,7 @@ export default async function RootLayout(props: { children: React.ReactNode }) {
- {children}
+ {children}
diff --git a/src/app/(frontend)/page.tsx b/src/app/(frontend)/page.tsx
index 0881e4c..d3c11c3 100644
--- a/src/app/(frontend)/page.tsx
+++ b/src/app/(frontend)/page.tsx
@@ -1,5 +1,6 @@
import React from 'react'
import './styles.css'
+import BlogsBlock from '../components/BlogsBlock'
import Grid from './components/Grid'
import AnnualReports from './components/AnnualReports'
@@ -15,32 +16,36 @@ export default function HomePage() {
Heading
Muted Text
-
-
- Auckland Youth Orchestra is the premier regional youth orchestra in New Zealand. Founded
- in 1948, and originally named the Auckland Junior Symphony Orchestra (or AJSO), it was
- the first youth orchestra established in the Southern Hemisphere. It is designed to
- bridge the gap between school orchestras and adult professional groups.
-
-
+
+
+ Auckland Youth Orchestra is the premier regional youth orchestra in New Zealand.
+ Founded in 1948, and originally named the Auckland Junior Symphony Orchestra (or
+ AJSO), it was the first youth orchestra established in the Southern Hemisphere. It is
+ designed to bridge the gap between school orchestras and adult professional groups.
+
+
-
-
- This is standard body text. The Final of the 2025 AYO Soloist Competition was held on
- Sunday, 19 October 2025. It was an exciting event with the wonderful talent of AYO’s
- players being showcased once more.
-
-
+
+
+ This is standard body text. The Final of the 2025 AYO Soloist Competition was held on
+ Sunday, 19 October 2025. It was an exciting event with the wonderful talent of AYO’s
+ players being showcased once more.
+
+
-
-
AYO Soloist Competition
-
- {' '}
- This is the line spacing for card components. Apply by 15th of August, 11:59pm
- NZST.{' '}
-
+
+
AYO Soloist Competition
+
+ {' '}
+ This is the line spacing for card components. Apply by 15th of August, 11:59pm
+ NZST.{' '}
+
+
+
+
+
)
}
diff --git a/src/app/components/BlogsBlock.tsx b/src/app/components/BlogsBlock.tsx
new file mode 100644
index 0000000..82b9cd6
--- /dev/null
+++ b/src/app/components/BlogsBlock.tsx
@@ -0,0 +1,94 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+
+import BlogsCard from './BlogsCard'
+import BlogsFilter from './BlogsFilter'
+import BlogsPagination from './BlogsPagination'
+
+export default function BlogsBlock() {
+ // Dummy data for now, to be replaced with real data from backend
+ const DummyBlogs = [
+ {
+ id: 1,
+ title: '2025 Soloist Competition',
+ date: 'November 1st, 2025',
+ excerpt:
+ 'The Final of the 2025 AYO Soloist Competition was held on Sunday, 19 October 2025. It was an exciting event with the wonderful talent of AYO’s players being showcased once more.',
+ },
+ {
+ id: 2,
+ title:
+ 'Hear Tony Yan Tong Chen being interviewed about our June concert series on RNZ Concert',
+ date: 'June 6th, 2025',
+ excerpt:
+ 'AYO’s soloist for the June concert series Tony Yan Tong Chen was interviewed by Bryan Crump on RNZ Concert on 4 June 2025 – hear the interview and some of his recordings here!',
+ },
+ {
+ id: 3,
+ title: 'Update – Howick June Concert CANCELLED',
+ date: 'June 6th, 2025',
+ excerpt:
+ 'With less than two weeks to go until the first concert of this series we regret inform you that our popular Howick venue, the All Saints Church, has suffered significant flooding and is...',
+ },
+ {
+ id: 4,
+ title: 'test blog post 4',
+ date: 'happy new year',
+ excerpt: 'A fake blog post.',
+ },
+ {
+ id: 5,
+ title: 'test blog post 5',
+ date: 'happy new year',
+ excerpt: 'A fake blog post.',
+ },
+ {
+ id: 6,
+ title: 'test blog post 6',
+ date: 'happy new year',
+ excerpt: 'A fake blog post.',
+ },
+ {
+ id: 7,
+ title: 'test blog post 7',
+ date: 'happy new year',
+ excerpt: 'A fake blog post.',
+ },
+ ]
+
+ //blogs pagination
+ const [currentPage, setCurrentPage] = useState(1)
+
+ const totalCards = Math.ceil(DummyBlogs.length / 3) // calculate total num of cards for pagination total eg. 1 of {total}
+
+ //slicing
+ const currentBlogs = DummyBlogs.slice((currentPage - 1) * 3, (currentPage - 1) * 3 + 3) // 1-3, 4-6, 7
+
+ return (
+
+
+ {/* TO: Resources page // all News */}
+
+ News
+
+
+ {/* What's New? // Latest Stories*/}
+
+
+
+
+ {currentBlogs.map((blog) => (
+
+ ))}
+
+
+
+
+ )
+}
diff --git a/src/app/components/BlogsCard.tsx b/src/app/components/BlogsCard.tsx
new file mode 100644
index 0000000..13f67bc
--- /dev/null
+++ b/src/app/components/BlogsCard.tsx
@@ -0,0 +1,33 @@
+import Link from 'next/link'
+
+type Blog = {
+ id: number
+ title: string
+ date: string
+ excerpt: string
+ //image: string
+ //category: string (disabled for now)
+}
+
+export default function BlogsCard(Blog: Blog) {
+ return (
+
+
+
+ {/*xl:pr-80 lg:pr-8 md:pr-6 sm:pr-4 */}
+ {/* left column */}
+
+ {/*TO: individual blog post page*/}
+
+