Skip to content

Commit 6906d60

Browse files
tristanpolandtristanpoland
committed
Fixed some minor UI issues
1 parent abf1553 commit 6906d60

File tree

3 files changed

+93
-80
lines changed

3 files changed

+93
-80
lines changed

‎app/components/contact-enterprise.tsx‎

Lines changed: 43 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
"use client";
21
import React from "react";
32
import { Label } from "./ui/label";
43
import { Input } from "./ui/input";
@@ -14,43 +13,53 @@ export function Contact() {
1413
e.preventDefault();
1514
console.log("Form submitted");
1615
};
17-
return (
18-
<div className="w-3/4 mx-auto rounded-none md:rounded-2xl p-4 md:p-8 shadow-input bg-white dark:bg-black">
19-
<h2 className="font-bold text-xl text-neutral-800 dark:text-neutral-200">
20-
Join Enterprise
21-
</h2>
22-
<p className="text-neutral-600 text-sm w-full mt-2 dark:text-neutral-300">
23-
Reach out to learn more about how Horizon Enterprise can help you
24-
</p>
2516

26-
<form className="my-8" onSubmit={handleSubmit}>
27-
<div className="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2 mb-4">
28-
<LabelInputContainer>
29-
<Label htmlFor="firstname">First name</Label>
30-
<Input id="firstname" placeholder="Tyler" type="text" />
17+
return (
18+
<div className="relative w-3/4 mx-auto rounded-none md:rounded-2xl p-4 md:p-8 shadow-input bg-white dark:bg-black overflow-hidden">
19+
{/* Original content (now blurred) */}
20+
<div className="filter blur-[5px]">
21+
<h2 className="font-bold text-xl text-neutral-800 dark:text-neutral-200">
22+
Join Enterprise
23+
</h2>
24+
<p className="text-neutral-600 text-sm w-full mt-2 dark:text-neutral-300">
25+
Reach out to learn more about how Horizon Enterprise can help you
26+
</p>
27+
<form className="my-8" onSubmit={handleSubmit}>
28+
<div className="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2 mb-4">
29+
<LabelInputContainer>
30+
<Label htmlFor="firstname">First name</Label>
31+
<Input id="firstname" placeholder="Tyler" type="text" />
32+
</LabelInputContainer>
33+
<LabelInputContainer>
34+
<Label htmlFor="lastname">Last name</Label>
35+
<Input id="lastname" placeholder="Durden" type="text" />
36+
</LabelInputContainer>
37+
</div>
38+
<LabelInputContainer className="mb-4">
39+
<Label htmlFor="email">Work Email Address</Label>
40+
<Input id="email" placeholder="example@farbeyond.dev" type="email" />
3141
</LabelInputContainer>
32-
<LabelInputContainer>
33-
<Label htmlFor="lastname">Last name</Label>
34-
<Input id="lastname" placeholder="Durden" type="text" />
42+
<LabelInputContainer className="mb-4">
43+
<Label htmlFor="company">Company Name</Label>
44+
<Input id="company" placeholder="Far Beyond LLC" type="company" />
3545
</LabelInputContainer>
36-
</div>
37-
<LabelInputContainer className="mb-4">
38-
<Label htmlFor="email">Work Email Address</Label>
39-
<Input id="email" placeholder="example@farbeyond.dev" type="email" />
40-
</LabelInputContainer>
41-
<LabelInputContainer className="mb-4">
42-
<Label htmlFor="company">Company Name</Label>
43-
<Input id="company" placeholder="Far Beyond LLC" type="company" />
44-
</LabelInputContainer>
46+
<button
47+
className="bg-gradient-to-br relative group/btn from-black dark:from-zinc-900 dark:to-zinc-900 to-neutral-600 block dark:bg-zinc-800 w-full text-white rounded-md h-10 font-medium shadow-[0px_1px_0px_0px_#ffffff40_inset,0px_-1px_0px_0px_#ffffff40_inset] dark:shadow-[0px_1px_0px_0px_var(--zinc-800)_inset,0px_-1px_0px_0px_var(--zinc-800)_inset]"
48+
type="submit"
49+
>
50+
Request Consultation &rarr;
51+
<BottomGradient />
52+
</button>
53+
</form>
54+
</div>
4555

46-
<button
47-
className="bg-gradient-to-br relative group/btn from-black dark:from-zinc-900 dark:to-zinc-900 to-neutral-600 block dark:bg-zinc-800 w-full text-white rounded-md h-10 font-medium shadow-[0px_1px_0px_0px_#ffffff40_inset,0px_-1px_0px_0px_#ffffff40_inset] dark:shadow-[0px_1px_0px_0px_var(--zinc-800)_inset,0px_-1px_0px_0px_var(--zinc-800)_inset]"
48-
type="submit"
49-
>
50-
Request Consultation &rarr;
51-
<BottomGradient />
52-
</button>
53-
</form>
56+
{/* Semi-transparent overlay */}
57+
<div className="absolute inset-0 bg-white/50 dark:bg-black/50"></div>
58+
59+
{/* Coming Soon text */}
60+
<div className="absolute inset-0 flex items-center justify-center">
61+
<h1 className="text-4xl font-bold text-black dark:text-white z-10">Coming Soon</h1>
62+
</div>
5463
</div>
5564
);
5665
}

‎app/components/contact-metal.tsx‎

Lines changed: 43 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,60 @@
1-
"use client";
21
import React from "react";
32
import { Label } from "./ui/label";
43
import { Input } from "./ui/input";
54
import { cn } from "./lib/utils";
6-
import {
7-
IconBrandGithub,
8-
IconBrandGoogle,
9-
IconBrandOnlyfans,
10-
} from "@tabler/icons-react";
115

126
export function Contact() {
137
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
148
e.preventDefault();
159
console.log("Form submitted");
1610
};
17-
return (
18-
<div className="w-3/4 mx-auto rounded-none md:rounded-2xl p-4 md:p-8 shadow-input bg-white dark:bg-black">
19-
<h2 className="font-bold text-xl text-neutral-800 dark:text-neutral-200">
20-
Join Metal
21-
</h2>
22-
<p className="text-neutral-600 text-sm w-full mt-2 dark:text-neutral-300">
23-
Reach out to learn more about how Horizon Metal can help you
24-
</p>
2511

26-
<form className="my-8" onSubmit={handleSubmit}>
27-
<div className="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2 mb-4">
28-
<LabelInputContainer>
29-
<Label htmlFor="firstname">First name</Label>
30-
<Input id="firstname" placeholder="Tyler" type="text" />
12+
return (
13+
<div className="relative w-3/4 mx-auto rounded-none md:rounded-2xl p-4 md:p-8 shadow-input bg-white dark:bg-black overflow-hidden">
14+
{/* Original content (now blurred) */}
15+
<div className="filter blur-[5px]">
16+
<h2 className="font-bold text-xl text-neutral-800 dark:text-neutral-200">
17+
Join Metal
18+
</h2>
19+
<p className="text-neutral-600 text-sm w-full mt-2 dark:text-neutral-300">
20+
Reach out to learn more about how Horizon Metal can help you
21+
</p>
22+
<form className="my-8" onSubmit={handleSubmit}>
23+
<div className="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2 mb-4">
24+
<LabelInputContainer>
25+
<Label htmlFor="firstname">First name</Label>
26+
<Input id="firstname" placeholder="Tyler" type="text" />
27+
</LabelInputContainer>
28+
<LabelInputContainer>
29+
<Label htmlFor="lastname">Last name</Label>
30+
<Input id="lastname" placeholder="Durden" type="text" />
31+
</LabelInputContainer>
32+
</div>
33+
<LabelInputContainer className="mb-4">
34+
<Label htmlFor="email">Work Email Address</Label>
35+
<Input id="email" placeholder="example@farbeyond.dev" type="email" />
3136
</LabelInputContainer>
32-
<LabelInputContainer>
33-
<Label htmlFor="lastname">Last name</Label>
34-
<Input id="lastname" placeholder="Durden" type="text" />
37+
<LabelInputContainer className="mb-4">
38+
<Label htmlFor="company">Company Name</Label>
39+
<Input id="company" placeholder="Far Beyond LLC" type="company" />
3540
</LabelInputContainer>
36-
</div>
37-
<LabelInputContainer className="mb-4">
38-
<Label htmlFor="email">Work Email Address</Label>
39-
<Input id="email" placeholder="example@farbeyond.dev" type="email" />
40-
</LabelInputContainer>
41-
<LabelInputContainer className="mb-4">
42-
<Label htmlFor="company">Company Name</Label>
43-
<Input id="company" placeholder="Far Beyond LLC" type="company" />
44-
</LabelInputContainer>
41+
<button
42+
className="bg-gradient-to-br relative group/btn from-black dark:from-zinc-900 dark:to-zinc-900 to-neutral-600 block dark:bg-zinc-800 w-full text-white rounded-md h-10 font-medium shadow-[0px_1px_0px_0px_#ffffff40_inset,0px_-1px_0px_0px_#ffffff40_inset] dark:shadow-[0px_1px_0px_0px_var(--zinc-800)_inset,0px_-1px_0px_0px_var(--zinc-800)_inset]"
43+
type="submit"
44+
>
45+
Request Consultation &rarr;
46+
<BottomGradient />
47+
</button>
48+
</form>
49+
</div>
4550

46-
<button
47-
className="bg-gradient-to-br relative group/btn from-black dark:from-zinc-900 dark:to-zinc-900 to-neutral-600 block dark:bg-zinc-800 w-full text-white rounded-md h-10 font-medium shadow-[0px_1px_0px_0px_#ffffff40_inset,0px_-1px_0px_0px_#ffffff40_inset] dark:shadow-[0px_1px_0px_0px_var(--zinc-800)_inset,0px_-1px_0px_0px_var(--zinc-800)_inset]"
48-
type="submit"
49-
>
50-
Request Consultation &rarr;
51-
<BottomGradient />
52-
</button>
53-
</form>
51+
{/* Semi-transparent overlay */}
52+
<div className="absolute inset-0 bg-white/50 dark:bg-black/50"></div>
53+
54+
{/* Coming Soon text */}
55+
<div className="absolute inset-0 flex items-center justify-center">
56+
<h1 className="text-4xl font-bold text-black dark:text-white z-10">Coming Soon</h1>
57+
</div>
5458
</div>
5559
);
5660
}

‎app/components/ui/google-gemini-effect.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,16 @@ export const GoogleGeminiEffect = ({
2929
`Scroll this component and see the bottom SVG come to life wow this
3030
works!`}
3131
</p>
32-
<div className="w-full h-[500px] -top-60 md:-top-40 flex items-center justify-center bg-red-transparent absolute ">
33-
<button className="font-bold bg-white rounded-full md:px-4 md:py-2 px-2 py-1 md:mt-24 mt-8 z-30 md:text-base text-black text-xs w-fit mx-auto ">
34-
<a href="/enterprise">
35-
Go Enterprise
36-
</a>
37-
</button>
32+
<div className="w-full h-[600] -top-60 md:-top-40 flex items-center justify-center bg-red-transparent absolute ">
33+
{/* <button className="font-bold bg-white rounded-full md:px-4 md:py-2 px-2 py-1 md:mt-24 mt-8 z-30 md:text-base text-black text-xs w-fit mt-lg">
34+
<a href="/enterprise">
35+
Go Enterprise
36+
</a>
37+
</button> */}
3838
</div>
3939
<svg
4040
width="1440"
41-
height="500"
41+
height="700"
4242
viewBox="0 0 1440 500"
4343
xmlns="http://www.w3.org/2000/svg"
4444
className=" absolute -top-60 md:-top-40 w-full"

0 commit comments

Comments
 (0)