Update: Dark Theme + Added: next-alt

html/style.css

@@ -1,5 +1,22 @@
 @import url("https://fonts.googleapis.com/css2?family=Figtree&display=swap");
 
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	font-family: 'Figtree', sans-serif;
+}
+
+:root {
+	--background: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--background: #181826;
+	}
+}
+
 * {
 	margin: 0;
 	padding: 0;

nextjs/src/components/Container.tsx

@@ -1,33 +1,37 @@
-import React, { useState } from 'react';
-import { StyledContainer } from './StyledContainer';
-import Box from './Box';
+import React from 'react';
+import ContainerDetails from './ContainerDetails';
 
 const Container: React.FC = () => {
-  const [hoverIndex, setHoverIndex] = useState<number | null>(null);
-
-  const boxes = [
-    { img: 'https://i.postimg.cc/sgBkfbtx/img-1.jpg', text: 'Renji', position: 'left' as const }, // Aumenta para a direita
-    { img: 'https://i.postimg.cc/3RZ6bhDS/img-2.jpg', text: 'Sora', position: 'center' as const },
-    { img: 'https://i.postimg.cc/DZhHg0m4/img-3.jpg', text: 'Kaito', position: 'center' as const },
-    { img: 'https://i.postimg.cc/KjqWx5ft/img-4.jpg', text: 'Tsuki', position: 'center' as const },
-    { img: 'https://i.postimg.cc/nrcWyW4H/img-5.jpg', text: 'Mitsui', position: 'right' as const }, // Aumenta para a esquerda
-  ];
-
   return (
-    <StyledContainer hoverIndex={hoverIndex}>
-      {boxes.map((box, index) => (
-        <Box
-          key={index}
-          img={box.img}
-          text={box.text}
-          isHovered={hoverIndex === index}
-          position={box.position}
-          isOdd={index % 2 === 0} // Alterna as posições ímpar/par
-          onMouseEnter={() => setHoverIndex(index)}
-          onMouseLeave={() => setHoverIndex(null)}
-        />
-      ))}
-    </StyledContainer>
+    <ContainerDetails>
+      <div className="container">
+        <div
+          className="box box-1"
+          style={{ '--img': 'url(https://i.postimg.cc/sgBkfbtx/img-1.jpg)' } as React.CSSProperties}
+          data-text="Renji"
+        ></div>
+        <div
+          className="box box-2"
+          style={{ '--img': 'url(https://i.postimg.cc/3RZ6bhDS/img-2.jpg)' } as React.CSSProperties}
+          data-text="Sora"
+        ></div>
+        <div
+          className="box box-3"
+          style={{ '--img': 'url(https://i.postimg.cc/DZhHg0m4/img-3.jpg)' } as React.CSSProperties}
+          data-text="Kaito"
+        ></div>
+        <div
+          className="box box-4"
+          style={{ '--img': 'url(https://i.postimg.cc/KjqWx5ft/img-4.jpg)' } as React.CSSProperties}
+          data-text="Tsuki"
+        ></div>
+        <div
+          className="box box-5"
+          style={{ '--img': 'url(https://i.postimg.cc/nrcWyW4H/img-5.jpg)' } as React.CSSProperties}
+          data-text="Mitsui"
+        ></div>
+      </div>
+    </ContainerDetails>
   );
 };
 

nextjs/src/components/ContainerDetails.tsx

@@ -0,0 +1,88 @@
+import styled from 'styled-components';
+
+const ContainerDetails = styled.div`
+display: flex;
+justify-content: center;
+align-items: center;
+min-height: 100vh;
+
+.container {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    gap: 1em;
+    width: 800px;
+    height: 500px;
+    transition: all 400ms ease-in-out;
+}
+
+.container:hover .box {
+    filter: grayscale(100%) opacity(0.24);
+}
+
+.box {
+    position: relative;
+    background: var(--img) center center;
+    background-size: cover;
+    transition: all 400ms ease-in-out;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    filter: grayscale(0%) opacity(1); /* Imagens começam coloridas */
+    transform: translateY(0); /* Corrige o hover para manter a posição inicial */
+}
+
+.container .box:hover {
+    filter: grayscale(0%) opacity(1);
+}
+
+.container:has(.box-1:hover) {
+    grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
+}
+
+.container:has(.box-2:hover) {
+    grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
+}
+
+.container:has(.box-3:hover) {
+    grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
+}
+
+.container:has(.box-4:hover) {
+    grid-template-columns: 1fr 1fr 1fr 3fr 1fr;
+}
+
+.container:has(.box-5:hover) {
+    grid-template-columns: 1fr 1fr 1fr 1fr 3fr;
+}
+
+.box:nth-child(odd) {
+    transform: translateY(-16px); /* Posições ímpares mais altas */
+}
+
+.box:nth-child(even) {
+    transform: translateY(16px); /* Posições pares mais baixas */
+}
+
+.box::after {
+    content: attr(data-text);
+    position: absolute;
+    bottom: 20px;
+    background: #000;
+    color: #fff;
+    padding: 10px 10px 10px 14px;
+    letter-spacing: 4px;
+    text-transform: uppercase;
+    transform: translateY(60px);
+    opacity: 0;
+    transition: all 400ms ease-in-out;
+}
+
+.box:hover::after {
+    transform: translateY(0);
+    opacity: 1;
+    transition-delay: 400ms;
+}
+`;
+
+export default ContainerDetails;

nextjs/src/pages/_app.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import GlobalStyles from '@/styles/GlobalStyles';
 import Container from '@/components/Container';
+import "@/styles/globals.css";
 
 const App: React.FC = () => {
   const [isClient, setIsClient] = useState(false);
@@ -15,7 +15,6 @@ const App: React.FC = () => {
 
   return (
     <>
-      <GlobalStyles />
       <Container />
     </>
   );