feat: Constructo page improvements

Author: wilcorrea

src/components/CodeBlock.tsx

@@ -19,7 +19,7 @@ interface CodeBlockProps {
 const CodeBlock = ({
   children,
   language = "php",
-  size = "md",
+  size,
   showCopy = true,
   className,
 }: CodeBlockProps) => {
@@ -56,7 +56,7 @@ const CodeBlock = ({
   return (
     <Card
       className={cn(
-        "overflow-hidden relative bg-background brightness-100 dark:brightness-125",
+        "overflow-hidden relative bg-background brightness-100 dark:brightness-150",
         className,
       )}
     >
@@ -89,7 +89,7 @@ const CodeBlock = ({
         }}
         className={cn(
           "!bg-transparent overflow-x-auto p-6 [&_span]:!bg-transparent",
-          sizeClasses[size],
+          size ? sizeClasses[size] : "text-xs md:text-sm",
           showCopy && "pr-16",
         )}
       >

src/components/packages/BenefitItem.tsx

@@ -7,9 +7,11 @@ interface BenefitItemProps {
 
 const BenefitItem = ({ title, description }: BenefitItemProps) => {
   return (
-    <div className="flex items-start space-x-4">
-      <CheckCircle className="w-6 h-6 text-success mt-1 flex-shrink-0" />
-      <div>
+    <div className="flex space-x-4">
+      <div className="flex-shrink-0">
+        <CheckCircle className="w-6 h-6 text-success mt-1" />
+      </div>
+      <div className="text-left">
         <h3 className="font-semibold mb-2">{title}</h3>
         <p className="text-muted-foreground">{description}</p>
       </div>

src/components/packages/CodeExamples.tsx

@@ -14,7 +14,7 @@ interface CodeExamplesProps {
 
 const CodeExamples = ({ examples }: CodeExamplesProps) => {
   return (
-    <section className="py-20 px-6 bg-card/30">
+    <section className="py-20 bg-card/30">
       <div className="container mx-auto">
         <div className="text-center mb-12">
           <h2 className="text-3xl font-bold mb-4">Exemplos Práticos</h2>

src/components/packages/CodeTab.tsx

@@ -1,12 +1,11 @@
+import CodeBlock from "@/components/CodeBlock.tsx";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card.tsx";
-import CodeBlock from "@/components/CodeBlock.tsx";
-import { ReactNode } from "react";
 
 interface CodeTabProps {
   title: string;
@@ -18,11 +17,11 @@ interface CodeTabProps {
 const CodeTab = ({ title, description, code, language = "php" }: CodeTabProps) => {
   return (
     <Card>
-      <CardHeader>
+      <CardHeader className="px-3 pt-4 pb-2 lg:px-6 lg:pt-6">
         <CardTitle>{title}</CardTitle>
         <CardDescription>{description}</CardDescription>
       </CardHeader>
-      <CardContent>
+      <CardContent className="px-3 pt-2 pb-4 lg:px-6 lg:pt-3 lg:pb-6">
         <CodeBlock language={language}>{code}</CodeBlock>
       </CardContent>
     </Card>

src/components/packages/Features.tsx

@@ -14,7 +14,7 @@ interface FeaturesProps {
 
 const Features = ({ features }: FeaturesProps) => {
   return (
-    <section className="py-20 px-6">
+    <section className="py-20">
       <div className="container mx-auto">
         <div className="text-center mb-16">
           <h2 className="text-4xl font-bold mb-4">Recursos Principais</h2>

src/components/packages/Installation.tsx

@@ -9,7 +9,7 @@ interface InstallationProps {
 
 const Installation = ({ onPackagistClick, onDocsClick }: InstallationProps) => {
   return (
-    <section id="installation" className="py-16 px-6 bg-card/30">
+    <section id="installation" className="py-16 bg-card/30">
       <div className="container mx-auto">
         <div className="text-center mb-12">
           <h2 className="text-3xl font-bold mb-4">Instalação Rápida</h2>

src/pages/Constructo.tsx

@@ -13,9 +13,11 @@ import { scrollTo } from "@/lib/utils.ts";
 import {
   Blocks,
   Cog,
+  Command,
   Database,
   Download,
   Github,
+  Network,
   Package,
   Server,
   Shield,
@@ -78,44 +80,44 @@ const Constructo = () => {
   const useCases = [
     {
       icon: <Server className="w-8 h-8 text-constructo-foreground" />,
-      title: "APIs REST/GraphQL",
+      title: "Endpoints e Workers",
       description:
         "Ideal para construção de APIs modernas com serialização automática e validação robusta",
       benefits: ["Serialização automática", "Validação de entrada", "Configuração flexível"],
     },
     {
       icon: <Users className="w-8 h-8 text-constructo-foreground" />,
-      title: "Aplicações Enterprise",
+      title: "Sistemas de gestão",
       description:
-        "Perfeito para sistemas complexos que precisam de arquitetura sólida e manutenível",
+        "Perfeito para usar a própria estrutura do projeto para poder testar os limites da aplicação",
       benefits: ["Injeção de dependências", "Configuração centralizada", "Testes facilitados"],
     },
     {
-      icon: <Zap className="w-8 h-8 text-constructo-foreground" />,
-      title: "Microserviços",
+      icon: <Network className="w-8 h-8 text-constructo-foreground" />,
+      title: "Microsserviços",
       description:
-        "Construa microserviços PHP com configuração padronizada e comunicação eficiente",
-      benefits: ["Configuração unificada", "Serialização consistente", "Performance otimizada"],
+        "Construa microsserviços PHP com configuração padronizada e comunicação eficiente",
+      benefits: ["Configuração unificada", "Serialização consistente", "Desempenho otimizado"],
     },
   ];
 
   const codeExamples = [
     {
-      id: "container",
+      id: "serialization",
       title: "Serialização",
       description:
         "Apenas defina os tipos dos argumentos do construtor que sua classe deve receber e deixa o resto com o Builder",
       code: `use Constructo\\Core\\Serialize\\Builder;
 use Constructo\\Support\\Set;
-use Constructo\\Type\\Timestamp;
+use DateTime;
 
 // Defina sua entidade informando os valores das propriedades no construtor
 readonly class User
 {
     public function __construct(
         public int $id,
         public string $name,
-        public Timestamp $birthDate,
+        public DateTime $birthDate,
         public bool $isActive = true,
         public array $tags = [],
     ) {}
@@ -148,22 +150,20 @@ echo sprintf("  Data de Nascimento: %s\\n", $user->birthDate->format('Y-m-d'));
 #   Data de Nascimento: 1981-08-13`,
     },
     {
-      id: "serialization",
+      id: "deserialization",
       title: "Desserialização",
       description:
         "Passe uma instância de objeto e converta-a em um objeto facilmente convertível para em array associativo ou JSON",
-      code: `
-use Constructo\\Core\\Deserialize\\Demolisher;
-use Constructo\\Support\\Set;
-use Constructo\\Type\\Timestamp;
+      code: `use Constructo\\Core\\Deserialize\\Demolisher;
+use DateTime;
 
 // Defina sua entidade informando os valores das propriedades no construtor
 readonly class User
 {
     public function __construct(
         public int $id,
         public string $name,
-        public Timestamp $birthDate,
+        public DateTime $birthDate,
         public bool $isActive = true,
         public array $tags = [],
     ) {}
@@ -173,21 +173,20 @@ readonly class User
 $user = new User(
     id: 1,
     name: 'João Silva',
-    birthDate: new Timestamp('1981-08-13'),
+    birthDate: new DateTime('1981-08-13'),
     isActive: true,
     tags: ['nice', 'welcome'],
 );
 
 // Crie um novo demolisher e use-o para destruir o objeto
 $object = (new Demolisher())->demolish($user);
 
-$set = Set::createFrom((array) $object);
 echo "# Usuário: \\n";
-echo sprintf("#   ID: %s\\n", $set->get('id'));
-echo sprintf("#   Nome: %s\\n", $set->get('name'));
-echo sprintf("#   Ativo: %s\\n", $set->get('is_active') ? 'Sim' : 'Não');
-echo sprintf("#   Tags: %s\\n", implode(', ', $set->get('tags')));
-echo sprintf("#   Data de Nascimento: %s\\n", $set->get('birth_date'));
+echo sprintf("#   ID: %s\\n", $object->id);
+echo sprintf("#   Nome: %s\\n", $object->name);
+echo sprintf("#   Ativo: %s\\n", $object->is_active ? 'Sim' : 'Não');
+echo sprintf("#   Tags: %s\\n", implode(', ', $object->tags));
+echo sprintf("#   Data de Nascimento: %s\\n", $object->birth_date);
 
 # Usuário:
 #   ID: 1
@@ -202,7 +201,7 @@ echo sprintf("#   Data de Nascimento: %s\\n", $set->get('birth_date'));
       description:
         "Simplesmente utilize as propriedades da classe que receberá os dados para gerar as regras de validação para sua `action`",
       code: `use Constructo\\Factory\\ReflectorFactory;
-use Constructo\\Type\\Timestamp;
+use DateTime;
 
 use function array_export;
 
@@ -212,7 +211,7 @@ readonly class User
     public function __construct(
         public int $id,
         public string $name,
-        public Timestamp $birthDate,
+        public DateTime $birthDate,
         public bool $isActive = true,
         public array $tags = [],
     ) {
@@ -226,7 +225,7 @@ echo "# Regras de validação \\n";
 echo array_export($schema->rules(), 1);
 echo "\\n";
 
-# Regras de validação
+# Regras de validação geradas:
 [
     'id' => ['required', 'integer'],
     'name' => ['required', 'string'],
@@ -239,32 +238,36 @@ echo "\\n";
     {
       id: "testing",
       title: "Testes",
-      description: "Use Faker para gerar dados realistas baseados nas suas classes",
-      code: `<?php
-use Devitools\\Constructo\\Testing\\Factory;
-
-class UserFactory extends Factory
+      description:
+        "Combine alguns recursos para gerar dados de forma dinâmica a partir da estrutura das classes envolvidas na rotina de teste",
+      code: `use App\\Domain\\Entity\\User;
+use App\\Infrastructure\\Persistence\\Postgres\\PostgresUserRepository;
+use Constructo\\Testing\\BuilderExtension;
+use Constructo\\Testing\\FakerExtension;
+use Constructo\\Testing\\MakeExtension;
+use Illuminate\\Foundation\\Testing\\TestCase;
+
+class UserRepositoryTest extends TestCase
 {
-    protected string $model = User::class;
-    
-    public function definition(): array
-    {
-        return [
-            'name' => $this->faker->name(),
-            'email' => $this->faker->email(),
-            'createdAt' => $this->faker->dateTime()
-        ];
-    }
-}
+    use MakeExtension;
+    use FakerExtension;
+    use BuilderExtension;
 
-// Gerar um usuário fake
-$user = UserFactory::make();
+    final public function test_create_user_successfully(): void
+    {
+        // Assert
+        $values = $this->faker()->fake(User::class);
+        $user = $this->builder()->build(User::class, $values);
+        $userRepository = $this->make(PostgresUserRepository::class);
 
-// Gerar múltiplos usuários
-$users = UserFactory::times(10)->make();
+        // Act
+        $result = $this->userRepository->create($user);
 
-// Persistir no banco (se configurado)
-$user = UserFactory::create();`,
+        // Assert
+        $this->assertNotNull($result);
+        $this->assertDatabaseHas('users', ['email' => $user->email]);
+    }
+}`,
     },
   ];
 
@@ -274,12 +277,12 @@ $user = UserFactory::create();`,
       description: "Totalmente compatível com PSR-11, PSR-4 e outros padrões",
     },
     {
-      title: "Type Safety",
-      description: "Aproveite ao máximo o PHP 8.0+ com tipagem forte",
+      title: "Tipagem Forte",
+      description: "Aproveite ao máximo o PHP 8.0+ os recursos de tipagem forte",
     },
     {
       title: "Performance",
-      description: "Otimizado para alta performance em produção",
+      description: "Otimizado para alto desempenho em produção",
     },
     {
       title: "Flexibilidade",