f/footer #11

Merged
Skydust merged 3 commits from f/footer into dev 2023-09-10 20:59:10 +00:00
17 changed files with 126 additions and 105 deletions

1
assets/img/facebook.svg Normal file
View File

@@ -0,0 +1 @@
<svg viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M449.446 0C483.971 0 512 28.03 512 62.554v386.892C512 483.97 483.97 512 449.446 512H342.978V319.085h66.6l12.672-82.621h-79.272v-53.617c0-22.603 11.073-44.636 46.58-44.636H425.6v-70.34s-32.71-5.582-63.982-5.582c-65.288 0-107.96 39.569-107.96 111.204v62.971h-72.573v82.621h72.573V512H62.554C28.03 512 0 483.97 0 449.446V62.554C0 28.03 28.029 0 62.554 0h386.892Z" fill="#124498" class="fill-000000"></path></svg>

After

Width:  |  Height:  |  Size: 587 B

1
assets/img/instagram.svg Normal file
View File

@@ -0,0 +1 @@
<svg viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M449.446 0C483.971 0 512 28.03 512 62.554v386.892C512 483.97 483.97 512 449.446 512H62.554C28.03 512 0 483.97 0 449.446V62.554C0 28.03 28.029 0 62.554 0h386.892ZM256 81c-47.527 0-53.487.201-72.152 1.053-18.627.85-31.348 3.808-42.48 8.135-11.508 4.472-21.267 10.456-30.996 20.184-9.729 9.729-15.713 19.489-20.185 30.996-4.326 11.132-7.284 23.853-8.135 42.48C81.201 202.513 81 208.473 81 256s.201 53.487 1.052 72.152c.851 18.627 3.809 31.348 8.135 42.48 4.472 11.507 10.456 21.267 20.185 30.996s19.488 15.713 30.996 20.185c11.132 4.326 23.853 7.284 42.48 8.134C202.513 430.799 208.473 431 256 431s53.487-.201 72.152-1.053c18.627-.85 31.348-3.808 42.48-8.134 11.507-4.472 21.267-10.456 30.996-20.185s15.713-19.489 20.185-30.996c4.326-11.132 7.284-23.853 8.134-42.48C430.799 309.487 431 303.527 431 256s-.201-53.487-1.053-72.152c-.85-18.627-3.808-31.348-8.134-42.48-4.472-11.507-10.456-21.267-20.185-30.996-9.729-9.728-19.489-15.712-30.996-20.184-11.132-4.327-23.853-7.285-42.48-8.135C309.487 81.201 303.527 81 256 81Zm0 31.532c46.727 0 52.262.178 70.715 1.02 17.062.779 26.328 3.63 32.495 6.025 8.169 3.175 13.998 6.968 20.122 13.091 6.124 6.124 9.916 11.954 13.091 20.122 2.396 6.167 5.247 15.433 6.025 32.495.842 18.453 1.021 23.988 1.021 70.715 0 46.727-.179 52.262-1.021 70.715-.778 17.062-3.629 26.328-6.025 32.495-3.175 8.169-6.967 13.998-13.091 20.122-6.124 6.124-11.953 9.916-20.122 13.091-6.167 2.396-15.433 5.247-32.495 6.025-18.45.842-23.985 1.021-70.715 1.021-46.73 0-52.264-.179-70.715-1.021-17.062-.778-26.328-3.629-32.495-6.025-8.169-3.175-13.998-6.967-20.122-13.091-6.124-6.124-9.917-11.953-13.091-20.122-2.396-6.167-5.247-15.433-6.026-32.495-.842-18.453-1.02-23.988-1.02-70.715 0-46.727.178-52.262 1.02-70.715.779-17.062 3.63-26.328 6.026-32.495 3.174-8.168 6.967-13.998 13.091-20.122 6.124-6.123 11.953-9.916 20.122-13.091 6.167-2.395 15.433-5.246 32.495-6.025 18.453-.842 23.988-1.02 70.715-1.02Zm0 53.603c-49.631 0-89.865 40.234-89.865 89.865 0 49.631 40.234 89.865 89.865 89.865 49.631 0 89.865-40.234 89.865-89.865 0-49.631-40.234-89.865-89.865-89.865Zm0 148.198c-32.217 0-58.333-26.116-58.333-58.333s26.116-58.333 58.333-58.333 58.333 26.116 58.333 58.333-26.116 58.333-58.333 58.333Zm114.416-151.748c0 11.598-9.403 20.999-21.001 20.999-11.597 0-20.999-9.401-20.999-20.999 0-11.598 9.402-21 20.999-21 11.598 0 21.001 9.402 21.001 21Z" fill="#124498" class="fill-000000"></path></svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@@ -4,6 +4,8 @@ import { PageBlocks, PageBlocksCarousel, PageBlocksMutation } from "../../tina/_
import { Anchoring, anchoringSchema } from "../util/anchoring";
import { Template } from "tinacms";
import { PageBlockFunction } from "../blocks-renderer";
import { Carousel as ReactCarousel } from "react-responsive-carousel";
import "react-responsive-carousel/lib/styles/carousel.min.css";
/**
* Section carousel used for the main page but can be used everywhere
@@ -13,7 +15,24 @@ import { PageBlockFunction } from "../blocks-renderer";
export const Carousel: PageBlockFunction<PageBlocksCarousel> = ({ data }) => {
return (
<Section>
<div className="carousel flex w-[100%] items-end justify-center" style={ { backgroundImage: `url(${ data?.images?.[0] })` } }>
<div className="w-[100%]">
<ReactCarousel
showArrows={ false }
showStatus={ false }
showThumbs={ false }
showIndicators={ false }
stopOnHover={ false }
swipeable={ false }
useKeyboardArrows={ false }
autoPlay={ true }
infiniteLoop={ true }
dynamicHeight={ false }
interval={ data.speed || 3000 }>
{ data?.images?.map(imageUrl => (
<div key={ imageUrl } className="carousel-image" style={ { backgroundImage: `url(${ imageUrl })` } }/>
)) }
</ReactCarousel>
{ data?.link?.enabled && <Anchoring { ...data.link }/> }
</div>
</Section>);
@@ -29,6 +48,11 @@ export const carouselBlockSchema: Template = {
defaultItem: [defaultCarousel, defaultCarousel, defaultCarousel]
},
fields: [
{
type: "number",
label: "Vitesse de défilement en millisecondes",
name: "speed"
},
{
type: "image",
label: "Images du carousel",

View File

@@ -1,111 +1,36 @@
import React from "react";
import Link from "next/link";
import { FaFacebookF, FaGithub, FaTwitter } from "react-icons/fa";
import { AiFillInstagram } from "react-icons/ai";
import { Container } from "../../util/container";
import { RawRenderer } from "./rawRenderer";
import { ObjectField } from "@tinacms/schema-tools/dist/types";
import facebookImage from "../../../assets/img/facebook.svg";
import instagramImage from "../../../assets/img/instagram.svg";
export const Footer = ({ data, rawData }) => {
const socialIconClasses = "h-7 w-auto";
const socialIconColorClasses = {
blue: "text-blue-500 dark:text-blue-400 hover:text-blue-300",
teal: "text-teal-500 dark:text-teal-400 hover:text-teal-300",
green: "text-green-500 dark:text-green-400 hover:text-green-300",
red: "text-red-500 dark:text-red-400 hover:text-red-300",
pink: "text-pink-500 dark:text-pink-400 hover:text-pink-300",
purple: "text-purple-500 dark:text-purple-400 hover:text-purple-300",
orange: "text-orange-500 dark:text-orange-400 hover:text-orange-300",
yellow: "text-yellow-500 dark:text-yellow-400 hover:text-yellow-300",
primary: "text-white opacity-80 hover:opacity-100"
};
const footerColor = {
default:
"text-gray-800 from-white to-gray-50 dark:from-gray-900 dark:to-gray-1000",
primary: {
blue: "text-white from-blue-500 to-blue-700",
teal: "text-white from-teal-500 to-teal-600",
green: "text-white from-green-500 to-green-600",
red: "text-white from-red-500 to-red-600",
pink: "text-white from-pink-500 to-pink-600",
purple: "text-white from-purple-500 to-purple-600",
orange: "text-white from-orange-500 to-orange-600",
yellow: "text-white from-yellow-500 to-yellow-600"
}
};
const footerColorCss = footerColor.default;
return (
<footer className={ `bg-gradient-to-br ${ footerColorCss }` }>
<footer>
<Container className="relative" size="small">
<div className="flex justify-between items-center gap-6 flex-wrap">
<Link
href="/"
className="group mx-2 flex items-center font-bold tracking-tight text-gray-400 dark:text-gray-300 opacity-50 hover:opacity-100 transition duration-150 ease-out whitespace-nowrap"
/>
<div className="flex gap-4">
{ data.social && data.social.facebook && (
<a
className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150"
href={ data.social.facebook }
target="_blank"
>
<FaFacebookF
className={ `${ socialIconClasses } ${
socialIconColorClasses.primary
}` }
/>
<div className={ "flex flex-row justify-between" }>
<div>
<p>Contact :<br/>
<a href="mailto:psychartherapie@gmail.com" onClick={ () => { /* window.dataLayer.push({ event: "mail-click" });*/ } }>
psychartherapie@gmail.com
</a>
) }
{ data.social && data.social.twitter && (
<a
className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150"
href={ data.social.twitter }
target="_blank"
>
<FaTwitter
className={ `${ socialIconClasses } ${
socialIconColorClasses.primary
}` }
/>
<br/>
<b>06 49 23 02 90</b>
</p>
<p>SIRET 911 883 338 00012<br/><a href="legals.html">Mentions légales</a></p>
<div id="socials" className="flex flex-row">
<a href="https://www.facebook.com/psychartherapie.gard" onClick={ () => { /* window.dataLayer.push({ socials: "fb-click" });*/ } } className="py-2 me-2">
<img src={ facebookImage.src } alt="Facebook"/>
</a>
) }
{ data.social && data.social.instagram && (
<a
className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150"
href={ data.social.instagram }
target="_blank"
>
<AiFillInstagram
className={ `${ socialIconClasses } ${
socialIconColorClasses.primary
}` }
/>
<a href="https://www.instagram.com/psychartherapie" onClick={ () => { /* window.dataLayer.push({ socials: "insta-click" });*/ } } className="py-2">
<img src={ instagramImage.src } alt="Instagram"/>
</a>
) }
{ data.social && data.social.github && (
<a
className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150"
href={ data.social.github }
target="_blank"
>
<FaGithub
className={ `${ socialIconClasses } ${
socialIconColorClasses.primary
}` }
/>
</a>
) }
</div>
</div>
<div>
<p>&copy; 2023 &#8211; Fait avec amour par <a className="mx-1" href="https://www.linkedin.com/in/nolwenn-meyer/">Nolwenn Meyer</a></p>
</div>
<RawRenderer parentColor={ data.color } rawData={ rawData } />
</div>
<div
className={ `absolute h-1 bg-gradient-to-r from-transparent ${
data.color === "primary" ? "via-white" : "via-black dark:via-white"
} to-transparent top-0 left-4 right-4 opacity-5` }
/>
</Container>
</footer>
);

View File

@@ -31,7 +31,7 @@ export const Layout = ({
className={ "min-h-screen flex flex-col" }
>
<Header data={ data?.header } />
<div className="flex-1 text-gray-800 bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-1000 flex flex-col">
<div className="flex-1 flex flex-col">
{ children }
</div>
<Footer

View File

@@ -1,9 +1,11 @@
---
title: Accueil
blocks:
- images:
- /uploads/unsplash-75EFpyXu3Wg.jpg
- /uploads/tina-cloud-starter-preview.png
- speed: 8000
images:
- /uploads/painting2.jpg
- /uploads/painting1.jpg
- /uploads/painting10.jpg
link:
enabled: true
text: Découvrez-en plus !
@@ -178,6 +180,9 @@ url: home

View File

@@ -16,6 +16,7 @@
"@types/js-cookie": "^3.0.0",
"@types/node": "^16.11.7",
"@types/react": "^17.0.35",
"@types/react-gtm-module": "^2.0.1",
"@types/sanitize-html": "^2.9.0",
"@types/styled-components": "^5.1.15",
"@typescript-eslint/eslint-plugin": "^5.60.0",
@@ -35,7 +36,9 @@
"next": "^13.3.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-gtm-module": "^2.0.11",
"react-icons": "^4.2.0",
"react-responsive-carousel": "^3.2.23",
"sanitize-html": "^2.11.0",
"sass": "^1.66.1",
"styled-jsx": "^3.2.5",

View File

@@ -1,5 +1,7 @@
import "../styles/_styles.scss";
import TagManager from "react-gtm-module";
// TagManager.initialize({ gtmId: "" });
const App = ({ Component, pageProps }) => {
return <Component { ...pageProps } />;
};

Binary file not shown.

After

Width:  |  Height:  |  Size: 468 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 482 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 322 KiB

View File

@@ -5,6 +5,7 @@
@import "carousel";
@import "image";
@import "main-title";
@import "footer";
@tailwind base;
@tailwind components;
@@ -20,6 +21,11 @@ html {
scroll-padding-top: var(--header-Height);
}
// TODO: Try to do this in a better way if possible
.prose :where(p:first-of-type):not(:where([class~="not-prose"] *)) {
font-size: initial;
}
.container-large {
max-width: 75rem;
}

View File

@@ -1,5 +1,9 @@
.anchoring {
font-family: 'Questrial', sans-serif;
position: absolute;
right: 0;
left: 0;
bottom: 0;
h1 {
margin-bottom: -35px;

View File

@@ -1,7 +1,7 @@
.carousel {
.carousel-image {
height: calc(100vh - var(--header-Height));
background-position-x: center;
background-position-y: bottom;
background-position-y: center;
background-repeat: no-repeat;
background-size: cover;
}

19
styles/footer.scss Normal file
View File

@@ -0,0 +1,19 @@
#socials img {
width: 2rem;
height: 2rem;
}
footer {
color: #5975a3;
p {
text-align: justify;
hyphens: auto;
font-size: 1.05rem;
margin-bottom: 1rem;
}
a {
color: #d8ac74;
}
}

File diff suppressed because one or more lines are too long

View File

@@ -3258,6 +3258,11 @@
resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
"@types/react-gtm-module@^2.0.1":
version "2.0.1"
resolved "https://registry.yarnpkg.com/@types/react-gtm-module/-/react-gtm-module-2.0.1.tgz#b2c6cd14ec251d6ae7fa576edf1d43825908a378"
integrity sha512-T/DN9gAbCYk5wJ1nxf4pSwmXz4d1iVjM++OoG+mwMfz9STMAotGjSb65gJHOS5bPvl6vLSsJnuC+y/43OQrltg==
"@types/react-redux@^7.1.20":
version "7.1.25"
resolved "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.25.tgz"
@@ -4628,6 +4633,11 @@ chownr@^1.1.1:
resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
classnames@^2.2.5:
version "2.3.2"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
clean-git-ref@^2.0.1:
version "2.0.1"
resolved "https://registry.npmjs.org/clean-git-ref/-/clean-git-ref-2.0.1.tgz"
@@ -8273,7 +8283,7 @@ prop-types@15.7.2:
object-assign "^4.1.1"
react-is "^16.8.1"
prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.7.2, prop-types@^15.8.1:
prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -8436,6 +8446,13 @@ react-dropzone@14.2.3:
file-selector "^0.6.0"
prop-types "^15.8.1"
react-easy-swipe@^0.0.21:
version "0.0.21"
resolved "https://registry.yarnpkg.com/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz#ce9384d576f7a8529dc2ca377c1bf03920bac8eb"
integrity sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==
dependencies:
prop-types "^15.5.8"
react-final-form@^6.3.0:
version "6.5.9"
resolved "https://registry.npmjs.org/react-final-form/-/react-final-form-6.5.9.tgz"
@@ -8443,6 +8460,11 @@ react-final-form@^6.3.0:
dependencies:
"@babel/runtime" "^7.15.4"
react-gtm-module@^2.0.11:
version "2.0.11"
resolved "https://registry.yarnpkg.com/react-gtm-module/-/react-gtm-module-2.0.11.tgz#14484dac8257acd93614e347c32da9c5ac524206"
integrity sha512-8gyj4TTxeP7eEyc2QKawEuQoAZdjKvMY4pgWfycGmqGByhs17fR+zEBs0JUDq4US/l+vbTl+6zvUIx27iDo/Vw==
react-hotkeys-hook@^4.3.7:
version "4.4.1"
resolved "https://registry.yarnpkg.com/react-hotkeys-hook/-/react-hotkeys-hook-4.4.1.tgz#1f7a7a1c9c21d4fa3280bf340fcca8fd77d81994"
@@ -8504,6 +8526,15 @@ react-remove-scroll@2.5.5:
use-callback-ref "^1.3.0"
use-sidecar "^1.1.2"
react-responsive-carousel@^3.2.23:
version "3.2.23"
resolved "https://registry.yarnpkg.com/react-responsive-carousel/-/react-responsive-carousel-3.2.23.tgz#4c0016ff54603e604bb5c1f9e7ef2d1eda133f1d"
integrity sha512-pqJLsBaKHWJhw/ItODgbVoziR2z4lpcJg+YwmRlSk4rKH32VE633mAtZZ9kDXjy4wFO+pgUZmDKPsPe1fPmHCg==
dependencies:
classnames "^2.2.5"
prop-types "^15.5.8"
react-easy-swipe "^0.0.21"
react-router-dom@6.3.0:
version "6.3.0"
resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz"