Skip to content

Commit

Permalink
Merge pull request #50 from doxa-tech/add-new-home-sections
Browse files Browse the repository at this point in the history 
Ajout des sections "Program" et "Speakers"
  • Loading branch information
@khcr
khcr authored Apr 15, 2024
2 parents 8579eec + 4adf695 commit bfbff25
Show file tree
Hide file tree
Showing 9 changed files with 269 additions and 70 deletions.
Binary file added public/2024/welcome/speakers/Conozco.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/2024/welcome/speakers/CrazyHope.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/2024/welcome/speakers/Horizon Louange.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/2024/welcome/speakers/Luca Martini.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/2024/welcome/speakers/Stephen Hilar.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/2024/welcome/speakers/Yves Bulundwe.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
187 changes: 117 additions & 70 deletions src/components/2024/Program.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,40 +3,73 @@

<section>
<div class="section-container">
<h2>Programme</h2>
<h3>Tous les sites</h3>
<div class="days">
<div class="day">
<h4>Vendredi</h4>
<p>18h00: Ouverture</p>
<p>20h00: Plénière</p>
<p>22h00: Fin de la soirée</p>
<p>00h00: Fermeture</p>
<h4>Vendredi soir</h4>
<div class="timetable">
<div class="line">
<span>18h00</span><div><p>Ouverture de la billetterie</p></div>
</div>
<div class="line">
<span>18h30</span><div><p>Village des stands et fun zone</p></div>
</div>
<div class="line">
<span>19h30</span><div>
<p>Ouverture des portes</p><p>Plénière</p>
</div>
</div>
<div class="line">
<span>22h30</span><div><p>Fin plénière</p><p>After</p></div>
</div>
<div class="line"><span>00h30</span><div><p>Fermeture</p></div></div>
</div>
</div>
<div class="day">
<h4>Samedi</h4>
<p>09h00: Ouverture</p>
<p>10h00: Plénière</p>
<p>12h00: Fin de la matinée</p>
<p>14h00: Ateliers</p>
<p>17h00: Fin des ateliers</p>
<p>20h00: Plénière</p>
<p>22h00: Fin de la soirée</p>
<p>00h00: Fermeture</p>
</div>
</div>
<h3>Fun Zone</h3>
<div class="days">
<div class="day">
<h4>Vendredi</h4>
<p>18h00 à 19h30</p>
<p>22h00 à 00h00</p>
<div class="timetable">
<div class="line">
<span>07h00</span><div><p>Espace déjeuner</p></div>
</div>
<div class="line">
<span>09h30</span><div>
<p>Ouverture des portes</p><p>Plénière</p>
</div>
</div>
<div class="line">
<span>11h30</span><div>
<p>
Journée festival! Plusieurs activités, 25 ateliers, le village
des stands, la fun zone, les artistes sur la scène libre
</p>
</div>
</div>
<div class="line">
<span>19h30</span><div>
<p>Ouverture des portes</p><p>Plénière</p>
</div>
</div>
<div class="line">
<span>22h30</span><div><p>Fin plénière</p><p>After</p></div>
</div>
<div class="line"><span>00h30</span><div><p>Fermeture</p></div></div>
</div>
</div>
<div class="day">
<h4>Samedi</h4>
<p>09h00 à 09h30</p>
<p>12h00 à 19h30</p>
<p>22h00 à 00h00</p>
<h4>Dimanche</h4>
<div class="timetable">
<div class="line">
<span>07h00</span><div><p>Espace déjeuner</p></div>
</div>
<div class="line">
<span>09h30</span><div>
<p>Ouverture des portes</p><p>Plénière</p>
</div>
</div>
<div class="line"><span>14h00</span><div><p>Concert</p></div></div>
<div class="line">
<span>16h00</span><div><p>Fin officielle</p></div>
</div>
</div>
</div>
</div>
</div>
Expand All @@ -46,69 +79,83 @@
@import "../../styles/variables";

section {
display: flex;
justify-content: center;
background-color: #507d82;
color: #507d82;
font-family: lato, sans-serif;
letter-spacing: 0.1em;
display: flex;
justify-content: center;

.section-container {
max-width: $main-width;
width: 100%;
padding: 80px 100px;

h2 {
font-size: $sub-title;
text-transform: uppercase;
padding: 0 0 30px 0;
color: #fff;

&:not(:nth-of-type(1)) {
padding-top: 40px;
}
}
padding: 80px 50px;
overflow: auto;

h3 {
color: #fff;
padding: 40px 0 20px 0;
.days {
display: flex;
gap: 30px;
}

.days {
.day {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
border-top: 2px dashed white;
padding: 20px 0 10px 0;
flex-direction: column;
gap: 25px;

.day {
flex: 1 1 0;
h4 {
text-transform: uppercase;
font-weight: bold;
}

&:not(:last-of-type) {
padding: 0 0 0 0;
}
.timetable {
display: flex;
flex-direction: column;
gap: 20px;

.line {
display: flex;
gap: 5px;
width: 300px;

span {
font-weight: bold;
}

h4 {
color: #fff;
padding: 0px 0 10px 0;
div {
display: flex;
flex-direction: column;
gap: 0px;

p {
display: flex;
gap: 5px;

&::before {
content: "|";
font-weight: bold;
}
}
}
}
}
}

p {
text-transform: uppercase;
font-size: $large-text;
color: #fff;
font-weight: 200;
line-height: 1.2em;
padding: 0 0 10px 0;
}
}
}

@media only screen and (max-width: $main-width) {

section {

@media only screen and (max-width: $mobile-width) {
.section-container {
padding: 30px 0 50px 0;

.days {
flex-direction: column;

.day {

h4 {
margin: 20px 0 0 0;
}
}
}
}
}
Expand Down
148 changes: 148 additions & 0 deletions src/components/2024/Speakers.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
---
---

<section>
<div class="section-container">
<div class="speakers">
<div id="orateurs">
<h4>Orateurs</h4>
<div class="align">
<div class="box">
<img
src="/2024/welcome/speakers/Luca Martini.png"
alt="Luca Martini, orateur à la RJ"
/>
<span class="name">Luca Martini</span>
<i>Londres</i>
</div>
<div class="box">
<img
src="/2024/welcome/speakers/Stephen Hilar.png"
alt="Stephen Hilar, orateur à la RJ"
/>
<span class="name">Stephen Hilar</span>
<i>Montréal</i>
</div>
<div class="box">
<img
src="/2024/welcome/speakers/Yves Bulundwe.png"
alt="Yves Bulundwe, orateur à la RJ"
/>
<span class="name">Yves Bulundwe</span>
<i>Lausanne</i>
</div>
</div>
</div>
<div class="align">
<div id="groupe-de-louange">
<h4>Groupe de louange</h4>
<div class="box">
<img
src="/2024/welcome/speakers/Horizon Louange.png"
alt="Horizon Louange, groupe de louange à la RJ"
/>
<span class="name">Horizon Louange</span>
<i>Paris</i>
</div>
</div>
<div id="showcase">
<h4>Showcase</h4>
<div class="box">
<img
src="/2024/welcome/speakers/Conozco.png"
alt="Conozco effectue le showcase à la RJ"
/>
<span class="name">Conozco</span>
<i>Paris</i>
</div>
</div>
<div id="concert">
<h4>Concert</h4>
<div class="box">
<img
src="/2024/welcome/speakers/CrazyHope.png"
alt="CrazyHope joue à la RJ"
/>
<span class="name">CrazyHope</span>
<i>Bruxelles</i>
</div>
</div>
</div>
</div>
</div>
</section>

<style lang="scss">
@import "../../styles/variables";

section {
display: flex;
justify-content: center;
background-color: #507d82;
color: #fff;
font-family: lato, sans-serif;
letter-spacing: 0.1em;

.section-container {
max-width: $main-width;
width: 100%;
padding: 80px 50px;

.speakers {
display: flex;
flex-direction: column;
gap: 80px;

.align {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 10px;
}

#orateurs,
#concert,
#showcase,
#groupe-de-louange {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}

.box {
display: flex;
flex-direction: column;
align-items: center;
width: 300px;
gap: 3px;

.name {
font-size: $large-text;
}
}

img {
border-radius: 50%;
border: 5px solid #fff;
width: 200px;
margin-bottom: 10px;
}

h4 {
text-transform: uppercase;
font-size: $large-text;
}

@media only screen and (max-width: $mobile-width) {
img {
width: 170px;
}
.box {
width: 200px;
}
}
}
}
}
</style>
4 changes: 4 additions & 0 deletions src/pages/2024.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,16 @@ import Welcome from "../components/2024/Welcome.astro";
import Text from "../components/2024/Text.astro";
import Tickets from "../components/2024/Tickets.astro";
import Contact from "../components/Contact.astro";
import Program from "../components/2024/Program.astro";
import Speakers from "../components/2024/Speakers.astro"
---

<Layout title="RJ 2024">
<section>
<Welcome />
<Text />
<Program />
<Speakers />
<Tickets />
<Contact />
</section>
Expand Down

0 comments on commit bfbff25

Please sign in to comment.