add better hero
This commit is contained in:
ordinarthur
parent
fdcccd49aa
commit
4c444dc682
1
.astro/types.d.ts
vendored
1
.astro/types.d.ts
vendored
@ -1 +1,2 @@
|
||||
/// <reference types="astro/client" />
|
||||
/// <reference path="content.d.ts" />
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
const currentPath = Astro.url.pathname;
|
||||
const isHome = currentPath === '/';
|
||||
const isHome = false; // hero is now white bg, no dark variant needed
|
||||
const nav = [
|
||||
{ label: 'projets', href: '/creations-evenement' },
|
||||
{ label: 'pérenne', href: '/realisations-perennes' },
|
||||
|
||||
@ -2,9 +2,7 @@
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import { getMockFeaturedProjects, getMockProjects } from '../lib/mock-data';
|
||||
|
||||
const featured = getMockFeaturedProjects();
|
||||
const allProjects = getMockProjects();
|
||||
// Pick 6 best projects for the index
|
||||
const showcase = [
|
||||
allProjects.find(p => p.slug.current === 'moet-chandon'),
|
||||
allProjects.find(p => p.slug.current === 'dior-christmas'),
|
||||
@ -14,30 +12,47 @@ const showcase = [
|
||||
allProjects.find(p => p.slug.current === 'ami'),
|
||||
].filter(Boolean);
|
||||
|
||||
// 4 images for the hero strip
|
||||
const stripImages = [
|
||||
{ src: '/images/events/alula/06.jpg', alt: 'AlUla' },
|
||||
{ src: '/images/events/ami/04.jpg', alt: 'AMI Paris' },
|
||||
{ src: '/images/perennes/cisco/03.jpeg', alt: 'Cisco' },
|
||||
{ src: '/images/events/moet/05.jpg', alt: 'Moët' },
|
||||
];
|
||||
|
||||
const allEvents = getMockProjects('event');
|
||||
const allPerennes = getMockProjects('perenne');
|
||||
---
|
||||
|
||||
<BaseLayout>
|
||||
<!-- ====== HERO: full-viewport image with name overlay ====== -->
|
||||
<!-- ====== HERO: white bg, big typo, photo strip below ====== -->
|
||||
<section class="hero">
|
||||
<div class="hero__img">
|
||||
<img src="/images/events/dior/01.jpeg" alt="Dior Christmas" />
|
||||
<div class="wrap">
|
||||
<div class="hero__content">
|
||||
<h1 class="hero__name">
|
||||
<span class="hero__line hero__line--1">Aurélie</span>
|
||||
<span class="hero__line hero__line--2">Barré</span>
|
||||
</h1>
|
||||
<div class="hero__info">
|
||||
<p class="hero__role">directrice artistique<br />& design d'intérieur</p>
|
||||
<div class="hero__scroll-hint">
|
||||
<div class="hero__scroll-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero__content">
|
||||
<h1 class="hero__name">
|
||||
<span class="hero__line">Aurélie</span>
|
||||
<span class="hero__line">Barré</span>
|
||||
</h1>
|
||||
<p class="hero__role">directrice artistique & design d'intérieur</p>
|
||||
</div>
|
||||
<div class="hero__scroll">
|
||||
<span>scroll</span>
|
||||
<div class="hero__scroll-line"></div>
|
||||
|
||||
<!-- Photo strip: 4 images edge-to-edge -->
|
||||
<div class="hero__strip">
|
||||
{stripImages.map((img, i) => (
|
||||
<div class="hero__strip-img" style={`--i:${i}`}>
|
||||
<img src={img.src} alt={img.alt} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ====== FEATURED: hover-reveal image grid ====== -->
|
||||
<!-- ====== FEATURED: asymmetric grid ====== -->
|
||||
<section class="feat">
|
||||
<div class="wrap">
|
||||
<span class="label rv">sélection</span>
|
||||
@ -65,7 +80,7 @@ const allPerennes = getMockProjects('perenne');
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ====== PROJECT INDEX: text list with hover image ====== -->
|
||||
<!-- ====== PROJECT INDEX ====== -->
|
||||
<section class="idx">
|
||||
<div class="wrap">
|
||||
<div class="idx__head">
|
||||
@ -114,12 +129,12 @@ const allPerennes = getMockProjects('perenne');
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ====== ABOUT TEASER ====== -->
|
||||
<!-- ====== ABOUT ====== -->
|
||||
<section class="about">
|
||||
<div class="wrap">
|
||||
<div class="about__inner rv">
|
||||
<p class="about__text">
|
||||
Aurélie Barré conçoit des espaces qui racontent. Du siège social au lancement produit,
|
||||
Du siège social au lancement produit,
|
||||
chaque projet naît d'une écoute attentive et se construit dans le souci du détail.
|
||||
</p>
|
||||
<a href="/processus" class="about__link">
|
||||
@ -182,75 +197,61 @@ const allPerennes = getMockProjects('perenne');
|
||||
<style>
|
||||
/* ---- Hero ---- */
|
||||
.hero {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero__img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.hero__img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
filter: brightness(0.7);
|
||||
padding-top: calc(var(--header-h) + 4vh);
|
||||
padding-bottom: 0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hero__content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0 var(--pad) 8vh;
|
||||
z-index: 2;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.hero__name {
|
||||
font-size: clamp(3.5rem, 10vw, 9rem);
|
||||
line-height: 0.92;
|
||||
color: #fff;
|
||||
letter-spacing: -0.03em;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: clamp(4rem, 12vw, 11rem);
|
||||
line-height: 0.88;
|
||||
letter-spacing: -0.04em;
|
||||
color: var(--text);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero__line {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero__line--2 {
|
||||
font-style: italic;
|
||||
color: var(--text-2);
|
||||
}
|
||||
|
||||
.hero__info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.hero__role {
|
||||
font-family: var(--sans);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.12em;
|
||||
color: rgba(255,255,255,0.65);
|
||||
letter-spacing: 0.1em;
|
||||
line-height: 1.7;
|
||||
color: var(--text-3);
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.hero__scroll {
|
||||
position: absolute;
|
||||
bottom: 3vh;
|
||||
right: var(--pad);
|
||||
.hero__scroll-hint {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero__scroll span {
|
||||
font-size: 0.55rem;
|
||||
letter-spacing: 0.2em;
|
||||
color: rgba(255,255,255,0.45);
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.hero__scroll-line {
|
||||
width: 1px;
|
||||
height: 40px;
|
||||
background: rgba(255,255,255,0.25);
|
||||
height: 50px;
|
||||
background: var(--border);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -262,8 +263,8 @@ const allPerennes = getMockProjects('perenne');
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255,255,255,0.8);
|
||||
animation: scrollLine 2s ease-in-out infinite;
|
||||
background: var(--text-3);
|
||||
animation: scrollLine 2.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes scrollLine {
|
||||
@ -272,9 +273,39 @@ const allPerennes = getMockProjects('perenne');
|
||||
100% { top: 100%; }
|
||||
}
|
||||
|
||||
/* Photo strip — 4 images, edge to edge, no padding */
|
||||
.hero__strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 3px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero__strip-img {
|
||||
aspect-ratio: 3 / 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero__strip-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.8s var(--ease);
|
||||
}
|
||||
|
||||
.hero__strip-img:hover img {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
/* Dim siblings */
|
||||
.hero__strip:hover .hero__strip-img:not(:hover) img {
|
||||
filter: brightness(0.85);
|
||||
transition: filter 0.4s, transform 0.8s var(--ease);
|
||||
}
|
||||
|
||||
/* ---- Featured Grid ---- */
|
||||
.feat {
|
||||
padding: 10rem 0 6rem;
|
||||
padding: 8rem 0 6rem;
|
||||
}
|
||||
|
||||
.feat .label {
|
||||
@ -295,7 +326,6 @@ const allPerennes = getMockProjects('perenne');
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Asymmetric placement — each item gets its own span */
|
||||
.feat__item:nth-child(1) { grid-column: 1 / 8; }
|
||||
.feat__item:nth-child(2) { grid-column: 8 / 13; }
|
||||
.feat__item:nth-child(3) { grid-column: 1 / 5; }
|
||||
@ -323,7 +353,6 @@ const allPerennes = getMockProjects('perenne');
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
/* Dim siblings on any hover */
|
||||
.feat__grid:hover .feat__item:not(:hover) .feat__img img {
|
||||
filter: brightness(0.85);
|
||||
}
|
||||
@ -464,6 +493,15 @@ const allPerennes = getMockProjects('perenne');
|
||||
|
||||
/* ---- Responsive ---- */
|
||||
@media (max-width: 768px) {
|
||||
.hero__name {
|
||||
font-size: clamp(3rem, 14vw, 5rem);
|
||||
}
|
||||
|
||||
.hero__strip {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.feat__grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
@ -476,19 +514,11 @@ const allPerennes = getMockProjects('perenne');
|
||||
.feat__item:nth-child(5) { grid-column: 1 / 2; }
|
||||
.feat__item:nth-child(6) { grid-column: 2 / 3; }
|
||||
|
||||
.feat__item:nth-child(2) .feat__img,
|
||||
.feat__item:nth-child(3) .feat__img { aspect-ratio: 3 / 4; }
|
||||
|
||||
.idx__row {
|
||||
grid-template-columns: 2rem 1fr 3rem;
|
||||
}
|
||||
|
||||
.idx__client { display: none; }
|
||||
|
||||
.cursor-img { display: none; }
|
||||
|
||||
.hero__name {
|
||||
font-size: clamp(2.8rem, 12vw, 5rem);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user