Skip to content

Commit

Permalink
feat: Add @typeform/embed-react dependency and update banner and type…
Browse files Browse the repository at this point in the history 
…form components
  • Loading branch information
@guillecro
guillecro committed May 20, 2024
1 parent 0443352 commit e772285
Show file tree
Hide file tree
Showing 8 changed files with 238 additions and 81 deletions.
44 changes: 40 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"@mui/material": "^5.14.18",
"@react-input/mask": "^1.0.20",
"@reduxjs/toolkit": "^2.1.0",
"@typeform/embed-react": "^3.17.0",
"axios": "^1.6.2",
"bulma": "^0.9.4",
"js-cookie": "^3.0.5",
Expand Down
41 changes: 41 additions & 0 deletions public/icon/mail-pink.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
116 changes: 64 additions & 52 deletions src/components/home/banner-participativo.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Link from "next/link";

import { CARD_PARTICIPATIVO } from "@/utils/constants";
import TypeformCardHome from "@/components/home/typeform-card-home";
import Image from "next/image";

export function BannerParticipativo() {
Expand All @@ -9,62 +10,73 @@ export function BannerParticipativo() {
className="banner-participativo has-text-centered has-background-cream py-6"
id="banner-participativo"
>
<h1 className="has-text-color-white has-text-centered is-size-2 is-size-4-touch has-text-weight-bold">
¿Cómo Participar?
</h1>
<div className="card-group is-flex is-justify-content-center my-4">
{CARD_PARTICIPATIVO.map((card, idx) => (
<div
key={idx}
className="card m-3 py-4 is-flex is-flex-direction-column"
>
<div className="card-image pt-5 has-text-centered">
<Image
src={`/icon/${card.icon}`}
width={0}
height={0}
sizes="100vw"
className="icon-card"
/>
</div>
<div className="card-content py-0 has-text-centered has-text-white is-flex-grow-1 is-flex is-flex-direction-column is-justify-content-space-evenly">
<div className="title is-size-3 is-size-4-touch">
{card.title_es}
<h5 className="is-size-5 is-italic">
{card.title_pt}
</h5>
</div>
<div className="card-description">
<p className="has-text-weight-bold is-size-5">
{card.description_es}
</p>
<p className="is-size-6 is-italic">
{card.description_pt}
</p>
<div className="container">
<h1 className="has-text-color-white has-text-centered is-size-2 is-size-4-touch has-text-weight-bold">
¿Cómo Participar?
</h1>
<div className="columns" id="columns-participativo">
{CARD_PARTICIPATIVO.map((card, idx) => (
<div className="column" key={idx}>
<div
className="card m-3 py-4 is-flex is-flex-direction-column"
>
<div className="card-image pt-5 has-text-centered">
<Image
src={`/icon/${card.icon}`}
width={0}
height={0}
sizes="100vw"
className="icon-card"
alt=""
/>
</div>
<div className="card-content py-0 has-text-centered has-text-white is-flex-grow-1 is-flex is-flex-direction-column is-justify-content-space-evenly">
<div className="title is-size-3 is-size-4-touch">
{card.title_es}
<h5 className="is-size-5 is-italic">
{card.title_pt}
</h5>
</div>
<div className="card-description">
<p className="has-text-weight-bold is-size-5">
{card.description_es}
</p>
<p className="is-size-6 is-italic">
{card.description_pt}
</p>
</div>
</div>
<footer className="card-footer is-justify-content-center py-4">
<Link
href={card.button_action}
className="button is-rounded has-background-white has-text-black is-uppercase w-75"
>
{card.button_text}
</Link>
</footer>
</div>
</div>
<footer className="card-footer is-justify-content-center py-4">
<Link
href={card.button_action}
className="button is-rounded has-background-white has-text-black is-uppercase w-75"
>
{card.button_text}
</Link>
</footer>
))}
</div>
<div className="columns" id="columns-typeform">
<div className="column">

<TypeformCardHome typeformId="GXLzKp8e" />
</div>
))}
</div>
<Link
href="#banner-pacto"
className="button is-rounded is-uppercase px-6 is-cream has-text-brown has-text-weight-bold "
>
<div className="is-flex is-flex-direction-column">
<p>conoce más</p>
<p className="has-text-weight-light is-italic is-size-7">
*Saiba mais
</p>
</div>
</Link>
<Link
id="boton-conocer-mas"
href="#banner-pacto"
className="button is-rounded is-uppercase is-cream has-text-brown has-text-weight-bold px-4"
>
<div className="is-flex is-flex-direction-column">
<p>conoce más</p>
<p className="has-text-weight-light is-italic is-size-7">
*Saiba mais
</p>
</div>
</Link>
</div>
</div>
);
}
2 changes: 1 addition & 1 deletion src/components/home/banner-resurgente.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import VideoBanner from "./video-banner";

export default function BannerResurgente(){
export default function BannerResurgente(){
return <div className=" banner-re-surgente">
<div className="content has-background-orange is-flex is-align-items-center">
<div className="title is-size-1 is-size-3-touch">¿Qué es <br />
Expand Down
57 changes: 57 additions & 0 deletions src/components/home/typeform-card-home.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
'use client'
import { PopupButton } from '@typeform/embed-react';
import Image from 'next/image';


const TypeformCardHome = ({ typeformId }) => {
// Your component logic here

return (
<div
className="card m-3 py-4 is-flex is-flex-direction-column"
>
<div className="card-image pt-5 has-text-centered">
<Image
src={`/icon/mail-pink.svg`}
width={0}
height={0}
sizes="100vw"
className="icon-card"
alt=""
/>
</div>
<div className="card-content py-0 has-text-centered has-text-white is-flex-grow-1 is-flex is-flex-direction-column is-justify-content-space-evenly">
<div className="title is-size-3 is-size-4-touch">
Completá nuestra encuesta
<h5 className="is-size-5 is-italic">
{/* PT */}
Complete nossa pesquisa
</h5>
</div>
<div className="card-description">
<p className="has-text-weight-bold is-size-5">
Queremos saber más sobre la crisis climática en la región y su impacto en las personas
</p>
<p className="is-size-6 is-italic">
{/* PT */}
Queremos saber mais sobre a crise climática na região e seu impacto nas pessoas
</p>
</div>
</div>
<footer className="card-footer is-justify-content-center py-4">
<div>

<PopupButton id={typeformId} className="button is-rounded has-background-pink has-text-white is-uppercase">
{/* Both Es & PT */}
Completar encuesta
</PopupButton>
<br />
<span className="is-size-7">*Preencha a pesquisa</span>
</div>
</footer>
</div>

);
};

export default TypeformCardHome;
4 changes: 2 additions & 2 deletions src/components/layout/quienes-somos.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function QuienesSomos() {

<h1 className="title is-1 has-text-centered">¿Quienes somos?</h1>
{/* subtitle in portuguese */}
<h5 className="subtitle is-5 has-text-centered">Quem somos?</h5>
<h5 className="subtitle is-5 has-text-centered is-italic">Quem somos?</h5>
<br />
<div className="columns is-centered is-vcentered is-mobile is-multiline">
<div className="column is-4-desktop is-narrow-tablet is-12-mobile has-text-centered">
Expand All @@ -33,7 +33,7 @@ export default function QuienesSomos() {
</div>
<div className="column is-4-desktop is-narrow-tablet is-12-mobile has-text-centered">
<a href="https://ideemos.org/" target="_blank" rel="noreferrer">
<img style={{width: '100%', padding: '0 10px', maxWidth: 350, margin: '0 auto' }} src="https://democraciaenred.nyc3.digitaloceanspaces.com/projects/asambleasclimaticas/demos-logo.png" alt="" />
<img style={{width: '100%', padding: '0 10px', maxWidth: 250, margin: '0 auto' }} src="https://democraciaenred.nyc3.digitaloceanspaces.com/projects/asambleasclimaticas/demos-logo.png" alt="" />
</a>
</div>
</div>
Expand Down
Loading

0 comments on commit e772285

Please sign in to comment.