Merge pull request #18 from alexmarqs/chore/improve-headers

feat: update package dependencies, remove unused components, and enha…

Author: alexmarqs

apps/web/package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-label": "2.1.1",
     "@radix-ui/react-select": "2.1.4",
     "@radix-ui/react-slot": "1.1.1",
+    "@tech-companies-portugal/analytics": "*",
     "cheerio": "1.0.0-rc.12",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.0",
@@ -29,15 +30,14 @@
     "next": "15.2.3",
     "nuqs": "2.3.1",
     "react": "19.0.0",
+    "react-countup": "6.5.3",
     "react-dom": "19.0.0",
-    "react-type-animation": "3.2.0",
     "recharts": "2.15.0",
     "sharp": "0.33.2",
     "slugify": "1.6.6",
     "tailwind-merge": "2.2.1",
     "tailwindcss-animate": "1.0.7",
-    "use-debounce": "10.0.4",
-    "@tech-companies-portugal/analytics": "*"
+    "use-debounce": "10.0.4"
   },
   "devDependencies": {
     "@playwright/test": "1.50.0",

apps/web/src/app/api/og/route.tsx

@@ -11,7 +11,7 @@ export async function GET(request: Request) {
 
     const title =
       (searchParams.has("title") && searchParams.get("title")) ||
-      "Tech Companies in Portugal | Leading Startups & Innovators";
+      "Tech Companies in Portugal";
 
     const description =
       (searchParams.has("description") && searchParams.get("description")) ||
@@ -86,7 +86,6 @@ export async function GET(request: Request) {
           style={{
             display: "flex",
             fontSize: 50,
-            fontFamily: "Geist Mono SemiBold",
           }}
         >
           {title}

apps/web/src/app/category/[category]/page.tsx

@@ -1,4 +1,3 @@
-import { Breadcrumb } from "@/components/Breadcrumb";
 import CompaniesList from "@/components/CompaniesList";
 import { CompaniesListSkeleton } from "@/components/CompaniesListSkeleton";
 import {
@@ -77,13 +76,7 @@ export default async function CategoryPage({
   return (
     <section className="mx-auto flex w-full max-w-5xl p-3 relative flex-1">
       <div className="flex flex-col gap-5 w-full">
-        <Breadcrumb
-          items={[
-            { label: "Category", className: "text-muted-foreground" },
-            { label: category },
-          ]}
-        />
-        <h1 className="text-2xl font-bold">{category} Companies</h1>
+        <h1 className="text-2xl font-bold">Tech Companies | {category} </h1>
         <Suspense fallback={<CompaniesListSkeleton />}>
           <CompaniesList
             allCompanies={filteredCompanies}

apps/web/src/app/location/[location]/page.tsx

@@ -1,4 +1,3 @@
-import { Breadcrumb } from "@/components/Breadcrumb";
 import CompaniesList from "@/components/CompaniesList";
 import { CompaniesListSkeleton } from "@/components/CompaniesListSkeleton";
 import {
@@ -77,13 +76,7 @@ export default async function LocationPage({
   return (
     <section className="mx-auto flex w-full max-w-5xl p-3 relative">
       <div className="flex flex-col gap-5 w-full">
-        <Breadcrumb
-          items={[
-            { label: "Location", className: "text-muted-foreground" },
-            { label: location },
-          ]}
-        />
-        <h1 className="text-2xl font-bold">Companies in {location}</h1>
+        <h1 className="text-2xl font-bold">Tech Companies in {location}</h1>
 
         <Suspense fallback={<CompaniesListSkeleton />}>
           <CompaniesList

apps/web/src/components/AnimateNumber.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import CountUp, { type CountUpProps } from "react-countup";
+
+type AnimateNumberProps = CountUpProps;
+
+export const AnimateNumber = ({ ...props }: AnimateNumberProps) => {
+  return <CountUp {...props} />;
+};

apps/web/src/components/AnimatedCompaniesFeatures.tsx

@@ -1,30 +1,31 @@
-import Image from "next/image";
-import bgHeader from "../../public/assets/images/bg-header.webp";
-import { AnimatedCompaniesFeatures } from "./AnimatedCompaniesFeatures";
+import { PlayCircle } from "lucide-react";
+import { AnimateNumber } from "./AnimateNumber";
 
 export default function CompaniesHeader() {
   return (
     <section
-      className="relative w-full overflow-hidden py-12 text-center"
+      className="font-mono relative w-full overflow-hidden py-8 text-center"
       data-testid="companies-header"
     >
-      <div className="absolute inset-0 z-0 bg-background">
-        <Image
-          src={bgHeader}
-          fill
-          quality={50}
-          className="object-cover object-center opacity-50"
-          priority
-          placeholder="blur"
-          alt="Background Tech Companies in Portugal"
-        />
-      </div>
+      <div className="relative z-[5] px-4 max-w-3xl mx-auto flex flex-col items-center gap-8">
+        <div className="flex items-center gap-2 text-red-500 font-semibold">
+          <PlayCircle className="h-5 w-5" />
+
+          <span>
+            <AnimateNumber end={300} duration={1.5} />+ Tech Companies
+          </span>
+        </div>
 
-      <div className="relative z-[5] px-1 max-w-5xl mx-auto flex flex-col items-center gap-6">
-        <h1 className="font-mono font-bold text-3xl md:text-4xl">
-          Discover Leading Tech Companies in Portugal 🇵🇹
-        </h1>
-        <AnimatedCompaniesFeatures />
+        <div className="flex flex-col gap-4">
+          <h1 className="text-4xl font-bold tracking-tight">
+            <span className="text-red-500">The largest</span> directory of tech
+            companies in Portugal
+          </h1>
+          <p className="text-md text-gray-600 max-w-2xl mx-auto font-semibold">
+            Discover the best tech companies hiring in Portugal, from startups
+            to established enterprises, all in one place.
+          </p>
+        </div>
       </div>
     </section>
   );