matthias/Dev-Landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Contact21 and Pricing4 components for improved styling; add CTASection to homepage layout.

Browse Source
This commit is contained in:
Matthias
2026-04-21 13:14:26 +02:00
parent cf8c9e1186
commit 6a8ee43c07
4 changed files with 40 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/contact21.tsx
View File

@@ -122,7 +122,7 @@ const Contact21 = ({ className, onSubmit }: Contact21Props) => {
id={field.name}
aria-invalid={fieldState.invalid}
placeholder="Name*"
className="h-15 rounded-none border-0 border-b border-b-foreground/25 !bg-transparent shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
className="h-15 rounded-none border-0 border-b border-b-foreground/25 bg-transparent! shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
/>
{fieldState.invalid && (
<FieldError errors={[fieldState.error]} />
@@ -145,7 +145,7 @@ const Contact21 = ({ className, onSubmit }: Contact21Props) => {
type="email"
aria-invalid={fieldState.invalid}
placeholder="Email*"
className="h-15 rounded-none border-0 border-b border-b-foreground/25 !bg-transparent shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
className="h-15 rounded-none border-0 border-b border-b-foreground/25 bg-transparent! shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
/>
{fieldState.invalid && (
<FieldError errors={[fieldState.error]} />
@@ -167,7 +167,7 @@ const Contact21 = ({ className, onSubmit }: Contact21Props) => {
id={field.name}
aria-invalid={fieldState.invalid}
placeholder="Message (Tell us about your project)"
className="h-15 rounded-none border-0 border-b border-b-foreground/25 !bg-transparent shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
className="h-15 rounded-none border-0 border-b border-b-foreground/25 bg-transparent! shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base"
/>
{fieldState.invalid && (
<FieldError errors={[fieldState.error]} />
@@ -183,7 +183,7 @@ const Contact21 = ({ className, onSubmit }: Contact21Props) => {
)}
<Button
className="mt-15 flex items-center justify-start gap-2 rounded-none !px-8 lg:h-12 lg:text-base"
className="mt-15 flex items-center justify-start gap-2 rounded-none px-8! lg:h-12 lg:text-base"
disabled={form.formState.isSubmitting}
>
{form.formState.isSubmitting ? (

28
src/components/cta.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { Button } from "@/components/ui/button";
export default function CTASection() {
return (
<section className="py-10 lg:py-16">
<div className="mx-auto max-w-5xl px-4">
<div className="rounded-2xl bg-linear-to-r bg-[url('https://images.unsplash.com/photo-1739785890803-7a2191a37ef5?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-bottom px-8 py-10 md:px-16 md:py-20">
<header className="mb-8 max-w-2xl space-y-4">
<h2 className="font-heading text-4xl leading-10 text-black lg:text-4xl">
Benefit up to 33% when connecting to Sentium for 4 months or more
</h2>
<p className="text-lg text-black/60">
Register and start using our cloud solutions today
</p>
</header>
{/* CTA Buttons */}
<div className="flex flex-wrap gap-4">
<Button size="lg">Get Started</Button>
<Button size="lg" variant="secondary">
Contact
</Button>
</div>
</div>
</div>
</section>
);
}

2
src/components/pricing4.tsx
View File

@@ -112,7 +112,7 @@ const Pricing4 = ({
{plans.map((plan) => (
<div
key={plan.name}
className={`flex w-full flex-col rounded-lg border p-6 text-left ${
className={`flex w-full flex-col rounded-xl border shadow-sm p-6 text-left ${
plan.isPopular ? "bg-muted" : ""
}`}
>