From 74118d2359cb2d0a8c29d8e23efaa433af1838ab Mon Sep 17 00:00:00 2001
From: Darginec05 <devopsbanda@gmail.com>
Date: Thu, 4 Jul 2024 16:01:56 +0200
Subject: [PATCH] update landing

---
 web/next-example/src/pages/index.tsx | 111 ++++++++++++++-------------
 1 file changed, 56 insertions(+), 55 deletions(-)

diff --git a/web/next-example/src/pages/index.tsx b/web/next-example/src/pages/index.tsx
index 12cf5a1e7..9d502060c 100644
--- a/web/next-example/src/pages/index.tsx
+++ b/web/next-example/src/pages/index.tsx
@@ -110,7 +110,7 @@ export default function Home() {
           >
             Play with live demo 👇
           </button>
-          <div className="relative min-h-[40vh] max-h-[80vh] overflow-y-auto my-4 mx-auto border md:w-[870px] pb-4 pt-2 rounded-sm flex justify-center bg-[#fafafa] text-black">
+          <div className="relative min-h-[40vh] max-h-[80vh] overflow-y-auto my-4 mx-auto border md:w-[80vw] pb-4 pt-6 rounded-sm flex justify-center bg-[#fafafa] text-black">
             <div
               className="text-[#4d494d] absolute top-0 left-0 w-full z-10 px-2 bg-[#252b2f]"
               style={{
@@ -140,7 +140,60 @@ export default function Home() {
             <LandingEditor editor={editor} selectionRef={selectionRef} />
           </div>
         </div>
-        <div className="mt-4">
+        <div className="mt-6">
+          <h2 className="text-center font-heading mt-12 scroll-m-20 pb-2 text-2xl font-semibold tracking-tight first:mt-0">
+            Our Plans 👨‍💻
+          </h2>
+          {/* card list */}
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+            <Card
+              title="Continue to improve the project"
+              description="We're committed to enhancing Yoopta Editor by regularly updating it with new features and improvements based on community feedback."
+            />
+            <Card
+              title={
+                <>
+                  Building another{' '}
+                  <a
+                    className="text-[#1f6feb] underline"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href="https://github.com/Darginec05/Yoopta-Editor/discussions/197"
+                  >
+                    powerful plugins
+                  </a>
+                </>
+              }
+              description="Our roadmap includes the development of innovative plugins that will extend the functionality and versatility of the editor, catering to more specialized content creation needs."
+            />
+            <Card
+              title="Integration of AI-Powered Tools"
+              description="We plan to integrate advanced AI tools to provide intelligent editing capabilities, making content creation faster, smarter, and more intuitive."
+            />
+            <Card
+              title="Collabrative editing"
+              description="We aim to incorporate advanced AI features to streamline content creation and editing, making the editor smarter and more intuitive."
+            />
+            <Card
+              title="Customization Enhancements"
+              description="We aim to integrate real-time collaboration features, allowing multiple users to edit documents simultaneously and see each other's changes live, enhancing teamwork and productivity."
+            />
+            <Card
+              title="Plugin Marketplace"
+              description="A one-stop-shop for plugins where developers can share and monetize their own plugins, and users can easily enhance their editor's capabilities."
+            />
+            {/* <Card
+              title="Community Building Initiatives"
+              description="From webinars and workshops to meetups—expanding our community support to foster collaboration and learning among users and developers."
+            /> */}
+            <Card
+              title="Open-Source Email Builder"
+              description="Plans are underway to develop an open-source email builder that will provide developers and designers with the tools to create responsive, professionally designed emails easily, enhancing how email campaigns are built and managed."
+            />
+          </div>
+          {/* card list using grid */}
+        </div>
+        <div className="mt-6">
           <h2 className="text-center font-heading mt-12 scroll-m-20 pb-2 text-2xl font-semibold tracking-tight first:mt-0">
             Sponsorship
           </h2>
@@ -217,59 +270,7 @@ export default function Home() {
             </div>
           </div>
         </div>
-        <div className="mt-6">
-          <h2 className="text-center font-heading mt-12 scroll-m-20 pb-2 text-2xl font-semibold tracking-tight first:mt-0">
-            Our Plans 👨‍💻
-          </h2>
-          {/* card list */}
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-            <Card
-              title="Continue to improve the project"
-              description="We're committed to enhancing Yoopta Editor by regularly updating it with new features and improvements based on community feedback."
-            />
-            <Card
-              title={
-                <>
-                  Building another{' '}
-                  <a
-                    className="text-[#1f6feb] underline"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href="https://github.com/Darginec05/Yoopta-Editor/discussions/197"
-                  >
-                    powerful plugins
-                  </a>
-                </>
-              }
-              description="Our roadmap includes the development of innovative plugins that will extend the functionality and versatility of the editor, catering to more specialized content creation needs."
-            />
-            <Card
-              title="Integration of AI-Powered Tools"
-              description="We plan to integrate advanced AI tools to provide intelligent editing capabilities, making content creation faster, smarter, and more intuitive."
-            />
-            <Card
-              title="Collabrative editing"
-              description="We aim to incorporate advanced AI features to streamline content creation and editing, making the editor smarter and more intuitive."
-            />
-            <Card
-              title="Customization Enhancements"
-              description="We aim to integrate real-time collaboration features, allowing multiple users to edit documents simultaneously and see each other's changes live, enhancing teamwork and productivity."
-            />
-            <Card
-              title="Plugin Marketplace"
-              description="A one-stop-shop for plugins where developers can share and monetize their own plugins, and users can easily enhance their editor's capabilities."
-            />
-            {/* <Card
-              title="Community Building Initiatives"
-              description="From webinars and workshops to meetups—expanding our community support to foster collaboration and learning among users and developers."
-            /> */}
-            <Card
-              title="Open-Source Email Builder"
-              description="Plans are underway to develop an open-source email builder that will provide developers and designers with the tools to create responsive, professionally designed emails easily, enhancing how email campaigns are built and managed."
-            />
-          </div>
-          {/* card list using grid */}
-        </div>
+
         {/* <div className="mt-4">
           <h2 className="font-heading mt-12 scroll-m-20 pb-2 text-2xl font-semibold tracking-tight first:mt-0">
             Used by