Skip to content

Commit 8ccdbc6

Browse files
committed
Tweak styling
1 parent 48a1eed commit 8ccdbc6

File tree

9 files changed

+112
-22
lines changed

9 files changed

+112
-22
lines changed

messages/en.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
"home": "Main Page"
1111
},
1212
"Project": {
13-
"area": "Area"
13+
"area": "Area",
14+
"next": "Next"
1415
},
1516
"Metadata": {
1617
"google": "Specialized in Corporate Image and Interior Design with more than 25 years of experience dedicated to transforming spaces in unique and exclusive environments. Contact: [email protected]"

messages/es.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
"home": "Página Principal"
1111
},
1212
"Project": {
13-
"area": "Área"
13+
"area": "Área",
14+
"next": "Siguiente"
1415
},
1516
"Metadata": {
1617
"google": "Especializados en Imagen Corporativa y Diseño Interior con más de 25 años de experiencia dedicados a transformar espacios en obras únicas y exclusivas. Contacto: [email protected]"

src/app/(frontend)/[locale]/conclusion/page.tsx

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { RichText } from '@payloadcms/richtext-lexical/react'
66
import { Link } from '@/i18n/navigation'
77
import Image from '@/components/global/Image'
88
import { draftMode } from 'next/headers'
9+
import { setRequestLocale } from 'next-intl/server'
910

1011
export const dynamic = 'error'
1112

@@ -14,6 +15,8 @@ export default async function Page({ params }: { params: Promise<{ locale: 'en'
1415
const { isEnabled } = await draftMode()
1516
const { locale } = await params
1617

18+
setRequestLocale(locale)
19+
1720
const conclusionData = await payload.findGlobal({
1821
slug: 'conclusion',
1922
overrideAccess: isEnabled,
@@ -23,15 +26,15 @@ export default async function Page({ params }: { params: Promise<{ locale: 'en'
2326

2427
return (
2528
<>
26-
<div className="set-header-screen bg-vector-grey min-h-150 relative flex items-center justify-evenly overflow-clip">
29+
<div className="set-header-screen bg-vector-grey min-h-150 relative flex-col md:flex-row flex items-center justify-center md:justify-evenly gap-y-5 overflow-clip px-10 md:px-0">
2730
<p
28-
className="text-vector-cream flex flex-col relative bottom-[12ch] text-xl font-thin italic leading-10 md:bottom-[4ch] md:text-4xl whitespace-pre"
31+
className="self-start md:self-center text-vector-cream flex flex-col relative text-xl font-thin italic leading-10 md:bottom-[4ch] md:text-4xl whitespace-pre"
2932
id="slogan"
3033
>
3134
{conclusionData.slogal}
3235
</p>
3336

34-
<div className="-top-1/10 right-1/5 absolute flex h-full w-0.5 flex-col items-center overflow-visible md:relative md:right-auto md:ml-4 lg:ml-0">
37+
<div className="-top-1/10 right-1/4 absolute flex h-full w-0.5 flex-col items-center overflow-visible md:relative md:right-auto md:ml-4 lg:ml-0">
3538
<Image src={symbol} alt="V" id="symbol" className="relative right-px min-w-52" />
3639
<div className="bg-vector-orange relative bottom-8 min-h-[200%] min-w-0.5"></div>
3740
</div>
@@ -46,18 +49,18 @@ export default async function Page({ params }: { params: Promise<{ locale: 'en'
4649
className="hidden h-10 lg:block w-fit"
4750
/>
4851
</Link>
49-
<div className="top-1/9 relative flex basis-1/2 max-w-[45svw] flex-col items-center gap-y-10 md:top-auto lg:hidden">
50-
<div className="bg-vector-grey">
51-
<div className="text-vector-cream text-justify brightness-50 lg:bg-transparent [&_strong]:text-white">
52+
<div className="relative flex md:basis-1/2 flex-col items-center gap-y-10 md:top-auto lg:hidden">
53+
<div className="bg-vector-grey py-2">
54+
<div className="text-vector-cream brightness-50 lg:bg-transparent [&_strong]:text-white text-balance relative">
5255
<RichText data={conclusionData.message} />
5356
</div>
5457
</div>
5558
<Image
5659
src={whiteLogo}
5760
alt="Vector: Interior Design"
58-
className="h-10 self-center bg-vector-grey w-fit"
61+
className="h-10 self-start bg-vector-grey w-fit"
5962
/>
60-
<div className="bg-vector-orange -bottom-15 absolute right-0 h-2 w-8"></div>
63+
<div className="bg-vector-orange bottom-0 absolute right-0 h-2 w-8"></div>
6164
</div>
6265
<div className="bg-vector-orange -bottom-15 right-10 hidden h-2 w-8 lg:absolute lg:block"></div>
6366
</div>

src/app/(frontend)/[locale]/page.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { Link } from '@/i18n/navigation'
1616

1717
import '@styles/descriptions.scss'
1818
import '@styles/nav.scss'
19+
import '@styles/homePage.scss'
1920
import Image from '@/components/global/Image'
2021
import designer from '@public/images/tony.jpg'
2122

src/app/(frontend)/[locale]/projects/[id]/page.tsx

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,13 @@ import { notFound } from 'next/navigation'
55
import { getTranslations, setRequestLocale } from 'next-intl/server'
66
import { RichText } from '@payloadcms/richtext-lexical/react'
77
import headersConverter from '@/lib/utils/converter'
8+
import NextProject from '@/components/nextProjects'
9+
import '@styles/project.scss'
810

911
import { ReactNode } from 'react'
1012

1113
import '@styles/arrow.css'
1214
import '@styles/descriptions.scss'
13-
import { Link } from '@/i18n/navigation'
1415
import { draftMode } from 'next/headers'
1516
import { Metadata } from 'next'
1617
import { convertLexicalToPlaintext } from '@payloadcms/richtext-lexical/plaintext'
@@ -240,7 +241,7 @@ const Page = async ({ params }: Props) => {
240241
{project.images?.slice(1).map((img) => (
241242
<div
242243
key={img.id}
243-
className="min-h-svh flex items-center justify-center"
244+
className="min-h-svh flex items-center justify-center img-container"
244245
style={{
245246
backgroundColor:
246247
img.blockType === 'image'
@@ -255,10 +256,18 @@ const Page = async ({ params }: Props) => {
255256
))}
256257
</div>
257258
<div className="block lg:hidden">
258-
{project.images?.slice(1).map((img, i, arr) => (
259+
{project.images?.slice(1).map((img) => (
259260
<div
260261
key={img.id}
261-
className={`${i === arr.length - 1 ? '[&>figure]:last:pb-50!' : ''}`}
262+
className="img-container"
263+
style={{
264+
backgroundColor:
265+
img.blockType === 'image'
266+
? img.bgColor
267+
: img.blockType === 'imageGroup'
268+
? img.images?.at(-1)?.bgColor
269+
: 'transparent',
270+
}}
262271
>
263272
{img.blockType === 'image'
264273
? PhoneImage(img)
@@ -268,13 +277,9 @@ const Page = async ({ params }: Props) => {
268277
</div>
269278
</>
270279
</div>
271-
<Link
272-
href={lastProject ? '/conclusion' : `/projects?project=${currentProjectIndex + 1}`}
273-
className="absolute bottom-10 left-49/100 text-6xl font-bold"
274-
id="arrow"
275-
>
276-
&gt;
277-
</Link>
280+
<div className="absolute bottom-18 left-1/2 -translate-x-1/2">
281+
<NextProject next={lastProject ? 'conclusion' : project.id + 1} />
282+
</div>
278283
</div>
279284
)
280285
}

src/components/carousel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ export default function Carousel({ projects }: Props) {
156156
}}
157157
/>
158158
<div className="img-overlay"></div>
159-
<figcaption className="font-Nexa uppercase font-bold text-center text-sm w-4/5 absolute z-20 top-1/2 left-1/2 bg-vector-black/40 -translate-1/2 border-1 border-vector-cream/30 p-2">
159+
<figcaption className="font-Nexa uppercase font-bold text-center text-sm w-4/5 absolute z-20 top-1/2 left-1/2 bg-vector-black/70 -translate-1/2 border-1 border-vector-cream/30 p-2">
160160
{i + 1}. {name}
161161
</figcaption>
162162
</figure>

src/components/nextProjects.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
'use client'
2+
3+
import { Link } from '@/i18n/navigation'
4+
import { useTranslations } from 'next-intl'
5+
import { useEffect, useRef } from 'react'
6+
7+
export default function NextProject({ next }: { next: number | 'conclusion' }) {
8+
const t = useTranslations('Project')
9+
10+
const nextLink = useRef<HTMLAnchorElement>(null)
11+
12+
const lastProject = next === 'conclusion'
13+
14+
useEffect(() => {
15+
const intersectionObserver = new IntersectionObserver(
16+
(elements) => {
17+
if (elements.at(0)?.isIntersecting) nextLink.current?.classList.add('visible')
18+
},
19+
{
20+
threshold: 1,
21+
},
22+
)
23+
24+
intersectionObserver.observe(document.getElementById('next-link')!)
25+
26+
return () => intersectionObserver.disconnect()
27+
})
28+
29+
return (
30+
<Link
31+
href={lastProject ? '/conclusion' : `/projects/${next}`}
32+
id="next-link"
33+
ref={nextLink}
34+
className="text-2xl border-1 border-vector-cream p-2 font-bold"
35+
>
36+
{t('next')}
37+
</Link>
38+
)
39+
}

src/lib/styles/homePage.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
#welcome figcaption {
2+
opacity: 0;
3+
animation: fade-text 1s ease-in-out 1 forwards;
4+
animation-delay: 1s;
5+
}
6+
7+
@keyframes fade-text {
8+
from {
9+
opacity: 0;
10+
}
11+
to {
12+
opacity: 1;
13+
}
14+
}

src/lib/styles/project.scss

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.img-container:last-child {
2+
padding-bottom: 8.75rem;
3+
}
4+
5+
#next-link {
6+
opacity: 0;
7+
transition: transform 0.2s ease-in-out;
8+
display: inline-block;
9+
10+
&:hover {
11+
transform: scale(1.1);
12+
}
13+
14+
&.visible {
15+
animation: fade-in 1s ease-out 0.5s 1 forwards;
16+
}
17+
}
18+
19+
@keyframes fade-in {
20+
from {
21+
opacity: 0;
22+
}
23+
to {
24+
opacity: 1;
25+
}
26+
}

0 commit comments

Comments
 (0)