feat: Constructo page improvements

Author: wilcorrea

src/components/packages/Installation.tsx

@@ -9,7 +9,7 @@ interface InstallationProps {
 
 const Installation = ({ onPackagistClick, onDocsClick }: InstallationProps) => {
   return (
-    <section className="py-16 px-6 bg-card/30">
+    <section id="installation" className="py-16 px-6 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/lib/utils.ts

@@ -4,3 +4,10 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export function scrollTo(elementId: string) {
+  const element = document.getElementById(elementId);
+  if (element) {
+    element.scrollIntoView({ behavior: "smooth" });
+  }
+}

src/pages/Constructo.tsx

@@ -1,8 +1,15 @@
 import Footer from "@/components/Footer";
 import Header from "@/components/Header";
 import Hero from "@/components/Hero.tsx";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+import Benefits from "@/components/packages/Benefits.tsx";
+import CodeExamples from "@/components/packages/CodeExamples.tsx";
+
+import Features from "@/components/packages/Features.tsx";
+import Installation from "@/components/packages/Installation.tsx";
+import UseCases from "@/components/packages/UseCases.tsx";
+import { Badge } from "@/components/ui/badge.tsx";
+import { Button } from "@/components/ui/button.tsx";
+import { scrollTo } from "@/lib/utils.ts";
 import {
   Blocks,
   Cog,
@@ -17,15 +24,9 @@ import {
   Zap,
 } from "lucide-react";
 
-import Features from "@/components/packages/Features.tsx";
-import CodeExamples from "@/components/packages/CodeExamples.tsx";
-import UseCases from "@/components/packages/UseCases.tsx";
-import Benefits from "@/components/packages/Benefits.tsx";
-import Installation from "@/components/packages/Installation.tsx";
-
 const Constructo = () => {
   const handleInstallClick = () => {
-    navigator.clipboard.writeText("composer require devitools/constructo");
+    scrollTo("installation");
   };
 
   const handleGithubClick = () => {