Skip to content

Added the supporter page and updated the navigations #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Apr 10, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/images/logo_orange.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions src/app/contactus/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import ContactUs from "../../components/supporters/contact_us";

export default function Supporters() {
return (
<div className="container mx-auto items-center justify-center bg-[#00142B]">
<ContactUs />
</div>
);
}
22 changes: 22 additions & 0 deletions src/app/supporters/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import Description from "~/components/supporters/description";
import SteeringCommittee from "~/components/supporters/steering_committee";
import Members from "~/components/supporters/contributors";
// import ContactUs from "../../components/supporters/contact_us";
import JoinUs from "~/components/supporters/join_us";
import RoleDescription from "~/components/supporters/role_description";

export default function Supporters() {
return (
<div className="items-center justify-center">
<div className="container mx-auto px-4 md:px-8 lg:px-48">
<Description />
<SteeringCommittee />
<Members />
</div>
<div className="container mx-auto px-4 md:px-8 lg:px-20">
<JoinUs />
<RoleDescription />
</div>
</div>
);
}
33 changes: 6 additions & 27 deletions src/components/homepage/hero.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
/* eslint-disable */

"use client";
import Image from "next/image";
import Link from "next/link";
import RenderLogos from "../reusables/render-logo";

const logos = [
{
Expand Down Expand Up @@ -83,30 +86,6 @@ const logos = [
},
];

const renderLogos = (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a quick note for RenderLogos and renderLogos here. Everything else looks good to me now. Thanks!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes while code conflict it updated wrongly. Corrected it now

logos: {
name: string;
src: string;
width: number;
height: number;
}[],
className: string
) => {
return logos.map((logo, i) => (
<div key={i} className={className}>
<Image
key={logo.name}
unoptimized
src={logo.src}
alt={logo.name}
className="pt-4"
height={logo.height}
width={logo.width}
/>
</div>
));
};

const Hero = () => {
return (
<div className="mx-auto container bg-[#00142B] md:py-36 w-screen py-12">
Expand Down Expand Up @@ -169,14 +148,14 @@ const Hero = () => {
GET INVOLVED
</div>
<div className="grid grid-cols-1 md:grid-cols-3 items-center justify-center lg:grid-cols-5 gap-3 pb-8 md:pb-3">
{renderLogos(
{RenderLogos(
logos.slice(0, 10),
"lg:self-center lg:flex lg:justify-center"
)}
{renderLogos(logos.slice(10, 13), "lg:hidden")}
{RenderLogos(logos.slice(10, 13), "lg:hidden")}
</div>
<div className="grid grid-cols-1 md:grid-cols-3 items-center justify-center lg:grid-cols-3 lg:px-20 gap-3 pb-8 md:py-3">
{renderLogos(
{RenderLogos(
logos.slice(10, 13),
"hidden lg:self-center lg:flex lg:justify-center"
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/layout/footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Button } from "components/ui/button";

const Footer = () => {
return (
<div className="absolute bottom-8 lg:bottom-2 mt-4 flex flex-col sm:mt-0 sm:justify-center md:flex-row md:space-x-5 w-full">
<div className="absolute bg-[#00142B] bottom-8 lg:bottom-2 mt-4 flex flex-col sm:mt-0 sm:justify-center md:flex-row md:space-x-5 w-full py-4">
<div className="container mx-auto px-2 flex items-end justify-end lg:items-start lg:justify-start gap-3 md:gap-4">
<Button
asChild
Expand Down
30 changes: 27 additions & 3 deletions src/components/layout/nav-bar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,43 @@ import { Button } from "components/ui/button";

const Navbar = () => {
const navItems = [
{
name: "Supporters",
href: "/supporters",
segmentMsg: "agntcy supporters clicked",
target: "_self",
segmentOpt: {
link_label: "Supporters",
location: "global header",
resource_interaction: "Visit supporters page",
},
},
{
name: "Github",
href: "https://github.com/agntcy",
target: "_blank",
segmentMsg: "agntcy github clicked",
segmentOpt: {
link_label: "Github",
location: "global header",
resource_interaction: "Visit GitHub repositoty",
},
},
// {
// name: "Resources",
// href: "/resources",
// target: "_self",
// segmentMsg: "agntcy resources clicked",
// segmentOpt: {
// link_label: "Resources",
// location: "global header",
// resource_interaction: "Visit resources page",
// },
// },
{
name: "Documentation",
href: "https://docs.agntcy.org",
target: "_blank",
segmentMsg: "agntcy doc clicked",
segmentOpt: {
link_label: "Documentation",
Expand Down Expand Up @@ -59,7 +83,7 @@ const Navbar = () => {
<Link
key={item.name}
href={item.href}
target={"_blank"}
target={item.target}
// segmentMsg={item.segmentMsg}
// segmentOpt={item.segmentOpt}
>
Expand All @@ -77,7 +101,7 @@ const Navbar = () => {
// resource_interaction: "email signup",
// }}
>
<div className="flex-shrink-0 text-xl font-bold text-[#FBAB2C] hover:text-[#00142B] transition ease-in-out hover:bg-[#FBAB2C] border-2 border-[#FBAB2C] py-3 px-5 rounded-full">
<div className="flex-shrink-0 text-center text-xl font-bold text-[#FBAB2C] hover:text-[#00142B] transition ease-in-out hover:bg-[#FBAB2C] border-2 border-[#FBAB2C] py-3 md:py-0 lg:py-3 xl:py-3 2xl:py-3 px-5 rounded-full">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lg:py-3 xl:py-3 2xl:py-3 looks a little repetitive here to me. The UI should look the same if you remove xl:py-3 2xl:py-3 since they have the same value(py-3).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure updated!

Join us
</div>
</Link>
Expand Down Expand Up @@ -128,7 +152,7 @@ const Navbar = () => {
<Link
key={item.name}
href={item.href}
target={"_blank"}
target={item.target}
// segmentMsg={item.segmentMsg}
// segmentOpt={item.segmentOpt}
>
Expand Down
96 changes: 96 additions & 0 deletions src/components/reusables/hubspot-contact-form.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
"use client";
import React, { useEffect, useState } from "react";
import "~/styles/form.css";
// import { analytics } from "lib/segment";
// import { useRouter } from "next/navigation";

declare global {
interface Window {
lintrk: any;
}
}

const HubspotContactForm = ({
region,
portalId,
formId,
// segmentMsg = "AGNTCY supporter details submitted",
}: { portalId: string; formId: string; region: string; }) => {
// const router = useRouter();
const [loading, setLoading] = useState(true);

useEffect(() => {
const element = document.getElementsByClassName("hsfc-TextField");
if(element)
{
setLoading(false);
}
},[])

useEffect(() => {
const script = document.createElement("script");
script.src = "https://js.hsforms.net/forms/embed/v2.js";
document.body.appendChild(script);

script.addEventListener("load", () => {
// @ts-expect-error: Third-party library
if (window.hbspt) {
// @ts-expect-error: Third-party library
window.hbspt.forms.create({
target: `#hubspotForm-${formId}`,
// onFormSubmit: () => {
// if (conversion_id) {
// window.lintrk("track", { conversion_id: conversion_id });
// }
// },
// onFormSubmitted: (_, data) => {
// if formId is 7f3330bd-39c5-4358-b56d-44b90ae62e8e, redirect to thank you page
// if (formId == "7f3330bd-39c5-4358-b56d-44b90ae62e8e") {
// router.push("/outshift-newsletter-thank-you");
// }
// const submissionValues = data.submissionValues;

// Segment Identify Call
// analytics.identify({
// firstname: submissionValues.firstname,
// lastname: submissionValues.lastname,
// email: submissionValues.email,
// jobtitle: submissionValues.jobtitle,
// agreed_to_pii:
// submissionValues.consent_marketing_emails_and_privacy_policy,
// });

// Segment Track Call
// analytics.track(segmentMsg, {
// firstname: submissionValues.firstname,
// lastname: submissionValues.lastname,
// email: submissionValues.email,
// jobtitle: submissionValues.jobtitle,
// agreed_to_pii:
// submissionValues.consent_marketing_emails_and_privacy_policy,
// });
// },
...{ region: region, portalId: portalId, formId: formId },
});
}
setTimeout(() => {
const formElement = document.querySelector(`#hubspotForm-${formId}`);
if (formElement) {
// Remove invalid role attributes
const invalidRoles =
formElement.querySelectorAll('[role="checkbox"]');
invalidRoles.forEach((el) => el.removeAttribute("role"));
}
}, 500);
});
}, [region, portalId, formId]);

return (
<div>
{loading && <div className="loader">Loading form...</div>}
<div id={`hubspotForm-${formId}`}></div>
</div>
);
};

export default HubspotContactForm;
2 changes: 1 addition & 1 deletion src/components/reusables/link-trackers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const LinkTrackers: React.FC<LinkTrackersProps> = ({
) => {
const baseUrl = `${window.location.protocol}//${window.location.host}`;
const currentPath = pathname || window.location.pathname;
const queryString = searchParams.toString();
const queryString = searchParams?.toString();
const fullPath = queryString
? `${currentPath}?${queryString}`
: currentPath;
Expand Down
28 changes: 28 additions & 0 deletions src/components/reusables/render-logo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import Image from "next/image";

const RenderLogos = (
logos: {
name: string;
src: string;
width: number;
height: number;
}[],
className: string,
) => {
return logos.map((logo, i) => (
<div key={i} className={className}>
<Image
key={logo.name}
unoptimized
src={logo.src}
alt={logo.name}
className="pt-4"
height={logo.height}
width={logo.width}
/>
</div>
));
};

export default RenderLogos;

36 changes: 36 additions & 0 deletions src/components/reusables/table.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
// components/Table.tsx
import React from "react";

interface TableProps {
headers: string[];
data: Array<{ [key: string]: string | number }>;
}

const Table: React.FC<TableProps> = ({ headers, data }) => {
return (
<table style={{ border: "1px solid black", borderCollapse: "collapse", width: "100%", borderRadius: "20px" }}>
<thead>
<tr>
{headers.map((header, index) => (
<th key={index} style={{ border: "1px solid black", borderColor:"white", verticalAlign: "top", textAlign: "left", padding: "8px", color: "white", fontWeight: "bold", backgroundColor: "#187ADC", paddingTop: "12px", paddingBottom: "12px", paddingLeft: "12px", paddingRight: "12px" }}>
{header}
</th>
))}
</tr>
</thead>
<tbody>
{data.map((row, rowIndex) => (
<tr key={rowIndex}>
{headers.map((header, colIndex) => (
<td key={colIndex} style={{ border: "1px solid black", borderColor:"white", padding: "8px", color: "white", backgroundColor: "#00142B", whiteSpace: "pre-line", verticalAlign: "top", paddingTop: "12px", paddingBottom: "12px", paddingLeft: "12px", paddingRight: "12px" }}>
{row[header]}
</td>
))}
</tr>
))}
</tbody>
</table>
);
};

export default Table;
37 changes: 37 additions & 0 deletions src/components/supporters/contact_us.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
"use client";
import Image from "next/image";
import HubspotContactForm from "../reusables/hubspot-contact-form";

const ContactUs = () => {
return (
<div className="container rounded-2xl md:py-36 w-[100%] md:w-[100%] lg:w-[80%] xl:w-[70%] py-12 mb-8 pl-4 pr-4 lg:py-12 lg:pl-56 lg:pr-0 xl:ml-56 xl:mr-56 xl:mb-24 xl:px-20 2xl:pl-[0%] 2xl:pr-0">
<div className="w-full 2xl:max-w-fit py-0 pb-12">
<div className="col-span-1 sm:pt-0 sm:pb-12 px-4 ">
<div className="flex items-center justify-center">
<Image
unoptimized
src={"/images/logo_orange.png"}
alt="Logo"
className="pt-4"
height={300}
width={300}
/>
</div>
<div className="py-6 flex text-white text-lg">
<h3>If you're using AGNTCY in your organization or desire to show your support for an open, interoperable internet of agents, please fill out this form to add your company name to the list.</h3>
</div>
</div>
<div className="px-0 relative py-0 bg-white rounded-xl">
<HubspotContactForm
region="na1"
portalId="19886599"
// conversion_id='15706732'
formId="78489991-a791-474b-b7e6-38e53f887820"
/>
</div>
</div>
</div>
);
};

export default ContactUs;
Loading
Loading