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.

Sign up for GitHub

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

Om's branch #107

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Om's branch #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fb257b0
Pushing Banner Changes
TheRealJoshi Sep 27, 2024
6ef2468
Removing banner
omjosh1 Oct 29, 2024
387740b
Dynamic banner complete
omjosh1 Nov 12, 2024
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
75 changes: 38 additions & 37 deletions components/Banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,43 +49,44 @@ const Banner = ({ text, link, buttonText }: BannerProps) => {
);
};

const ProductStudioBanner = () => (
<Banner
text="Product Studio is here! Join us this summer for a sprint to create world-class products that solve real world problems."
link="https://studio.v1michigan.com"
buttonText="Learn more &rsaquo;"
/>
);
// const ProductStudioBanner = () => (
// <Banner
// text="Product Studio is here! Join us this summer for a sprint to create world-class products that solve real world problems."
// link="https://studio.v1michigan.com"
// buttonText="Learn more &rsaquo;"
// />
// );

const CohortsApplyBanner = () => (
<Banner
text={
<>
Apply by <span className="font-bold">September 15th</span> to be part of
V1&apos;s <span className="font-bold">Fall Cohort</span>
</>
}
link="/apply"
buttonText="Apply now &rsaquo;"
/>
);
// const CohortsApplyBanner = () => (
// <Banner
// text={
// <>
// Apply by <span className="font-bold">September 15th</span> to be part of
// V1&apos;s <span className="font-bold">Fall Cohort</span>
// </>
// }
// link="/apply"
// buttonText="Apply now &rsaquo;"
// />
// );

const StartupFairBanner = () => (
<Banner
text={
<>
Apply by <span className="font-bold">October 21st</span> to meet top
startups at <span className="font-bold">V1 Startup Fair</span>
</>
}
link="https://startupfair.v1michigan.com"
buttonText="Apply now &rsaquo;"
/>
);
// const StartupFairBanner = () => (
// <Banner
// text={
// <>
// Apply by <span className="font-bold">October 1st</span> to meet top
// startups at <span className="font-bold">V1 Startup Fair</span>
// </>
// }
// link="https://startupfair.v1michigan.com"
// buttonText="Apply now &rsaquo;"
// />
// );

export {
Banner as default,
ProductStudioBanner,
CohortsApplyBanner,
StartupFairBanner,
};
export default Banner;
// export {
// Banner as default,
// ProductStudioBanner,
// CohortsApplyBanner,
// StartupFairBanner,
// };
187 changes: 133 additions & 54 deletions pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
import React, { useEffect, useState } from 'react';
import ReactGA from "react-ga4";
import Projects from "../components/Projects";
import NavbarBuilder from "../components/NavBar";
import Partners from "../components/Partners";
import People, { PeopleChips } from "../components/People";
import Head from "../components/Head";
import GoldButton from "../components/GoldButton";
import { CohortsApplyBanner } from "../components/Banner";
// import { StartupFairBanner } from "../components/Banner";
import Banner from "../components/Banner";
import { createClient } from "@supabase/supabase-js";

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

const supabase = require('@supabase/supabase-js').createClient(supabaseUrl, supabaseKey);

const TenX = () => (
<>
Expand All @@ -18,81 +24,154 @@ const TenX = () => (
);

export default function IndexPage() {
interface BannerData {
id: number;
message: string;
link: string | null;
buttonText: string | null;
}

const [banners, setBanners] = useState<BannerData[] | null>(null);
const [error, setError] = useState<boolean>([]);
const [toggle, setToggle] = useState<boolean>(false);

useEffect(() => {
const fetchBanners = async () => {
let { data: data1, error1 } = await supabase
.from('bannerflags')
.select('*')
.eq('banner_id', '_startupfairPage');

if (error1) {
console.error('Error fetching banner flags:', error1);
setError(true)
} else {
console.log('Data:', data1);
let realQuery = data1[0].link;
let { data: data2, error2 } = await supabase
.from('bannerflags')
.select('*')
.eq('banner_id', `${realQuery}`);
if (realQuery == "false") {
setToggle(false);
}

if (error2) {
console.error('Error fetching banner flags:', error2);
setError(true);
} else {
setBanners(data2 || []);
console.log('Data:', data2);
}
}
};

fetchBanners();
}, []);

return (
<main>
<Head title="University of Michigan" />
{/* <StartupFairBanner /> */}
{/* <CohortsApplyBanner /> */}
<NavbarBuilder />

{(error || banners?.length) == 0 && toggle ? (
<Banner
key={"error"} // Unique key for each banner
text={
<>
{"Invalid banner ID. Please try again later."}
</>
}
link={'#'} // Provide a default link if none exists
buttonText={'Learn more'} // Provide a default button text if none exists
open={true}
/>
) : (
banners && banners.map((banner) =>
banner.message?.length > 0 && (
<Banner
key={banner.id} // Unique key for each banner
text={
<>
{banner.message}
</>
}
link={banner.link || '#'} // Provide a default link if none exists
buttonText={banner.buttonText || 'Learn more'} // Provide a default button text if none exists
open={true}
/>
)
)
)}

<div className="overflow-hidden h-screen bg-[url('/landing.jpg')] bg-cover bg-center bg-no-repeat">
<div className="h-full w-full bg-gradient-to-r from-gray-900/80 to-black/80">
<div className="h-full max-w-4xl mx-auto flex flex-col gap-y-8 justify-center items-center text-center">
<h1 className="tracking-tightest text-white text-5xl md:text-7xl lg:text-8xl font-extrabold p-4">
V1 builds <TenX /> {/* "things" instead of "projects"? */}
projects.
{/* It's time to build. */}
{/* We invest in smart people who believe they can do big things. */}
</h1>
<GoldButton
text="Join us &rsaquo;"
link="/join"
onClick={() =>
ReactGA.event({
category: "Join us",
action: "Clicked top landing page 'Join us' button",
})
}
/>
</div>
<div className="h-full w-full bg-gradient-to-r from-gray-900/80 to-black/80">
<div className="h-full max-w-4xl mx-auto flex flex-col gap-y-8 justify-center items-center text-center">
<h1 className="tracking-tightest text-white text-5xl md:text-7xl lg:text-8xl font-extrabold p-4">
V1 builds <TenX /> {/* "things" instead of "projects"? */}
projects.
{/* It's time to build. */}
{/* We invest in smart people who believe they can do big things. */}
</h1>
<GoldButton
text="Join us &rsaquo;"
link="/join"
onClick={() =>
ReactGA.event({
category: "Join us",
action: "Clicked top landing page 'Join us' button",
})
}
/>
</div>
</div>
</div>

<div className="bg-gray-200">
<div className="max-w-4xl mx-auto py-24 px-4 leading-snug">
<p className="tracking-tightest text-gray-900 text-3xl">
<span className="font-extrabold">V1</span> is the community for
ambitious student builders — engineers, artists, designers,
founders, scientists, and more. We provide the most driven students
with an extraordinary network, exclusive opportunities within
startups, and mentorship to grow and achieve great things.
</p>
</div>
<div className="max-w-4xl mx-auto py-24 px-4 leading-snug">
<p className="tracking-tightest text-gray-900 text-3xl">
<span className="font-extrabold">V1</span> is the community for
ambitious student builders — engineers, artists, designers,
founders, scientists, and more. We provide the most driven students
with an extraordinary network, exclusive opportunities within
startups, and mentorship to grow and achieve great things.
</p>
</div>
</div>

<div className="bg-gray-100 p-4">
<h1 className="max-w-screen-xl mx-auto py-12 tracking-tightest text-center text-gray-800 text-4xl md:text-5xl font-bold p-4">
What&apos;s <TenX />? See for yourself. ⚡
</h1>
<Projects />
<h1 className="max-w-screen-xl mx-auto py-12 tracking-tightest text-center text-gray-800 text-4xl md:text-5xl font-bold p-4">
What&apos;s <TenX />? See for yourself. ⚡
</h1>
<Projects />
</div>

<Partners />

<People />

<div className="bg-gray-100 py-10 flex flex-col justify-center items-center text-center gap-y-12">
<h1 className="font-bold text-gray-900 text-4xl">
You&apos;re in the right place.
</h1>
<PeopleChips />
<GoldButton
text="Join V1 &rsaquo;"
link="/join"
onClick={() =>
ReactGA.event({
category: "Join us",
action: "Clicked bottom landing page 'Join us' button",
})
}
/>
<h1 className="font-bold text-gray-900 text-4xl">
You&apos;re in the right place.
</h1>
<PeopleChips />
<GoldButton
text="Join V1 &rsaquo;"
link="/join"
onClick={() =>
ReactGA.event({
category: "Join us",
action: "Clicked bottom landing page 'Join us' button",
})
}
/>
</div>

<div className="bg-gradient-to-r from-gray-900 to-black">
<p className="footer text-gray-200 text-center font-semibold py-8">
&copy; 2024 V1 @ Michigan |{" "}
<a href="mailto:[email protected]">[email protected]</a>
</p>
<p className="footer text-gray-200 text-center font-semibold py-8">
&copy; 2024 V1 @ Michigan |{" "}
<a href="mailto:[email protected]">[email protected]</a>
</p>
</div>
</main>
);
Expand Down
Loading