From 365f237b8d42ddffc2de86d9332f1977a3a265e2 Mon Sep 17 00:00:00 2001
From: Pawel <webloopbox@gmail.com>
Date: Fri, 25 Oct 2024 15:00:26 +0200
Subject: [PATCH] website changes

---
 website/app/demo/page.tsx               |   6 +-
 website/app/support/page.tsx            |   6 +-
 website/components/footer.tsx           | 161 +++++-----
 website/components/header-link.tsx      |   2 +-
 website/components/header.tsx           |  94 +++---
 website/components/hero-section.tsx     | 406 ++++++++++++------------
 website/components/reactgrid-sample.tsx |  54 ++--
 website/components/why-us-section.tsx   |   6 +-
 website/pages/_meta.json                |   2 +-
 website/tailwind.config.ts              |   1 +
 10 files changed, 378 insertions(+), 360 deletions(-)

diff --git a/website/app/demo/page.tsx b/website/app/demo/page.tsx
index faf8ab4c..3ba70adf 100644
--- a/website/app/demo/page.tsx
+++ b/website/app/demo/page.tsx
@@ -70,12 +70,12 @@ const coreFeatures = [
 
 export default function ExamplesPage() {
   return (
-    <section>
+    <section className="flex-1">
       <div className="grid grid-cols-main pt-12 md:pt-32 pb-[40px]">
         <h1 className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-xl md:text-2xl font-bold text-center p-4 bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent">
           ReactGrid Demo
         </h1>
-        <p className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary text-center text-xs md:text-sm px-4">
+        <p className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary text-center text-xs md:text-sm px-4 max-w-screen-2xl mx-auto">
           ReactGrid enables you to create custom layouts with flexible cell
           ordering. Unlike many React components and tools that require
           consistent data structures across all rows, our component offers
@@ -100,7 +100,7 @@ export default function ExamplesPage() {
         </div>
       </div>
       <div className="grid grid-cols-main pt-[80px] texture-bg-2">
-        <div className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary flex gap-x-16 mb-[128px] flex-col md:flex-row px-4">
+        <div className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary flex gap-x-16 mb-[128px] flex-col md:flex-row px-4 max-w-screen-2xl mx-auto">
           <div className="flex-1">
             <h2 className="text-green-primary font-bold text-sm">
               What does the above example illustrate?
diff --git a/website/app/support/page.tsx b/website/app/support/page.tsx
index 77e38aac..923e4114 100644
--- a/website/app/support/page.tsx
+++ b/website/app/support/page.tsx
@@ -6,7 +6,7 @@ import { Shape1, Shape2 } from "@/components/bg-shapes";
 
 export default function FeaturesPage() {
   return (
-    <div className="z-1">
+    <div className="z-1 flex-1">
       <>
         <div
           className={`absolute z-0 w-[100%] top-[-10%] left-[-50%] hidden lg:block`}
@@ -20,7 +20,7 @@ export default function FeaturesPage() {
         </div>
       </>
 
-      <section className="relative texture-bg-2 z-2">
+      <section className="relative h-full texture-bg-2 z-2">
         <div className="grid grid-cols-main grid-rows-2 pt-12 md:pt-32 md:pb-12">
           <h1 className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-xl md:text-2xl font-bold text-center bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent px-4">
             Need support?
@@ -30,7 +30,7 @@ export default function FeaturesPage() {
             help.
           </p>
         </div>
-        <div className="grid grid-cols-main md:pb-[250px] pt-8 md:pt-0">
+        <div className="grid grid-cols-main md:pb-[250px] pt-8 md:pt-0 max-w-screen-3xl mx-auto">
           <div className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary flex gap-x-4 2xl:gap-x-16 mb-[128px] justify-center flex-col md:flex-row px-4">
             <div className="flex-1 flex flex-col items-center justify-start bg-[#ffffff3d] border p-4">
               <MdQuestionMark size={120} color="#107c41" />
diff --git a/website/components/footer.tsx b/website/components/footer.tsx
index 8e7ea922..9b6f6a7c 100644
--- a/website/components/footer.tsx
+++ b/website/components/footer.tsx
@@ -5,91 +5,96 @@ import Link from "next/link";
 
 export const Footer = () => {
   return (
-    <footer className="relative z-5 texture-bg grid grid-cols-main bg-black-primary py-[40px] gap-y-12 md:gap-y-32">
-      <div className="flex justify-between gap-y-8 md:gap-y-16 col-start-3 col-end-11 flex-wrap lg:flex-nowrap">
-        <div className="w-[100%] sm:w-[50%] lg:w-auto">
-          <h2 className="font-bold bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent text-sm mb-4 md:mb-[32px]">
-            Info
-          </h2>
-          <ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">
-            {/* <Link href="/cookies">Cookies</Link> */}
-            <Link
-              href="/privacy-policy"
-              className="transition-colors duration-100 hover:text-slate-50"
-            >
-              Privacy Policy
-            </Link>
-          </ul>
-        </div>
-        <div className="w-[100%] sm:w-[50%] lg:w-auto">
-          <h2 className="font-bold bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent text-sm mb-4 md:mb-[32px]">
-            Explore
-          </h2>
-          <ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">
-            <li>
-              <Link
-                href="/demo"
-                className="transition-colors duration-100 hover:text-slate-50"
-              >
-                Demo
-              </Link>
-            </li>
-            <li>
+    <footer className="relative z-5 texture-bg bg-black-primary py-[40px]">
+      <div className="grid grid-cols-main gap-y-12 md:gap-y-32 max-w-screen-2xl mx-auto">
+        <div className="flex justify-between gap-y-8 md:gap-y-16 col-start-3 col-end-11 flex-wrap lg:flex-nowrap">
+          <div className="w-[100%] sm:w-[50%] lg:w-auto">
+            <h2 className="font-bold bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent text-sm mb-4 md:mb-[32px]">
+              Info
+            </h2>
+            <ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">
+              {/* <Link href="/cookies">Cookies</Link> */}
               <Link
-                href="/docs/5.0/1-getting-started"
+                href="/privacy-policy"
                 className="transition-colors duration-100 hover:text-slate-50"
               >
-                Documentation
+                Privacy Policy
               </Link>
-            </li>
-            <li>
-              <Link
-                href="/support"
-                className="transition-colors duration-100 hover:text-slate-50"
-              >
-                Support
-              </Link>
-            </li>
-          </ul>
+            </ul>
+          </div>
+          <div className="w-[100%] sm:w-[50%] lg:w-auto">
+            <h2 className="font-bold bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent text-sm mb-4 md:mb-[32px]">
+              Explore
+            </h2>
+            <ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">
+              <li>
+                <Link
+                  href="/demo"
+                  className="transition-colors duration-100 hover:text-slate-50"
+                >
+                  Demo
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/docs/5.0/1-getting-started"
+                  className="transition-colors duration-100 hover:text-slate-50"
+                >
+                  Documentation
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/support"
+                  className="transition-colors duration-100 hover:text-slate-50"
+                >
+                  Development Support
+                </Link>
+              </li>
+            </ul>
+          </div>
+          <div className="w-[100%] sm:w-[50%] lg:w-auto">
+            <h2 className="font-bold bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent text-sm mb-4 md:mb-[32px]">
+              Social
+            </h2>
+            <ul className="text-white-secondary3 flex gap-x-8">
+              <li>
+                <Link
+                  href="https://www.npmjs.com/package/@silevis/reactgrid"
+                  target="_blank"
+                >
+                  <Image src={npmIcon} alt="npm icon" className="md:w-auto" />
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="https://github.com/silevis/reactgrid"
+                  target="_blank"
+                >
+                  <Image
+                    src={githubIcon}
+                    alt="github icon"
+                    className=" md:w-auto"
+                  />
+                </Link>
+              </li>
+            </ul>
+          </div>
+          <div className="w-[100%] sm:w-[50%] lg:w-auto">
+            <h2 className="font-bold bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent text-sm mb-4 md:mb-[32px]">
+              Contact
+            </h2>
+            <ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">
+              <li>Silevis Software Sp. z o.o.</li>
+              <li>Sienkiewicza Street 17/3</li>
+              <li>25-007 Kielce, Poland</li>
+            </ul>
+          </div>
         </div>
-        <div className="w-[100%] sm:w-[50%] lg:w-auto">
-          <h2 className="font-bold bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent text-sm mb-4 md:mb-[32px]">
-            Social
-          </h2>
-          <ul className="text-white-secondary3 flex gap-x-8">
-            <li>
-              <Link
-                href="https://www.npmjs.com/package/@silevis/reactgrid"
-                target="_blank"
-              >
-                <Image src={npmIcon} alt="npm icon" className="md:w-auto" />
-              </Link>
-            </li>
-            <li>
-              <Link href="https://github.com/silevis/reactgrid" target="_blank">
-                <Image
-                  src={githubIcon}
-                  alt="github icon"
-                  className=" md:w-auto"
-                />
-              </Link>
-            </li>
-          </ul>
-        </div>
-        <div className="w-[100%] sm:w-[50%] lg:w-auto">
-          <h2 className="font-bold bg-gradient-to-t from-green-primary to-green-light bg-clip-text text-transparent text-sm mb-4 md:mb-[32px]">
-            Contact
-          </h2>
-          <ul className="text-white-secondary3 flex flex-col gap-y-2 font-bold">
-            <li>Silevis Software Sp. z o.o.</li>
-            <li>Sienkiewicza Street 17/3</li>
-            <li>25-007 Kielce, Poland</li>
-          </ul>
+        <div className="col-start-3 col-end-11 text-center text-zinc-700">
+          © Silevis Software Sp. z o.o. 2019-{new Date().getFullYear()}
         </div>
       </div>
-      <div className="col-start-3 col-end-11 text-center text-zinc-700">
-        © Silevis Software Sp. z o.o. 2019-{new Date().getFullYear()}
-      </div>
     </footer>
   );
 };
diff --git a/website/components/header-link.tsx b/website/components/header-link.tsx
index c0df4603..439e72d0 100644
--- a/website/components/header-link.tsx
+++ b/website/components/header-link.tsx
@@ -21,7 +21,7 @@ export const HeaderLink = ({ href, children }: HeaderLinkProps) => {
       href={href}
       className={`md:border-l-1 border-green-light rounded-none flex ${
         isHomePage ? "md:text-white-primary" : "md:text-black-primary"
-      } text-xs font-bold justify-start md:justify-center items-center ${underlineClass}`}
+      } text-xs font-bold h-full flex items-center justify-center ${underlineClass}`}
     >
       {children}
     </Link>
diff --git a/website/components/header.tsx b/website/components/header.tsx
index f9c1bc25..f3f8cbff 100644
--- a/website/components/header.tsx
+++ b/website/components/header.tsx
@@ -23,52 +23,64 @@ export default function Header({ children }: { children: any }) {
     <>
       <div className="drawer">
         <input id="rg-drawer" type="checkbox" className="drawer-toggle" />
-        <div className="drawer-content flex flex-col">
+        <div className="drawer-content min-h-screen flex flex-col">
           <nav
             className={`relative z-10 w-full ${
               isHomePage ? "bg-green-primary" : "bg-white-primary"
-            }  top-0 border-t-1 border-l-1 border-b-1 border-r-1 font-dm-sans border-green-light grid grid-cols-main h-[86px] text-white-primary`}
+            }  top-0 border-t-1 border-l-1 border-b-1 border-r-1 font-dm-sans border-green-light text-white-primary`}
           >
-            <div className="flex-none lg:hidden flex items-center ps-2">
-              <label
-                htmlFor="rg-drawer"
-                aria-label="open sidebar"
-                className="btn btn-square btn-ghost"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="black"
-                  viewBox="0 0 24 24"
-                  className="inline-block w-6 h-6 stroke-current"
+            <div className="grid grid-cols-main max-w-screen-3xl mx-auto h-[86px]">
+              <div className="flex-none lg:hidden flex items-center ps-2">
+                <label
+                  htmlFor="rg-drawer"
+                  aria-label="open sidebar"
+                  className="btn btn-square btn-ghost"
                 >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    stroke={isHomePage ? "#ffffff" : "#202020"}
-                    d="M4 6h16M4 12h16M4 18h16"
-                  ></path>
-                </svg>
-              </label>
-            </div>
-            <div className="col-start-2 md:col-start-1 2xl:col-start-3 col-end-13 md:col-end-5 2xl:col-end-8 xl:border-l-1 border-green-light flex items-center justify-start ps-0.5 md:ps-4">
-              <Link href="/">
-                <Image
-                  src={isHomePage ? logoIcon : nightLogoIcon}
-                  alt="ReactGrid"
-                  width={180}
-                />
-              </Link>
-            </div>
-            <div
-              className={`grid hidden md:grid text-black-primary md:text-white-primary col-start-5 col-end-13 2xl:col-start-8 2xl:col-end-11 grid-cols-1 md:grid-cols-navLinks justify-items-start md:justify-items-stretch content-start md:content-stretch md:top-auto gap-y-4 md:gap-y-0 menu-horizontal`}
-            >
-              <HeaderLink href="/demo">Demo</HeaderLink>
-              <HeaderLink href="/docs/5.0/1-getting-started">Docs</HeaderLink>
-              <HeaderLink href="/support">Support</HeaderLink>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="black"
+                    viewBox="0 0 24 24"
+                    className="inline-block w-6 h-6 stroke-current"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      stroke={isHomePage ? "#ffffff" : "#202020"}
+                      d="M4 6h16M4 12h16M4 18h16"
+                    ></path>
+                  </svg>
+                </label>
+              </div>
+              <div className="col-start-2 md:col-start-1 2xl:col-start-3 col-end-13 md:col-end-7 xl:border-l-1 border-green-light flex items-center justify-start ps-0.5 md:ps-4">
+                <Link href="/">
+                  <Image
+                    src={isHomePage ? logoIcon : nightLogoIcon}
+                    alt="ReactGrid"
+                    width={180}
+                  />
+                </Link>
+              </div>
+
+              <div className="hidden md:contents md:col-start-7">
+                <div className="col-span-2 2xl:col-span-1">
+                  <HeaderLink href="/demo">Demo</HeaderLink>
+                </div>
+                <div className="col-span-2 2xl:col-span-1">
+                  <HeaderLink href="/docs/5.0/1-getting-started">
+                    Docs
+                  </HeaderLink>
+                </div>
+                <div className="col-span-2">
+                  <HeaderLink href="/support">
+                    <span className="block xl:hidden">Dev support</span>
+                    <span className="hidden xl:block">Development Support</span>
+                  </HeaderLink>
+                </div>
+              </div>
+              <span className="border-l-1 hidden 2xl:flex border-l-1 border-green-light"></span>
+              <span className="hidden 2xl:flex"></span>
             </div>
-            <span className="border-l-1 hidden 2xl:flex border-l-1 border-green-light"></span>
-            <span className="hidden 2xl:flex"></span>
           </nav>
 
           {children}
@@ -100,7 +112,7 @@ export default function Header({ children }: { children: any }) {
             </li>
             <li>
               <DrawerLink handleLinkClick={handleLinkClick} href="/support">
-                Support
+                Development Support
               </DrawerLink>
             </li>
           </ul>
diff --git a/website/components/hero-section.tsx b/website/components/hero-section.tsx
index 1db3c325..2057611e 100644
--- a/website/components/hero-section.tsx
+++ b/website/components/hero-section.tsx
@@ -24,210 +24,212 @@ export const HeroSection = () => {
   }, []);
 
   return (
-    <div className="pb-4 box-border font-dm-sans bg-green-primary text-md 2xl:text-xl text-white-primary hero-section grid grid-cols-main grid-rows-header-xs sm:grid-rows-header">
-      <div className="hidden 2xl:block border-b-1 border-l-1 border-green-light col-start-1 col-end-3 row-start-1 row-end-7"></div>
-      <div className="relative title-text border-2 md:border-3 border-green-light col-start-1 2xl:col-start-3 col-end-13 md:col-end-11 2xl:col-end-9 row-start-1 row-span-3 sm:row-span-6 t flex justify-items-center items-center p-[20px] sm:p-[40px] overflow-hidden">
-        <h1 className="relative text-xl sm:text-2xl xl:text-3xl font-bold z-10">
-          Spreadsheet experience for your React app
-        </h1>
-        <AnimatedGridPattern
-          numSquares={30}
-          maxOpacity={0.1}
-          duration={3}
-          repeatDelay={1}
-          className={cn(
-            "[mask-image:radial-gradient(650px_circle_at_center,white,transparent)]",
-            "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12"
-          )}
-        />
-      </div>
-      <div className="col-start-9 col-end-11 font-bold hidden 2xl:flex justify-center items-center text-green-secondary">
-        {!shouldHideNumbers && (
-          <NumberTicker
-            value={getRandomValue()}
-            delay={0.05}
-            decimalPlaces={getRandomDecimalPlaces()}
-          />
-        )}
-      </div>
-      <div className="border-l-1 border-r-1 border-green-light col-start-11 col-end-13 row-start-1 row-span-2 font-bold hidden md:flex justify-center items-center text-green-secondary">
-        {!shouldHideNumbers && (
-          <NumberTicker
-            value={getRandomValue()}
-            delay={0.1}
-            decimalPlaces={getRandomDecimalPlaces()}
-          />
-        )}
-      </div>
-      <div className="border-t-1 border-green-light col-start-9 col-end-11 font-bold hidden 2xl:flex justify-center items-center text-green-secondary">
-        {!shouldHideNumbers && (
-          <NumberTicker
-            value={getRandomValue()}
-            delay={0.15}
-            decimalPlaces={getRandomDecimalPlaces()}
-          />
-        )}
-      </div>
-      <div className="border-t-1 border-green-light col-start-9 col-end-11 font-bold hidden 2xl:flex justify-center items-center text-green-secondary">
-        {!shouldHideNumbers && (
-          <NumberTicker
-            value={getRandomValue()}
-            delay={0.2}
-            decimalPlaces={getRandomDecimalPlaces()}
-          />
-        )}
-      </div>
-      <div className="border-t-1 border-l-1 border-r-1 border-green-light col-start-11 col-end-13 font-bold hidden md:flex justify-center items-center text-green-secondary">
-        {!shouldHideNumbers && (
-          <NumberTicker
-            value={getRandomValue()}
-            delay={0.25}
-            decimalPlaces={getRandomDecimalPlaces()}
-          />
-        )}
-      </div>
-      <div className="border-t-1 border-green-light col-start-9 col-end-11 font-bold hidden 2xl:flex justify-center items-center text-green-secondary">
-        {!shouldHideNumbers && (
-          <NumberTicker
-            value={getRandomValue()}
-            delay={0.3}
-            decimalPlaces={getRandomDecimalPlaces()}
-          />
-        )}
-      </div>
-      <div className="border-t-1 border-l-1 border-r-1 border-green-light col-start-11 col-end-13 font-bold hidden md:flex justify-center items-center text-green-secondary">
-        {!shouldHideNumbers && (
-          <NumberTicker
-            value={getRandomValue()}
-            delay={0.35}
-            decimalPlaces={getRandomDecimalPlaces()}
-          />
-        )}
-      </div>
-      <div className="border-t-1 border-b-1 border-green-light col-start-9 font-bold col-end-11 font-bold hidden 2xl:flex justify-center items-center text-green-secondary">
-        {!shouldHideNumbers && (
-          <NumberTicker
-            value={getRandomValue()}
-            delay={0.4}
-            decimalPlaces={getRandomDecimalPlaces()}
-          />
-        )}
-      </div>
-      <div className="inline-block border-t-1 border-r-1 border-l-1 border-b-1 border-green-light col-start-11 col-end-13 row-start-5 row-span-2 font-bold hidden md:flex justify-center items-center text-green-secondary">
-        {!shouldHideNumbers && (
-          <NumberTicker
-            value={getRandomValue()}
-            delay={0.45}
-            decimalPlaces={getRandomDecimalPlaces()}
-          />
-        )}
-      </div>
-      <div className="border-b-1 border-green-light col-start-9 col-end-11 font-bold hidden 2xl:flex justify-center items-center text-green-secondary">
-        {!shouldHideNumbers && (
-          <NumberTicker
-            value={getRandomValue()}
-            delay={0.5}
-            decimalPlaces={getRandomDecimalPlaces()}
-          />
-        )}
-      </div>
-      <div className="inline-block border-l-1 border-b-1 border-r-1 border-green-light md:border-r-0 col-start-1 2xl:col-start-3 col-end-13 sm:col-end-9 md:col-end-7 row-start-4 sm:row-start-7 row-span-2 text-xs sm:text-sm lg:text-md flex justify-center items-center p-[20px] sm:p-[40px]">
-        <h2>
-          ReactGrid is an open-source React component for displaying and editing
-          data in a spreadsheet-like way.
-        </h2>
-      </div>
-      <div className="inline-block border-l-1 border-b-1 border-green-light col-start-7 col-end-9 row-start-7 row-span-2 font-bold hidden md:flex justify-center items-center text-green-secondary">
-        {!shouldHideNumbers && (
-          <NumberTicker
-            value={getRandomValue()}
-            delay={0.55}
-            decimalPlaces={getRandomDecimalPlaces()}
-          />
-        )}
-      </div>
-      <div className="hidden border-l-1 border-b-1 border-green-light col-start-9 col-end-11 row-start-7 row-span-2 font-bold sm:flex justify-center items-center text-green-secondary">
-        {!shouldHideNumbers && (
-          <NumberTicker
-            value={getRandomValue()}
-            delay={0.6}
-            decimalPlaces={getRandomDecimalPlaces()}
-          />
-        )}
-      </div>
-      <div className="hidden border-l-1 border-b-1 border-r-1 border-green-light col-start-11 col-end-13 row-start-7 font-bold row-span-2 sm:flex justify-center items-center text-green-secondary">
-        {!shouldHideNumbers && (
-          <NumberTicker
-            value={getRandomValue()}
-            delay={0.65}
-            decimalPlaces={getRandomDecimalPlaces()}
-          />
-        )}
-      </div>
-      <MagicCard
-        className="inline-block border-l-1 border-b-1 border-green-light col-start-1 2xl:col-start-3 col-end-7 md:col-end-4 2xl:col-end-5 row-start-6 sm:row-start-9 bg-green-secondary flex items-center justify-center"
-        gradientColor={"#D9D9D955"}
-      >
-        <Link
-          href="/docs/5.0/1-getting-started"
-          className="w-full h-full flex sm:flex-row flex-wrap justify-center items-center text-2xs sm:text-xs gap-2 bg-green-secondary p-2 md:pl-4"
+    <div className="pb-4 box-border font-dm-sans bg-green-primary text-md 2xl:text-xl text-white-primary">
+      <div className="hero-section grid grid-cols-main grid-rows-header-xs sm:grid-rows-header max-w-screen-3xl mx-auto">
+        <div className="hidden 2xl:block border-b-1 border-l-1 border-green-light col-start-1 col-end-3 row-start-1 row-end-7"></div>
+        <div className="relative title-text border-2 md:border-3 border-green-light col-start-1 2xl:col-start-3 col-end-13 md:col-end-11 2xl:col-end-9 row-start-1 row-span-3 sm:row-span-6 t flex justify-items-center items-center p-[20px] sm:p-[40px] overflow-hidden">
+          <h1 className="relative text-xl sm:text-2xl xl:text-3xl font-bold z-10">
+            Spreadsheet experience for your React app
+          </h1>
+          <AnimatedGridPattern
+            numSquares={30}
+            maxOpacity={0.1}
+            duration={3}
+            repeatDelay={1}
+            className={cn(
+              "[mask-image:radial-gradient(650px_circle_at_center,white,transparent)]",
+              "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12"
+            )}
+          />
+        </div>
+        <div className="col-start-9 col-end-11 font-bold hidden 2xl:flex justify-center items-center text-green-secondary">
+          {!shouldHideNumbers && (
+            <NumberTicker
+              value={getRandomValue()}
+              delay={0.05}
+              decimalPlaces={getRandomDecimalPlaces()}
+            />
+          )}
+        </div>
+        <div className="border-l-1 border-r-1 border-green-light col-start-11 col-end-13 row-start-1 row-span-2 font-bold hidden md:flex justify-center items-center text-green-secondary">
+          {!shouldHideNumbers && (
+            <NumberTicker
+              value={getRandomValue()}
+              delay={0.1}
+              decimalPlaces={getRandomDecimalPlaces()}
+            />
+          )}
+        </div>
+        <div className="border-t-1 border-green-light col-start-9 col-end-11 font-bold hidden 2xl:flex justify-center items-center text-green-secondary">
+          {!shouldHideNumbers && (
+            <NumberTicker
+              value={getRandomValue()}
+              delay={0.15}
+              decimalPlaces={getRandomDecimalPlaces()}
+            />
+          )}
+        </div>
+        <div className="border-t-1 border-green-light col-start-9 col-end-11 font-bold hidden 2xl:flex justify-center items-center text-green-secondary">
+          {!shouldHideNumbers && (
+            <NumberTicker
+              value={getRandomValue()}
+              delay={0.2}
+              decimalPlaces={getRandomDecimalPlaces()}
+            />
+          )}
+        </div>
+        <div className="border-t-1 border-l-1 border-r-1 border-green-light col-start-11 col-end-13 font-bold hidden md:flex justify-center items-center text-green-secondary">
+          {!shouldHideNumbers && (
+            <NumberTicker
+              value={getRandomValue()}
+              delay={0.25}
+              decimalPlaces={getRandomDecimalPlaces()}
+            />
+          )}
+        </div>
+        <div className="border-t-1 border-green-light col-start-9 col-end-11 font-bold hidden 2xl:flex justify-center items-center text-green-secondary">
+          {!shouldHideNumbers && (
+            <NumberTicker
+              value={getRandomValue()}
+              delay={0.3}
+              decimalPlaces={getRandomDecimalPlaces()}
+            />
+          )}
+        </div>
+        <div className="border-t-1 border-l-1 border-r-1 border-green-light col-start-11 col-end-13 font-bold hidden md:flex justify-center items-center text-green-secondary">
+          {!shouldHideNumbers && (
+            <NumberTicker
+              value={getRandomValue()}
+              delay={0.35}
+              decimalPlaces={getRandomDecimalPlaces()}
+            />
+          )}
+        </div>
+        <div className="border-t-1 border-b-1 border-green-light col-start-9 font-bold col-end-11 font-bold hidden 2xl:flex justify-center items-center text-green-secondary">
+          {!shouldHideNumbers && (
+            <NumberTicker
+              value={getRandomValue()}
+              delay={0.4}
+              decimalPlaces={getRandomDecimalPlaces()}
+            />
+          )}
+        </div>
+        <div className="inline-block border-t-1 border-r-1 border-l-1 border-b-1 border-green-light col-start-11 col-end-13 row-start-5 row-span-2 font-bold hidden md:flex justify-center items-center text-green-secondary">
+          {!shouldHideNumbers && (
+            <NumberTicker
+              value={getRandomValue()}
+              delay={0.45}
+              decimalPlaces={getRandomDecimalPlaces()}
+            />
+          )}
+        </div>
+        <div className="border-b-1 border-green-light col-start-9 col-end-11 font-bold hidden 2xl:flex justify-center items-center text-green-secondary">
+          {!shouldHideNumbers && (
+            <NumberTicker
+              value={getRandomValue()}
+              delay={0.5}
+              decimalPlaces={getRandomDecimalPlaces()}
+            />
+          )}
+        </div>
+        <div className="inline-block border-l-1 border-b-1 border-r-1 border-green-light md:border-r-0 col-start-1 2xl:col-start-3 col-end-13 sm:col-end-9 md:col-end-7 row-start-4 sm:row-start-7 row-span-2 text-xs sm:text-sm lg:text-md flex justify-center items-center p-[20px] sm:p-[40px]">
+          <h2>
+            ReactGrid is an open-source React component for displaying and
+            editing data in a spreadsheet-like way.
+          </h2>
+        </div>
+        <div className="inline-block border-l-1 border-b-1 border-green-light col-start-7 col-end-9 row-start-7 row-span-2 font-bold hidden md:flex justify-center items-center text-green-secondary">
+          {!shouldHideNumbers && (
+            <NumberTicker
+              value={getRandomValue()}
+              delay={0.55}
+              decimalPlaces={getRandomDecimalPlaces()}
+            />
+          )}
+        </div>
+        <div className="hidden border-l-1 border-b-1 border-green-light col-start-9 col-end-11 row-start-7 row-span-2 font-bold sm:flex justify-center items-center text-green-secondary">
+          {!shouldHideNumbers && (
+            <NumberTicker
+              value={getRandomValue()}
+              delay={0.6}
+              decimalPlaces={getRandomDecimalPlaces()}
+            />
+          )}
+        </div>
+        <div className="hidden border-l-1 border-b-1 border-r-1 border-green-light col-start-11 col-end-13 row-start-7 font-bold row-span-2 sm:flex justify-center items-center text-green-secondary">
+          {!shouldHideNumbers && (
+            <NumberTicker
+              value={getRandomValue()}
+              delay={0.65}
+              decimalPlaces={getRandomDecimalPlaces()}
+            />
+          )}
+        </div>
+        <MagicCard
+          className="inline-block border-l-1 border-b-1 border-green-light col-start-1 2xl:col-start-3 col-end-7 md:col-end-4 2xl:col-end-5 row-start-6 sm:row-start-9 bg-green-secondary flex items-center justify-center"
+          gradientColor={"#D9D9D955"}
         >
-          Get Started <BsFillRocketTakeoffFill />
-        </Link>
-      </MagicCard>
-      <MagicCard
-        className="group inline-block border-l-1 border-b-1 border-r-1 md:border-r-0 border-green-light col-start-7 md:col-start-4 2xl:col-start-5 col-end-13 md:col-end-7 row-start-6 sm:row-start-9 bg-green-secondary flex items-center justify-center sm:justify-start"
-        gradientColor={"#D9D9D955"}
-      >
-        <Link
-          href="https://github.com/silevis/reactgrid"
-          target="_blank"
-          className="w-full h-full flex flex-col sm:flex-row flex-wrap justify-center sm:justify-start 2xl:justify-center items-center content-center text-2xs sm:text-xs gap-2 bg-green-secondary p-2 sm:pl-4"
+          <Link
+            href="/docs/5.0/1-getting-started"
+            className="w-full h-full flex sm:flex-row flex-wrap justify-center items-center text-2xs sm:text-xs gap-2 bg-green-secondary p-2 md:pl-4"
+          >
+            Get Started <BsFillRocketTakeoffFill />
+          </Link>
+        </MagicCard>
+        <MagicCard
+          className="group inline-block border-l-1 border-b-1 border-r-1 md:border-r-0 border-green-light col-start-7 md:col-start-4 2xl:col-start-5 col-end-13 md:col-end-7 row-start-6 sm:row-start-9 bg-green-secondary flex items-center justify-center sm:justify-start"
+          gradientColor={"#D9D9D955"}
         >
-          <div className="relative z-10 flex items-center gap-x-1">
-            <BsGithub /> Stars on Github
-          </div>
-          <div className="relative z-10 flex items-center gap-x-1 md:min-w-[90px] h-[18px] sm:h-[24px]">
-            <FaStar className="text-[#f4df50] md:text-white-primary group-hover:text-[#f4df50] transition-colors duration-200" />
-            <NumberTicker value={starsCount} delay={0.65} />
-          </div>
-        </Link>
-      </MagicCard>
-      <div className="inline-block border-l-1 border-b-1 border-green-light col-start-7 col-end-9 xl:col-end-8 row-start-9 font-bold hidden md:flex justify-center items-center text-green-secondary">
-        {!shouldHideNumbers && (
-          <NumberTicker
-            value={getRandomValue()}
-            delay={0.7}
-            decimalPlaces={getRandomDecimalPlaces()}
-          />
-        )}
-      </div>
-      <div className="inline-block border-l-1 border-r-1 border-green-light xl:border-r-0 border-b-1 col-start-9 xl:col-start-8 col-end-11 xl:col-end-9 row-start-9 font-bold hidden md:flex justify-center items-center text-green-secondary">
-        {!shouldHideNumbers && (
-          <NumberTicker
-            value={getRandomValue()}
-            delay={0.75}
-            decimalPlaces={getRandomDecimalPlaces()}
-          />
-        )}
-      </div>
-      <div className="inline-block border-l-1 border-b-1 border-green-light col-start-9 col-end-10 row-start-9 font-bold hidden xl:flex justify-center items-center text-green-secondary">
-        {!shouldHideNumbers && (
-          <NumberTicker
-            value={getRandomValue()}
-            delay={0.8}
-            decimalPlaces={getRandomDecimalPlaces()}
-          />
-        )}
-      </div>
-      <div className="inline-block border-l-1 border-b-1 border-r-1 border-green-light col-start-10 col-end-11 row-start-9 font-bold hidden xl:flex justify-center items-center text-green-secondary">
-        {!shouldHideNumbers && (
-          <NumberTicker
-            value={getRandomValue()}
-            delay={0.85}
-            decimalPlaces={getRandomDecimalPlaces()}
-          />
-        )}
+          <Link
+            href="https://github.com/silevis/reactgrid"
+            target="_blank"
+            className="w-full h-full flex flex-col sm:flex-row flex-wrap justify-center sm:justify-start 2xl:justify-center items-center content-center text-2xs sm:text-xs gap-2 bg-green-secondary p-2 sm:pl-4"
+          >
+            <div className="relative z-10 flex items-center gap-x-1">
+              <BsGithub /> Stars on Github
+            </div>
+            <div className="relative z-10 flex items-center gap-x-1 md:min-w-[90px] h-[18px] sm:h-[24px]">
+              <FaStar className="text-[#f4df50] md:text-white-primary group-hover:text-[#f4df50] transition-colors duration-200" />
+              <NumberTicker value={starsCount} delay={0.65} />
+            </div>
+          </Link>
+        </MagicCard>
+        <div className="inline-block border-l-1 border-b-1 border-green-light col-start-7 col-end-9 xl:col-end-8 row-start-9 font-bold hidden md:flex justify-center items-center text-green-secondary">
+          {!shouldHideNumbers && (
+            <NumberTicker
+              value={getRandomValue()}
+              delay={0.7}
+              decimalPlaces={getRandomDecimalPlaces()}
+            />
+          )}
+        </div>
+        <div className="inline-block border-l-1 border-r-1 border-green-light xl:border-r-0 border-b-1 col-start-9 xl:col-start-8 col-end-11 xl:col-end-9 row-start-9 font-bold hidden md:flex justify-center items-center text-green-secondary">
+          {!shouldHideNumbers && (
+            <NumberTicker
+              value={getRandomValue()}
+              delay={0.75}
+              decimalPlaces={getRandomDecimalPlaces()}
+            />
+          )}
+        </div>
+        <div className="inline-block border-l-1 border-b-1 border-green-light col-start-9 col-end-10 row-start-9 font-bold hidden xl:flex justify-center items-center text-green-secondary">
+          {!shouldHideNumbers && (
+            <NumberTicker
+              value={getRandomValue()}
+              delay={0.8}
+              decimalPlaces={getRandomDecimalPlaces()}
+            />
+          )}
+        </div>
+        <div className="inline-block border-l-1 border-b-1 border-r-1 border-green-light col-start-10 col-end-11 row-start-9 font-bold hidden xl:flex justify-center items-center text-green-secondary">
+          {!shouldHideNumbers && (
+            <NumberTicker
+              value={getRandomValue()}
+              delay={0.85}
+              decimalPlaces={getRandomDecimalPlaces()}
+            />
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/website/components/reactgrid-sample.tsx b/website/components/reactgrid-sample.tsx
index 683c5ab0..650bb763 100644
--- a/website/components/reactgrid-sample.tsx
+++ b/website/components/reactgrid-sample.tsx
@@ -9,33 +9,31 @@ export default function ReactGridMainExample() {
   return (
     <div className="text-white-primary font-dm-sans">
       <div className="relative grid grid-cols-main  bg-green-primary pt-12 pb-12 md:pt-32">
-        <BlurFade
-          className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 z-10"
-          delay={0.1}
-          inView
-        >
-          <h1 className="text-md sm:text-xl md:text-2xl px-4 font-bold text-center bg-gradient-to-t from-slate-50 to-slate-300 bg-clip-text text-transparent">
-            ReactGrid component
-          </h1>
-        </BlurFade>
-        <BlurFade
-          className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 z-10"
-          delay={0.25}
-          inView
-        >
-          <p className="text-center text-xs md:text-sm px-4 py-4">
-            Display your data in the most effective way for your specific needs.
-            With flexible options for organizing information, you can create
-            intuitive and clear tables that facilitate analysis and
-            presentation. You can customize the layout, formatting, and
-            interactivity to achieve the perfect solution for your project.
-          </p>
-          <div className="flex justify-center">
-            <Link className="inline-block text-center underline" href="/demo">
-              Try demo
-            </Link>
-          </div>
-        </BlurFade>
+        <div className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 z-10 max-w-screen-2xl mx-auto">
+          <BlurFade className="" delay={0.1} inView>
+            <h1 className="text-md sm:text-xl md:text-2xl px-4 font-bold text-center bg-gradient-to-t from-slate-50 to-slate-300 bg-clip-text text-transparent">
+              ReactGrid component
+            </h1>
+          </BlurFade>
+          <BlurFade
+            className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 z-10"
+            delay={0.25}
+            inView
+          >
+            <p className="text-center text-xs md:text-sm px-4 py-4">
+              Display your data in the most effective way for your specific
+              needs. With flexible options for organizing information, you can
+              create intuitive and clear tables that facilitate analysis and
+              presentation. You can customize the layout, formatting, and
+              interactivity to achieve the perfect solution for your project.
+            </p>
+            <div className="flex justify-center">
+              <Link className="inline-block text-center underline" href="/demo">
+                Try demo
+              </Link>
+            </div>
+          </BlurFade>
+        </div>
         <GridPattern
           width={30}
           height={30}
@@ -48,7 +46,7 @@ export default function ReactGridMainExample() {
         />
       </div>
       <div className="react-grid-sample relative bg-green-secondary grid grid-cols-main">
-        <div className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-4 xl:col-end-10 bg-white-primary shadow-reactgrid-sample rounded-t-[16px] text-[#a5a5a5] font-bold text-xl">
+        <div className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-4 xl:col-end-10 bg-white-primary shadow-reactgrid-sample rounded-t-[16px] text-[#a5a5a5] font-bold text-xl max-w-screen-2xl mx-auto">
           <div className="h-[60px] flex items-center ps-5">
             <Image src={logo} alt="ReactGrid" />
           </div>
diff --git a/website/components/why-us-section.tsx b/website/components/why-us-section.tsx
index a4a50c2f..a451b405 100644
--- a/website/components/why-us-section.tsx
+++ b/website/components/why-us-section.tsx
@@ -72,7 +72,7 @@ const featuresList = [
 export const WhyUsSection = () => {
   return (
     <section>
-      <div className="relative grid grid-cols-main pt-24 md:pt-48 pb-12 md:pb-24">
+      <div className="relative grid grid-cols-main pt-24 md:pt-48 pb-12 md:pb-24 max-w-screen-2xl mx-auto">
         <BlurFade
           className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11"
           delay={0.1}
@@ -104,7 +104,7 @@ export const WhyUsSection = () => {
           )}
         />
       </div>
-      <div className="grid grid-cols-main mb-[128px] md:mb-[250px]">
+      <div className="grid grid-cols-main mb-[128px] md:mb-[250px] max-w-screen-2xl mx-auto">
         <div className="col-start-2 col-end-12 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-x-16 gap-y-8 xl:gap-y-32">
           {featuresList.map((feature, index) => {
             return (
@@ -125,7 +125,7 @@ export const WhyUsSection = () => {
                   />
                 </div>
 
-                <h2 className="text-black-primary text-center font-bold text-sm">
+                <h2 className="bg-gradient-to-t from-slate-950 to-slate-500 bg-clip-text text-transparent text-center font-bold text-sm">
                   {feature.title}
                 </h2>
                 <p className="text-black-secondary text-center px-4 md:px-16">
diff --git a/website/pages/_meta.json b/website/pages/_meta.json
index fc32532c..25867f6e 100644
--- a/website/pages/_meta.json
+++ b/website/pages/_meta.json
@@ -36,7 +36,7 @@
     "newWindow": false
   },
   "support": {
-    "title": "Support",
+    "title": "Dev Support",
     "type": "page",
     "href": "/support",
     "newWindow": false
diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts
index 23cc1245..47d3fb62 100644
--- a/website/tailwind.config.ts
+++ b/website/tailwind.config.ts
@@ -129,6 +129,7 @@ const config: Config = {
       lg: "1024px",
       xl: "1280px",
       "2xl": "1536px",
+      "3xl": "1920px",
     },
   },
   daisyui: {