update landing page

package.json

@@ -13,6 +13,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "add-to-calendar-button": "^2.9.1",
     "bootstrap": "^5.3.2",
     "next": "14.2.25",
     "react": "^18",

src/components/darkFooter/DarkFooter.tsx

@@ -16,11 +16,11 @@ const DarkFooter = () => {
       <div className="container-wide">
         <div className={styles.container}>
           <div className={styles.leftContainer}>
-            <div className={styles.logo}>
-              <Link href={"/"}>
+            <div>
+              <Link className={styles.logo} href={"/"}>
                 <Logo />
+                <Display size={300}>Docling</Display>
               </Link>
-              <Display size={300}>Docling</Display>
             </div>
             <div className={styles.footer_links}>
               <Social darkMode isFooter />

src/components/darkHeader/DarkHeader.tsx

@@ -34,13 +34,13 @@ const DarkHeader = () => {
               <div className={styles.drawer}>
                 <div className={styles.wrapper}>
                   <div className={styles.drawerHeader}>
-                    <div className={styles.logo}>
-                      <Link href={"/"}>
+                    <div>
+                      <Link className={styles.logo} href={"/"}>
                         <Logo />
+                        <Display size={300} className={styles.left_text}>
+                          Docling
+                        </Display>
                       </Link>
-                      <Display size={300} className={styles.left_text}>
-                        Docling
-                      </Display>
                     </div>
                     {isActive && (
                       <div onClick={toggleMenu}>
@@ -92,13 +92,14 @@ const DarkHeader = () => {
             </>
           )}
           <div className={styles.left}>
-            <div className={styles.logo}>
-              <Link href={"/"}>
+            <div>
+              <Link className={styles.logo} href={"/"}>
                 <Logo />
+
+                <Display size={300} className={styles.left_text}>
+                  Docling
+                </Display>
               </Link>
-              <Display size={300} className={styles.left_text}>
-                Docling
-              </Display>
             </div>
             <nav className={styles.nav}>
               {LIST?.map((item) => {

src/components/header/Header.tsx

@@ -50,10 +50,11 @@ const Header = () => {
             <div className={styles.logo}>
               <Link href={"/"}>
                 <Logo />
+
+                <Display size={300} className={styles.left_text}>
+                  Docling
+                </Display>
               </Link>
-              <Display size={300} className={styles.left_text}>
-                Docling
-              </Display>
             </div>
             <nav className={styles.nav}>
               {LIST?.map((item) => {

src/components/icons/Discord/Discord.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const Discord = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M20.317 4.1556C18.7873 3.45371 17.147 2.9366 15.4319 2.64043C15.4007 2.63471 15.3695 2.64899 15.3534 2.67756C15.1424 3.05278 14.9087 3.54228 14.7451 3.92702C12.9004 3.65085 11.0652 3.65085 9.25832 3.92702C9.09465 3.53373 8.85248 3.05278 8.64057 2.67756C8.62449 2.64995 8.59328 2.63566 8.56205 2.64043C6.84791 2.93565 5.20756 3.45277 3.67693 4.1556C3.66368 4.16131 3.65233 4.17084 3.64479 4.18321C0.533392 8.83157 -0.31895 13.3657 0.0991801 17.8436C0.101072 17.8655 0.11337 17.8864 0.130398 17.8998C2.18321 19.4073 4.17171 20.3225 6.12328 20.9291C6.15451 20.9387 6.18761 20.9272 6.20748 20.9015C6.66913 20.2711 7.08064 19.6064 7.43348 18.9073C7.4543 18.8664 7.43442 18.8178 7.39186 18.8016C6.73913 18.554 6.1176 18.2521 5.51973 17.9093C5.47244 17.8817 5.46865 17.814 5.51216 17.7816C5.63797 17.6874 5.76382 17.5893 5.88396 17.4902C5.90569 17.4721 5.93598 17.4683 5.96153 17.4798C9.88928 19.273 14.1415 19.273 18.023 17.4798C18.0485 17.4674 18.0788 17.4712 18.1015 17.4893C18.2216 17.5883 18.3475 17.6874 18.4742 17.7816C18.5177 17.814 18.5149 17.8817 18.4676 17.9093C17.8697 18.2588 17.2482 18.554 16.5945 18.8007C16.552 18.8169 16.533 18.8664 16.5538 18.9073C16.9143 19.6054 17.3258 20.2701 17.7789 20.9006C17.7978 20.9272 17.8319 20.9387 17.8631 20.9291C19.8241 20.3225 21.8126 19.4073 23.8654 17.8998C23.8834 17.8864 23.8948 17.8664 23.8967 17.8445C24.3971 12.6676 23.0585 8.17066 20.3482 4.18416C20.3416 4.17084 20.3303 4.16131 20.317 4.1556ZM8.02002 15.117C6.8375 15.117 5.86313 14.0314 5.86313 12.6981C5.86313 11.3648 6.8186 10.2791 8.02002 10.2791C9.23087 10.2791 10.1958 11.3743 10.1769 12.6981C10.1769 14.0314 9.22141 15.117 8.02002 15.117ZM15.9947 15.117C14.8123 15.117 13.8379 14.0314 13.8379 12.6981C13.8379 11.3648 14.7933 10.2791 15.9947 10.2791C17.2056 10.2791 18.1705 11.3743 18.1516 12.6981C18.1516 14.0314 17.2056 15.117 15.9947 15.117Z"
+        fill="#E9DBBDE5"
+        fill-opacity="0.9"
+      />
+    </svg>
+  );
+};
+
+export default Discord;

src/components/icons/Discord/index.ts

@@ -0,0 +1 @@
+export { default } from "./Discord";

src/components/pages/LandingPage/Hero/Hero.tsx

@@ -1,33 +1,89 @@
+"use client";
+import { useEffect, useState } from "react";
+
 //Components
 import Display from "@/components/ui/Display";
-
 //Styles
 import styles from "./styles.module.scss";
 import Text from "@/components/ui/text";
-import Form from "../Form";
+import StaticImage from "@/components/ui/StaticImage";
 
 const Hero = () => {
+  const [isLibraryLoaded, setIsLibraryLoaded] = useState(false);
+
+  useEffect(() => {
+    const loadCalendarLibrary = async () => {
+      try {
+        if (typeof window !== "undefined" && (window as any).atcb) {
+          setIsLibraryLoaded(true);
+          return;
+        }
+
+        await import("add-to-calendar-button");
+
+        setTimeout(() => {
+          setIsLibraryLoaded(true);
+        }, 100);
+      } catch (error) {
+        console.error("Failed to load Add to Calendar Button:", error);
+      }
+    };
+
+    loadCalendarLibrary();
+  }, []);
+
   return (
     <section className={styles.hero}>
       <div className={` ${styles.hero_row} container-wide`}>
         <div className={styles.hero_content}>
           <Text size={600} weight={400} className={styles.hero_subTitle}>
-            {"Unlock AI-Ready Data from Any Document with Docling Open Source "}
+            {"Unlock AI-Ready Data from Any Document with Docling Open Source "}
           </Text>
           <Display size={700} className={styles.hero_title}>
             {
-              "Do you want to learn how to build agentic apps and AI pipelines that leverage your complex PDFs, Word docs, and tables? "
+              "Learn how to build agentic apps and AI pipelines that leverage your complex PDFs, Word docs, and tables "
             }
           </Display>
           <Text
             size={600}
             weight={400}
             className={`${styles.hero_subTitle} ${styles.hero_color}`}
           >
-            {"Join Us Thursday, September 11, 9:00 AM PT  "}
+            {"Join Us Wednesday, September 17th, 9:00 AM PT  "}
           </Text>
+
+          <div className={styles.calendar_wrapper}>
+            {isLibraryLoaded ? (
+              <add-to-calendar-button
+                name="Unlock AI-Ready Data from Any Document with Docling Open Source"
+                options="'Apple','Google'"
+                location="youtube.com"
+                startDate="2025-09-17"
+                endDate="2025-09-17"
+                startTime="09:00"
+                endTime="10:00"
+                timeZone="America/Los_Angeles"
+                buttonStyle="round"
+                trigger="click"
+                hideIconButton="true"
+                hideBranding="true"
+                label="Add to Calendar"
+                styleLight="--btn-background: var(--interface-orange-600); --btn-text: var(--primary-black); --btn-border: none; --btn-border-radius: 100px; --font: var(--font-body); --btn-padding: 10px 20px; --btn-font-size: 15px; --btn-font-weight: 500; --btn-line-height: 24px; --btn-max-width: 177px;"
+                styleDark="--btn-background: var(--interface-orange-600); --btn-text: var(--primary-black);"
+              />
+            ) : (
+              <div className={styles.loading_button}>Loading...</div>
+            )}
+          </div>
         </div>
-        <Form className={styles.hero_form} />
+        <StaticImage
+          src={"/images/assistant.webp"}
+          alt={"live image"}
+          width={612}
+          height={412}
+          priority
+          className={styles.hero_image}
+        />
       </div>
     </section>
   );

src/components/pages/LandingPage/Hero/styles.module.scss

@@ -7,7 +7,7 @@
     linear-gradient(0deg, #ffe185 0%, #ffe185 100%);
   width: 100%;
   min-height: auto;
-  padding-top: 72px;
+  padding-top: 55px;
   padding-bottom: var(--spacer-6);
 
   @include media-breakpoint-down(md) {
@@ -43,34 +43,35 @@
     }
   }
   &_subTitle {
+    font-size: 18px !important;
     font-weight: 500 !important;
     line-height: 130% !important;
-    letter-spacing: -0.12px !important;
-    color: var(--interface-orange-600);
+    letter-spacing: -0.09px !important;
+    color: var(--interface-orange-600) !important;
     text-align: left;
     max-width: 580px;
-    padding-top: 13px;
     @include media-breakpoint-down(lg) {
       max-width: 100%;
       text-align: center;
     }
   }
   &_color {
     color: var(--primary-body) !important;
-    padding-top: 43px !important;
+    padding-top: 40px !important;
+    padding-bottom: 40px !important;
   }
   &_title {
-    font-size: 40px !important;
+    font-size: 32px !important;
     font-weight: 500 !important;
+    line-height: 130% !important; /* 41.6px */
+    letter-spacing: -0.64px !important;
     color: var(--interface-yellow-800);
     text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
-    line-height: 130% !important;
-    letter-spacing: -0.8px !important;
     max-width: 558px;
     text-align: left;
     padding-top: 40px;
     @include media-breakpoint-down(xl) {
-      font-size: 30px !important;
+      font-size: 24px !important;
     }
     @include media-breakpoint-down(lg) {
       max-width: 100%;
@@ -82,4 +83,45 @@
     flex-direction: column !important;
     gap: 32px;
   }
+  &_image {
+    @include media-breakpoint-down(md) {
+      width: 100% !important;
+      height: auto !important;
+    }
+  }
+}
+
+.calendar_wrapper {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  @include media-breakpoint-down(lg) {
+    justify-content: center;
+  }
+
+  // Style the add-to-calendar-button web component
+  add-to-calendar-button {
+    --btn-background: var(--interface-orange-600);
+    --btn-text: var(--primary-black);
+    --btn-border: none;
+    --btn-border-radius: 100px;
+    --font: var(--font-body);
+    --btn-padding: 10px 20px;
+    --btn-font-size: 15px;
+    --btn-font-weight: 500;
+    --btn-line-height: 24px;
+    --btn-max-width: 177px;
+    --btn-hover-background: var(--interface-yellow-900);
+    --btn-active-background: var(--interface-yellow-900);
+
+    // Ensure the button displays properly
+    display: block;
+    max-width: 177px;
+
+    @include media-breakpoint-down(md) {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
 }

src/components/pages/LandingPage/SuccessReason/SuccessReason.tsx

@@ -1,7 +1,6 @@
 import Display from "@/components/ui/Display";
 import styles from "./styles.module.scss";
 import Text from "@/components/ui/text";
-import Eclipse from "@/components/icons/Eclipse/Eclipse";
 import StaticImage from "@/components/ui/StaticImage";
 
 const SuccessReason = () => {
@@ -58,24 +57,18 @@ const SuccessReason = () => {
         Speakers
       </Display>
       <div className={styles.reason_speakers}>
-        <div className={styles.reason_speaker}>
-          <Eclipse />{" "}
-          <Text className={styles.reason_speakerDetail} size={100}>
-            <span className={styles.reason_bold}> Engineer Name,</span> Docling
-            Core Team – IBM Research{" "}
-          </Text>
-        </div>
         <div className={styles.reason_speaker}>
           {" "}
           <StaticImage
             src={"/images/avatar.webp"}
             alt="image"
             width={32}
             height={32}
-          />{" "}
+            className={styles.reason_speakerAvatar}
+          />
           <Text className={styles.reason_speakerDetail} size={100}>
-            <span className={styles.reason_bold}>David Gilardi,</span> Developer
-            Relations – IBM{" "}
+            <span className={styles.reason_bold}>Ming Zhao,</span> Developer
+            Relations – IBM
           </Text>
         </div>
       </div>