implement adopters page (#767)

* implement adopters page * Adding Fujitsu Logo as an Enterprise Member (#2996) * Added information about Fujitsu as Adoptium WG * Uploaded Fujitsu-Logo * Fixed a spelling error * Update members.json in json folder This patch adds Fujitsu as an Adoptium Enterprise Member Fixes: #2993 Signed-off-by: Diyorbek Ibragimov <[email protected]> --------- Co-authored-by: Diyorbek Ibragimov <[email protected]>
adoptium · Feb 6, 2025 · d4b1007 · d4b1007
1 parent d175674
commit d4b1007
Show file tree

Hide file tree

Showing 8 changed files with 391 additions and 1 deletion.
diff --git a/src/components/BecomeAdopter/__tests__/BecomeAdopters.test.tsx b/src/components/BecomeAdopter/__tests__/BecomeAdopters.test.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import BecomeAdopter from "../"
+
+describe("BecomeAdopter", () => {
+  it("renders the button and hides the content initially", () => {
+    render(<BecomeAdopter />);
+
+    // Check that the trigger button is rendered
+    const button = screen.getByRole("button", {
+      name: /How can I get my logo displayed\?/i,
+    });
+    expect(button).toBeInTheDocument();
+
+    // Ensure the dropdown content is not present initially
+    const content = screen.queryByText(/You can easily add your organization’s logo/i);
+    expect(content).toBeNull();
+  });
+
+  it("shows the dropdown content when the button is clicked, and hides it on second click", () => {
+    render(<BecomeAdopter />);
+
+    const button = screen.getByRole("button", {
+      name: /How can I get my logo displayed\?/i,
+    });
+
+    // Click the button to show the content
+    fireEvent.click(button);
+    const content = screen.getByText(/You can easily add your organization’s logo/i);
+    expect(content).toBeInTheDocument();
+
+    // Click the button again to hide the content
+    fireEvent.click(button);
+    expect(screen.queryByText(/You can easily add your organization’s logo/i)).toBeNull();
+  });
+});
diff --git a/src/components/BecomeAdopter/index.tsx b/src/components/BecomeAdopter/index.tsx
@@ -0,0 +1,108 @@
+import React from "react";
+import { useState } from "react";
+
+const BecomeAdopter = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="max-w-5xl mx-auto p-6">
+      {/* Dropdown Trigger */}
+      <button
+        className="bg-transparent mt-10 border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[346px] h-[48px] rounded-[80px] gradient-border"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        How can I get my logo displayed?
+      </button>
+
+      {/* Dropdown Content */}
+      {isOpen && (
+        <div className="mt-4 bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300">
+          <div className="p-8 space-y-6 text-gray-800">
+            <p className="text-lg">
+              You can easily add your organization’s logo to our list of adopters
+              by creating an issue or by submitting a pull request.
+            </p>
+
+            {/* Option 1 */}
+            <div>
+              <h2 className="text-2xl font-semibold text-pink">
+                Option 1 - Open an Issue
+              </h2>
+              <ol className="list-decimal list-inside mt-3 space-y-2">
+                <li>
+                  Go to our{" "}
+                  <a
+                    href="https://github.com/adoptium/adoptium.net/issues/new?assignees=&labels=adopter&projects=&template=adopters.yml&title=%5BAdopter%5D%3A+"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-pink hover:underline"
+                  >
+                    Temurin Adopters Form
+                  </a>
+                  .
+                </li>
+                <li>
+                  Fill out the relevant fields (it takes less than 5 minutes)
+                </li>
+                <li>
+                  Attach logo files to an issue by dragging and dropping them in the text editor of the form.
+                </li>
+              </ol>
+            </div>
+
+            {/* Option 2 */}
+            <div>
+              <h2 className="text-2xl font-semibold text-pink">
+                Option 2 - Submit a Pull Request
+              </h2>
+              <p className="mt-3">
+                When submitting a pull request, please make the following changes to the eclipsefdn-project-adopters’{" "}
+                <a
+                  href="https://gitlab.eclipse.org/eclipsefdn/it/api/eclipsefdn-project-adopters"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-pink hover:underline"
+                >
+                  codebase
+                </a>
+                :
+              </p>
+              <ol className="list-decimal list-inside mt-3 space-y-2">
+                <li>
+                  Go to{" "}
+                  <a
+                    href="https://gitlab.eclipse.org/eclipsefdn/it/api/eclipsefdn-project-adopters/"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-pink hover:underline"
+                  >
+                    https://gitlab.eclipse.org/eclipsefdn/it/api/eclipsefdn-project-adopters
+                  </a>
+                  .
+                </li>
+                <li>Fork the repository.</li>
+                <li>
+                  Update the adopter data file{" "}
+                  <code className="px-1 py-0.5 rounded">
+                    config/adopters.json
+                  </code>
+                  . If your organization supports multiple projects, another project can be added to the projects list within the organization’s node. The values in this list should be the ID of the project.
+                </li>
+                <li>
+                  Add a colored and a white organization logo to{" "}
+                  <code className="px-1 py-0.5 rounded">
+                    static/assets/images/adopters
+                  </code>
+                  .
+                </li>
+                <li>Submit the pull request.</li>
+              </ol>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BecomeAdopter;
diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
@@ -29,7 +29,7 @@ const navigation: NavItem[] = [
       { name: "Business Benefits", href: "/business-benefits" },
       { name: "Our Members", href: "/members" },
       { name: "Our Sustainers", href: "/sustainers" },
-      { name: "Our Adopters", href: "#" },
+      { name: "Our Adopters", href: "/adopters" },
       { name: "Support Us", href: "/support-us" },
     ],
   },

diff --git a/src/json/members.json b/src/json/members.json
@@ -55,6 +55,12 @@
     "url": "https://canonical.com/",
     "tier": "enterprise"
   },
+  {
+    "name": "Fujitsu",
+    "logo": "fujitsu-logo.png",
+    "url": "https://www.fujitsu.com",
+    "tier": "enterprise"
+  },
   {
     "name": "IBM",
     "logo": "ibm-logo.png",

diff --git a/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap b/src/pages/__tests__/__snapshots__/adopters.test.tsx.snap
@@ -0,0 +1,158 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Adopters Page > renders correctly 1`] = `
+<div>
+  <div
+    class="slice--navbar"
+  />
+  <main>
+    <div
+      class="relative pt-40 pb-16 md:pb-36 md:pt-60 overflow-hidden"
+    >
+      <div
+        class="w-full relative"
+      >
+        <div
+          class="absolute z-[-1] w-[2396px] h-[1340px] left-[23px] md:left-[112px] top-[21px] md:top-[171px] bg-[#410170] shadow-[0_0_400px_rgba(65,1,112,1)] rounded-full blur-[400px]"
+        />
+        <div
+          class="absolute z-[-1] w-[1487px] h-[893px] left-[120px] md:left-[676px] top-[120px] md:top-[395px] bg-[#B62987] shadow-[0_0_400px_rgba(182,41,135,1)] rounded-full blur-[400px]"
+        />
+        <div
+          class="absolute z-[-1] w-[688px] h-[446px] left-[400px] md:left-[1131px] top-[618px] bg-[#FE8492] shadow-[0_0_400px_rgba(254,132,146,1)] rounded-full blur-[400px]"
+        />
+      </div>
+      <div
+        class="mx-auto max-w-[1048px] w-full px-6 lg:px-0 flex flex-col items-center justify-center"
+      >
+        <div
+          class="self-stretch flex-col justify-center items-center gap-6 flex"
+        >
+          <div
+            class="self-stretch  flex-col justify-center items-center gap-4 flex"
+          >
+            <div
+              class="justify-start items-center gap-3 inline-flex"
+            >
+              <svg
+                fill="none"
+                height="14"
+                viewBox="0 0 14 14"
+                width="14"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect
+                  fill="#FF1464"
+                  height="8"
+                  rx="2"
+                  width="8"
+                  x="3"
+                  y="3"
+                />
+                <rect
+                  height="11"
+                  rx="3.5"
+                  stroke="#FF1464"
+                  stroke-opacity="0.25"
+                  stroke-width="3"
+                  width="11"
+                  x="1.5"
+                  y="1.5"
+                />
+              </svg>
+              <div
+                class="text-rose-600 text-base font-bold leading-normal"
+              >
+                Our Adopters
+              </div>
+            </div>
+            <div
+              class="self-stretch text-center text-white   text-[56px] lg:text-[80px] leading-[114.286%] md:leading-[120%] font-semibold"
+            >
+              Eclipse Temurin™ Adopters
+            </div>
+          </div>
+          <div
+            class="self-stretch text-center text-lightgrey text-[20px] font-normal leading-[140%] undefined"
+          >
+            Companies that use Eclipse Temurin in production.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div />
+    <div
+      class="max-w-5xl mx-auto p-6"
+    >
+      <button
+        class="bg-transparent mt-10 border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[346px] h-[48px] rounded-[80px] gradient-border"
+      >
+        How can I get my logo displayed?
+      </button>
+    </div>
+    <section
+      class="relative  xl:px-0 px-6 md:py-32 py-16 undefined"
+    >
+      <img
+        alt="gradient overlay"
+        class="hidden md:block absolute bg-center top-0 left-0  right-0 w-full h-full z-[-10]"
+        src="/images/gradient-overlay.png"
+      />
+      <img
+        alt="gradient overlay mobile"
+        class="block md:hidden absolute bg-center top-0 left-0  right-0 w-full h-full z-[-10]"
+        src="/images/gradient-overlay-mobile.png"
+      />
+      <div
+        class="max-w-[832px] w-full mx-auto md:py-0 py-8 flex justify-center items-center flex-col text-center md:bg-transparent bg-tones-white rounded-3xl md:backdrop-blur-0 backdrop-blur-12 "
+      >
+        <img
+          aria-label="message icon"
+          class="!mb-0"
+          src="/images/icons/message.svg"
+        />
+        <p
+          class="text-white text-4xl md:text-5xl leading-[122.222%] md:leading-[116.667%] font-normal mt-8"
+        >
+          Speak to our team today
+        </p>
+        <span
+          class=" text-lightgrey tab-button-text"
+        >
+          Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime binaries that are enterprise-ready and Java SE TCK-tested for general use in the Java ecosystem.
+        </span>
+        <button
+          class="bg-transparent mt-10 border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[146px] h-[48px] rounded-[80px] gradient-border lg:block hidden"
+        >
+          Contact Us
+        </button>
+      </div>
+    </section>
+  </main>
+  <div
+    class="bg-blue border-[#3E3355] border-b py-10 px-6"
+  >
+    <div
+      class="flex flex-col lg:flex-row max-w-[1048px] mx-auto justify-center lg:justify-between gap-5 items-center "
+    >
+      <p
+        class="text-3xl md:text-4xl leading-[38px] md:leading-[48px] text-white my-0 text-center"
+      >
+        Thank you to our 
+        <span
+          class="text-pink pr-1"
+        >
+          300+
+        </span>
+        contributors
+      </p>
+      <div
+        class="flex items-center justify-center p-4 space-x-4 w-[325px] rounded-3xl border border-white border-opacity-50"
+      />
+    </div>
+  </div>
+  <div
+    class="slice--footer"
+  />
+</div>
+`;
diff --git a/src/pages/__tests__/adopters.test.tsx b/src/pages/__tests__/adopters.test.tsx
@@ -0,0 +1,33 @@
+import React from "react"
+import { render } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+import { axe } from "vitest-axe"
+import Adopters, { Head } from "../adopters"
+
+vi.mock("../../components/Logos", () => {
+  return {
+    __esModule: true,
+    default: () => <div />,
+    LogoType: {},
+  }
+})
+
+describe("Adopters Page", () => {
+  it("renders correctly", () => {
+    const { container } = render(<Adopters />)
+    expect(container).toMatchSnapshot()
+  })
+
+  it("head renders correctly", () => {
+    const { container } = render(<Head />)
+    // eslint-disable-next-line
+    const title = container.querySelector("title")
+    expect(title?.textContent).toEqual("Our Adopters | Adoptium")
+  })
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Adopters />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})