Merge pull request #689 from reach2saksham/refactor/pages-headers

refactor: remove headers and add tagline and description with consisent and responsive design across pages

Author: Zahnentferner

src/app/about/page.jsx

@@ -209,13 +209,16 @@ export default function About() {
         <div className="max-w-4xl mx-auto px-4 text-center">
 
           {/* intro text */}
-          <div className="my-8">
+          <div className="mt-20 mb-12">
             <motion.p
-              className="text-base md:text-lg leading-relaxed text-zinc-600 dark:text-zinc-400 font-mono mt-5 mb-10 text-center"
+              className="text-base md:text-lg leading-relaxed text-zinc-600 dark:text-zinc-400 font-mono pt-5 mb-10 text-center"
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               transition={{ duration: 0.8, delay: 0.2 }}
             >
+              <h5 className='font-bold text-3xl md:text-4xl text-zinc-900 dark:text-zinc-100 font-mono leading-tight mb-6 text-center'> 
+                    Get to know our <span className="text-[#00843D] dark:text-yellow-400">Community</span>
+                    </h5>
               <span className="text-[#32a852] font-bold">AOSSIE</span> (Australian Open
               Source Software Innovation and Education) is a not-for-profit
               organization dedicated to project-based innovation-focused and

src/app/projects/page.jsx

@@ -180,6 +180,26 @@ export default function Projects() {
     <>
       <Container className="mt-20 mb-28">
         <Container.Inner>
+           {/* intro text */}
+          <div className="mt-20 mb-12">
+            <motion.div
+              className="pt-5 mb-10 text-center"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.8, delay: 0.2 }}
+            >
+              <h5 className="font-bold text-3xl md:text-4xl text-zinc-900 dark:text-zinc-100 font-mono leading-tight mb-6 text-center">
+                Projects That Create an {' '}
+                <span className="text-[#00843D] dark:text-yellow-400">
+                  Impact
+                </span>
+              </h5>
+              <p className="text-base md:text-lg leading-relaxed text-zinc-600 dark:text-zinc-400 font-mono text-center">
+                Free, open-source, and built by a global community of developers, designers, researchers, and innovators.
+              </p>
+            </motion.div>
+          </div>
+
           <div className="mb-16 grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-3">
             {projects
               .slice()

src/components/apply/ApplyHeader.jsx

@@ -26,12 +26,12 @@ export function ApplyHeader({ children }) {
                   initial={{ opacity: 0, x: -50 }}
                   animate={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8 }}
-                  className="mt-5 mx-4 md:mx-16 text-center md:text-left"
+                  className="mt-5 mb-12 mx-4 md:mx-16 text-center flex flex-col items-center justify-center"
                 >
-                    <h5 className='font-bold text-3xl md:text-4xl text-zinc-900 dark:text-zinc-100 font-mono leading-tight mb-6'> 
+                    <h5 className='font-bold text-3xl md:text-4xl text-zinc-900 dark:text-zinc-100 font-mono leading-tight mb-6 text-center'> 
                     Your Journey to <span className="text-[#00843D] dark:text-yellow-400">Open Source</span>
                     </h5>
-                    <p className='text-zinc-600 dark:text-zinc-400 text-lg font-mono leading-8 max-w-4xl'>
+                    <p className='text-zinc-600 dark:text-zinc-400 text-lg font-mono leading-8 max-w-4xl text-center'>
                     Our application timeline is your step-by-step guide to becoming a part of our open-source community and contributing to projects that are shaping the future of technology. From submitting your proposal to final evaluations, we&apos;ll walk you through the process every step of the way. Don&apos;t miss this opportunity to be a part of something great and apply now!
                     </p>
                 </motion.div>

src/components/ideas/IdeasHeader.jsx

@@ -11,24 +11,11 @@ export function IdeasHeader({ validIdeasData, currentYear = 2025, children }) {
               initial={{ opacity: 0, scale: 0.9 }}
               animate={{ opacity: 1, scale: 1 }}
               transition={{ duration: 0.8 }}
-              className="ideas-text flex items-center justify-center mb-8 relative"
+              className="ideas-text flex items-center justify-center pt-5 relative"
             >
-              <div
-                className="hidden md:block w-[75px] h-[75px] m-2 bg-cover bg-center dark:bg-[url('/logo.png')] bg-[url('/logo.png')] absolute left-10"
-                alt="GSOC Logo"
-              ></div>
-
-
-              <h1 className="font-mono text-6xl font-extrabold tracking-tighter text-[#32a852] dark:text-yellow-400 sm:text-5xl md:text-5xl lg:text-6xl text-center">
-                IDEAS
-              </h1>
-
-              <div
-                className="hidden md:block w-[75px] h-[75px] m-2 bg-cover bg-center absolute right-10"
-                style={{ backgroundImage: "url('/logo.png')" }}
-                aria-label="Logo"
-              ></div>
-
+                <h5 className='font-bold text-3xl md:text-4xl text-zinc-900 dark:text-zinc-100 font-mono leading-tight mb-6 text-center'> 
+                  <span className="text-[#00843D] dark:text-yellow-400">Think.</span> Build. Ship.
+                </h5>
             </motion.div>
             <motion.p 
               initial={{ opacity: 0, y: 20 }}