Skip to content

Commit 6fca481

Browse files
gbzarelligbzarelli
committed
feat: home page
1 parent cee900e commit 6fca481

3 files changed

Lines changed: 280 additions & 13 deletions

File tree

‎public/images/logo-2.png‎

20.2 KB
Loading

‎src/app/layout.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Metadata } from "next";
1+
import type { Metadata, Viewport } from "next";
22
import { Inter } from "next/font/google";
33
import "./globals.css";
44

@@ -58,14 +58,15 @@ export const metadata: Metadata = {
5858
"max-snippet": -1,
5959
},
6060
},
61-
viewport: {
62-
width: "device-width",
63-
initialScale: 1,
64-
maximumScale: 1,
65-
},
6661
category: "technology",
6762
};
6863

64+
export const viewport: Viewport = {
65+
width: "device-width",
66+
initialScale: 1,
67+
maximumScale: 1,
68+
};
69+
6970
export default function RootLayout({
7071
children,
7172
}: {

‎src/app/page.tsx‎

Lines changed: 273 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,280 @@
11
'use client';
22

3-
import { useEffect } from 'react';
4-
import { useRouter } from 'next/navigation';
3+
import Link from 'next/link';
4+
import Image from 'next/image';
5+
import { Navbar } from './components/Navbar';
6+
import { ArticleCard } from './components/ArticleCard';
7+
import { BlogCard } from './components/BlogCard';
8+
import { ProjectCard } from './components/ProjectCard';
9+
import { FaLinkedin, FaGithub, FaMedium, FaEnvelope, FaInstagram, FaArrowRight } from 'react-icons/fa';
10+
11+
// Featured content data
12+
const featuredArticles = [
13+
{
14+
title: "Otimização da JVM para Contêineres: Memória e Garbage Collection",
15+
description: "Entenda como otimizar as configurações da JVM para ambientes containerizados, focando em gerenciamento de memória e garbage collection.",
16+
imageUrl: "https://miro.medium.com/v2/resize:fit:1100/format:webp/1*GWIPBD-OhfJ5ZjkkwB7Uqw.jpeg",
17+
link: "https://medium.com/inside-picpay/otimiza%C3%A7%C3%A3o-da-jvm-para-cont%C3%AAineres-mem%C3%B3ria-e-garbage-collection-c9b640fa4219"
18+
},
19+
{
20+
title: "Decisões Arquiteturais: Registro e Sustentabilidade na Evolução de Sistemas",
21+
description: "Como documentar e manter decisões arquiteturais para garantir a evolução sustentável de sistemas de software.",
22+
imageUrl: "https://miro.medium.com/v2/resize:fit:1100/format:webp/1*bAvz6hNEd6LRvoeiGp_esQ.jpeg",
23+
link: "https://medium.com/inside-picpay/decis%C3%B5es-arquiteturais-registro-e-sustentabilidade-na-evolu%C3%A7%C3%A3o-de-sistemas-72eca5e32be1"
24+
},
25+
{
26+
title: "O Use Case: Modelando as Interações do Seu Domínio",
27+
description: "Uma abordagem prática sobre como modelar casos de uso e interações em seu domínio de negócio.",
28+
imageUrl: "https://miro.medium.com/v2/resize:fit:1100/format:webp/1*_dwylzkbc7FphRGIFOfufQ.png",
29+
link: "https://medium.com/inside-picpay/o-use-case-modelando-as-intera%C3%A7%C3%B5es-do-seu-dom%C3%ADnio-7b9f4f1e3b6a"
30+
}
31+
];
32+
33+
const featuredProjects = [
34+
{
35+
title: "Clean Architecture Demo",
36+
description: "Projeto demonstrativo de uma arquitetura limpa e modular para aplicações Java/Spring Boot.",
37+
imageUrl: "https://raw.githubusercontent.com/gbzarelli/clean-architecture-delivery-app-sample/main/images/diagram.png",
38+
link: "https://github.com/gbzarelli/clean-architecture-delivery-app-sample",
39+
languages: ["Java", "Spring Boot", "Docker"]
40+
},
41+
{
42+
title: "Android UX Playground",
43+
description: "Exemplos e demonstrações de padrões modernos de UI/UX para desenvolvimento Android.",
44+
imageUrl: "https://raw.githubusercontent.com/gbzarelli/android-simple-download-manager/main/screenshots/main_screen.png",
45+
link: "https://github.com/gbzarelli/android-simple-download-manager",
46+
languages: ["Kotlin", "Android", "Material Design"]
47+
},
48+
{
49+
title: "Microservices Toolkit",
50+
description: "Conjunto de ferramentas para desenvolvimento e monitoramento de arquiteturas de microserviços.",
51+
imageUrl: "https://via.placeholder.com/800x450?text=Microservices+Toolkit",
52+
link: "https://github.com/gbzarelli/microservices-toolkit",
53+
languages: ["Java", "Spring Cloud", "Docker", "Kubernetes"]
54+
}
55+
];
56+
57+
const featuredBlogPosts = [
58+
{
59+
title: "Como estruturar projetos Java para máxima produtividade",
60+
description: "Dicas práticas para organizar seu código e aumentar a eficiência do desenvolvimento em equipe.",
61+
date: "22 Mar 2025",
62+
link: "https://medium.com/@guilherme.zarelli/estruturando-projetos-java-123abc",
63+
imageUrl: "https://miro.medium.com/v2/resize:fit:1100/format:webp/1*ANetWgPAOkjvBM05WxT4nw.png",
64+
tags: ["java", "architecture", "clean"]
65+
},
66+
{
67+
title: "Técnicas avançadas de debugging para desenvolvedores Java",
68+
description: "Métodos e ferramentas que vão além do básico para resolver problemas complexos de performance.",
69+
date: "10 Fev 2025",
70+
link: "https://medium.com/@guilherme.zarelli/debugging-avancado-java-456def",
71+
imageUrl: "https://miro.medium.com/v2/resize:fit:786/format:webp/0*5YPydAOHKnwAyAA9.png",
72+
tags: ["java", "performance", "debugging"]
73+
}
74+
];
75+
76+
const contacts = [
77+
{ name: "GitHub", url: "https://github.com/gbzarelli", icon: <FaGithub className="text-2xl" /> },
78+
{ name: "Medium", url: "https://medium.com/@guilherme.zarelli", icon: <FaMedium className="text-2xl" /> },
79+
{ name: "Instagram", url: "https://www.instagram.com/_helpdev/", icon: <FaInstagram className="text-2xl" /> },
80+
{ name: "Email", url: "mailto:gbzarelli@helpdev.com.br", icon: <FaEnvelope className="text-2xl" /> }
81+
];
582

683
export default function Home() {
7-
const router = useRouter();
84+
return (
85+
<div className="min-h-screen bg-gray-100">
86+
<Navbar />
87+
88+
{/* Hero Section */}
89+
<section className="bg-white py-16">
90+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
91+
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-8">
92+
<div className="md:w-3/5">
93+
<h1 className="text-4xl sm:text-5xl font-bold text-gray-900 mb-4">
94+
Compartilhando Conhecimento em Desenvolvimento de Software
95+
</h1>
96+
<p className="text-xl text-gray-600 mb-8">
97+
Portal dedicado a compartilhar artigos técnicos, projetos open source e snippets de código para auxiliar desenvolvedores.
98+
</p>
99+
<div className="flex flex-wrap gap-4 mb-8">
100+
<Link
101+
href="/articles"
102+
className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
103+
>
104+
Ver Artigos
105+
<FaArrowRight className="ml-2" />
106+
</Link>
107+
<Link
108+
href="/about"
109+
className="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
110+
>
111+
Sobre o Autor
112+
</Link>
113+
</div>
114+
<div className="flex gap-4">
115+
{contacts.map((contact) => (
116+
<a
117+
key={contact.name}
118+
href={contact.url}
119+
target="_blank"
120+
rel="noopener noreferrer"
121+
className="p-2 text-gray-600 hover:text-blue-600 transition-colors"
122+
title={contact.name}
123+
>
124+
{contact.icon}
125+
</a>
126+
))}
127+
</div>
128+
</div>
129+
<div className="md:w-2/5 flex justify-center md:justify-end">
130+
<div className="relative h-64 w-64 md:h-80 md:w-80">
131+
<Image
132+
src="/images/logo-2.png"
133+
alt="HelpDev Logo"
134+
fill
135+
className="rounded-full object-cover shadow-xl"
136+
priority
137+
/>
138+
</div>
139+
</div>
140+
</div>
141+
</div>
142+
</section>
143+
144+
{/* Featured Articles Section */}
145+
<section className="py-16">
146+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
147+
<div className="flex justify-between items-center mb-8">
148+
<h2 className="text-3xl font-bold text-gray-900">Artigos em Destaque</h2>
149+
<Link
150+
href="/articles"
151+
className="text-blue-600 hover:text-blue-800 flex items-center transition-colors"
152+
>
153+
Ver todos os artigos
154+
<FaArrowRight className="ml-2" />
155+
</Link>
156+
</div>
157+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
158+
{featuredArticles.map((article, index) => (
159+
<ArticleCard
160+
key={index}
161+
title={article.title}
162+
description={article.description}
163+
imageUrl={article.imageUrl}
164+
link={article.link}
165+
/>
166+
))}
167+
</div>
168+
</div>
169+
</section>
170+
171+
{/* Featured Blog Posts Section */}
172+
<section className="py-16 bg-gray-50">
173+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
174+
<div className="flex justify-between items-center mb-8">
175+
<h2 className="text-3xl font-bold text-gray-900">Blog & Gists</h2>
176+
<Link
177+
href="/blog"
178+
className="text-blue-600 hover:text-blue-800 flex items-center transition-colors"
179+
>
180+
Ver todas as postagens
181+
<FaArrowRight className="ml-2" />
182+
</Link>
183+
</div>
184+
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
185+
{featuredBlogPosts.map((post, index) => (
186+
<BlogCard
187+
key={index}
188+
title={post.title}
189+
description={post.description}
190+
date={post.date}
191+
link={post.link}
192+
imageUrl={post.imageUrl}
193+
tags={post.tags}
194+
/>
195+
))}
196+
</div>
197+
</div>
198+
</section>
199+
200+
{/* Projects Section */}
201+
<section className="py-16">
202+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
203+
<div className="flex justify-between items-center mb-8">
204+
<h2 className="text-3xl font-bold text-gray-900">Projetos Open Source</h2>
205+
<Link
206+
href="/projects"
207+
className="text-blue-600 hover:text-blue-800 flex items-center transition-colors"
208+
>
209+
Ver todos os projetos
210+
<FaArrowRight className="ml-2" />
211+
</Link>
212+
</div>
213+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
214+
{featuredProjects.map((project, index) => (
215+
<ProjectCard
216+
key={index}
217+
title={project.title}
218+
description={project.description}
219+
imageUrl={project.imageUrl}
220+
link={project.link}
221+
languages={project.languages}
222+
/>
223+
))}
224+
</div>
225+
</div>
226+
</section>
8227

9-
useEffect(() => {
10-
router.push('/articles');
11-
}, [router]);
228+
{/* Quick Links Section */}
229+
<section className="py-16 bg-blue-50">
230+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
231+
<h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">Explore Mais</h2>
232+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
233+
{[
234+
{ title: "Artigos", description: "Tutoriais e conteúdos técnicos", link: "/articles", icon: "📝" },
235+
{ title: "Projetos", description: "Códigos open source e exemplos", link: "/projects", icon: "💻" },
236+
{ title: "Blog/Gists", description: "Postagens rápidas e snippets", link: "/blog", icon: "📚" },
237+
{ title: "Sobre", description: "Conheça o autor", link: "/about", icon: "👨‍💻" }
238+
].map((item, index) => (
239+
<Link href={item.link} key={index}>
240+
<div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 flex flex-col items-center text-center h-full">
241+
<span className="text-4xl mb-4">{item.icon}</span>
242+
<h3 className="text-xl font-bold text-gray-900 mb-2">{item.title}</h3>
243+
<p className="text-gray-600">{item.description}</p>
244+
</div>
245+
</Link>
246+
))}
247+
</div>
248+
</div>
249+
</section>
12250

13-
return null;
251+
{/* Footer CTA Section */}
252+
<section className="bg-blue-600 py-16">
253+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
254+
<h2 className="text-3xl font-bold text-white mb-4">Pronto para aprender mais?</h2>
255+
<p className="text-xl text-blue-100 mb-8 max-w-3xl mx-auto">
256+
Explore nossos artigos, projetos e ferramentas para aprimorar suas habilidades em desenvolvimento de software.
257+
</p>
258+
<div className="flex flex-wrap justify-center gap-4">
259+
<Link
260+
href="/articles"
261+
className="inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-md shadow-sm text-blue-600 bg-white hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-600 focus:ring-white transition-colors"
262+
>
263+
Começar Agora
264+
<FaArrowRight className="ml-2" />
265+
</Link>
266+
<a
267+
href="https://github.com/gbzarelli"
268+
target="_blank"
269+
rel="noopener noreferrer"
270+
className="inline-flex items-center px-8 py-4 border border-white text-lg font-medium rounded-md shadow-sm text-white bg-transparent hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-600 focus:ring-white transition-colors"
271+
>
272+
Ver GitHub
273+
<FaGithub className="ml-2" />
274+
</a>
275+
</div>
276+
</div>
277+
</section>
278+
</div>
279+
);
14280
}

0 commit comments

Comments
 (0)