From 462305579e909b4070f4226647e13e8391e51abb Mon Sep 17 00:00:00 2001 From: Sachintha Lakmin <68807141+sachintha-lk@users.noreply.github.com> Date: Fri, 6 Dec 2024 20:51:40 +0530 Subject: [PATCH 1/4] refactor sponsor display and card colors for light mode --- src/app/page.tsx | 60 ++++++++++++++++++++----------- src/components/ui/card-design.tsx | 26 ++++++++++---- tailwind.config.ts | 8 ++++- 3 files changed, 67 insertions(+), 27 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index e13d4bc..0796667 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -181,18 +181,18 @@ const Loading =()=> { const Para = ({ level, name, imgURL, loadCallback }: { level: string, name: string, imgURL: string | undefined, loadCallback?: (count: number) => void }): React.ReactNode => { const color = level ==="Gold"?"custom-color-gold dark:custom-dark-color-gold":(level ==="Silver"?"custom-color-silver dark:custom-dark-color-silver":"custom-color-bronze dark:custom-dark-color-bronze") return ( -
-
- {`${level} Sponsor`} +
+
+ {level}
Sponsor
Sponsor -
+
{name}
@@ -374,21 +374,41 @@ export default function Home() { ) : sponsors.length > 0 ? ( - {sponsors - .filter((sponsor) => ["Gold", "Silver", "Bronze"].includes(sponsor.level)) - .map((sponsor, index) => { - - return ( - - - - )} - )} - + {/* Gold sponsors (separate row) */} +
+ {sponsors + .filter((sponsor) => sponsor.level === "Gold") + .map((sponsor, index) => ( + + + + ))} +
+ + {/* Silver and Bronze sponsors (same row) */} +
+ {sponsors + .filter((sponsor) => ["Silver", "Bronze"].includes(sponsor.level)) + .sort((a, b) => { + const levels: { [key: string]: number } = { Gold: 1, Silver: 2, Bronze: 3 }; + return levels[a.level] - levels[b.level]; + }) + .map((sponsor, index) => ( + + + + ))} +
+ + ) : ( )} diff --git a/src/components/ui/card-design.tsx b/src/components/ui/card-design.tsx index 9143d29..da32e2b 100644 --- a/src/components/ui/card-design.tsx +++ b/src/components/ui/card-design.tsx @@ -34,7 +34,20 @@ export const CardDesign: React.FC = ({ }, }; - return ( + const gradientClass = CardColor === "Gold" + ? "bg-[radial-gradient(circle_farthest-side_at_50%_50%,rgba(175,149,0,1),rgba(175,149,0,0.5),rgba(175,149,0,1),rgba(175,149,0,0.5))]" + : CardColor === "Silver" + ? "bg-[radial-gradient(circle_farthest-side_at_50%_50%,rgb(165,169,180,1),rgb(165,169,180,0.7),rgb(165,169,180,0.4),rgb(165,169,180,0.5))]" + : "bg-[radial-gradient(circle_farthest-side_at_50%_50%,rgba(190,121,54,1),rgba(190,121,54,0.7),rgba(190,121,54,0.4),rgba(190,121,54,0.5))]"; + + // const gradientClass = CardColor === "Gold" + // ? "bg-[radial-gradient(circle_farthest-side_at_0_100%,rgba(175,149,0,1),transparent),radial-gradient(circle_farthest-side_at_100%_0,rgba(175,149,0,0.7),transparent),radial-gradient(circle_farthest-side_at_100%_100%,rgba(175,149,0,0.4),transparent),radial-gradient(circle_farthest-side_at_0_0,rgba(175,149,0,0.2),rgba(175,149,0,0.2))]" + // : CardColor === "Silver" + // ? "bg-[radial-gradient(circle_farthest-side_at_0_100%,rgba(215,215,215,1),transparent),radial-gradient(circle_farthest-side_at_100%_0,rgba(215,215,215,0.7),transparent),radial-gradient(circle_farthest-side_at_100%_100%,rgba(215,215,215,0.4),transparent),radial-gradient(circle_farthest-side_at_0_0,rgba(215,215,215,0.2),rgba(215,215,215,0.2))]" + // : "bg-[radial-gradient(circle_farthest-side_at_0_100%,rgba(190,121,54,1),transparent),radial-gradient(circle_farthest-side_at_100%_0,rgba(190,121,54,0.7),transparent),radial-gradient(circle_farthest-side_at_100%_100%,rgba(190,121,54,0.4),transparent),radial-gradient(circle_farthest-side_at_0_0,rgba(190,121,54,0.2),rgba(190,121,54,0.2))]"; + + return ( +
= ({ style={{ backgroundSize: animate ? "400% 400%" : undefined, }} + className={cn( "absolute inset-0 rounded-3xl z-[1] opacity-60 group-hover:opacity-100 blur-xl transition duration-500 will-change-transform", - "bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]" + gradientClass )} /> @@ -76,11 +90,11 @@ export const CardDesign: React.FC = ({ }} className={cn( "absolute inset-0 rounded-3xl z-[1] will-change-transform", - "bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]" - )} + gradientClass + )} /> -
+
{children}
@@ -90,7 +104,7 @@ export const CardDesign: React.FC = ({ export const Para: React.FC = ({ name, imgURL, level, description }) => { return (
-

{level} Sponsor

+

{level} Sponsor

Date: Mon, 9 Dec 2024 15:53:43 +0530 Subject: [PATCH 2/4] add website field to data aggregation --- functions/src/companyDataAggregator.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/functions/src/companyDataAggregator.ts b/functions/src/companyDataAggregator.ts index ad78caa..c17852b 100644 --- a/functions/src/companyDataAggregator.ts +++ b/functions/src/companyDataAggregator.ts @@ -22,6 +22,7 @@ const SELECTED_FIELDS = [ "preferredFields", "qualitiesToLook", "dataConfirmed", + "website", ]; From 35e5fcc9c8c7561447adc24f386fec1980b508f5 Mon Sep 17 00:00:00 2001 From: Ishan Sasanka <166486873+dmisasanka2002@users.noreply.github.com> Date: Tue, 10 Dec 2024 15:16:20 +0530 Subject: [PATCH 3/4] fixed design issu --- src/app/page.tsx | 343 +++++++++++---------- src/components/blocks/reach-us-section.tsx | 82 +++-- src/components/ui/floating-navbar.tsx | 189 ++++++------ src/components/ui/google-gemini-effect.tsx | 55 ++-- src/components/ui/navbar-menu.tsx | 54 ++-- tailwind.config.ts | 3 + 6 files changed, 378 insertions(+), 348 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 0796667..4c599de 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,28 +1,28 @@ -"use client" +"use client"; import ResponsiveHero from "@/components/ui/responsiveHero"; import RootLayout from "./layout"; import { FloatingNav } from "@/components/ui/floating-navbar"; import React, { useEffect, useState } from "react"; -import RUR_IMG1 from "../../public/Images/RUR (1).jpg" -import RUR_IMG2 from "../../public/Images/RUR (2).jpg" -import RUR_IMG3 from "../../public/Images/RUR (3).jpg" -import RUR_IMG4 from "../../public/Images/RUR (4).jpg" -import RUR_IMG5 from "../../public/Images/RUR (5).jpg" -import RUR_IMG6 from "../../public/Images/RUR (6).jpg" -import RUR_IMG7 from "../../public/Images/RUR (7).jpg" -import RUR_IMG8 from "../../public/Images/RUR (8).jpg" -import RUR_IMG9 from "../../public/Images/RUR (9).jpg" -import RUR_IMG10 from "../../public/Images/RUR (10).jpg" -import RUR_IMG11 from "../../public/Images/RUR (11).jpg" -import RUR_IMG12 from "../../public/Images/RUR (12).jpg" -import RUR_IMG13 from "../../public/Images/RUR (13).jpg" -import RUR_IMG14 from "../../public/Images/RUR (14).jpg" -import RUR_IMG15 from "../../public/Images/RUR (15).jpg" - -import SPONSOR from "../../public/Images/partners/the-ai-team.png" +import RUR_IMG1 from "../../public/Images/RUR (1).jpg"; +import RUR_IMG2 from "../../public/Images/RUR (2).jpg"; +import RUR_IMG3 from "../../public/Images/RUR (3).jpg"; +import RUR_IMG4 from "../../public/Images/RUR (4).jpg"; +import RUR_IMG5 from "../../public/Images/RUR (5).jpg"; +import RUR_IMG6 from "../../public/Images/RUR (6).jpg"; +import RUR_IMG7 from "../../public/Images/RUR (7).jpg"; +import RUR_IMG8 from "../../public/Images/RUR (8).jpg"; +import RUR_IMG9 from "../../public/Images/RUR (9).jpg"; +import RUR_IMG10 from "../../public/Images/RUR (10).jpg"; +import RUR_IMG11 from "../../public/Images/RUR (11).jpg"; +import RUR_IMG12 from "../../public/Images/RUR (12).jpg"; +import RUR_IMG13 from "../../public/Images/RUR (13).jpg"; +import RUR_IMG14 from "../../public/Images/RUR (14).jpg"; +import RUR_IMG15 from "../../public/Images/RUR (15).jpg"; + +import SPONSOR from "../../public/Images/partners/the-ai-team.png"; // import LoadingAnimation from "../../public/animations/RUR.json" -import LoadingAnimation from "../../public/animations/RUR_Loading.json" +import LoadingAnimation from "../../public/animations/RUR_Loading.json"; import { Timeline } from "@/components/ui/timeline"; import Image from "next/image"; @@ -31,13 +31,18 @@ import ReachUsSection from "@/components/blocks/reach-us-section"; import Footer from "@/components/blocks/footer"; import { GridBackground } from "@/components/ui/backgrounds"; import { ISponsor } from "@/interfaces/ISponsors"; -import {getDataFromAggregatedDoc} from "@/services/aggregatedData.service"; +import { getDataFromAggregatedDoc } from "@/services/aggregatedData.service"; import { ITimelineData } from "@/interfaces/ITimeline"; import { HeroHighlight } from "@/components/ui/hero-highlight"; import { Highlighter } from "@/components/blocks/hilight"; -import { HomeIcon, ClockIcon , MegaphoneIcon , PhoneArrowUpRightIcon } from "@heroicons/react/24/solid"; +import { + HomeIcon, + ClockIcon, + MegaphoneIcon, + PhoneArrowUpRightIcon, +} from "@heroicons/react/24/solid"; import { TextGenerateEffect } from "@/components/ui/text-generate-effect"; -import {CardDesign} from "@/components/ui/card-design"; +import { CardDesign } from "@/components/ui/card-design"; import Lottie from "react-lottie-player"; import { IContact } from "@/interfaces/IContacts"; import RegistrationStatus from "@/components/ui/google-gemini-effect"; @@ -52,146 +57,157 @@ export const products = [ { title: "Are You Ready?", link: "#", - thumbnail: - RUR_IMG1, + thumbnail: RUR_IMG1, }, { title: "Are You Ready?", link: "#", - thumbnail: - RUR_IMG2, + thumbnail: RUR_IMG2, }, { title: "Are You Ready?", link: "#", - thumbnail: - RUR_IMG3, + thumbnail: RUR_IMG3, }, { title: "Are You Ready?", link: "#", - thumbnail: - RUR_IMG4, + thumbnail: RUR_IMG4, }, { title: "Are You Ready?", link: "#", - thumbnail: - RUR_IMG5, + thumbnail: RUR_IMG5, }, { title: "Are You Ready?", link: "#", - thumbnail: - RUR_IMG6, + thumbnail: RUR_IMG6, }, { title: "Are You Ready?", link: "#", - thumbnail: - RUR_IMG7, + thumbnail: RUR_IMG7, }, { title: "Are You Ready?", link: "#", - thumbnail: - RUR_IMG8, + thumbnail: RUR_IMG8, }, { title: "Are You Ready?", link: "#", - thumbnail: - RUR_IMG9, + thumbnail: RUR_IMG9, }, { title: "Are You Ready?", link: "#", - thumbnail: - RUR_IMG10, + thumbnail: RUR_IMG10, }, { title: "Are You Ready?", link: "#", - thumbnail: - RUR_IMG11, + thumbnail: RUR_IMG11, }, { title: "Are You Ready?", link: "#", - thumbnail: - RUR_IMG12, + thumbnail: RUR_IMG12, }, { title: "Are You Ready?", link: "#", - thumbnail: - RUR_IMG13, + thumbnail: RUR_IMG13, }, { title: "Are You Ready?", link: "#", - thumbnail: - RUR_IMG14, + thumbnail: RUR_IMG14, }, { title: "Are You Ready?", link: "#", - thumbnail: - RUR_IMG15, + thumbnail: RUR_IMG15, }, - ]; - const navItms = [ { - name: 'Home', - link: '/', + name: "Home", + link: "/", icon: , }, { - name: 'Timeline', - link: '#timeline', + name: "Timeline", + link: "#timeline", icon: , }, { - name: 'Sponsors', - link: '#sponsors', + name: "Sponsors", + link: "#sponsors", icon: , }, { - name: 'Reach Us', - link: '#reach_us', + name: "Reach Us", + link: "#reach_us", icon: , }, ]; -console.log("Home Page"); - +console.log("Home Page"); -const Loading =()=> { +const Loading = () => { return (
); -} +}; +const Para = ({ + level, + name, + imgURL, + loadCallback, +}: { + level: string; + name: string; + imgURL: string | undefined; + loadCallback?: (count: number) => void; +}): React.ReactNode => { + const color = + level === "Gold" + ? "custom-color-gold dark:custom-dark-color-gold" + : level === "Silver" + ? "custom-color-silver dark:custom-dark-color-silver" + : "custom-color-bronze dark:custom-dark-color-bronze"; -const Para = ({ level, name, imgURL, loadCallback }: { level: string, name: string, imgURL: string | undefined, loadCallback?: (count: number) => void }): React.ReactNode => { - const color = level ==="Gold"?"custom-color-gold dark:custom-dark-color-gold":(level ==="Silver"?"custom-color-silver dark:custom-dark-color-silver":"custom-color-bronze dark:custom-dark-color-bronze") return (
-
- {level}
Sponsor +
+ {level} +
+ Sponsor
- Sponsor + + {/* Image Section */} +
+ Sponsor +
+ + {/* Sponsor Name */}
{name}
@@ -221,25 +237,25 @@ export default function Home() { const [isSponsorsLoading, setSponsorsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); - const [isLoadingAnimComplete , setIsLoadingAnimComplete] = useState(false); + const [isLoadingAnimComplete, setIsLoadingAnimComplete] = useState(false); const [reachUsContacts, setReachUsContacts] = useState([] as IContact[]); const [isReachUsGridLoading, setIsReachUsGridLoading] = useState(true); - const loadingTimeout = ()=>{ - console.log("Loading animation timeout"); - setTimeout(() => { - setIsLoadingAnimComplete(true); - }, 2000); -} - - - useEffect(() => { - - sendGTMEvent({ event: 'page view', page: 'home' , path: window.location.pathname }); + const loadingTimeout = () => { + console.log("Loading animation timeout"); + setTimeout(() => { + setIsLoadingAnimComplete(true); + }, 2000); + }; + useEffect(() => { + sendGTMEvent({ + event: "page view", + page: "home", + path: window.location.pathname, + }); const fetchData = async () => { - // getReachUs().then((data) => { // setGrid(data); // }).catch((err) => { @@ -250,11 +266,9 @@ export default function Home() { // setGridLoading(false); // }); - - try { const data = await getDataFromAggregatedDoc(); - + if (!data) { throw new Error("Failed to fetch data"); } @@ -266,7 +280,11 @@ export default function Home() { } catch (err) { console.error("Error fetching data:", err); setError("Failed to load data. Please try again later."); - sendGTMEvent({ event:'JS_Error' , error_name:'AggregatedDocLoadError', error: err }); + sendGTMEvent({ + event: "JS_Error", + error_name: "AggregatedDocLoadError", + error: err, + }); } finally { setTimelineLoading(false); setSponsorsLoading(false); @@ -275,27 +293,24 @@ export default function Home() { console.log("Data fetched end"); } - }; fetchData(); }, []); + function getEvents() { + const events = timeline.map((t) => ({ + title: t.title, + content: , + eventDate: t.eventDate.toDate(), + btnLink: t.btnLink, + image: t.imgURL, + btnText: t.btnText, + isBtnDisabled: t.isBtnDisabled, + })); - function getEvents(){ - const events = timeline.map((t) => ({ - title: t.title, - content: , - eventDate: t.eventDate.toDate(), - btnLink: t.btnLink, - image: t.imgURL, - btnText: t.btnText, - isBtnDisabled: t.isBtnDisabled, - })); - - return events; -} - + return events; + } const ErrorMessage = ({ message }: { message: string }) => (
@@ -313,41 +328,40 @@ export default function Home() {
); - - - - - const content: string = "\"Are You Ready?\" stands as a monumental initiative led by the Rotaract Club of the University of Moratuwa in partnership with the Career Guidance Unit. Our primary focus is 4th year undergraduates from our university, aiming to guide them towards a secure entry into the professional world. The scope of this endeavor knows no bounds, with over 100 companies aligning to provide opportunities for budding professionals. This project promises to be a valuable asset for those aspiring to forge strong connections with companies and their managers, even if the finish line of their degree is still on the horizon. In the initial stages, participants will gain the essential knowledge and training to confidently engage with industry experts."; + const content: string = + '"Are You Ready?" stands as a monumental initiative led by the Rotaract Club of the University of Moratuwa in partnership with the Career Guidance Unit. Our primary focus is 4th year undergraduates from our university, aiming to guide them towards a secure entry into the professional world. The scope of this endeavor knows no bounds, with over 100 companies aligning to provide opportunities for budding professionals. This project promises to be a valuable asset for those aspiring to forge strong connections with companies and their managers, even if the finish line of their degree is still on the horizon. In the initial stages, participants will gain the essential knowledge and training to confidently engage with industry experts.'; return ( - - + - - - { ( !isLoadingAnimComplete ) && ( -
- -
- )} + + {!isLoadingAnimComplete && ( +
+ +
+ )}
- { - setIsLoadingAnimComplete(true); - }} /> + { + setIsLoadingAnimComplete(true); + }} + />
@@ -365,7 +379,7 @@ export default function Home() {
- {/* */} + {/* */}
{error ? ( @@ -374,52 +388,43 @@ export default function Home() { ) : sponsors.length > 0 ? ( - {/* Gold sponsors (separate row) */} -
- {sponsors - .filter((sponsor) => sponsor.level === "Gold") - .map((sponsor, index) => ( - - - - ))} -
- - {/* Silver and Bronze sponsors (same row) */} -
+ {/* Sponsors Section */} +
{sponsors - .filter((sponsor) => ["Silver", "Bronze"].includes(sponsor.level)) .sort((a, b) => { - const levels: { [key: string]: number } = { Gold: 1, Silver: 2, Bronze: 3 }; - return levels[a.level] - levels[b.level]; + // Custom sorting: Gold first, then Silver, others later + if (a.level === "Gold") return -1; + if (b.level === "Gold") return 1; + if (a.level === "Silver") return -1; + if (b.level === "Silver") return 1; + return 0; // No change for other levels }) .map((sponsor, index) => ( - + ))}
- ) : ( )} - {/* */} -
+
@@ -427,17 +432,15 @@ export default function Home() {
- - -
- {!isReachUsGridLoading && - - } +
+ {!isReachUsGridLoading && ( + + + + )}