Startseite geleert
This commit is contained in:
egnbkts committed
1 parent
5bd2a0352b
commit
4c39013b6b
1 file changed
+1
-186
+1
-186
@@ -1,192 +1,7 @@
|
||||
import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main>
|
||||
<h1>Startseite</h1>
|
||||
<h2>Startseite</h2>
|
||||
<h3>Startseite</h3>
|
||||
<h4>Startseite</h4>
|
||||
<p>Startseite</p>
|
||||
<br />
|
||||
<button className="btn btn--filled">Filled</button>
|
||||
<br />
|
||||
<br />
|
||||
<button className="btn btn--outline">Outline</button>
|
||||
<br />
|
||||
<br />
|
||||
<button className="btn btn--ghost">Ghost</button>
|
||||
<br />
|
||||
<br />
|
||||
<button className="btn btn--tertiary">Tertiary</button>
|
||||
<br />
|
||||
<br />
|
||||
<button className="btn btn--filled" disabled>
|
||||
Disabled
|
||||
</button>
|
||||
<br />
|
||||
<br />
|
||||
<button className="btn btn--filled">
|
||||
<ArrowRightIcon className="btn-icon animate" size={18} />
|
||||
Jetzt starten
|
||||
</button>
|
||||
<br />
|
||||
<br />
|
||||
<button className="btn btn--outline">
|
||||
<ArrowRightIcon className="btn-icon animate" size={18} />
|
||||
Outline
|
||||
</button>
|
||||
<br />
|
||||
<br />
|
||||
<button className="btn btn--ghost">
|
||||
<ArrowRightIcon className="btn-icon animate" size={18} />
|
||||
Ghost
|
||||
</button>
|
||||
<br />
|
||||
<br />
|
||||
<button className="btn btn--tertiary">
|
||||
<ArrowRightIcon className="btn-icon animate" size={18} />
|
||||
Tertiary
|
||||
</button>
|
||||
<br />
|
||||
<br />
|
||||
<button className="btn btn--filled" disabled>
|
||||
<ArrowRightIcon className="btn-icon animate" size={18} />
|
||||
Disabled
|
||||
</button>
|
||||
<br />
|
||||
<br />
|
||||
<p>
|
||||
<a href="#">Webdesign</a> und Webentwicklung bilden das Fundament jeder
|
||||
erfolgreichen digitalen Präsenz. Während Webdesign die visuelle
|
||||
Gestaltung, Benutzerführung und das Nutzererlebnis in den Vordergrund
|
||||
stellt, sorgt die Webentwicklung für die technische Umsetzung im
|
||||
Hintergrund. Beide Disziplinen greifen eng ineinander – ein
|
||||
ansprechendes Design entfaltet seine volle Wirkung nur durch sauberen,
|
||||
performanten Code.
|
||||
</p>
|
||||
<p>
|
||||
Moderne Websites müssen auf allen Geräten funktionieren, schnell laden
|
||||
und barrierefrei zugänglich sein. Suchmaschinenoptimierung, Ladezeiten
|
||||
und intuitive Navigation sind dabei keine optionalen Extras, sondern
|
||||
entscheidende Faktoren für den Erfolg. Wer heute im Netz wahrgenommen
|
||||
werden möchte, braucht mehr als nur eine schöne Oberfläche – er braucht
|
||||
eine durchdachte digitale Strategie, die Design und Technik vereint.
|
||||
</p>
|
||||
<br />
|
||||
<h2>Kontakt</h2>
|
||||
<form>
|
||||
{/* Name */}
|
||||
<div className="form-group">
|
||||
<label className="form-label form-label--required" htmlFor="name">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Max Mustermann"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* E-Mail */}
|
||||
<div className="form-group">
|
||||
<label className="form-label form-label--required" htmlFor="email">
|
||||
E-Mail
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="max@beispiel.de"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Telefon */}
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="telefon">
|
||||
Telefon
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="telefon"
|
||||
name="telefon"
|
||||
placeholder="+49 511 123456"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Betreff */}
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="betreff">
|
||||
Betreff
|
||||
</label>
|
||||
<select id="betreff" name="betreff">
|
||||
<option value="">Bitte auswählen</option>
|
||||
<option value="anfrage">Allgemeine Anfrage</option>
|
||||
<option value="angebot">Angebotsanfrage</option>
|
||||
<option value="support">Support</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Nachricht */}
|
||||
<div className="form-group">
|
||||
<label
|
||||
className="form-label form-label--required"
|
||||
htmlFor="nachricht"
|
||||
>
|
||||
Nachricht
|
||||
</label>
|
||||
<textarea
|
||||
id="nachricht"
|
||||
name="nachricht"
|
||||
placeholder="Ihre Nachricht..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Datenschutz Checkbox */}
|
||||
<div className="form-group">
|
||||
<label className="form-check">
|
||||
<input type="checkbox" />
|
||||
<span className="form-check-label">
|
||||
Ich habe die Datenschutzerklärung gelesen und stimme zu.
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Error-Beispiel zum Testen */}
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="fehler">
|
||||
Fehler-Beispiel
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="fehler"
|
||||
className="is-error"
|
||||
defaultValue="Falscher Wert"
|
||||
/>
|
||||
<span className="form-error-msg">
|
||||
Bitte gib einen gültigen Wert ein.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Disabled-Beispiel */}
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="deaktiviert">
|
||||
Deaktiviert
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="deaktiviert"
|
||||
disabled
|
||||
defaultValue="Nicht bearbeitbar"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Submit */}
|
||||
<button type="submit" className="btn btn--filled">
|
||||
Nachricht senden
|
||||
</button>
|
||||
</form>
|
||||
<h1>Mehr Sauberkeit, weniger Aufwand für ein sauberes Arbeitsumfeld</h1>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user