Compare commits
1 Commits
b28b9bd137
...
landing-up
| Author | SHA1 | Date | |
|---|---|---|---|
|
6ee39c4438 |
@@ -8,4 +8,32 @@
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
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 { Inter } from 'next/font/google'
|
||||
import Link from 'next/link'
|
||||
import { JetBrains_Mono } from 'next/font/google'
|
||||
import './globals.css'
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] })
|
||||
const jetbrainsMono = JetBrains_Mono({ subsets: ['latin'], variable: '--font-mono' })
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
template: '%s | Blog & Portofoliu',
|
||||
default: 'Blog & Portofoliu',
|
||||
template: '%s | Terminal Blog',
|
||||
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'),
|
||||
authors: [{ name: 'Nume Autor' }],
|
||||
keywords: ['blog', 'dezvoltare web', 'nextjs', 'react', 'typescript'],
|
||||
authors: [{ name: 'Terminal User' }],
|
||||
keywords: ['blog', 'dezvoltare web', 'nextjs', 'react', 'typescript', 'terminal'],
|
||||
openGraph: {
|
||||
type: 'website',
|
||||
locale: 'ro_RO',
|
||||
siteName: 'Blog & Portofoliu',
|
||||
siteName: 'Terminal Blog',
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
icons: {
|
||||
icon: '/favicon.ico',
|
||||
},
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
breadcrumbs,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
breadcrumbs: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="ro">
|
||||
<body className={inter.className}>
|
||||
<div className="min-h-screen bg-white dark:bg-gray-900">
|
||||
<header className="border-b border-gray-200 dark:border-gray-700">
|
||||
<nav className="container mx-auto px-4 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link href="/" className="text-2xl font-bold text-primary-600">
|
||||
Blog
|
||||
</Link>
|
||||
<div className="flex space-x-6">
|
||||
<Link href="/" className="hover:text-primary-600">Acasă</Link>
|
||||
<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">
|
||||
<html lang="ro" className={jetbrainsMono.variable}>
|
||||
<body className="font-mono bg-zinc-900 text-slate-100">
|
||||
{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.
|
||||
|
||||
{/* 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>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
|
||||
210
app/page.tsx
210
app/page.tsx
@@ -1,59 +1,207 @@
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import { getAllPosts } from '@/lib/markdown'
|
||||
import { formatDate } from '@/lib/utils'
|
||||
|
||||
export default async function HomePage() {
|
||||
const allPosts = await getAllPosts()
|
||||
const featuredPosts = allPosts.slice(0, 3)
|
||||
const featuredPosts = allPosts.slice(0, 6)
|
||||
|
||||
return (
|
||||
<div className="space-y-12">
|
||||
<section className="text-center py-12">
|
||||
<h1 className="text-5xl font-bold mb-4">Bun venit pe Blog</h1>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
Explorează articole despre dezvoltare web, design și tehnologie.
|
||||
Învață din experiențe practice și tutoriale detaliate.
|
||||
<main className="min-h-screen bg-zinc-900">
|
||||
{/* Hero Section - from worktree-agent-2 */}
|
||||
<section className="relative min-h-screen flex items-center justify-center bg-zinc-900 overflow-hidden">
|
||||
<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">
|
||||
{/* Logo */}
|
||||
<div className="mb-8 flex items-center justify-between border-b-2 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>
|
||||
</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 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
|
||||
</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="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 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>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-3xl font-bold mb-8">Articole Recente</h2>
|
||||
{/* Featured Posts Grid - from worktree-agent-1 */}
|
||||
<section className="py-24 bg-slate-900 border-t-4 border-slate-800">
|
||||
<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">
|
||||
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) => (
|
||||
<article key={post.slug} className="border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:shadow-lg transition">
|
||||
{post.frontmatter.image && (
|
||||
<img src={post.frontmatter.image} alt={post.frontmatter.title} className="w-full h-48 object-cover rounded-lg mb-4" />
|
||||
{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>
|
||||
)}
|
||||
<h3 className="text-xl font-semibold mb-2">
|
||||
<Link href={`/blog/${post.slug}`} className="hover:text-primary-600 transition">
|
||||
<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}
|
||||
</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">
|
||||
<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>{post.readingTime} min citire</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 className="text-center py-12 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<h2 className="text-3xl font-bold mb-4">Vrei să afli mai multe?</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 mb-6">Explorează arhiva completă de articole</p>
|
||||
<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>
|
||||
</section>
|
||||
{/* 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