diff --git a/css/app.css b/css/app.css index f28b410..61958e6 100644 --- a/css/app.css +++ b/css/app.css @@ -997,7 +997,29 @@ body:not(.wp-admin) { /* ########### COMPONENTS ############ */ -.post-card { +.cta { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + display: block; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + border-radius: 9999px; + padding-left: 2.5rem; + padding-right: 2.5rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +.cta--primary { + --tw-bg-opacity: 1; + background-color: rgb(47 1 84 / var(--tw-bg-opacity)); + font-weight: 700; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.card-post { border-radius: 1.5rem; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); @@ -1006,7 +1028,7 @@ body:not(.wp-admin) { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.post-card__thumbnail { +.card-post__thumbnail { height: 190px; border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; @@ -1014,11 +1036,11 @@ body:not(.wp-admin) { object-fit: cover; } -.post-card__inner { +.card-post__inner { padding: 2rem; } -.post-card__tag { +.card-post__tag { margin-bottom: 1rem; width: -webkit-fit-content; width: -moz-fit-content; @@ -1034,7 +1056,7 @@ body:not(.wp-admin) { color: rgb(223 30 30 / var(--tw-text-opacity)); } -.post-card__title { +.card-post__title { margin-bottom: 1rem; font-size: 1.5rem; line-height: 2rem; @@ -1044,12 +1066,22 @@ body:not(.wp-admin) { line-height: 1.1; } +.card-large-content { + width: 100%; + max-width: 1280px; + border-radius: 1.5rem; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + padding: 4rem; +} + .section_titling { padding-bottom: 2rem; text-align: center; } .section_titling__title { + padding-bottom: 0.5rem; font-size: 1.25rem; font-weight: 700; text-transform: uppercase; @@ -1522,27 +1554,58 @@ article > *:not(.entry-content), /* Home */ .home-header { + position: relative; margin-left: auto; margin-right: auto; - max-width: 1440px; - padding-left: 4rem; - padding-right: 4rem; - padding-top: 8rem; - padding-bottom: 8rem; + margin-bottom: 6rem; + max-width: 1280px; + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 4rem; } +@media (min-width: 960px) { + .home-header { + padding-left: 4rem; + padding-right: 4rem; + } +} + +@media (min-width: 1280px) { + .home-header { + padding-top: 5rem; + } +} + +/* background-color: #fbfff5a6; */ + .home-header__titling { + position: relative; + z-index: 10; + margin-bottom: -100px; max-width: 580px; } +@media (min-width: 960px) { + .home-header__titling { + position: absolute; + margin-bottom: 0px; + } +} + +/* min-height: 80vh; */ + .home-header__title { padding-bottom: 1.5rem; + padding-top: 4rem; font-size: 2.25rem; line-height: 2.5rem; font-weight: 500; line-height: 1.2; } +/* aspect-ratio: 1.5; */ + .home-header__scroll-down-indicator { margin-top: 1.5rem; display: flex; @@ -1564,6 +1627,41 @@ article > *:not(.entry-content), /* cubic-bezier(0.18, 0.89, 0.3, 1); */ } +.home-header__fresque { + width: 100%; + z-index: -1; + --tw-bg-opacity: 1; + background-color: rgb(250 245 255 / var(--tw-bg-opacity)); +} + +.home-header__fresque img { + height: 100%; + max-height: 100%; + width: 100%; + -o-object-fit: contain; + object-fit: contain; +} + +/* object-position: 100% 100%; */ + +@media (min-width: 960px) { + .home-header__fresque img { + /* object-position: 100% 0%; */ + } +} + +@media (max-aspect-ratio: 16 / 9) { + .home-header__fresque img { + /* @apply bg-red-100; */ + } +} + +@media (min-aspect-ratio: 16 / 9) { + .home-header__fresque img { + /* @apply bg-green-100; */ + } +} + @-webkit-keyframes bouncingArrow { 0% { transform: translateY(4px); @@ -1603,6 +1701,104 @@ article > *:not(.entry-content), padding-bottom: 4rem; } +#block-aides-financieres { + display: flex; + flex-direction: column; + align-items: center; + background-color: rgb(239, 239, 239, 0.6); + padding-top: 4rem; + padding-bottom: 4rem; +} + +#block-aides-financieres .section_titling { + max-width: 782px; +} + +#block-aides-financieres .card-large-content { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 3rem; +} + +@media (min-width: 960px) { + #block-aides-financieres .card-large-content { + display: grid; + } +} + +/* .logo_renolution { */ + +#block-aides-financieres .card-large-content__renolution-details .renolution__logo { + margin-bottom: 2rem; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + border-radius: 1.5rem; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + padding: 1.5rem; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); +} + +#block-aides-financieres .card-large-content__renolution-details .renolution__title { + padding-bottom: 0.75rem; + font-size: 1.125rem; + line-height: 1.75rem; + font-weight: 700; + --tw-text-opacity: 1; + color: rgb(223 30 30 / var(--tw-text-opacity)); +} + +#block-aides-financieres .card-large-content__renolution-details .cta { + margin-top: 2rem; +} + +#block-aides-financieres .card-large-content__renolution-details .renolution__guide-external-links { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 3rem; + padding-top: 1.5rem; +} + +#block-aides-financieres .card-large-content__renolution-details .renolution__guide-external-links .question_title { + padding-top: 1.5rem; + padding-bottom: 0.5rem; + font-weight: 700; + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +#block-aides-financieres .card-large-content__renolution-details .renolution__guide-external-links .question_explanation { + font-size: 0.875rem; + line-height: 1.25rem; +} + +#block-aides-financieres .card-large-content__renolution-details .renolution__guide-external-links .question_url { + margin-top: 0.5rem; + display: block; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 700; + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +#block-aides-financieres .card-large-content__renolution-details .renolution__guide-external-links .question_url:hover { + --tw-text-opacity: 1; + color: rgb(223 30 30 / var(--tw-text-opacity)); +} + +#block-aides-financieres .card-large-content__renolution-details .renolution__guide-external-links .question_url img { + margin-left: 0.25rem; + margin-top: -0.25rem; + display: inline-block; +} + +#block-aides-financieres .card-large-content__renolution-illustration-picture { + margin-left: auto; +} + .section-show-thematiques .thematiques-container { margin-left: auto; margin-right: auto; @@ -1710,6 +1906,12 @@ article > *:not(.entry-content), hue-rotate(263deg) brightness(99%) contrast(96%); } +/* ########### UTILITIES ############ */ + +.shadowed { + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); +} + .hover\:bg-primary:hover { --tw-bg-opacity: 1; background-color: rgb(47 1 84 / var(--tw-bg-opacity)); diff --git a/css/editor-style.css b/css/editor-style.css index ea87ad3..581d6ab 100644 --- a/css/editor-style.css +++ b/css/editor-style.css @@ -286,11 +286,6 @@ color: rgb(255 255 255 / var(--tw-text-opacity)) } -.text-isolation-quotidien { - --tw-text-opacity: 1; - color: rgb(194 69 3 / var(--tw-text-opacity)) -} - .text-primary { --tw-text-opacity: 1; color: rgb(47 1 84 / var(--tw-text-opacity)) @@ -321,6 +316,11 @@ color: rgb(227 255 240 / var(--tw-text-opacity)) } +.text-isolation-quotidien { + --tw-text-opacity: 1; + color: rgb(194 69 3 / var(--tw-text-opacity)) +} + .text-isolation-quotidien-light { --tw-text-opacity: 1; color: rgb(255 251 236 / var(--tw-text-opacity)) diff --git a/includes/blocks.php b/includes/blocks.php index a7d556a..e276ff0 100755 --- a/includes/blocks.php +++ b/includes/blocks.php @@ -20,6 +20,11 @@ function client_add_block_categories($categories) 'title' => 'Homegrade Specific Page Blocks ', 'icon' => 'admin-page', ], + [ + 'slug' => 'homegrade-page-home', + 'title' => 'Homegrade Blocks | Page d\'accueil', + 'icon' => 'admin-page', + ], ], ); } @@ -35,6 +40,7 @@ function mywp_register_acf_blocks() register_block_type(get_template_directory() . '/template-blocks/home/home-header'); register_block_type(get_template_directory() . '/template-blocks/home/latest-news'); register_block_type(get_template_directory() . '/template-blocks/home/show-thematiques'); + register_block_type(get_template_directory() . '/template-blocks/home/aides-financieres'); } add_action('init', 'mywp_register_acf_blocks'); diff --git a/resources/css/app.css b/resources/css/app.css index c63e7ea..b056e43 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -10,7 +10,8 @@ /* ########### COMPONENTS ############ */ @import './components/cta.css'; -@import './components/post-card.css'; +@import './components/card-post.css'; +@import './components/card-large-content.css'; @import './components/section-titling.css'; /* ########### LAYOUT ############ */ @@ -24,4 +25,8 @@ /* Home */ @import '../../template-blocks/home/home-header/home-header.css'; @import '../../template-blocks/home/latest-news/latest-news.css'; +@import '../../template-blocks/home/aides-financieres/aides-financieres.css'; @import '../../template-blocks/home/show-thematiques/show-thematiques.css'; + +/* ########### UTILITIES ############ */ +@import './utilities/shadows.css'; diff --git a/resources/css/components/card-large-content.css b/resources/css/components/card-large-content.css new file mode 100644 index 0000000..4fb04cb --- /dev/null +++ b/resources/css/components/card-large-content.css @@ -0,0 +1,3 @@ +.card-large-content { + @apply bg-white max-w-screen-xl w-full rounded-3xl p-16; +} diff --git a/resources/css/components/post-card.css b/resources/css/components/card-post.css similarity index 90% rename from resources/css/components/post-card.css rename to resources/css/components/card-post.css index 6fb6452..93d00a3 100644 --- a/resources/css/components/post-card.css +++ b/resources/css/components/card-post.css @@ -1,4 +1,4 @@ -.post-card { +.card-post { @apply bg-white shadow-lg rounded-3xl; &__thumbnail { diff --git a/resources/css/components/cta.css b/resources/css/components/cta.css index e69de29..a311ba8 100644 --- a/resources/css/components/cta.css +++ b/resources/css/components/cta.css @@ -0,0 +1,6 @@ +.cta { + @apply rounded-full px-10 py-4 block w-fit my-2; + &--primary { + @apply bg-primary text-white font-bold; + } +} diff --git a/resources/css/components/section-titling.css b/resources/css/components/section-titling.css index 463848c..a673dab 100644 --- a/resources/css/components/section-titling.css +++ b/resources/css/components/section-titling.css @@ -6,6 +6,7 @@ font-bold text-xl uppercase + pb-2 tracking-widest; } &__subtitle { diff --git a/resources/css/utilities/shadows.css b/resources/css/utilities/shadows.css new file mode 100644 index 0000000..6666de9 --- /dev/null +++ b/resources/css/utilities/shadows.css @@ -0,0 +1,3 @@ +.shadowed { + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); +} diff --git a/resources/svg/arrow-down-white.svg b/resources/img/graphic-assets/arrow-down-white.svg similarity index 100% rename from resources/svg/arrow-down-white.svg rename to resources/img/graphic-assets/arrow-down-white.svg diff --git a/resources/svg/arrow-right-circle.svg b/resources/img/graphic-assets/arrow-right-circle.svg similarity index 100% rename from resources/svg/arrow-right-circle.svg rename to resources/img/graphic-assets/arrow-right-circle.svg diff --git a/resources/img/arrow_down_white.svg b/resources/img/graphic-assets/arrow_down_white.svg similarity index 100% rename from resources/img/arrow_down_white.svg rename to resources/img/graphic-assets/arrow_down_white.svg diff --git a/resources/img/arrow_right_white.svg b/resources/img/graphic-assets/arrow_right_white.svg similarity index 100% rename from resources/img/arrow_right_white.svg rename to resources/img/graphic-assets/arrow_right_white.svg diff --git a/resources/img/close_menu_icon.svg b/resources/img/graphic-assets/close_menu_icon.svg similarity index 100% rename from resources/img/close_menu_icon.svg rename to resources/img/graphic-assets/close_menu_icon.svg diff --git a/resources/img/graphic-assets/icone-external-link.svg b/resources/img/graphic-assets/icone-external-link.svg new file mode 100644 index 0000000..e05fc3a --- /dev/null +++ b/resources/img/graphic-assets/icone-external-link.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/svg/icone-recherche.svg b/resources/img/graphic-assets/icone-recherche.svg similarity index 100% rename from resources/svg/icone-recherche.svg rename to resources/img/graphic-assets/icone-recherche.svg diff --git a/resources/img/illustrations/illustration-accueil-thematiques.jpg b/resources/img/illustrations/illustration-accueil-thematiques.jpg new file mode 100644 index 0000000..ea20d24 Binary files /dev/null and b/resources/img/illustrations/illustration-accueil-thematiques.jpg differ diff --git a/resources/img/illustrations/illustration-aides-financieres-homepage.svg b/resources/img/illustrations/illustration-aides-financieres-homepage.svg new file mode 100644 index 0000000..8b99d08 --- /dev/null +++ b/resources/img/illustrations/illustration-aides-financieres-homepage.svg @@ -0,0 +1,273 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/resources/img/logos/logo-renolution-monochrome.svg b/resources/img/logos/logo-renolution-monochrome.svg new file mode 100644 index 0000000..7013cff --- /dev/null +++ b/resources/img/logos/logo-renolution-monochrome.svg @@ -0,0 +1,55 @@ + + + + + diff --git a/resources/img/pictogrammes/pictogramme-demande.svg b/resources/img/pictogrammes/pictogramme-demande.svg new file mode 100644 index 0000000..b6e372d --- /dev/null +++ b/resources/img/pictogrammes/pictogramme-demande.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ? + ? + + + diff --git a/resources/img/pictogrammes/pictogramme-formulaire.svg b/resources/img/pictogrammes/pictogramme-formulaire.svg new file mode 100644 index 0000000..6be9f61 --- /dev/null +++ b/resources/img/pictogrammes/pictogramme-formulaire.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/template-blocks/home/aides-financieres/aides-financieres.css b/template-blocks/home/aides-financieres/aides-financieres.css new file mode 100755 index 0000000..6f5e727 --- /dev/null +++ b/template-blocks/home/aides-financieres/aides-financieres.css @@ -0,0 +1,44 @@ +#block-aides-financieres { + @apply bg-gray py-16 flex flex-col items-center; + .section_titling { + @apply max-w-screen-md; + } + .card-large-content { + @apply lg:grid grid-cols-2 gap-12; + + &__renolution-details { + /* .logo_renolution { */ + .renolution__logo { + @apply p-6 mb-8 bg-white shadowed w-fit rounded-3xl; + } + .renolution__title { + @apply text-lg font-bold text-secondary pb-3; + } + .cta { + @apply mt-8; + } + .renolution__guide-external-links { + @apply grid grid-cols-2 gap-12 pt-6; + .question_title { + @apply text-black font-bold pt-6 pb-2; + } + .question_explanation { + @apply text-sm; + } + .question_url { + @apply block text-sm text-black font-bold mt-2 py-2; + &:hover { + @apply text-secondary; + } + img { + @apply inline-block ml-1 -mt-1; + } + } + } + } + + &__renolution-illustration-picture { + @apply ml-auto; + } + } +} diff --git a/template-blocks/home/aides-financieres/aides-financieres.php b/template-blocks/home/aides-financieres/aides-financieres.php new file mode 100755 index 0000000..8ef7d91 --- /dev/null +++ b/template-blocks/home/aides-financieres/aides-financieres.php @@ -0,0 +1,56 @@ + + + +
+ +
+

Aides financières

+

+
+
+
+ + +

+

+ +
+
+ +

+

+ + + + + + +
+
+ +

+

+ + + + + +
+ +
+ + + + +
+ + + +
+ +
\ No newline at end of file diff --git a/template-blocks/home/aides-financieres/block.json b/template-blocks/home/aides-financieres/block.json new file mode 100644 index 0000000..e732dcd --- /dev/null +++ b/template-blocks/home/aides-financieres/block.json @@ -0,0 +1,20 @@ +{ + "name": "acf/aides-financieres", + "title": "Home | Aides Financières", + "category": "homegrade-page-home", + "multiple": false, + "icon": { + "foreground": "#DF1E1E", + "src": "schedule" + }, + "keywords": [ + "aides financières", + "aide", + "Financières", + "Renolution" + ], + "acf": { + "mode": "auto", + "renderTemplate": "aides-financieres.php" + } +} \ No newline at end of file diff --git a/template-blocks/home/aides-financieres/coins.svg b/template-blocks/home/aides-financieres/coins.svg new file mode 100755 index 0000000..c6bac11 --- /dev/null +++ b/template-blocks/home/aides-financieres/coins.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/template-blocks/home/aides-financieres/coins2.svg b/template-blocks/home/aides-financieres/coins2.svg new file mode 100644 index 0000000..8359cae --- /dev/null +++ b/template-blocks/home/aides-financieres/coins2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/template-blocks/home/home-header/block.json b/template-blocks/home/home-header/block.json index 5265a02..f2abe07 100644 --- a/template-blocks/home/home-header/block.json +++ b/template-blocks/home/home-header/block.json @@ -1,7 +1,7 @@ { "name": "acf/home-header", "title": "Home | Section d'accueil", - "category": "homegrade-pages", + "category": "homegrade-page-home", "multiple": false, "icon": { "foreground": "#DF1E1E", diff --git a/template-blocks/home/home-header/home-header.css b/template-blocks/home/home-header/home-header.css index bb4f30f..4df3b14 100755 --- a/template-blocks/home/home-header/home-header.css +++ b/template-blocks/home/home-header/home-header.css @@ -1,11 +1,22 @@ .home-header { - @apply max-w-screen-2xl mx-auto px-16 py-32; + @apply max-w-screen-xl mx-auto px-6 lg:px-16 pt-16 xl:pt-20 + mb-24 + relative + /* bg-red-100 */; + /* aspect-ratio: 1.5; */ + /* min-height: 80vh; */ + /* background-color: #fbfff5a6; */ &__titling { - @apply max-w-[580px]; + @apply max-w-[580px] + relative + z-10 + lg:absolute + mb-[-100px] + lg:mb-0; } &__title { - @apply text-4xl font-medium pb-6; + @apply text-4xl font-medium pb-6 pt-16; line-height: 1.2; } @@ -20,6 +31,29 @@ /* cubic-bezier(0.18, 0.89, 0.3, 1); */ } } + + &__fresque { + @apply w-full; + z-index: -1; + @apply bg-purple-50; + img { + @apply w-full h-full max-h-full object-contain; + /* object-position: 100% 100%; */ + @screen lg { + /* object-position: 100% 0%; */ + } + } + @media (max-aspect-ratio: 16 / 9) { + img { + /* @apply bg-red-100; */ + } + } + @media (min-aspect-ratio: 16 / 9) { + img { + /* @apply bg-green-100; */ + } + } + } } @keyframes bouncingArrow { 0% { diff --git a/template-blocks/home/home-header/home-header.php b/template-blocks/home/home-header/home-header.php index 9567d00..9210a3e 100755 --- a/template-blocks/home/home-header/home-header.php +++ b/template-blocks/home/home-header/home-header.php @@ -11,8 +11,10 @@ $home_header = get_field('home_header_datas');

- +
- + +
+
\ No newline at end of file diff --git a/template-blocks/home/latest-news/block.json b/template-blocks/home/latest-news/block.json index c5b93a2..43e60b3 100644 --- a/template-blocks/home/latest-news/block.json +++ b/template-blocks/home/latest-news/block.json @@ -1,7 +1,7 @@ { "name": "acf/latest-news", "title": "Home | Dernières News", - "category": "homegrade-pages", + "category": "homegrade-page-home", "multiple": false, "icon": { "foreground": "#DF1E1E", diff --git a/template-blocks/home/latest-news/latest-news.php b/template-blocks/home/latest-news/latest-news.php index 3f15063..1c30fa0 100644 --- a/template-blocks/home/latest-news/latest-news.php +++ b/template-blocks/home/latest-news/latest-news.php @@ -18,11 +18,11 @@ $block_titling_datas = get_field('block_titling_datas'); )); foreach ($recent_posts as $key => $post) { - $post_thumbnail = get_the_post_thumbnail($post['ID'], 'full', array('class' => 'post-card__thumbnail')); + $post_thumbnail = get_the_post_thumbnail($post['ID'], 'full', array('class' => 'card-post__thumbnail')); $post_tags = get_the_tags($post['ID']); get_template_part( - 'template-components/post-card', + 'template-components/card-post', null, array( 'card_variant' => 'activite', diff --git a/template-blocks/home/show-thematiques/block.json b/template-blocks/home/show-thematiques/block.json index b4b2106..d4f8234 100644 --- a/template-blocks/home/show-thematiques/block.json +++ b/template-blocks/home/show-thematiques/block.json @@ -1,7 +1,7 @@ { "name": "acf/show-thematiques", "title": "Home | Thématiques", - "category": "homegrade-pages", + "category": "homegrade-page-home", "multiple": false, "icon": { "foreground": "#DF1E1E", diff --git a/template-blocks/home/show-thematiques/show-thematiques.php b/template-blocks/home/show-thematiques/show-thematiques.php index fda54ad..0f1bca8 100755 --- a/template-blocks/home/show-thematiques/show-thematiques.php +++ b/template-blocks/home/show-thematiques/show-thematiques.php @@ -19,23 +19,23 @@ $terms = get_terms(array(
- slug); ?> -
- -

name ?>

-

description ?>

+
+ +

name ?>

+

description ?>

- - En savoir plus -
- -
- -
+ + En savoir plus +
+ +
+ +
diff --git a/template-components/post-card.php b/template-components/card-post.php similarity index 60% rename from template-components/post-card.php rename to template-components/card-post.php index dda79dd..da4e026 100644 --- a/template-components/post-card.php +++ b/template-components/card-post.php @@ -8,16 +8,16 @@ $post_tags = $args['post_tags']; -
+
-
-

name ?>

-

+
+

name ?>

+

- +