feat: remove tiles
All checks were successful
Build & Deploy / 🔍 Prepare Environment (push) Successful in 6s
Build & Deploy / 🧪 QA (push) Successful in 1m15s
Build & Deploy / 🏗️ Build (push) Successful in 4m52s
Build & Deploy / 🚀 Deploy (push) Successful in 11s
Build & Deploy / 🔔 Notifications (push) Successful in 2s
All checks were successful
Build & Deploy / 🔍 Prepare Environment (push) Successful in 6s
Build & Deploy / 🧪 QA (push) Successful in 1m15s
Build & Deploy / 🏗️ Build (push) Successful in 4m52s
Build & Deploy / 🚀 Deploy (push) Successful in 11s
Build & Deploy / 🔔 Notifications (push) Successful in 2s
This commit is contained in:
@@ -14,7 +14,6 @@ import { Button } from "./Button";
|
|||||||
import { Counter } from "./Counter";
|
import { Counter } from "./Counter";
|
||||||
import { Reveal } from "./Reveal";
|
import { Reveal } from "./Reveal";
|
||||||
import { TechBackground } from "./TechBackground";
|
import { TechBackground } from "./TechBackground";
|
||||||
import { TileGrid } from "./TileGrid";
|
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
@@ -80,7 +79,6 @@ export default function Home() {
|
|||||||
<div className="absolute inset-0 bg-gradient-to-r from-slate-100/80 via-white/90 to-white/40 md:to-transparent" />
|
<div className="absolute inset-0 bg-gradient-to-r from-slate-100/80 via-white/90 to-white/40 md:to-transparent" />
|
||||||
<TechBackground />
|
<TechBackground />
|
||||||
</div>
|
</div>
|
||||||
<TileGrid />
|
|
||||||
|
|
||||||
<div className="container-custom relative z-10">
|
<div className="container-custom relative z-10">
|
||||||
<div className="text-left relative">
|
<div className="text-left relative">
|
||||||
|
|||||||
@@ -1,52 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import { m } from "framer-motion";
|
|
||||||
|
|
||||||
export const TileGrid = () => {
|
|
||||||
const [mounted, setMounted] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setMounted(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
if (!mounted) return null;
|
|
||||||
|
|
||||||
const rows = 7;
|
|
||||||
const cols = 8;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="absolute inset-0 pointer-events-none overflow-hidden z-[1]">
|
|
||||||
<div className="flex flex-col gap-8 md:gap-12 min-w-[120%] min-h-[120%] -left-[10%] -top-[10%] absolute">
|
|
||||||
{[...Array(rows)].map((_, rowIndex) => (
|
|
||||||
<div
|
|
||||||
key={rowIndex}
|
|
||||||
className="flex gap-8 md:gap-12 justify-center"
|
|
||||||
style={{
|
|
||||||
transform:
|
|
||||||
rowIndex % 2 === 0 ? "translateX(0)" : "translateX(100px)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{[...Array(cols)].map((_, colIndex) => (
|
|
||||||
<m.div
|
|
||||||
key={`${rowIndex}-${colIndex}`}
|
|
||||||
initial={{ opacity: 0.03 }}
|
|
||||||
animate={{
|
|
||||||
opacity: [0.03, Math.random() > 0.8 ? 0.15 : 0.03, 0.03],
|
|
||||||
scale: [1, Math.random() > 0.8 ? 1.02 : 1, 1],
|
|
||||||
}}
|
|
||||||
transition={{
|
|
||||||
duration: 8 + Math.random() * 8,
|
|
||||||
repeat: Infinity,
|
|
||||||
delay: Math.random() * 15,
|
|
||||||
ease: "easeInOut",
|
|
||||||
}}
|
|
||||||
className="w-32 h-32 md:w-56 md:h-56 bg-white/5 rounded-3xl md:rounded-[3rem] border border-white/10 shadow-[0_8px_32px_0_rgba(31,38,135,0.03)] shrink-0 will-change-transform"
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user