Professionalize landing page design
This commit is contained in:
@@ -7,32 +7,48 @@ interface About19Props {
|
||||
|
||||
const About19 = ({ className }: About19Props) => {
|
||||
return (
|
||||
<section className={cn("py-32", className)}>
|
||||
<div className="container">
|
||||
<div className="grid grid-cols-1 gap-15 lg:grid-cols-7 lg:gap-1">
|
||||
<div className="col-span-4 h-120">
|
||||
<section className={cn("px-4 py-20 sm:px-6 lg:px-8 lg:py-28", className)}>
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div className="grid gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,0.88fr)] lg:items-start lg:gap-14">
|
||||
<div className="overflow-hidden rounded-lg border border-border bg-card">
|
||||
<img
|
||||
src="/about.jpg"
|
||||
alt=""
|
||||
className="h-full w-full object-cover rounded-xl shadow-md"
|
||||
alt="Matthias Meister bei der Webentwicklung"
|
||||
className="h-[20rem] w-full object-cover sm:h-[28rem] lg:h-[34rem]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-3 ml-auto max-w-4xl space-y-15 lg:pl-15">
|
||||
<h1 className="text-2xl font-medium tracking-tight">
|
||||
Hallo, ich bin Matthias.
|
||||
</h1>
|
||||
<p className="text-base text-foreground/40 lg:text-lg">
|
||||
Ich bin in der Region aufgewachsen, war durch die Bundeswehr viele Jahre weg — und bin jetzt zurück. Und ich plane zu bleiben.
|
||||
<div className="max-w-xl">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">
|
||||
Über die Zusammenarbeit
|
||||
</p>
|
||||
<p className="text-base text-foreground/40 lg:text-lg">
|
||||
Seit über 15 Jahren beschäftige ich mich mit Webentwicklung und Software. Einen Großteil davon intern für die Bundeswehr — Projekte die ich Ihnen leider nicht zeigen kann. Was ich Ihnen zeigen kann: Wie ich arbeite. Zuverlässig, präzise und ohne unnötigen Schnickschnack.
|
||||
</p>
|
||||
<p className="text-base text-foreground/40 lg:text-lg">
|
||||
Neben Websites für regionale Unternehmen entwickle ich eigene Software und Apps. Das bedeutet: Wenn Ihre Anforderungen irgendwann über eine einfache Website hinausgehen, bin ich noch immer der richtige Ansprechpartner.
|
||||
</p>
|
||||
<p className="text-base text-foreground/40 lg:text-lg">
|
||||
Mein Ziel ist es, Unternehmen aus der Region — Handwerker, Friseure, Ärzte — mit dem auszustatten, was Großstadtagenturen ihren Kunden für viel mehr Geld verkaufen. Eine Website die funktioniert, gefunden wird und Ihnen keine Kopfschmerzen macht.
|
||||
<h2 className="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
|
||||
Hallo, ich bin Matthias. Zurück in der Region und hier, um zu
|
||||
bleiben.
|
||||
</h2>
|
||||
<div className="mt-8 space-y-5 text-base leading-8 text-muted-foreground">
|
||||
<p>
|
||||
Ich bin in der Region aufgewachsen, war durch die Bundeswehr
|
||||
viele Jahre weg und bin jetzt zurück.
|
||||
</p>
|
||||
<p>
|
||||
Seit über 15 Jahren beschäftige ich mich mit Webentwicklung und
|
||||
Software. Einen Großteil davon intern für die Bundeswehr:
|
||||
Projekte, die ich Ihnen leider nicht zeigen kann. Was ich Ihnen
|
||||
zeigen kann: wie ich arbeite. Zuverlässig, präzise und ohne
|
||||
unnötigen Schnickschnack.
|
||||
</p>
|
||||
<p>
|
||||
Neben Websites für regionale Unternehmen entwickle ich eigene
|
||||
Software und Apps. Wenn Ihre Anforderungen irgendwann über eine
|
||||
einfache Website hinausgehen, bleibt der Ansprechpartner also
|
||||
derselbe.
|
||||
</p>
|
||||
</div>
|
||||
<p className="mt-8 rounded-lg border border-border bg-card p-5 text-base font-medium leading-7 text-foreground">
|
||||
Mein Ziel: Unternehmen aus der Region mit einer Website
|
||||
ausstatten, die funktioniert, gefunden wird und Ihnen keine
|
||||
Kopfschmerzen macht.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user