Skip to content

Commit

Permalink
feat: icons for strengths paragraphs
Browse files Browse the repository at this point in the history
  • Loading branch information
@marc-bouvier
marc-bouvier committed Nov 22, 2024
1 parent 4017fce commit 12a6e61
Showing 1 changed file with 66 additions and 93 deletions.
159 changes: 66 additions & 93 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
<script lang="ts">
/* eslint-disable svelte/no-at-html-tags */
import plus from 'svelte-awesome/icons/plus';
import group from 'svelte-awesome/icons/group';
import compass from 'svelte-awesome/icons/compass';
import handshakeO from 'svelte-awesome/icons/handshakeO';
import thLarge from 'svelte-awesome/icons/thLarge';
import { base } from '$app/paths';
import TeamMember from '$lib/TeamMember.svelte';
import Partner from '$lib/Partner.svelte';
import ServiceCard from '$lib/ServiceCard.svelte';
// import ServiceCard from '$lib/ServiceCard.svelte';
import * as m from '$lib/paraglide/messages.js';
import { messagesArray, messagesHierarchy } from '$lib/messages.utils';
import Icon from 'svelte-awesome';
import type { IconData } from 'svelte-awesome/components/Icon.svelte';
import HowToIntegrate from '$lib/HowToIntegrate.svelte';
import ServiceCard from '$lib/ServiceCard.svelte';
const bios = messagesHierarchy<{
name: string;
Expand All @@ -23,13 +29,16 @@
picturePath: string;
}>('ecosystem_partner', m);
const integrate_long_description_details_refs = messagesHierarchy<{
term: string
href: string
description: string
}>('integrate_long_description_details_ref', m);
const strengthIcon = (name: string): Record<string, IconData> => <Record<string, IconData>>{
high_technical_standards: group,
multidisciplinary_skills: thLarge,
take_our_customers_further: compass,
ability_to_support: handshakeO
}[name];
const strengths = messagesHierarchy<{
paragraph: string
paragraph: string;
name: string;
}>('strengths_items', m);
</script>

Expand All @@ -48,7 +57,7 @@
</div>
</section>

<section id="services" style="padding-bottom: 0">
<section id="services" style="padding-bottom: 3rem">
<div class="wrapper cards">
<ServiceCard
anchorId="support"
Expand All @@ -69,7 +78,7 @@
</section>

<section id="philosophy" class="as-secondary">
<div class="wrapper title-and-text ">
<div class="wrapper title-and-text">
<header>
<h2>{m.philosophy_title()}</h2>
</header>
Expand All @@ -84,50 +93,22 @@
</section>

<section id="how-to-integrate" class="as-tertiary">
<div class="wrapper title-and-text ">
<header>
<h2>{m.integrate_title()}</h2>
</header>
<div class="center-in-section">
<p>
{m.integrate_paragraph()}
</p>
<img
id="continuum"
alt=""
aria-details="continuum-details"
src="{base}/img/expertises.drawio.svg"
width="780" height="430"
/>
<details id="continuum-details">
<summary>{m.integrate_long_description_summary()}</summary>
<section>
<p>{m.integrate_long_description_details_explanation()}</p>
<dl>
{#each integrate_long_description_details_refs as referential }
<dt><a href="{referential.href}">{referential.term}</a>
</dt>
<dd>{ referential.description }</dd>
{/each}
</dl>
</section>
</details>
</div>
</div>
<HowToIntegrate />
</section>

<section id="strengths" class="as-secondary">
<div class="wrapper title-and-text ">
<div class="wrapper title-and-text">
<header>
<h2>{m.strengths_title()}</h2>
</header>

<div class="center-in-section">
<div class="quadrants">
{#each strengths as { paragraph },index}
<div class="quadrant">
{#each strengths as { paragraph, name }}
<div id={`strength_${name}`} class="quadrant">
<p>
<Icon data={plus} scale="{1.5}"/>
<span style="vertical-align: middle">
<Icon data={strengthIcon(name)} scale={1} />
</span>
{@html paragraph}
</p>
</div>
Expand All @@ -138,27 +119,22 @@
</section>

<section id="know-us" class="as-primary" style="margin-bottom: 0;">
<div class="wrapper title-and-text ">
<div class="wrapper title-and-text">
<header>
<h2>{m.know_us_title()}</h2>
</header>
<div class="center-in-section">
<ul class="grid">
{#each bios as {name,topic,bio,picture}}
<TeamMember
name={name}
topic={topic}
bio={bio}
picture={picture}
/>
{#each bios as { name, topic, bio, picture }}
<TeamMember {name} {topic} {bio} {picture} />
{/each}
</ul>
</div>
</div>
</section>

<section id="ecosystem" class="as-secondary">
<div class="wrapper title-and-text ">
<div class="wrapper title-and-text">
<header>
<h2>{m.ecosystem_title()}</h2>
</header>
Expand All @@ -178,43 +154,40 @@
</section>

<style>
#continuum {
display: block;
max-width: 100%;
max-height: fit-content;
object-fit: scale-down;
}
.quadrants > .quadrant {
padding: 0.5rem;
}
@media only screen and (min-width: 576px) {
.quadrants {
display: grid;
grid-template-columns: 18rem 18rem;
grid-gap: 0.5rem;
}
.quadrants > .quadrant {
padding: 1rem;
}
}
@media only screen and (min-width: 768px) {
.quadrants {
grid-template-columns: 22rem 22rem;
grid-gap: .75rem;
}
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
grid-column-gap: 1.5rem;
grid-row-gap: 1.5rem;
}
#continuum {
display: block;
max-width: 100%;
max-height: fit-content;
object-fit: scale-down;
}
.quadrants > .quadrant {
padding: 0.5rem;
}
@media only screen and (min-width: 576px) {
.quadrants {
display: grid;
grid-template-columns: 18rem 18rem;
grid-gap: 0.5rem;
}
.quadrants > .quadrant {
padding: 1rem;
}
}
@media only screen and (min-width: 768px) {
.quadrants {
grid-template-columns: 22rem 22rem;
grid-gap: 0.75rem;
}
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
grid-column-gap: 1.5rem;
grid-row-gap: 1.5rem;
}
</style>

0 comments on commit 12a6e61

Please sign in to comment.