Tweak styling

Author: Maypher

messages/en.json

@@ -10,7 +10,8 @@
     "home": "Main Page"
   },
   "Project": {
-    "area": "Area"
+    "area": "Area",
+    "next": "Next"
   },
   "Metadata": {
     "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

@@ -10,7 +10,8 @@
     "home": "Página Principal"
   },
   "Project": {
-    "area": "Área"
+    "area": "Área",
+    "next": "Siguiente"
   },
   "Metadata": {
     "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

@@ -6,6 +6,7 @@ import { RichText } from '@payloadcms/richtext-lexical/react'
 import { Link } from '@/i18n/navigation'
 import Image from '@/components/global/Image'
 import { draftMode } from 'next/headers'
+import { setRequestLocale } from 'next-intl/server'
 
 export const dynamic = 'error'
 
@@ -14,6 +15,8 @@ export default async function Page({ params }: { params: Promise<{ locale: 'en'
   const { isEnabled } = await draftMode()
   const { locale } = await params
 
+  setRequestLocale(locale)
+
   const conclusionData = await payload.findGlobal({
     slug: 'conclusion',
     overrideAccess: isEnabled,
@@ -23,15 +26,15 @@ export default async function Page({ params }: { params: Promise<{ locale: 'en'
 
   return (
     <>
-      <div className="set-header-screen bg-vector-grey min-h-150 relative flex items-center justify-evenly overflow-clip">
+      <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">
         <p
-          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"
+          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"
           id="slogan"
         >
           {conclusionData.slogal}
         </p>
 
-        <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">
+        <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">
           <Image src={symbol} alt="V" id="symbol" className="relative right-px min-w-52" />
           <div className="bg-vector-orange relative bottom-8 min-h-[200%] min-w-0.5"></div>
         </div>
@@ -46,18 +49,18 @@ export default async function Page({ params }: { params: Promise<{ locale: 'en'
             className="hidden h-10 lg:block w-fit"
           />
         </Link>
-        <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">
-          <div className="bg-vector-grey">
-            <div className="text-vector-cream text-justify brightness-50 lg:bg-transparent [&_strong]:text-white">
+        <div className="relative flex md:basis-1/2 flex-col items-center gap-y-10 md:top-auto lg:hidden">
+          <div className="bg-vector-grey py-2">
+            <div className="text-vector-cream brightness-50 lg:bg-transparent [&_strong]:text-white text-balance relative">
               <RichText data={conclusionData.message} />
             </div>
           </div>
           <Image
             src={whiteLogo}
             alt="Vector: Interior Design"
-            className="h-10 self-center bg-vector-grey w-fit"
+            className="h-10 self-start bg-vector-grey w-fit"
           />
-          <div className="bg-vector-orange -bottom-15 absolute right-0 h-2 w-8"></div>
+          <div className="bg-vector-orange bottom-0 absolute right-0 h-2 w-8"></div>
         </div>
         <div className="bg-vector-orange -bottom-15 right-10 hidden h-2 w-8 lg:absolute lg:block"></div>
       </div>

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

@@ -16,6 +16,7 @@ import { Link } from '@/i18n/navigation'
 
 import '@styles/descriptions.scss'
 import '@styles/nav.scss'
+import '@styles/homePage.scss'
 import Image from '@/components/global/Image'
 import designer from '@public/images/tony.jpg'
 

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

@@ -5,12 +5,13 @@ import { notFound } from 'next/navigation'
 import { getTranslations, setRequestLocale } from 'next-intl/server'
 import { RichText } from '@payloadcms/richtext-lexical/react'
 import headersConverter from '@/lib/utils/converter'
+import NextProject from '@/components/nextProjects'
+import '@styles/project.scss'
 
 import { ReactNode } from 'react'
 
 import '@styles/arrow.css'
 import '@styles/descriptions.scss'
-import { Link } from '@/i18n/navigation'
 import { draftMode } from 'next/headers'
 import { Metadata } from 'next'
 import { convertLexicalToPlaintext } from '@payloadcms/richtext-lexical/plaintext'
@@ -240,7 +241,7 @@ const Page = async ({ params }: Props) => {
             {project.images?.slice(1).map((img) => (
               <div
                 key={img.id}
-                className="min-h-svh flex items-center justify-center"
+                className="min-h-svh flex items-center justify-center img-container"
                 style={{
                   backgroundColor:
                     img.blockType === 'image'
@@ -255,10 +256,18 @@ const Page = async ({ params }: Props) => {
             ))}
           </div>
           <div className="block lg:hidden">
-            {project.images?.slice(1).map((img, i, arr) => (
+            {project.images?.slice(1).map((img) => (
               <div
                 key={img.id}
-                className={`${i === arr.length - 1 ? '[&>figure]:last:pb-50!' : ''}`}
+                className="img-container"
+                style={{
+                  backgroundColor:
+                    img.blockType === 'image'
+                      ? img.bgColor
+                      : img.blockType === 'imageGroup'
+                        ? img.images?.at(-1)?.bgColor
+                        : 'transparent',
+                }}
               >
                 {img.blockType === 'image'
                   ? PhoneImage(img)
@@ -268,13 +277,9 @@ const Page = async ({ params }: Props) => {
           </div>
         </>
       </div>
-      <Link
-        href={lastProject ? '/conclusion' : `/projects?project=${currentProjectIndex + 1}`}
-        className="absolute bottom-10 left-49/100 text-6xl font-bold"
-        id="arrow"
-      >
-        &gt;
-      </Link>
+      <div className="absolute bottom-18 left-1/2 -translate-x-1/2">
+        <NextProject next={lastProject ? 'conclusion' : project.id + 1} />
+      </div>
     </div>
   )
 }

src/components/carousel.tsx

@@ -156,7 +156,7 @@ export default function Carousel({ projects }: Props) {
                         }}
                       />
                       <div className="img-overlay"></div>
-                      <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">
+                      <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">
                         {i + 1}. {name}
                       </figcaption>
                     </figure>

src/components/nextProjects.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { Link } from '@/i18n/navigation'
+import { useTranslations } from 'next-intl'
+import { useEffect, useRef } from 'react'
+
+export default function NextProject({ next }: { next: number | 'conclusion' }) {
+  const t = useTranslations('Project')
+
+  const nextLink = useRef<HTMLAnchorElement>(null)
+
+  const lastProject = next === 'conclusion'
+
+  useEffect(() => {
+    const intersectionObserver = new IntersectionObserver(
+      (elements) => {
+        if (elements.at(0)?.isIntersecting) nextLink.current?.classList.add('visible')
+      },
+      {
+        threshold: 1,
+      },
+    )
+
+    intersectionObserver.observe(document.getElementById('next-link')!)
+
+    return () => intersectionObserver.disconnect()
+  })
+
+  return (
+    <Link
+      href={lastProject ? '/conclusion' : `/projects/${next}`}
+      id="next-link"
+      ref={nextLink}
+      className="text-2xl border-1 border-vector-cream p-2 font-bold"
+    >
+      {t('next')}
+    </Link>
+  )
+}

src/lib/styles/homePage.scss

@@ -0,0 +1,14 @@
+#welcome figcaption {
+    opacity: 0;
+    animation: fade-text 1s ease-in-out 1 forwards;
+    animation-delay: 1s;
+}
+
+@keyframes fade-text {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}

src/lib/styles/project.scss

@@ -0,0 +1,26 @@
+.img-container:last-child {
+    padding-bottom: 8.75rem;
+}
+
+#next-link {
+    opacity: 0;
+    transition: transform 0.2s ease-in-out;
+    display: inline-block;
+    
+    &:hover {
+        transform: scale(1.1);
+    }
+
+    &.visible {
+        animation: fade-in 1s ease-out 0.5s 1 forwards;
+    }
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}