🖼️ updated landing page styling #1
@@ -8,4 +8,32 @@
|
|||||||
.scrollbar-hide::-webkit-scrollbar {
|
.scrollbar-hide::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Industrial/Terminal aesthetic utilities */
|
||||||
|
.grid-bg {
|
||||||
|
background-image: url('/grid.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.noise-bg {
|
||||||
|
background-image: url('/noise.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.scanline {
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
0deg,
|
||||||
|
transparent,
|
||||||
|
transparent 2px,
|
||||||
|
rgba(0, 0, 0, 0.3) 2px,
|
||||||
|
rgba(0, 0, 0, 0.3) 4px
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grayscale filter with instant toggle */
|
||||||
|
.grayscale {
|
||||||
|
filter: grayscale(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grayscale-0 {
|
||||||
|
filter: grayscale(0%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,65 +1,52 @@
|
|||||||
import type { Metadata } from 'next'
|
import type { Metadata } from 'next'
|
||||||
import { Inter } from 'next/font/google'
|
import { JetBrains_Mono } from 'next/font/google'
|
||||||
import Link from 'next/link'
|
|
||||||
import './globals.css'
|
import './globals.css'
|
||||||
|
|
||||||
const inter = Inter({ subsets: ['latin'] })
|
const jetbrainsMono = JetBrains_Mono({ subsets: ['latin'], variable: '--font-mono' })
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: {
|
title: {
|
||||||
template: '%s | Blog & Portofoliu',
|
template: '%s | Terminal Blog',
|
||||||
default: 'Blog & Portofoliu',
|
default: 'Terminal Blog - Build. Write. Share.',
|
||||||
},
|
},
|
||||||
description: 'Blog personal despre dezvoltare web și design',
|
description: 'Explorează idei despre dezvoltare, design și tehnologie',
|
||||||
metadataBase: new URL('http://localhost:3000'),
|
metadataBase: new URL('http://localhost:3000'),
|
||||||
authors: [{ name: 'Nume Autor' }],
|
authors: [{ name: 'Terminal User' }],
|
||||||
keywords: ['blog', 'dezvoltare web', 'nextjs', 'react', 'typescript'],
|
keywords: ['blog', 'dezvoltare web', 'nextjs', 'react', 'typescript', 'terminal'],
|
||||||
openGraph: {
|
openGraph: {
|
||||||
type: 'website',
|
type: 'website',
|
||||||
locale: 'ro_RO',
|
locale: 'ro_RO',
|
||||||
siteName: 'Blog & Portofoliu',
|
siteName: 'Terminal Blog',
|
||||||
},
|
},
|
||||||
robots: {
|
robots: {
|
||||||
index: true,
|
index: true,
|
||||||
follow: true,
|
follow: true,
|
||||||
},
|
},
|
||||||
|
icons: {
|
||||||
|
icon: '/favicon.ico',
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
breadcrumbs,
|
|
||||||
}: {
|
}: {
|
||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
breadcrumbs: React.ReactNode
|
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="ro">
|
<html lang="ro" className={jetbrainsMono.variable}>
|
||||||
<body className={inter.className}>
|
<body className="font-mono bg-zinc-900 text-slate-100">
|
||||||
<div className="min-h-screen bg-white dark:bg-gray-900">
|
{children}
|
||||||
<header className="border-b border-gray-200 dark:border-gray-700">
|
|
||||||
<nav className="container mx-auto px-4 py-4">
|
{/* Footer - from worktree-agent-1 */}
|
||||||
<div className="flex items-center justify-between">
|
<footer className="border-t-4 border-slate-800 bg-slate-900">
|
||||||
<Link href="/" className="text-2xl font-bold text-primary-600">
|
<div className="container mx-auto px-4 py-8">
|
||||||
Blog
|
<div className="border-2 border-slate-800 p-6">
|
||||||
</Link>
|
<p className="text-center text-slate-500 font-mono text-xs uppercase tracking-wider">
|
||||||
<div className="flex space-x-6">
|
© 2025 // BLOG & PORTOFOLIU // ALL RIGHTS RESERVED
|
||||||
<Link href="/" className="hover:text-primary-600">Acasă</Link>
|
</p>
|
||||||
<Link href="/blog" className="hover:text-primary-600">Blog</Link>
|
|
||||||
<Link href="/about" className="hover:text-primary-600">Despre</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
{breadcrumbs}
|
|
||||||
<main className="container mx-auto px-4 py-8">
|
|
||||||
{children}
|
|
||||||
</main>
|
|
||||||
<footer className="border-t border-gray-200 dark:border-gray-700 mt-12">
|
|
||||||
<div className="container mx-auto px-4 py-6 text-center text-gray-600 dark:text-gray-400">
|
|
||||||
© 2025 Blog & Portofoliu. Toate drepturile rezervate.
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</div>
|
||||||
</div>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
)
|
)
|
||||||
|
|||||||
234
app/page.tsx
234
app/page.tsx
@@ -1,59 +1,207 @@
|
|||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
|
import Image from 'next/image'
|
||||||
import { getAllPosts } from '@/lib/markdown'
|
import { getAllPosts } from '@/lib/markdown'
|
||||||
import { formatDate } from '@/lib/utils'
|
import { formatDate } from '@/lib/utils'
|
||||||
|
|
||||||
export default async function HomePage() {
|
export default async function HomePage() {
|
||||||
const allPosts = await getAllPosts()
|
const allPosts = await getAllPosts()
|
||||||
const featuredPosts = allPosts.slice(0, 3)
|
const featuredPosts = allPosts.slice(0, 6)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-12">
|
<main className="min-h-screen bg-zinc-900">
|
||||||
<section className="text-center py-12">
|
{/* Hero Section - from worktree-agent-2 */}
|
||||||
<h1 className="text-5xl font-bold mb-4">Bun venit pe Blog</h1>
|
<section className="relative min-h-screen flex items-center justify-center bg-zinc-900 overflow-hidden">
|
||||||
<p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
<div className="absolute inset-0 grid-bg opacity-10"></div>
|
||||||
Explorează articole despre dezvoltare web, design și tehnologie.
|
<div className="absolute inset-0 scanline"></div>
|
||||||
Învață din experiențe practice și tutoriale detaliate.
|
<div className="absolute inset-0 noise-bg"></div>
|
||||||
</p>
|
|
||||||
<div className="mt-8 space-x-4">
|
|
||||||
<Link href="/blog" className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">
|
|
||||||
Vezi toate articolele
|
|
||||||
</Link>
|
|
||||||
<Link href="/about" className="inline-block px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition">
|
|
||||||
Despre mine
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<div className="relative z-10 max-w-5xl mx-auto px-6 w-full">
|
||||||
<h2 className="text-3xl font-bold mb-8">Articole Recente</h2>
|
<div className="border-4 border-slate-700 bg-slate-900/80 p-8 md:p-12">
|
||||||
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
{/* Logo */}
|
||||||
{featuredPosts.map((post) => (
|
<div className="mb-8 flex items-center justify-between border-b-2 border-slate-800 pb-4">
|
||||||
<article key={post.slug} className="border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:shadow-lg transition">
|
<div className="flex items-center gap-3">
|
||||||
{post.frontmatter.image && (
|
<Image src="/logo.png" alt="Logo" width={32} height={32} className="opacity-80" />
|
||||||
<img src={post.frontmatter.image} alt={post.frontmatter.title} className="w-full h-48 object-cover rounded-lg mb-4" />
|
<span className="font-mono text-xs text-slate-500 uppercase tracking-widest">TERMINAL:// V2.0</span>
|
||||||
)}
|
|
||||||
<h3 className="text-xl font-semibold mb-2">
|
|
||||||
<Link href={`/blog/${post.slug}`} className="hover:text-primary-600 transition">
|
|
||||||
{post.frontmatter.title}
|
|
||||||
</Link>
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-600 dark:text-gray-400 mb-4">{post.frontmatter.description}</p>
|
|
||||||
<div className="flex items-center justify-between text-sm text-gray-500">
|
|
||||||
<span>{formatDate(post.frontmatter.date)}</span>
|
|
||||||
<span>{post.readingTime} min citire</span>
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
<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>
|
||||||
|
</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">
|
||||||
|
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">
|
||||||
|
> 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">
|
||||||
|
[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">
|
||||||
|
[DESPRE MINE]
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="text-center py-12 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
{/* Featured Posts Grid - from worktree-agent-1 */}
|
||||||
<h2 className="text-3xl font-bold mb-4">Vrei să afli mai multe?</h2>
|
<section className="py-24 bg-slate-900 border-t-4 border-slate-800">
|
||||||
<p className="text-lg text-gray-600 dark:text-gray-400 mb-6">Explorează arhiva completă de articole</p>
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
<Link href="/blog" className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">
|
<div className="border-l-4 border-emerald-900 pl-6 mb-12">
|
||||||
Vezi toate articolele →
|
<p className="font-mono text-xs text-slate-500 uppercase tracking-widest mb-2">
|
||||||
</Link>
|
ARCHIVE ACCESS // RECENT ENTRIES
|
||||||
|
</p>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-mono font-bold text-slate-100 uppercase tracking-tight">
|
||||||
|
> POSTĂRI RECENTE_
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{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"
|
||||||
|
>
|
||||||
|
<div className="aspect-video relative overflow-hidden bg-zinc-900">
|
||||||
|
{post.frontmatter.image ? (
|
||||||
|
<Image
|
||||||
|
src={post.frontmatter.image}
|
||||||
|
alt={post.frontmatter.title}
|
||||||
|
fill
|
||||||
|
className="object-cover grayscale group-hover:grayscale-0"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<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>
|
||||||
|
)}
|
||||||
|
<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">
|
||||||
|
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">
|
||||||
|
{post.frontmatter.title}
|
||||||
|
</h3>
|
||||||
|
<p className="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">
|
||||||
|
<span>{formatDate(post.frontmatter.date)}</span>
|
||||||
|
<span>//</span>
|
||||||
|
<span>{post.readingTime} MIN</span>
|
||||||
|
</div>
|
||||||
|
</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"
|
||||||
|
>
|
||||||
|
[ACCESEAZĂ] >>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{allPosts.length > 6 && (
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
[VEZI TOATE ARTICOLELE] >>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
|
||||||
|
{/* Stats Section - from worktree-agent-1 */}
|
||||||
|
<section className="py-24 bg-zinc-900 border-y-4 border-slate-800">
|
||||||
|
<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">
|
||||||
|
SYSTEM STATISTICS // DATABASE METRICS
|
||||||
|
</p>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-mono font-bold 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">
|
||||||
|
{allPosts.length}+
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 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">
|
||||||
|
50K+
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 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">
|
||||||
|
99%
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-800 pt-4">
|
||||||
|
SATISFACȚIE
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Newsletter CTA - from worktree-agent-1 */}
|
||||||
|
<section className="py-24 bg-slate-900 border-t-4 border-slate-800">
|
||||||
|
<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">
|
||||||
|
NEWSLETTER SUBSCRIPTION
|
||||||
|
</p>
|
||||||
|
<h2 className="text-3xl font-mono font-bold 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">
|
||||||
|
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">
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
[ABONEAZĂ-TE]
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p className="text-slate-600 font-mono text-xs mt-4 uppercase">
|
||||||
|
// Fără spam. Dezabonare oricând.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
8
public/grid.svg
Normal file
8
public/grid.svg
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(148, 163, 184, 0.1)" stroke-width="1"/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect width="100" height="100" fill="url(#grid)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 336 B |
BIN
public/logo.png
Normal file
BIN
public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
6
public/noise.svg
Normal file
6
public/noise.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<filter id="noiseFilter">
|
||||||
|
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/>
|
||||||
|
</filter>
|
||||||
|
<rect width="100%" height="100%" filter="url(#noiseFilter)" opacity="0.05"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 285 B |
Reference in New Issue
Block a user