Skip to content

Commit

Permalink
feat: add sponsor section
Browse files Browse the repository at this point in the history
  • Loading branch information
Tacio Medeiros committed Feb 12, 2024
1 parent 0ef906e commit a9fedc1
Show file tree
Hide file tree
Showing 10 changed files with 198 additions and 13 deletions.
1 change: 1 addition & 0 deletions src/back-features/sponsors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const getSponsors = async () => {
return sponsors;
} catch (error) {
console.error(error);
return [];
}
}

Expand Down
9 changes: 5 additions & 4 deletions src/components/footers/footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,16 @@ const Footer: React.FC<FooterProps> = ({ }) => {
<NavItem>
<NavLink href={generateRef("#sponsors")}>Patrocinadores</NavLink>
</NavItem>
{/*(configValues.midiaKit) ? <NavItem>
<NavLink target="_blank" style={{ color: 'red' }} href={configValues.midiaKit}>Seja um patrocinador</NavLink>
</NavItem> : <></>}*/}
{/*(configValues.midiaKit) ? <NavItem>
<NavLink target="_blank" href="https://docs.google.com/document/d/16duFqXn39gR0rs2l-YOZ2UbDEUnG96YMD5mVvQZI_MQ/edit?usp=sharing">Código de conduta</NavLink>
</NavItem> : <></>*/}
{(configValues.midiaKit) ? <NavItem>
<NavLink target="_blank" style={{ color: 'var(--soft-green)' }} href={configValues.midiaKit}>Seja um patrocinador</NavLink>
</NavItem> : <></>}

<NavItem className={styles.FooterRegister}>
<NavLink target="_blank" href={configValues.eventLinkRegistrationUrl}>Se cadastrar</NavLink>
<NavLink target="_blank" href={configValues.eventLinkRegistrationUrl}>Inscreva-se</NavLink>
</NavItem>
{/*<NavItem>
<NavLink href="#">Organizadores</NavLink>
Expand Down
1 change: 0 additions & 1 deletion src/components/hero-section/iwd-2024/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ export const HeroSection = () => {
url="https://www.youtube.com/embed/uY9nDt4swuU?si=EvquzOhd_7EjRulP"
open={open}
toggle={() => {
console.log('foi')
toggle()
}}
/>
Expand Down
72 changes: 72 additions & 0 deletions src/components/iwd-2024/sponsors-section/Sponsors.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
.SponsorSection {
margin-bottom: 100px;
padding: 0 0.6rem;
}

.SponsorSection h2 {
background-color: var(--soft-green-light);
border-radius: 0.5rem;
color: var(--white);
margin: 0;
height: fit-content;
width: fit-content;
padding: 0 0.75rem;
}

.SponsorWrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(152px, 20%), 1fr));
grid-gap: 8px;
padding: 20px 0px;
margin: 0px 5px;
}


.StaffWrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
grid-gap: 8px;
padding: 20px 0px;
margin: 0px 5px;
}

.SponsorCard {
background-color: var(--default-background-color);
box-shadow: 0 0 2px 0 rgb(0 0 0 / 7%), 0 2px 2px 0 rgb(0 0 0 / 15%);
transition: box-shadow var(--animation);
cursor: pointer;
height: 120px;
display: flex;
justify-content: center;
position: relative;
width: 100%;
}

.SponsorCardBody {
position: relative;
width: 270px;
height: 90px;
display: flex;
justify-content: center;
}

.SponsorCardBodyImage {
max-height: 72px;
max-width: 248px;
object-fit: contain;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%);
padding: 0 1rem;
}

#sponsors {
margin: 10px 0px;
}

@media only screen and (max-width: 580px) {

.ConectorImage {
width: 0px;
}
}
29 changes: 29 additions & 0 deletions src/components/iwd-2024/sponsors-section/sponsor-card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/*eslint-disable*/
import { Sponsor } from "models/sponsor";
import React from "react";
import styles from './Sponsors.module.css'
import Image from 'next/image'


interface SponsorCardProps extends Sponsor {
isStaff?: boolean;
}

const SponsorCard: React.FC<SponsorCardProps> = (sponsor) => {
return (
<a href={sponsor.url} target="_blank">
<div className={styles.SponsorCard}>
<Image
alt={`Logo da empresa ${sponsor.name}`}
src={sponsor.logo}
fill
className={styles.SponsorCardBodyImage}
sizes="(max-width: 768px) , 248px"
/>
</div>
</a>
);
}

export default SponsorCard;

83 changes: 83 additions & 0 deletions src/components/iwd-2024/sponsors-section/sponsors-section.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
/*eslint-disable*/
import { Sponsor } from "models/sponsor";
import {
Container,
Row,
Col,
} from "reactstrap";
import _supports from '../../../hooks/userSupports';
import { SponsorLevel } from "models/sponsor-level";
import SponsorCard from "./sponsor-card";

import styles from './Sponsors.module.css'

interface StringMap { [key: string]: any; }

const SPONSORS_LIST: string[] = ["superior", "diamond", "golden", "silver", "bronze", "ruby", "ametista", "support", "staff"];

interface SponsorsSectionProps {
sponsors: { [key: string]: SponsorLevel },
}

const SponsorsSection: React.FC<SponsorsSectionProps> = ({ sponsors }) => {
return (
<Container style={{ paddingLeft: "0px" }}>
<section className={styles.SponsorSection}>
<Container>
<Row>
<Col lg={4} sm={12}>
<h2>
Patrocinadores
</h2>
</Col>
</Row>
</Container>

{sponsors && (
<Container fluid>
<div id="sponsors">
{SPONSORS_LIST.map((el, i) => {
const sponsorLevel = sponsors[el]
const isStaff = el === "staff"

if (sponsors[el] != null)
return (
<section key={el}>
<h4>
{sponsorLevel.name}
</h4>
<Row>
<div className={isStaff ? styles.StaffWrapper : styles.SponsorWrapper}>
{sponsorLevel.items.map((item) => (
<SponsorCard key={item.name} isStaff={isStaff} {...item} />
))}
</div>
</Row>
</section>
)
})}

{/*<h4>
Organização
</h4>
<div>
<Row>
<div className={styles.SponsorWrapper}>
{
supports.items.map((item: Sponsor) => mapSponsorCard(item, false))
}
</div>
</Row>
</div>*/}
</div>
</Container>
)}
</section>
</Container>
);
}

export default SponsorsSection;

Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
.Testimonial__img {
margin: 0 auto;
margin-top: 1rem;
max-height: 350px;
min-height: 300px;
max-height: 350px;
min-height: 300px;
max-width: 408px;
width: 80%;
position: relative;
Expand Down
12 changes: 6 additions & 6 deletions src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@ import { SponsorLevel } from "models/sponsor-level";

import styles from "styles/Home.module.css";
import HomeHeader from "../components/headers/iwd/home-header";
import SpeakerSection from "components/iwd-2023/speakers-section/speakers-section";
import SponsorsSection from "components/sponsors-section/sponsors-section";
import SponsorsSection from "components/iwd-2024/sponsors-section/sponsors-section";
import CountdownTimer from "components/iwd-2024/countdown/countdown-timer";
import OlderEvenstsSection from "components/iwd-2024/older-events-section/older-events-section";


import ErrorBoundary from '../components/error-boundary';
import { HeroSection } from "components/hero-section/iwd-2024";
import { Testimonials } from "components/iwd-2023/Testimonials";
import { Testimonials } from "components/iwd-2024/testimonials";
import { getSponsors } from "back-features/sponsors";

// https://alvarotrigo.com/blog/css-animations-scroll/

Expand Down Expand Up @@ -67,11 +67,11 @@ const Home = ({ speakers, sponsors, schedule }: HomePageProps) => {
<SpeakerSection speakers={speakers} />
</section>
*/}
<section className={`${styles.Section} Section`}>
<SponsorsSection sponsors={sponsors} />
</section>
*/}


{/*<section className={`${styles.Section} Section`}>
<EventLocationSection />
Expand All @@ -87,7 +87,7 @@ export async function getServerSideProps() {
return {
props: {
speakers: [],// await getSpeaker(),
sponsors: [], //await getSponsors(),
sponsors: await getSponsors(),
schedule: [],//await getSchedule(),
},
};
Expand Down

0 comments on commit a9fedc1

Please sign in to comment.