🪛 Added darkmode and fixed coding standards
This commit is contained in:
RJ
@@ -1,4 +1,4 @@
|
||||
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
|
||||
import { Breadcrumbs } from '@/components/layout/breadcrumbs';
|
||||
|
||||
export default function AboutBreadcrumb() {
|
||||
return (
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
|
||||
import { Breadcrumbs } from '@/components/layout/breadcrumbs';
|
||||
import { getPostBySlug } from '@/lib/markdown';
|
||||
|
||||
interface BreadcrumbItem {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
|
||||
import { Breadcrumbs } from '@/components/layout/breadcrumbs';
|
||||
|
||||
export default function BlogBreadcrumb() {
|
||||
return (
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
|
||||
import { Breadcrumbs } from '@/components/layout/breadcrumbs';
|
||||
|
||||
export default function DefaultBreadcrumb() {
|
||||
return <Breadcrumbs />;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
|
||||
import { Breadcrumbs } from '@/components/layout/breadcrumbs';
|
||||
|
||||
export default async function TagBreadcrumb({
|
||||
params,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
|
||||
import { Breadcrumbs } from '@/components/layout/breadcrumbs';
|
||||
|
||||
export default function TagsBreadcrumb() {
|
||||
return (
|
||||
|
||||
223
app/globals.css
223
app/globals.css
@@ -1,5 +1,37 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-*: initial;
|
||||
}
|
||||
|
||||
@variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Light mode colors */
|
||||
--bg-primary: 241 245 249;
|
||||
--bg-secondary: 226 232 240;
|
||||
--bg-tertiary: 203 213 225;
|
||||
--text-primary: 15 23 42;
|
||||
--text-secondary: 51 65 85;
|
||||
--text-muted: 100 116 139;
|
||||
--border-primary: 203 213 225;
|
||||
--border-subtle: 226 232 240;
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Dark mode colors - INDUSTRIAL */
|
||||
--bg-primary: 24 24 27;
|
||||
--bg-secondary: 15 23 42;
|
||||
--bg-tertiary: 30 41 59;
|
||||
--text-primary: 241 245 249;
|
||||
--text-secondary: 203 213 225;
|
||||
--text-muted: 100 116 139;
|
||||
--border-primary: 71 85 105;
|
||||
--border-subtle: 30 41 59;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
@@ -11,21 +43,99 @@
|
||||
|
||||
/* Industrial/Terminal aesthetic utilities */
|
||||
.grid-bg {
|
||||
background-image: url('/grid.svg');
|
||||
background-image:
|
||||
linear-gradient(rgba(100, 116, 139, 0.1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(100, 116, 139, 0.1) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
/* Noise texture */
|
||||
.noise-bg {
|
||||
background-image: url('/noise.svg');
|
||||
opacity: 0.03;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Scanline effect */
|
||||
.scanline {
|
||||
background: repeating-linear-gradient(
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(0, 0, 0, 0.3) 2px,
|
||||
rgba(0, 0, 0, 0.3) 4px
|
||||
transparent 0%,
|
||||
rgba(6, 182, 212, 0.1) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 100% 3px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.scanline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0%,
|
||||
rgba(6, 182, 212, 0.05) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: scanline 8s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* CRT screen curvature effect */
|
||||
.crt-effect {
|
||||
animation: flicker 0.15s infinite;
|
||||
}
|
||||
|
||||
/* Glitch text effect */
|
||||
.glitch-text {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.glitch-text::before,
|
||||
.glitch-text::after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.glitch-text.active::before {
|
||||
color: #06b6d4;
|
||||
animation: glitch-1 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
|
||||
transform: translate(-2px, -2px);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.glitch-text.active::after {
|
||||
color: #10b981;
|
||||
animation: glitch-2 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
|
||||
transform: translate(2px, 2px);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@keyframes glitch-1 {
|
||||
0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); transform: translate(0); }
|
||||
20% { clip-path: polygon(0 15%, 100% 15%, 100% 65%, 0 65%); }
|
||||
40% { clip-path: polygon(0 30%, 100% 30%, 100% 70%, 0 70%); }
|
||||
60% { clip-path: polygon(0 5%, 100% 5%, 100% 60%, 0 60%); }
|
||||
80% { clip-path: polygon(0 25%, 100% 25%, 100% 40%, 0 40%); }
|
||||
}
|
||||
|
||||
@keyframes glitch-2 {
|
||||
0%, 100% { clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); transform: translate(0); }
|
||||
20% { clip-path: polygon(0 70%, 100% 70%, 100% 95%, 0 95%); }
|
||||
40% { clip-path: polygon(0 40%, 100% 40%, 100% 85%, 0 85%); }
|
||||
60% { clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); }
|
||||
80% { clip-path: polygon(0 50%, 100% 50%, 100% 90%, 0 90%); }
|
||||
}
|
||||
|
||||
/* Grayscale filter with instant toggle */
|
||||
@@ -36,4 +146,105 @@
|
||||
.grayscale-0 {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
|
||||
/* Cyberpunk Glitch Effect for Button */
|
||||
.glitch-btn {
|
||||
position: relative;
|
||||
animation: glitch 300ms cubic-bezier(.25, .46, .45, .94);
|
||||
}
|
||||
|
||||
.glitch-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.8;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
|
||||
}
|
||||
|
||||
.glitch-layer:first-of-type {
|
||||
animation: glitch-1 300ms cubic-bezier(.25, .46, .45, .94);
|
||||
color: rgb(6 182 212); /* cyan-500 */
|
||||
transform: translate(-2px, 0);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
|
||||
}
|
||||
|
||||
.glitch-layer:last-of-type {
|
||||
animation: glitch-2 300ms cubic-bezier(.25, .46, .45, .94);
|
||||
color: rgb(16 185 129); /* emerald-500 */
|
||||
transform: translate(2px, 0);
|
||||
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
@keyframes glitch-1 {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
|
||||
}
|
||||
25% {
|
||||
transform: translate(-3px, 2px);
|
||||
clip-path: polygon(0 10%, 100% 10%, 100% 45%, 0 45%);
|
||||
}
|
||||
50% {
|
||||
transform: translate(3px, -2px);
|
||||
clip-path: polygon(0 20%, 100% 20%, 100% 55%, 0 55%);
|
||||
}
|
||||
75% {
|
||||
transform: translate(-2px, -1px);
|
||||
clip-path: polygon(0 5%, 100% 5%, 100% 40%, 0 40%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glitch-2 {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0);
|
||||
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
|
||||
}
|
||||
25% {
|
||||
transform: translate(3px, -2px);
|
||||
clip-path: polygon(0 55%, 100% 55%, 100% 90%, 0 90%);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-3px, 2px);
|
||||
clip-path: polygon(0 45%, 100% 45%, 100% 80%, 0 80%);
|
||||
}
|
||||
75% {
|
||||
transform: translate(2px, 1px);
|
||||
clip-path: polygon(0 60%, 100% 60%, 100% 95%, 0 95%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Border Pulse Animation */
|
||||
.border-pulse {
|
||||
animation: pulse-border 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Screen Flicker Effect */
|
||||
body.screen-flicker {
|
||||
animation: flicker 150ms ease-in-out;
|
||||
}
|
||||
|
||||
body.screen-flicker::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(6, 182, 212, 0.1);
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
animation: flicker 150ms ease-in-out;
|
||||
}
|
||||
|
||||
/* CRT Noise Texture */
|
||||
@supports (filter: url('#noise')) {
|
||||
.noise-bg {
|
||||
filter: url('#noise');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import type { Metadata } from 'next'
|
||||
import { JetBrains_Mono } from 'next/font/google'
|
||||
import './globals.css'
|
||||
import { ThemeProvider } from '@/providers/providers'
|
||||
|
||||
const jetbrainsMono = JetBrains_Mono({ subsets: ['latin'], variable: '--font-mono' })
|
||||
|
||||
@@ -33,20 +34,28 @@ export default function RootLayout({
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="ro" className={jetbrainsMono.variable}>
|
||||
<body className="font-mono bg-zinc-900 text-slate-100">
|
||||
{children}
|
||||
<html lang="ro" suppressHydrationWarning className={jetbrainsMono.variable}>
|
||||
<body className="font-mono bg-zinc-50 text-slate-900 dark:bg-zinc-900 dark:text-slate-100 transition-colors duration-300">
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="dark"
|
||||
enableSystem={false}
|
||||
storageKey="blog-theme"
|
||||
disableTransitionOnChange={false}
|
||||
>
|
||||
{children}
|
||||
|
||||
{/* Footer - from worktree-agent-1 */}
|
||||
<footer className="border-t-4 border-slate-800 bg-slate-900">
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="border-2 border-slate-800 p-6">
|
||||
<p className="text-center text-slate-500 font-mono text-xs uppercase tracking-wider">
|
||||
© 2025 // BLOG & PORTOFOLIU // ALL RIGHTS RESERVED
|
||||
</p>
|
||||
{/* Footer - from worktree-agent-1 */}
|
||||
<footer className="border-t-4 border-slate-300 dark:border-slate-800 bg-zinc-100 dark:bg-slate-900 transition-colors duration-300">
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="border-2 border-slate-300 dark:border-slate-800 p-6">
|
||||
<p className="text-center text-slate-500 dark:text-slate-500 font-mono text-xs uppercase tracking-wider">
|
||||
© 2025 // BLOG & PORTOFOLIU // ALL RIGHTS RESERVED
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
|
||||
110
app/page.tsx
110
app/page.tsx
@@ -2,48 +2,50 @@ import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import { getAllPosts } from '@/lib/markdown'
|
||||
import { formatDate } from '@/lib/utils'
|
||||
import { ThemeToggle } from '@/components/theme-toggle'
|
||||
|
||||
export default async function HomePage() {
|
||||
const allPosts = await getAllPosts()
|
||||
const featuredPosts = allPosts.slice(0, 6)
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-zinc-900">
|
||||
<main className="min-h-screen bg-zinc-50 dark:bg-zinc-900 transition-colors duration-300">
|
||||
{/* Hero Section - from worktree-agent-2 */}
|
||||
<section className="relative min-h-screen flex items-center justify-center bg-zinc-900 overflow-hidden">
|
||||
<section className="relative min-h-screen flex items-center justify-center bg-zinc-100 dark:bg-zinc-900 overflow-hidden transition-colors duration-300">
|
||||
<div className="absolute inset-0 grid-bg opacity-10"></div>
|
||||
<div className="absolute inset-0 scanline"></div>
|
||||
<div className="absolute inset-0 noise-bg"></div>
|
||||
|
||||
<div className="relative z-10 max-w-5xl mx-auto px-6 w-full">
|
||||
<div className="border-4 border-slate-700 bg-slate-900/80 p-8 md:p-12">
|
||||
<div className="border-4 border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-900/80 p-8 md:p-12 transition-colors duration-300">
|
||||
{/* Logo */}
|
||||
<div className="mb-8 flex items-center justify-between border-b-2 border-slate-800 pb-4">
|
||||
<div className="mb-8 flex items-center justify-between border-b-2 border-slate-300 dark:border-slate-800 pb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Image src="/logo.png" alt="Logo" width={32} height={32} className="opacity-80" />
|
||||
<span className="font-mono text-xs text-slate-500 uppercase tracking-widest">TERMINAL:// V2.0</span>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<Link href="/blog" className="font-mono text-xs text-slate-400 uppercase tracking-wider hover:text-cyan-400">[BLOG]</Link>
|
||||
<Link href="/about" className="font-mono text-xs text-slate-400 uppercase tracking-wider hover:text-cyan-400">[ABOUT]</Link>
|
||||
<div className="flex gap-4 items-center">
|
||||
<Link href="/blog" className="font-mono text-xs text-slate-600 dark:text-slate-400 uppercase tracking-wider hover:text-cyan-600 dark:hover:text-cyan-400">[BLOG]</Link>
|
||||
<Link href="/about" className="font-mono text-xs text-slate-600 dark:text-slate-400 uppercase tracking-wider hover:text-cyan-600 dark:hover:text-cyan-400">[ABOUT]</Link>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-cyan-900 pl-6 mb-8">
|
||||
<p className="font-mono text-xs text-slate-500 uppercase tracking-widest mb-2">DOCUMENT LEVEL-1 // CLASSIFIED</p>
|
||||
<h1 className="text-4xl md:text-6xl lg:text-7xl font-mono font-bold text-slate-100 uppercase tracking-tight mb-6">
|
||||
<div className="border-l-4 border-cyan-700 dark:border-cyan-900 pl-6 mb-8">
|
||||
<p className="font-mono text-xs text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-2">DOCUMENT LEVEL-1 // CLASSIFIED</p>
|
||||
<h1 className="text-4xl md:text-6xl lg:text-7xl font-mono font-bold text-slate-900 dark:text-slate-100 uppercase tracking-tight mb-6">
|
||||
BUILD. WRITE.<br/>SHARE.
|
||||
</h1>
|
||||
<p className="text-base md:text-lg lg:text-xl text-slate-400 font-mono leading-relaxed max-w-2xl">
|
||||
<p className="text-base md:text-lg lg:text-xl text-slate-700 dark:text-slate-400 font-mono leading-relaxed max-w-2xl">
|
||||
> Explorează idei despre dezvoltare, design și tehnologie_
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 flex-wrap mt-12">
|
||||
<Link href="/blog" className="px-6 md:px-8 py-3 md:py-4 bg-cyan-900 text-slate-100 border-2 border-cyan-700 font-mono font-bold uppercase text-xs md:text-sm tracking-wider hover:bg-cyan-800 hover:border-cyan-600 rounded-none">
|
||||
<Link href="/blog" className="px-6 md:px-8 py-3 md:py-4 bg-cyan-700 dark:bg-cyan-900 text-white dark:text-slate-100 border-2 border-cyan-600 dark:border-cyan-700 font-mono font-bold uppercase text-xs md:text-sm tracking-wider hover:bg-cyan-600 dark:hover:bg-cyan-800 hover:border-cyan-500 dark:hover:border-cyan-600 rounded-none transition-colors duration-200">
|
||||
[EXPLOREAZĂ BLOG]
|
||||
</Link>
|
||||
<Link href="/about" className="px-6 md:px-8 py-3 md:py-4 bg-transparent text-slate-300 border-2 border-slate-700 font-mono font-bold uppercase text-xs md:text-sm tracking-wider hover:bg-slate-800 hover:border-slate-600 rounded-none">
|
||||
<Link href="/about" className="px-6 md:px-8 py-3 md:py-4 bg-transparent text-slate-700 dark:text-slate-300 border-2 border-slate-400 dark:border-slate-700 font-mono font-bold uppercase text-xs md:text-sm tracking-wider hover:bg-slate-200 dark:hover:bg-slate-800 hover:border-slate-500 dark:hover:border-slate-600 rounded-none transition-colors duration-200">
|
||||
[DESPRE MINE]
|
||||
</Link>
|
||||
</div>
|
||||
@@ -52,13 +54,13 @@ export default async function HomePage() {
|
||||
</section>
|
||||
|
||||
{/* Featured Posts Grid - from worktree-agent-1 */}
|
||||
<section className="py-24 bg-slate-900 border-t-4 border-slate-800">
|
||||
<section className="py-24 bg-zinc-100 dark:bg-slate-900 border-t-4 border-slate-300 dark:border-slate-800 transition-colors duration-300">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="border-l-4 border-emerald-900 pl-6 mb-12">
|
||||
<p className="font-mono text-xs text-slate-500 uppercase tracking-widest mb-2">
|
||||
<div className="border-l-4 border-emerald-700 dark:border-emerald-900 pl-6 mb-12">
|
||||
<p className="font-mono text-xs text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-2">
|
||||
ARCHIVE ACCESS // RECENT ENTRIES
|
||||
</p>
|
||||
<h2 className="text-3xl md:text-5xl font-mono font-bold text-slate-100 uppercase tracking-tight">
|
||||
<h2 className="text-3xl md:text-5xl font-mono font-bold text-slate-900 dark:text-slate-100 uppercase tracking-tight">
|
||||
> POSTĂRI RECENTE_
|
||||
</h2>
|
||||
</div>
|
||||
@@ -67,37 +69,37 @@ export default async function HomePage() {
|
||||
{featuredPosts.map((post, index) => (
|
||||
<article
|
||||
key={post.slug}
|
||||
className="group relative bg-slate-900 border-4 border-slate-700 overflow-hidden hover:border-cyan-900"
|
||||
className="group relative bg-white dark:bg-slate-900 border-4 border-slate-300 dark:border-slate-700 overflow-hidden hover:border-cyan-700 dark:hover:border-cyan-900 transition-colors duration-300"
|
||||
>
|
||||
<div className="aspect-video relative overflow-hidden bg-zinc-900">
|
||||
<div className="aspect-video relative overflow-hidden bg-zinc-200 dark:bg-zinc-900">
|
||||
{post.frontmatter.image ? (
|
||||
<Image
|
||||
src={post.frontmatter.image}
|
||||
alt={post.frontmatter.title}
|
||||
fill
|
||||
className="object-cover grayscale group-hover:grayscale-0"
|
||||
className="object-cover grayscale group-hover:grayscale-0 transition-all duration-300"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-zinc-800 flex items-center justify-center">
|
||||
<span className="font-mono text-6xl text-slate-700">#{String(index + 1).padStart(2, '0')}</span>
|
||||
<div className="w-full h-full bg-zinc-300 dark:bg-zinc-800 flex items-center justify-center">
|
||||
<span className="font-mono text-6xl text-slate-400 dark:text-slate-700">#{String(index + 1).padStart(2, '0')}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute inset-0 bg-zinc-900/60"></div>
|
||||
<div className="absolute top-0 left-0 right-0 bg-slate-900 border-b-2 border-slate-700 px-4 py-2">
|
||||
<span className="font-mono text-xs text-cyan-400 uppercase tracking-wider">
|
||||
<div className="absolute inset-0 bg-zinc-100/60 dark:bg-zinc-900/60"></div>
|
||||
<div className="absolute top-0 left-0 right-0 bg-white/90 dark:bg-slate-900 border-b-2 border-slate-300 dark:border-slate-700 px-4 py-2">
|
||||
<span className="font-mono text-xs text-cyan-600 dark:text-cyan-400 uppercase tracking-wider">
|
||||
FILE#{String(index + 1).padStart(3, '0')} // {post.frontmatter.category}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6 border-t-4 border-slate-800">
|
||||
<div className="border-l-4 border-emerald-900 pl-4">
|
||||
<h3 className="text-xl font-mono font-bold text-slate-100 mb-3 uppercase tracking-tight">
|
||||
<div className="p-6 border-t-4 border-slate-300 dark:border-slate-800">
|
||||
<div className="border-l-4 border-emerald-700 dark:border-emerald-900 pl-4">
|
||||
<h3 className="text-xl font-mono font-bold text-slate-900 dark:text-slate-100 mb-3 uppercase tracking-tight">
|
||||
{post.frontmatter.title}
|
||||
</h3>
|
||||
<p className="text-slate-400 text-sm leading-relaxed mb-4 font-mono">
|
||||
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-4 font-mono">
|
||||
{post.frontmatter.description}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 text-xs text-slate-500 font-mono mb-4">
|
||||
<div className="flex items-center gap-4 text-xs text-slate-500 dark:text-slate-500 font-mono mb-4">
|
||||
<span>{formatDate(post.frontmatter.date)}</span>
|
||||
<span>//</span>
|
||||
<span>{post.readingTime} MIN</span>
|
||||
@@ -105,7 +107,7 @@ export default async function HomePage() {
|
||||
</div>
|
||||
<Link
|
||||
href={`/blog/${post.slug}`}
|
||||
className="inline-flex items-center text-cyan-400 font-mono text-xs font-bold uppercase tracking-wider hover:text-cyan-300 border-2 border-slate-700 px-4 py-2 hover:border-cyan-900"
|
||||
className="inline-flex items-center text-cyan-600 dark:text-cyan-400 font-mono text-xs font-bold uppercase tracking-wider hover:text-cyan-500 dark:hover:text-cyan-300 border-2 border-slate-400 dark:border-slate-700 px-4 py-2 hover:border-cyan-700 dark:hover:border-cyan-900 transition-colors duration-200"
|
||||
>
|
||||
[ACCESEAZĂ] >>
|
||||
</Link>
|
||||
@@ -118,7 +120,7 @@ export default async function HomePage() {
|
||||
<div className="mt-12 text-center">
|
||||
<Link
|
||||
href="/blog"
|
||||
className="inline-flex items-center px-8 py-4 bg-transparent text-slate-300 border-2 border-slate-700 font-mono font-bold uppercase text-sm tracking-wider hover:bg-slate-800 hover:border-slate-600"
|
||||
className="inline-flex items-center px-8 py-4 bg-transparent text-slate-700 dark:text-slate-300 border-2 border-slate-400 dark:border-slate-700 font-mono font-bold uppercase text-sm tracking-wider hover:bg-slate-200 dark:hover:bg-slate-800 hover:border-slate-500 dark:hover:border-slate-600 transition-colors duration-200"
|
||||
>
|
||||
[VEZI TOATE ARTICOLELE] >>
|
||||
</Link>
|
||||
@@ -128,41 +130,41 @@ export default async function HomePage() {
|
||||
</section>
|
||||
|
||||
{/* Stats Section - from worktree-agent-1 */}
|
||||
<section className="py-24 bg-zinc-900 border-y-4 border-slate-800">
|
||||
<section className="py-24 bg-zinc-50 dark:bg-zinc-900 border-y-4 border-slate-300 dark:border-slate-800 transition-colors duration-300">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="border-l-4 border-teal-900 pl-6 mb-12">
|
||||
<p className="font-mono text-xs text-slate-500 uppercase tracking-widest mb-2">
|
||||
<div className="border-l-4 border-teal-700 dark:border-teal-900 pl-6 mb-12">
|
||||
<p className="font-mono text-xs text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-2">
|
||||
SYSTEM STATISTICS // DATABASE METRICS
|
||||
</p>
|
||||
<h2 className="text-3xl md:text-5xl font-mono font-bold text-slate-100 uppercase tracking-tight">
|
||||
<h2 className="text-3xl md:text-5xl font-mono font-bold text-slate-900 dark:text-slate-100 uppercase tracking-tight">
|
||||
> METRICI_
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="border-4 border-slate-700 bg-slate-900 p-8 text-center">
|
||||
<div className="text-6xl font-mono font-bold text-cyan-400 mb-4">
|
||||
<div className="border-4 border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 p-8 text-center transition-colors duration-300">
|
||||
<div className="text-6xl font-mono font-bold text-cyan-600 dark:text-cyan-400 mb-4">
|
||||
{allPosts.length}+
|
||||
</div>
|
||||
<p className="text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-800 pt-4">
|
||||
<p className="text-slate-600 dark:text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-300 dark:border-slate-800 pt-4">
|
||||
ARTICOLE PUBLICATE
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-4 border-slate-700 bg-slate-900 p-8 text-center">
|
||||
<div className="text-6xl font-mono font-bold text-emerald-400 mb-4">
|
||||
<div className="border-4 border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 p-8 text-center transition-colors duration-300">
|
||||
<div className="text-6xl font-mono font-bold text-emerald-600 dark:text-emerald-400 mb-4">
|
||||
50K+
|
||||
</div>
|
||||
<p className="text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-800 pt-4">
|
||||
<p className="text-slate-600 dark:text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-300 dark:border-slate-800 pt-4">
|
||||
CITITORI LUNARI
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-4 border-slate-700 bg-slate-900 p-8 text-center">
|
||||
<div className="text-6xl font-mono font-bold text-teal-400 mb-4">
|
||||
<div className="border-4 border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 p-8 text-center transition-colors duration-300">
|
||||
<div className="text-6xl font-mono font-bold text-teal-600 dark:text-teal-400 mb-4">
|
||||
99%
|
||||
</div>
|
||||
<p className="text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-800 pt-4">
|
||||
<p className="text-slate-600 dark:text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-300 dark:border-slate-800 pt-4">
|
||||
SATISFACȚIE
|
||||
</p>
|
||||
</div>
|
||||
@@ -171,32 +173,32 @@ export default async function HomePage() {
|
||||
</section>
|
||||
|
||||
{/* Newsletter CTA - from worktree-agent-1 */}
|
||||
<section className="py-24 bg-slate-900 border-t-4 border-slate-800">
|
||||
<section className="py-24 bg-zinc-100 dark:bg-slate-900 border-t-4 border-slate-300 dark:border-slate-800 transition-colors duration-300">
|
||||
<div className="max-w-3xl mx-auto px-6">
|
||||
<div className="border-4 border-slate-700 bg-zinc-900 p-12">
|
||||
<p className="font-mono text-xs text-slate-500 uppercase tracking-widest mb-2">
|
||||
<div className="border-4 border-slate-300 dark:border-slate-700 bg-white dark:bg-zinc-900 p-12 transition-colors duration-300">
|
||||
<p className="font-mono text-xs text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-2">
|
||||
NEWSLETTER SUBSCRIPTION
|
||||
</p>
|
||||
<h2 className="text-3xl font-mono font-bold text-slate-100 uppercase mb-4">
|
||||
<h2 className="text-3xl font-mono font-bold text-slate-900 dark:text-slate-100 uppercase mb-4">
|
||||
> RĂMÂI LA CURENT_
|
||||
</h2>
|
||||
<p className="text-slate-400 font-mono text-sm mb-8 border-l-2 border-cyan-900 pl-4">
|
||||
<p className="text-slate-700 dark:text-slate-400 font-mono text-sm mb-8 border-l-2 border-cyan-700 dark:border-cyan-900 pl-4">
|
||||
Primește cele mai noi articole direct în inbox
|
||||
</p>
|
||||
<form className="flex gap-0 flex-col sm:flex-row border-2 border-slate-700">
|
||||
<form className="flex gap-0 flex-col sm:flex-row border-2 border-slate-400 dark:border-slate-700">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="email@exemplu.com"
|
||||
className="flex-1 px-6 py-4 bg-slate-800 text-white font-mono border-b-2 sm:border-b-0 sm:border-r-2 border-slate-700 focus:bg-slate-750 focus:outline-none placeholder:text-slate-600"
|
||||
className="flex-1 px-6 py-4 bg-zinc-100 dark:bg-slate-800 text-slate-900 dark:text-white font-mono border-b-2 sm:border-b-0 sm:border-r-2 border-slate-400 dark:border-slate-700 focus:bg-zinc-200 dark:focus:bg-slate-750 focus:outline-none placeholder:text-slate-400 dark:placeholder:text-slate-600 transition-colors duration-200"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-8 py-4 bg-cyan-900 text-slate-100 font-mono font-bold uppercase text-sm tracking-wider hover:bg-cyan-800 whitespace-nowrap border-t-2 sm:border-t-0 sm:border-l-2 border-cyan-700"
|
||||
className="px-8 py-4 bg-cyan-700 dark:bg-cyan-900 text-white dark:text-slate-100 font-mono font-bold uppercase text-sm tracking-wider hover:bg-cyan-600 dark:hover:bg-cyan-800 whitespace-nowrap border-t-2 sm:border-t-0 sm:border-l-2 border-cyan-600 dark:border-cyan-700 transition-colors duration-200"
|
||||
>
|
||||
[ABONEAZĂ-TE]
|
||||
</button>
|
||||
</form>
|
||||
<p className="text-slate-600 font-mono text-xs mt-4 uppercase">
|
||||
<p className="text-slate-500 dark:text-slate-600 font-mono text-xs mt-4 uppercase">
|
||||
// Fără spam. Dezabonare oricând.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user