docs: re-order elements on homepage to prioritize text content

Author: backlineint

www/pages/index.tsx

@@ -34,8 +34,7 @@ export default function IndexPage({ features }: IndexPageProps) {
 
   return (
     <Layout title={site.name} description={site.description}>
-      TODO - Re-order elements on home page TODO - A Last docs wide search for
-      TODO - check for broken links
+      TODO - A Last docs wide search for TODO - check for broken links
       <section className="relative px-6 pt-12 pb-8 md:py-12 md:pb-8">
         <div className="container max-w-4xl mx-auto text-center">
           <Link
@@ -46,12 +45,12 @@ export default function IndexPage({ features }: IndexPageProps) {
             <span>Next.js 14, Drupal 11 and App Router Support</span>
           </Link>
           <h1 className="text-4xl font-black tracking-tight text-center md:text-6xl lg:tracking-tighter lg:text-8xl">
-            The future of Drupal is headless
+            Next.js for Drupal
           </h1>
-          <p className="mx-auto mt-4 text-lg text-center text-gray-700 leading-1 md:px-20 lg:leading-normal lg:text-2xl">
+          {/* <p className="mx-auto mt-4 text-lg text-center text-gray-700 leading-1 md:px-20 lg:leading-normal lg:text-2xl">
             Next.js for Drupal has everything you need to build a
             next-generation front-end for your Drupal site.
-          </p>
+          </p> */}
           <div className="flex flex-col items-center justify-center py-4 sm:flex-row md:py-8 lg:py-10">
             <Link
               href="/learn/quick-start"
@@ -70,19 +69,9 @@ export default function IndexPage({ features }: IndexPageProps) {
               See a demo
             </Link>
           </div>
-          <div className="overflow-hidden border-2 border-black rounded-md shadow-2xl aspect-w-16 aspect-h-9">
-            <iframe
-              src="https://www.youtube-nocookie.com/embed/dn2PSAcG71Y?controls=0"
-              title="YouTube video player"
-              frameBorder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              allowFullScreen
-              className="w-full"
-            />
-          </div>
         </div>
       </section>
-      <section className="px-6 py-6 md:py-12 lg:py-20">
+      <section className="px-6">
         <div className="container max-w-5xl mx-auto">
           <h2 className="text-3xl font-black tracking-tight text-center md:text-5xl lg:tracking-tighter lg:text-6xl">
             Everything you expect from Drupal.
@@ -196,6 +185,27 @@ export default function IndexPage({ features }: IndexPageProps) {
           />
         </div>
       </section>
+      <section id="video">
+        <div className="container max-w-4xl mx-auto text-center">
+          <h2 className="text-3xl font-black tracking-tight text-center md:text-5xl lg:tracking-tighter lg:text-6xl">
+            The future of Drupal is headless
+          </h2>
+          <p className="mx-auto mt-4 text-lg text-center text-gray-700 leading-1 md:px-16 lg:leading-normal lg:text-2xl">
+            Next.js for Drupal has everything you need to build a
+            next-generation front-end for your Drupal site.
+          </p>
+          <div className="overflow-hidden border-2 border-black rounded-md shadow-2xl aspect-w-16 aspect-h-9 my-6 lg:my-10">
+            <iframe
+              src="https://www.youtube-nocookie.com/embed/dn2PSAcG71Y?controls=0"
+              title="YouTube video player"
+              frameBorder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+              className="w-full"
+            />
+          </div>
+        </div>
+      </section>
     </Layout>
   )
 }