feat: Implement Responsive Blog Hero Section with Newsletter Modal

Author: Marvelousmicheal

app/(landing)/blog/page.tsx

@@ -3,6 +3,7 @@ import { Metadata } from 'next';
 import { generatePageMetadata } from '@/lib/metadata';
 import BlogGrid from '@/components/landing-page/blog/BlogGrid';
 import { getAllBlogPosts } from '@/lib/data/blog';
+import BlogHero from '@/components/landing-page/blog/BlogHero';
 
 export const metadata: Metadata = generatePageMetadata('blog');
 
@@ -11,6 +12,7 @@ const BlogPage = async () => {
 
   return (
     <div className='min-h-screen bg-[#030303]'>
+      <BlogHero />
       <BlogGrid posts={posts} showLoadMore={true} />
     </div>
   );

components/landing-page/blog/BlogHero.tsx

@@ -0,0 +1,36 @@
+function BlogHero() {
+  return (
+    <section className='relative mx-auto flex min-h-[500px] max-w-6xl flex-col justify-center gap-6 overflow-hidden px-5 pb-[50px] md:gap-[52px] md:px-0'>
+      <main className='flex flex-col items-start justify-between gap-6 md:flex-row md:items-end md:gap-0'>
+        <h1 className='text-[32px] font-normal text-white md:text-5xl'>
+          <span className='mb-1 bg-gradient-to-r from-[#3AE6B2] to-[#A7F95080] bg-clip-text text-transparent'>
+            Insights That Matter
+          </span>
+          <br />
+          Stories From Boundless
+        </h1>
+
+        <main className='w-full md:w-[429px]'>
+          <p className='text-base font-normal text-white'>
+            {' '}
+            News, updates, and thought pieces crafted to keep you ahead in the
+            Boundless ecosystem.
+          </p>
+        </main>
+      </main>
+      <main className='bg-primary flex flex-col items-center justify-between rounded-[10px] py-2.5 pr-2.5 pl-6 md:w-[570px] md:flex-row'>
+        <p className='text-background text-base font-medium'>
+          Never miss important updates
+        </p>
+        <button
+          type='button'
+          className='bg-background rounded-[10px] px-6 py-2 text-base font-medium text-white transition hover:opacity-90'
+        >
+          Subscribe to Our Newsletter
+        </button>
+      </main>
+    </section>
+  );
+}
+
+export default BlogHero;

components/profile/ProfileOverview.tsx

@@ -39,7 +39,7 @@ export default function ProfileOverview({ username }: ProfileOverviewProps) {
   ];
 
   return (
-    <article className='flex w-[500px] flex-col gap-11 text-white'>
+    <article className='flex w-full flex-col gap-11 text-white md:w-[500px]'>
       <ProfileHeader profile={mockProfile} />
       <UserStats stats={mockStats} />
       <OrganizationsList organizations={mockOrganizations} />