MarkusandDevin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2b24334bfa
Adds the complete Next.js website including i18n routing, house and apartment pages, Beds24 v2 integration for live availability/pricing, Stripe checkout, contact forms, Docker setup and deployment docs. Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
97 lines
3.2 KiB
TypeScript
97 lines
3.2 KiB
TypeScript
import { Wind, Car, Bus, MapPin, Sofa } from "lucide-react";
|
|
import { House } from "@/src/config/apartments";
|
|
|
|
interface HouseHighlightsProps {
|
|
house: House;
|
|
locale: string;
|
|
}
|
|
|
|
export function HouseHighlights({ house, locale }: HouseHighlightsProps) {
|
|
const isHerdweg = house.id === "herdweg";
|
|
|
|
const highlights = isHerdweg
|
|
? [
|
|
{
|
|
icon: Car,
|
|
title: locale === "de" ? "Gleiche Straße wie Panzer Kaserne" : "Same Street as Panzer Kaserne",
|
|
text: locale === "de" ? "Kein Abbiegen nötig" : "Zero turns needed",
|
|
highlight: true,
|
|
},
|
|
{
|
|
icon: Bus,
|
|
title: locale === "de" ? "Bushaltestelle" : "Bus stop",
|
|
text: locale === "de" ? "In der Nähe" : "Nearby",
|
|
},
|
|
{
|
|
icon: Wind,
|
|
title: locale === "de" ? "Klimaanlage" : "Air conditioning",
|
|
text: locale === "de" ? "In den meisten Apartments" : "In most apartments",
|
|
},
|
|
{
|
|
icon: Sofa,
|
|
title: locale === "de" ? "Vollmöbliert" : "Fully furnished",
|
|
text: locale === "de" ? "Alle Apartments" : "All apartments",
|
|
},
|
|
]
|
|
: [
|
|
{
|
|
icon: MapPin,
|
|
title: locale === "de" ? "Stadtzentrum" : "City center",
|
|
text: locale === "de" ? "Nahe gelegen" : "Close by",
|
|
},
|
|
{
|
|
icon: Car,
|
|
title: locale === "de" ? "Daimler Werk Sindelfingen" : "Daimler plant Sindelfingen",
|
|
text: locale === "de" ? "Leicht erreichbar" : "Easy to reach",
|
|
},
|
|
{
|
|
icon: Wind,
|
|
title: locale === "de" ? "Klimaanlage" : "Air conditioning",
|
|
text: locale === "de" ? "In allen Apartments" : "In all apartments",
|
|
},
|
|
{
|
|
icon: Sofa,
|
|
title: locale === "de" ? "Vollmöbliert" : "Fully furnished",
|
|
text: locale === "de" ? "Alle Apartments" : "All apartments",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 mb-12">
|
|
{highlights.map((highlight, index) => {
|
|
const Icon = highlight.icon;
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={`flex flex-col items-center text-center gap-4 p-6 rounded-2xl shadow-md hover:shadow-xl hover:-translate-y-1 transition-all ${
|
|
highlight.highlight
|
|
? "bg-brand-green border-2 border-brand-green text-white"
|
|
: "bg-white border-2 border-brand-green/20"
|
|
}`}
|
|
>
|
|
<div
|
|
className={`p-4 rounded-2xl shadow-sm ${
|
|
highlight.highlight ? "bg-white text-brand-green" : "bg-brand-green text-white"
|
|
}`}
|
|
>
|
|
<Icon className="w-9 h-9" />
|
|
</div>
|
|
<div>
|
|
<p
|
|
className={`font-bold text-xl leading-tight mb-1 ${
|
|
highlight.highlight ? "text-white" : "text-brand-grey-dark"
|
|
}`}
|
|
>
|
|
{highlight.title}
|
|
</p>
|
|
<p className={`text-base font-medium ${highlight.highlight ? "text-white/90" : "text-brand-grey"}`}>
|
|
{highlight.text}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|