Skip to content
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

Added the supporter page and updated the navigations #30

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
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="items-center justify-center bg-[#00142B]">
<ContactUs />
</div>
);
}
9 changes: 9 additions & 0 deletions src/app/resources/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import Hero from "../../components/homepage/hero";

export default function Home() {
return (
<div className="min-h-[calc(100vh-100px)] flex items-center justify-center">
<Hero />
Copy link
Contributor

Choose a reason for hiding this comment

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

I know this page is a placeholder right now. Let's make sure we don't push it live until it is ready.

</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="pl-4 pr-4 md:pl-12 md:pr-12 lg:pl-40 lg:pr-40 xl:pl-72 xl:pr-72 2xl:pl-[20%] 2xl:pr-[0%]">
<Description />
<SteeringCommittee />
<Members />
</div>
<div className="pl-4 pr-4 md:pl-12 md:pr-12 lg:pl-24 lg:pr-24 xl:pl-40 xl:pr-40 2xl:pl-[20%] 2xl:pr-[0%] bg-gradient-to-t from-[#00142B] to-[#187ADC]">
<JoinUs />
<RoleDescription />
</div>
</div>
);
}
35 changes: 6 additions & 29 deletions src/components/homepage/hero.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";
import Image from "next/image";
import Link from "next/link";
import RenderLogos from "../reusables/render-logo";

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

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>
));
};

const Hero = () => {
return (
<div className="mx-auto container bg-[#00142B] md:py-36 w-screen py-12">
Expand Down Expand Up @@ -157,16 +134,16 @@ const Hero = () => {
GET INVOLVED
</div>
<div className="grid grid-cols-1 md:grid-cols-3 items-center justify-center lg:grid-cols-6 gap-3 pb-8 md:pb-3">
{renderLogos(
{RenderLogos(
logos.slice(0, 6),
"lg:self-center lg:flex lg:justify-center"
"lg:self-center lg:flex lg:justify-center",
)}
{renderLogos(logos.slice(6, 11), "lg:hidden")}
{RenderLogos(logos.slice(6, 11), "lg:hidden")}
</div>
<div className="grid grid-cols-1 md:grid-cols-3 items-center justify-center lg:grid-cols-5 lg:px-20 gap-3 pb-8 md:py-3">
{renderLogos(
{RenderLogos(
logos.slice(6, 11),
"hidden lg:self-center lg:flex lg:justify-center"
"hidden lg:self-center lg:flex lg:justify-center",
)}
</div>
</div>
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",
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think the resource page is ready yet. I know this link is in the design file but please confirm with Cindy if we want to hide it in the first release or not (to launch the supporters page).

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 px-5 rounded-full">
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-FieldLabel");
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-[25%] 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