business-benefits page added

package.json

@@ -58,6 +58,8 @@
     "query-string": "^8.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-fast-marquee": "^1.6.4",
+    "react-google-recaptcha": "^3.1.0",
     "react-hubspot-form": "^1.3.7",
     "react-i18next": "^14.0.5",
     "react-icons": "^5.0.1",

src/components/About/UsingTemurin/index.tsx

@@ -23,16 +23,15 @@ const UsingTemurin = () => {
   ]
   return (
     <>
-      <section className="py-16 max-w-[1048px] w-full mx-auto lg:flex justify-center lg:justify-between xl:px-0 px-6 ">
+      <section className="py-7 md:py-16 max-w-[1048px] w-full mx-auto items-center lg:flex justify-center lg:justify-between xl:px-0 px-6 ">
         <div className="lg:max-w-[560px] w-full">
-          <h2 className="md:text-5xl text-[40px] font-normal leading-[48px] md:leading-[56px]">
+          <h2 className="md:text-5xl text-white text-[40px] font-semibold leading-[120%] md:leading-[116.667%]">
             How other companies are using Temurin
           </h2>
-          <p className="md:mt-6 my-10 text-[#C4BFCE] text-base leading-6 font-normal">
-            How other companies are using Temurin Feugiat ullamcorper justo
-            dolor arcu ut porttitor ultrices rutrum. Eget molestie sit tellus
-            viverra. Bibendum at ut eu feugiat tellus diam turpis. Massa posuere
-            ornare dignissim orci consequat.
+          <p className="md:mt-6 my-10 text-lightgrey text-base leading-[150%] font-normal">
+            Feugiat ullamcorper justo dolor arcu ut porttitor ultrices rutrum.
+            Eget molestie sit tellus viverra. Bibendum at ut eu feugiat tellus
+            diam turpis. Massa posuere ornare dignissim orci consequat.
           </p>
         </div>
         <div className="max-w-[400px] w-full hidden lg:block">
@@ -45,7 +44,7 @@ const UsingTemurin = () => {
         <div className="w-full lg:hidden block mt-10">
           {LatestReleasesCard.map((card, more) => (
             <div key={more} className="w-full ">
-              <p className="p-4 rounded-2xl w-full bg-tones-white gap-y-4 text-base font-normal leading-6 text-white backdrop-blur-12">
+              <p className="p-4 rounded-2xl w-full bg-[#1C0D3B]  mb-5 text-base font-normal leading-[150%] text-white backdrop-blur-12">
                 {card.content}
               </p>
             </div>

src/components/Asciidoc/AccordionItem/index.tsx

@@ -23,9 +23,9 @@ const AccordionItem = ({ title, children }) => {
           >
             <span>{title}</span>
             {isOpen ? (
-              <CiCircleMinus size={45} strokeWidth={0.1} />
+              <CiCircleMinus size={45} stroke-Width={0.1} />
             ) : (
-              <CiCirclePlus size={45} strokeWidth={0.1} />
+              <CiCirclePlus size={45} stroke-Width={0.1} />
             )}
           </button>
         </h2>

src/components/AuthorBio/__tests__/__snapshots__/AuthorBio.test.tsx.snap

@@ -23,7 +23,7 @@ exports[`AuthorBio component > should render correctly 1`] = `
           fill="currentColor"
           height="1em"
           stroke="currentColor"
-          stroke-width="0"
+          stroke-Width="0"
           viewBox="0 0 496 512"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
@@ -43,7 +43,7 @@ exports[`AuthorBio component > should render correctly 1`] = `
           fill="currentColor"
           height="1em"
           stroke="currentColor"
-          stroke-width="0"
+          stroke-Width="0"
           viewBox="0 0 512 512"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
@@ -63,7 +63,7 @@ exports[`AuthorBio component > should render correctly 1`] = `
           fill="currentColor"
           height="1em"
           stroke="currentColor"
-          stroke-width="0"
+          stroke-Width="0"
           viewBox="0 0 448 512"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"

src/components/BlogAuthor/__tests__/__snapshots__/BlogAuthor.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`BlogAuthor component > GitHub link - should render correctly 1`] = `
       fill="currentColor"
       height="1em"
       stroke="currentColor"
-      stroke-width="0"
+      stroke-Width="0"
       viewBox="0 0 496 512"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
@@ -35,7 +35,7 @@ exports[`BlogAuthor component > Linkedin link - should render correctly 1`] = `
       fill="currentColor"
       height="1em"
       stroke="currentColor"
-      stroke-width="0"
+      stroke-Width="0"
       viewBox="0 0 448 512"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
@@ -59,7 +59,7 @@ exports[`BlogAuthor component > Twitter link - should render correctly 1`] = `
       fill="currentColor"
       height="1em"
       stroke="currentColor"
-      stroke-width="0"
+      stroke-Width="0"
       viewBox="0 0 512 512"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"

src/components/Brand-Promotion/BrandGuidline.tsx

@@ -0,0 +1,49 @@
+import React from "react"
+import CommonHeading from "../Common/CommonHeading"
+import { DownloadIcon } from "../Common/AppIcon"
+
+const BrandGuidline = () => {
+  return (
+    <section className="  pt-0 md:pt-16 ">
+      <div className="pt-16   pb-8 md:pb-16 max-w-[1048px] flex-col lg:flex-row mx-auto w-full px-6 lg:px-2 xl:px-0 flex justify-center gap-16 items-center">
+        <div className=" w-full lg:w-[55%] text-center lg:text-left">
+          <CommonHeading
+            title={"Brand guidelines"}
+            description={
+              "Sengar bloppa kawaii. Pälig nomofobi samt dirade. Ter klimathot, plus euroluns. Dism rur kristofobi. Ulol blogga, i sesebelt. R-tal blåljusyrke för att lamiktig. Köttrymden beröninde plafapredat. Teraligen Maudeffekten ifall kulturkofta."
+            }
+            className={undefined}
+          />
+          <CommonHeading
+            description={
+              "Äsamma kis i niren. Kavans an metafoni. Tåsade dengen i kemsex. Luning ultrasumanar om än aposihet. Lodyneng mytodiktisk i bedent. Spening plas tills pad. Are spengar, men mobildagis. Fana lureska, esk.  "
+            }
+            title={undefined}
+            className={undefined}
+          />
+        </div>
+        <div>
+          <div className="p-10 flex flex-col max-w-[400px] newscard-2 h-[440px] md:h-[480px] bg-[#200E46]">
+            <div className="grow">
+              <h3 className="text-white text-[30px] font-semibold   leading-[120%] md:text-[40px]">
+                Download our brand guidelines
+              </h3>
+              <p className="mt-6 text-xl text-lightgrey font-normal">
+                Eclipse Temurin offers high-performance, cross-platform,
+                open-source Java runtime.
+              </p>
+            </div>
+            <button className="bg-transparent flex items-center justify-center gap-3  border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[230px] h-[48px] rounded-[80px] gradient-supportus ">
+              <span>
+                <DownloadIcon />
+              </span>
+              Download Temurin™
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default BrandGuidline

src/components/Brand-Promotion/TemriunDownloandButtons.tsx

@@ -0,0 +1,72 @@
+import React from "react"
+import CommonHeading from "../Common/CommonHeading"
+import { CopyIcon } from "../Common/AppIcon"
+
+const TemriunDownloandButtons = () => {
+  const repeatArray = [1, 2, 3, 4, 5]
+  return (
+    <div className="max-w-[860px] mx-auto px-6 py-16">
+      <CommonHeading
+        title={"Temurin Download Buttons"}
+        description={
+          "If you value Eclipse technologies, please consider becoming a sponsor through the Eclipse Foundation. Contributions from users like you help fund the operations of the Adoptium working group. All money contributed to the Eclipse Foundation will be used to support the Eclipse community through the Adoptium working group."
+        }
+        className={"text-center"}
+      />
+      <div className="pt-16">
+        <div className="flex items-center justify-between pb-6 border-[#3E3355] border-b">
+          <div className="flex items-center gap-20 text-2xl leading-[133.333%] font-semibold text-white">
+            <h3>Button</h3>
+            <h3>Name</h3>
+          </div>
+          <div className=" text-2xl leading-[133.333%] font-semibold text-white">
+            <h3>Copy code</h3>
+          </div>
+        </div>
+        {repeatArray.map((item, index) => (
+          <div
+            key={index}
+            className="flex items-center justify-between py-6 border-[#3E3355] border-b"
+          >
+            <div className="flex items-center gap-12 ">
+              <button className="bg-primary px-6 py-3 rounded-[49.15px] text-[9.83px] font-bold leading-[14.745px] text-white">
+                Get a Quote
+              </button>
+              <h3 className="text-white text-[20px] leading-[140%]">
+                Name of button
+              </h3>
+            </div>
+            <div className=" ">
+              <span className="cursor-pointer">
+                <svg
+                  width="20"
+                  height="21"
+                  viewBox="0 0 20 21"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M16.6667 7.83008H9.16667C8.24619 7.83008 7.5 8.57627 7.5 9.49674V16.9967C7.5 17.9172 8.24619 18.6634 9.16667 18.6634H16.6667C17.5871 18.6634 18.3333 17.9172 18.3333 16.9967V9.49674C18.3333 8.57627 17.5871 7.83008 16.6667 7.83008Z"
+                    stroke="#FF1464"
+                    stroke-Width="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  <path
+                    d="M4.16797 12.83H3.33464C2.89261 12.83 2.46868 12.6544 2.15612 12.3419C1.84356 12.0293 1.66797 11.6054 1.66797 11.1634V3.66337C1.66797 3.22134 1.84356 2.79742 2.15612 2.48486C2.46868 2.1723 2.89261 1.9967 3.33464 1.9967H10.8346C11.2767 1.9967 11.7006 2.1723 12.0131 2.48486C12.3257 2.79742 12.5013 3.22134 12.5013 3.66337V4.4967"
+                    stroke="#FF1464"
+                    stroke-Width="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default TemriunDownloandButtons

src/components/Brand-Promotion/WayToSupport.tsx

@@ -0,0 +1,55 @@
+import React from "react"
+import "../../styles/style.scss"
+import CommonHeading from "../Common/CommonHeading"
+
+const WayToSupport = () => {
+  const carddata = [
+    {
+      id: 1,
+      title: "How to contribute",
+      description:
+        "Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime.",
+      button: "Learn More",
+    },
+    {
+      id: 2,
+      title: "Become a sponsor",
+      description:
+        "Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime.",
+      button: "Become a sponsor",
+    },
+  ]
+  return (
+    <section className="pb-16 pt-14 md:pt-16 md:pb-32 mx-auto max-w-[832px] w-full lg:px-2   xl:px-0 px-6">
+      <CommonHeading
+        className="text-center"
+        title={"Ways to support us"}
+        description={
+          "If you value Eclipse technologies, please consider becoming a sponsor through the Eclipse Foundation. Contributions from users like you help fund the operations of the Adoptium working group. All money contributed to the Eclipse Foundation will be used to support the Eclipse community through the Adoptium working group."
+        }
+      />
+      <div className="mt-16  gap-4 md:gap-8  flex flex-wrap justify-center items-center">
+        {carddata.map((data, index) => (
+          <div
+            key={index}
+            className="p-10 flex flex-col max-w-[400px] newscard-2 h-[440px] md:h-[480px] bg-[#200E46]"
+          >
+            <div className="grow">
+              <h3 className="text-white text-[30px] font-semibold  leading-[120%] md:text-[40px]">
+                {data.title}
+              </h3>
+              <p className="mt-6 text-xl text-lightgrey font-normal">
+                {data.description}
+              </p>
+            </div>
+            <button className="bg-transparent   border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[180px] h-[48px] rounded-[80px] gradient-supportus ">
+              {data.button}
+            </button>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default WayToSupport