feat: enhance CodiceBox and TrovaCasaCTA with additional props and styling improvements

apps/infoalloggi/src/components/codiceRicerca.tsx

@@ -14,10 +14,12 @@ export const CodiceBox = ({
 	className,
 	optionBoxClassName,
 	optionsClassName,
+	containerClassName,
 }: {
 	className?: string;
 	optionBoxClassName?: string;
 	optionsClassName?: string;
+	containerClassName?: string;
 }) => {
 	const { data: codici, isLoading: loading } = api.annunci.getCodici.useQuery();
 	const { locale } = useTranslation();
@@ -30,6 +32,7 @@ export const CodiceBox = ({
 			className={className}
 			optionBoxClassName={optionBoxClassName}
 			optionsClassName={optionsClassName}
+			containerClassName={containerClassName}
 		/>
 	);
 };
@@ -40,6 +43,7 @@ type SearchBoxProps = {
 	className?: string;
 	optionBoxClassName?: string;
 	optionsClassName?: string;
+	containerClassName?: string;
 };
 
 const AutocompleteSearchBox = ({
@@ -48,6 +52,7 @@ const AutocompleteSearchBox = ({
 	className,
 	optionBoxClassName,
 	optionsClassName,
+	containerClassName,
 }: SearchBoxProps) => {
 	const router = useRouter();
 	const [open, setOpen] = useState<boolean>(false);
@@ -73,7 +78,12 @@ const AutocompleteSearchBox = ({
 
 	return (
 		<div ref={wrapperRef} className="z-[5000] w-full">
-			<div className="relative flex w-full items-center justify-center rounded-md bg-white">
+			<div
+				className={cn(
+					"relative flex w-full items-center justify-center rounded-md bg-white",
+					containerClassName,
+				)}
+			>
 				<label htmlFor="search" className="sr-only">
 					Search Box
 				</label>

apps/infoalloggi/src/components/svgs.tsx

@@ -22,7 +22,7 @@ export const HeroSvg = (props: SVGProps<SVGSVGElement>) => (
 		<path d="m240.441 33.238-137.11 142.594v32.906l137.11-137.109 148.078 148.078V186.8L240.441 33.238Z" />
 		<path
 			d="M417.509 184.53 255.95 22.972l-7.755-7.756c-4.28-4.288-11.228-4.288-15.509 0l-7.755 7.756-150.59 150.589c-4.288 4.281-4.288 11.23 0 15.51l7.755 7.755c4.281 4.288 11.229 4.288 15.51 0L240.441 54.013l153.793 153.793c4.28 4.288 11.228 4.288 15.509 0l7.755-7.755c4.286-4.284 4.292-11.231.011-15.521Z"
-			fill="#EF4D4D"
+			fill="#fb2c36"
 		/>
 		<path
 			d="M152.088 362.3a43.409 43.409 0 0 0 6.087-21.937c0-33.775-36.563-54.884-65.813-37.997a43.877 43.877 0 0 0-21.937 37.997c0 8.029 2.315 15.455 6.087 21.937h75.576Zm225.462-65.812a43.788 43.788 0 0 0-39.839 25.722 32.515 32.515 0 0 0-15.005-3.785c-18.173 0-32.906 14.733-32.906 32.907 0 3.872.79 7.524 2.018 10.968h123.53a43.5 43.5 0 0 0 6.077-21.937c0-24.231-19.644-43.875-43.875-43.875Z"

apps/infoalloggi/src/pages/index.tsx

@@ -62,11 +62,15 @@ const TrovaCasaCTA = (props: { testi: LangDict }) => {
 					{testi.index.CTA_Annunci} <Telescope className="ml-2 size-6" />
 				</Link>
 
-				<div className="relative mx-auto flex w-full gap-2">
+				<div className="relative mx-auto flex w-full gap-2 p-1 items-center justify-center">
 					<CodiceBox
 						key={"codiceBox"}
-						className="rounded-md placeholder:text-center"
+						className="rounded-md placeholder:text-center "
+						optionBoxClassName="left-0"
 					/>
+					<div className="absolute w-full h-full  overflow-clip rounded-lg pointer-events-none">
+						<div className="animate-ping  w-full h-full bg-green-400 pointer-events-none" />
+					</div>
 				</div>
 			</div>
 		</div>
@@ -76,41 +80,60 @@ const TrovaCasaCTA = (props: { testi: LangDict }) => {
 const FrequentSearches = () => {
 	const { locale } = useTranslation();
 	return (
-		<Card className="mx-auto mb-4 max-w-4xl gap-4 bg-sky-300">
+		<Card className="mx-auto mb-4 max-w-4xl gap-4 shadow-none border-0 ">
 			<CardHeader>
-				<CardTitle className="text-center text-xl font-bold">
+				<CardTitle className="text-center text-3xl sm:text-2xl font-bold text-primary">
 					{locale === "en" ? "Frequent Searches" : "Ricerche frequenti"}
 				</CardTitle>
 			</CardHeader>
-			<CardContent className="mx-auto flex max-w-fit flex-wrap items-center justify-center gap-4 px-0 sm:px-4">
+			<CardContent className="mx-auto flex max-w-fit flex-wrap items-center justify-center gap-4 px-2 sm:px-6">
-				<Link href="/annunci?comune=Bassano+del+Grappa">
-					<Button className="flex items-center gap-2 text-lg">
-						Affitti Bassano del Grappa
-						<ArrowRight />
-					</Button>
-				</Link>
-
 				<Link href="/annunci?tipo=Transitorio">
-					<Button className="flex items-center gap-2 text-lg">
+					<Button
-						Affitti Transitori
+						size="lg"
-						<ArrowRight />
+						variant="flat"
-					</Button>
+						className="flex items-center gap-1 text-lg bg-transitorio text-black border-2 border-white"
-				</Link>
+					>
-				<Link href="/annunci?comune=Bassano+del+Grappa&tipo=Transitorio">
+						Transitori
-					<Button className="flex items-center gap-2 text-lg">
-						Affitti Transitori Bassano
 						<ArrowRight />
 					</Button>
 				</Link>
 				<Link href="/annunci?tipo=Stabile">
-					<Button className="flex items-center gap-2 text-lg">
+					<Button
-						Affitti Stabili
+						size="lg"
+						variant="flat"
+						className="flex items-center gap-1 text-lg bg-stabile text-black border-2 border-whiteborder-2 border-white"
+					>
+						Stabili
 						<ArrowRight />
 					</Button>
 				</Link>
+				<Link href="/annunci?comune=Bassano+del+Grappa">
+					<Button
+						size="lg"
+						className="flex items-center gap-1 text-lg border-2 border-white"
+					>
+						Bassano del Grappa
+						<ArrowRight />
+					</Button>
+				</Link>
+
+				<Link href="/annunci?comune=Bassano+del+Grappa&tipo=Transitorio">
+					<Button
+						size="lg"
+						variant="flat"
+						className="flex items-center gap-1 text-lg bg-transitorio text-black border-2 border-white"
+					>
+						Transitori Bassano
+						<ArrowRight />
+					</Button>
+				</Link>
+
 				<Link href="/annunci?comune=Marostica">
-					<Button className="flex items-center gap-2 text-lg">
+					<Button
-						Affitti Marostica
+						size="lg"
+						className="flex items-center gap-1 text-lg border-2 border-white"
+					>
+						Marostica
 						<ArrowRight />
 					</Button>
 				</Link>