Fix: mobile padding issue for Spanish language in Hero section -#2818

apps/docs/app/layout.tsx

@@ -1,8 +1,8 @@
-import "./global.css";
+import { GoogleAnalytics } from "@next/third-parties/google";
 import { RootProvider } from "fumadocs-ui/provider";
 import { Inter } from "next/font/google";
 import type { ReactNode } from "react";
-import { GoogleAnalytics } from "@next/third-parties/google";
+import "./global.css";
 const inter = Inter({
 	subsets: ["latin"],
 });

apps/website/app/[locale]/api/og/route.ts

@@ -4,18 +4,14 @@ import type { NextRequest } from "next/server";
 
 export async function GET(
 	request: NextRequest,
-	{ params }: { params: { locale: string } },
+	{ params }: { params: Promise<{ locale: string }> },
 ) {
 	try {
 		const { searchParams } = new URL(request.url);
 		const slug = searchParams.get("slug");
+		const { locale } = await params;
 
-		console.log(
-			"Generating OG image for slug:",
-			slug,
-			"locale:",
-			params.locale,
-		);
+		console.log("Generating OG image for slug:", slug, "locale:", locale);
 
 		if (!slug) {
 			console.error("Missing slug parameter");
@@ -32,7 +28,7 @@ export async function GET(
 		console.log("Found post:", post.title);
 
 		const formattedDate = new Date(post.published_at).toLocaleDateString(
-			params.locale,
+			locale,
 			{
 				year: "numeric",
 				month: "long",

apps/website/app/[locale]/blog/[slug]/page.tsx

@@ -105,25 +105,28 @@ export default async function BlogPostPage({ params }: Props) {
 			const scripts = doc.querySelectorAll(
 				'script[type="application/ld+json"], script',
 			);
-			scripts.forEach((script) => script.remove());
+			for (const script of scripts) {
+				script.remove();
+			}
 
 			// Remover otros elementos no deseados
 			const unwantedElements = doc.querySelectorAll("style, meta, link");
-			unwantedElements.forEach((el) => el.remove());
+			for (const el of unwantedElements) {
+				el.remove();
+			}
 
 			return doc.body.innerHTML;
-		} else {
-			// Fallback para servidor - usar regex para limpiar
-			return html
-				.replace(
-					/<script[^>]*type="application\/ld\+json"[^>]*>[\s\S]*?<\/script>/gi,
-					"",
-				)
-				.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "")
-				.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "")
-				.replace(/<meta[^>]*>/gi, "")
-				.replace(/<link[^>]*>/gi, "");
 		}
+		// Fallback para servidor - usar regex para limpiar
+		return html
+			.replace(
+				/<script[^>]*type="application\/ld\+json"[^>]*>[\s\S]*?<\/script>/gi,
+				"",
+			)
+			.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "")
+			.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "")
+			.replace(/<meta[^>]*>/gi, "")
+			.replace(/<link[^>]*>/gi, "");
 	};
 
 	// Convertir HTML a Markdown
@@ -214,11 +217,8 @@ export default async function BlogPostPage({ params }: Props) {
 				className="object-cover max-w-lg mx-auto rounded-lg border max-lg:w-64 border-border overflow-hidden"
 			/>
 		),
-		code: ({
-			className,
-			children,
-			inline,
-		}: { className: string; children: React.ReactNode; inline: boolean }) => {
+		code: (props: any) => {
+			const { className, children, inline } = props;
 			console.log(className, children, inline);
 			// Si es código inline (no tiene className con language-*), renderizar como span
 			if (inline || !className || !/language-(\w+)/.test(className)) {

apps/website/app/[locale]/blog/page.tsx

@@ -21,8 +21,8 @@ export default async function BlogPage({
 	params,
 	searchParams,
 }: {
-	params: { locale: string };
-	searchParams: { [key: string]: string | string[] | undefined };
+	params: Promise<{ locale: string }>;
+	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
 	const { locale } = await params;
 	const searchParams2 = await searchParams;

apps/website/app/[locale]/blog/tag/[tag]/page.tsx

@@ -23,7 +23,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 export async function generateStaticParams() {
 	const tags = await getTags();
 
-	return tags.map((tag: { slug: string }) => ({
+	return tags.map((tag) => ({
 		tag: tag.slug,
 	}));
 }
@@ -74,7 +74,7 @@ export default async function TagPage({ params }: Props) {
 
 			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 				{posts.map((post: Post) => (
-					<BlogPostCard key={post.id} post={post} locale={locale} />
+					<BlogPostCard key={post.id} post={post} locale={tag} />
 				))}
 			</div>
 		</div>

apps/website/app/[locale]/contact/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useState } from "react";
-import { useTranslations } from "next-intl";
 import { Container } from "@/components/Container";
+import { trackGAEvent } from "@/components/analitycs";
+import AnimatedGridPattern from "@/components/ui/animated-grid-pattern";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -12,9 +12,9 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { trackGAEvent } from "@/components/analitycs";
-import AnimatedGridPattern from "@/components/ui/animated-grid-pattern";
 import { cn } from "@/lib/utils";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
 
 interface ContactFormData {
 	inquiryType: "" | "support" | "sales" | "other";

apps/website/app/[locale]/layout.tsx

@@ -74,7 +74,7 @@ export default async function RootLayout({
 	params,
 }: {
 	children: React.ReactNode;
-	params: { locale: string };
+	params: Promise<{ locale: string }>;
 }) {
 	const { locale } = await params;
 	setRequestLocale(locale);

apps/website/app/[locale]/page.tsx

@@ -9,7 +9,9 @@ import { Sponsors } from "@/components/sponsors";
 import { StatsSection } from "@/components/stats";
 import { setRequestLocale } from "next-intl/server";
 
-export default async function Home({ params }: { params: { locale: string } }) {
+export default async function Home({
+	params,
+}: { params: Promise<{ locale: string }> }) {
 	const { locale } = await params;
 	setRequestLocale(locale);
 	return (

apps/website/app/api/contact/route.ts

@@ -1,7 +1,7 @@
+import { getHubSpotUTK, submitToHubSpot } from "@/lib/hubspot";
 import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
 import { Resend } from "resend";
-import { submitToHubSpot, getHubSpotUTK } from "@/lib/hubspot";
 
 interface ContactFormData {
 	inquiryType: "support" | "sales" | "other";

apps/website/app/layout.tsx

@@ -1,10 +1,10 @@
+import { GoogleAnalytics } from "@next/third-parties/google";
 import clsx from "clsx";
 import type { Metadata } from "next";
 import { NextIntlClientProvider } from "next-intl";
 import { getMessages } from "next-intl/server";
 import { Inter, Lexend } from "next/font/google";
 import type { ReactNode } from "react";
-import { GoogleAnalytics } from "@next/third-parties/google";
 
 type Props = {
 	children: ReactNode;
@@ -49,9 +49,9 @@ export default async function RootLayout({
 	params,
 }: {
 	children: ReactNode;
-	params: { locale: string };
+	params: Promise<{ locale: string }>;
 }) {
-	const { locale } = params;
+	const { locale } = await params;
 	const messages = await getMessages();
 	return (
 		<html

apps/website/components/Header.tsx

@@ -128,7 +128,9 @@ function MobileNavigation() {
 							{t("navigation.docs")}
 						</MobileNavLink>
 						<MobileNavLink href="/blog">{t("navigation.blog")}</MobileNavLink>
-						<MobileNavLink href="/contact">{t("navigation.contact")}</MobileNavLink>
+						<MobileNavLink href="/contact">
+							{t("navigation.contact")}
+						</MobileNavLink>
 						<MobileNavLink href={linkT("docs.intro")} target="_blank">
 							<Button className=" w-full" asChild>
 								<Link

apps/website/components/Hero.tsx

@@ -55,7 +55,7 @@ export function Hero() {
 	return (
 		<div className="h-[1100px] bg-black pt-20 sm:h-[1100px] lg:pt-32">
 			<div className=" bottom-0 flex w-full items-center justify-center overflow-hidden rounded-lg  bg-background md:shadow-xl">
-				<div className="relative px-4">
+				<div className="relative px-8 sm:px-8 md:px-10 lg:px-12">
 					<div className="text-center">
 						<motion.a
 							href="#pricing"
@@ -80,7 +80,7 @@ export function Hero() {
 						</motion.a>
 
 						<motion.h1
-							className="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-muted-foreground sm:text-7xl"
+							className="mx-auto max-w-3xl sm:max-w-4xl font-display text-4xl font-medium tracking-tight text-muted-foreground sm:text-6xl lg:text-7xl"
 							initial={{ opacity: 0, y: 20 }}
 							animate={{ opacity: 1, y: 0 }}
 							transition={{ duration: 0.3 }}
@@ -100,7 +100,7 @@ export function Hero() {
 							{t("hero.with")}
 						</motion.h1>
 						<motion.p
-							className="mx-auto mt-6 max-w-2xl text-lg tracking-tight text-muted-foreground"
+							className="mx-auto mt-6 max-w-2xl text-base sm:text-lg tracking-tight text-muted-foreground"
 							initial={{ opacity: 0, y: 20 }}
 							animate={{ opacity: 1, y: 0 }}
 							transition={{ duration: 0.3, delay: 0.2 }}

apps/website/components/ui/ripple.tsx

@@ -107,7 +107,7 @@ const Ripple = React.memo(function Ripple({
 		},
 	];
 
-	const communitySponsors = [];
+	const communitySponsors: any[] = [];
 
 	return (
 		<div
@@ -172,7 +172,7 @@ const Ripple = React.memo(function Ripple({
 										const y = radius * Math.sin((angle * Math.PI) / 180);
 										const initials = item.name
 											.split(" ")
-											.map((n) => n[0])
+											.map((n: string) => n[0])
 											.join("");
 
 										return (
@@ -222,7 +222,7 @@ const Ripple = React.memo(function Ripple({
 										const y = radius * Math.sin((angle * Math.PI) / 180);
 										const initials = item.name
 											.split(" ")
-											.map((n) => n[0])
+											.map((n: string) => n[0])
 											.join("");
 										return (
 											<div
@@ -271,7 +271,7 @@ const Ripple = React.memo(function Ripple({
 										const y = radius * Math.sin((angle * Math.PI) / 180);
 										const initials = item.name
 											.split(" ")
-											.map((n) => n[0])
+											.map((n: string) => n[0])
 											.join("");
 										return (
 											<div
@@ -319,7 +319,7 @@ const Ripple = React.memo(function Ripple({
 										const y = radius * Math.sin((angle * Math.PI) / 180);
 										const initials = item.name
 											.split(" ")
-											.map((n) => n[0])
+											.map((n: string) => n[0])
 											.join("");
 										return (
 											<div
@@ -361,14 +361,14 @@ const Ripple = React.memo(function Ripple({
 
 							{i === 4 && (
 								<div className="relative w-full h-full flex justify-center items-center">
-									{communitySponsors.map((item, index) => {
+									{communitySponsors.map((item: any, index: number) => {
 										const angle = (360 / communitySponsors.length) * index;
 										const radius = mainCircleSize / 2 + 180;
 										const x = radius * Math.cos((angle * Math.PI) / 180);
 										const y = radius * Math.sin((angle * Math.PI) / 180);
 										const initials = item.name
 											.split(" ")
-											.map((n) => n[0])
+											.map((n: string) => n[0])
 											.join("");
 										return (
 											<div

apps/website/lib/ghost.ts

@@ -105,23 +105,23 @@ export async function getPost(slug: string): Promise<Post | null> {
 	}
 }
 
-export async function getTags() {
+export async function getTags(): Promise<Array<{ slug: string }>> {
 	try {
 		const result = await api.tags.browse();
-		return result;
+		return result as Array<{ slug: string }>;
 	} catch (error) {
 		console.error("Error fetching tags:", error);
 		return [];
 	}
 }
 
-export async function getPostsByTag(tag: string) {
+export async function getPostsByTag(tag: string): Promise<Post[]> {
 	try {
-		const result = await api.posts.browse({
+		const result = (await api.posts.browse({
 			limit: "all",
 			filter: `tag:${tag}`,
 			include: ["tags", "authors"],
-		});
+		})) as Post[];
 		return result;
 	} catch (error) {
 		console.error(`Error fetching posts with tag ${tag}:`, error);

apps/website/package.json

@@ -12,12 +12,13 @@
 	},
 	"browserslist": "defaults, not ie <= 11",
 	"dependencies": {
-		"@next/third-parties": "15.4.5",
-		"hast-util-to-jsx-runtime": "2.3.5",
 		"@headlessui/react": "^2.2.0",
 		"@headlessui/tailwindcss": "^0.2.0",
+		"@next/third-parties": "15.4.5",
+		"@prettier/plugin-xml": "^3.4.1",
 		"@radix-ui/react-accordion": "^1.2.1",
 		"@radix-ui/react-avatar": "^1.1.1",
+		"@radix-ui/react-dialog": "^1.1.15",
 		"@radix-ui/react-scroll-area": "^1.2.0",
 		"@radix-ui/react-select": "^2.0.0",
 		"@radix-ui/react-slot": "^1.0.2",
@@ -30,13 +31,14 @@
 		"@types/turndown": "^5.0.5",
 		"autoprefixer": "^10.4.12",
 		"axios": "^1.8.1",
-		"resend": "6.1.2",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.0",
 		"framer-motion": "^11.3.19",
+		"hast-util-to-jsx-runtime": "2.3.5",
 		"lucide-react": "0.364.0",
 		"next": "15.4.5",
 		"next-intl": "^3.26.5",
+		"prettier": "^3.3.3",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-ga4": "^2.1.0",
@@ -45,6 +47,7 @@
 		"rehype-raw": "^7.0.0",
 		"remark-gfm": "^4.0.1",
 		"remark-toc": "^9.0.0",
+		"resend": "6.1.2",
 		"satori": "^0.12.1",
 		"sharp": "^0.33.5",
 		"shiki": "1.22.2",
@@ -54,9 +57,7 @@
 		"tailwindcss-animate": "^1.0.7",
 		"turndown": "^7.2.0",
 		"turndown-plugin-gfm": "^1.0.2",
-		"typescript": "5.1.6",
-		"prettier": "^3.3.3",
-		"@prettier/plugin-xml": "^3.4.1"
+		"typescript": "5.1.6"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.26.9",