AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Create CorpContactUs.tsx

Browse source 
cgen-47a70152f9ba4ddf95f25688a84b7ed4
This commit is contained in:
Builder.io 2025-11-07 23:47:37 +00:00
parent 5ba8a2ef6a
commit 41712ca465
1 changed files with 213 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

331
client/pages/corp/CorpContactUs.tsx
View file

@ -1,7 +1,14 @@
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Mail, Phone, MapPin, Clock, ArrowRight } from "lucide-react"; import {
Mail,
Phone,
MapPin,
MessageSquare,
ArrowRight,
Clock,
} from "lucide-react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useState } from "react"; import { useState } from "react";
@ -10,12 +17,58 @@ export default function CorpContactUs() {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
name: "", name: "",
email: "", email: "",
company: "",
phone: "",
service: "",
message: "", message: "",
}); });
const contactMethods = [
{
icon: Mail,
title: "Email",
value: "enterprise@aethex.tech",
description: "Response within 24 hours",
},
{
icon: Phone,
title: "Phone",
value: "+1 (555) 123-4567",
description: "Available 9AM-6PM EST",
},
{
icon: MapPin,
title: "Office",
value: "San Francisco, CA",
description: "Schedule an in-person meeting",
},
{
icon: MessageSquare,
title: "Live Chat",
value: "Chat with us",
description: "Available during business hours",
},
];
const handleInputChange = (
e: React.ChangeEvent<
HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
>
) => {
const { name, value } = e.target;
setFormData((prev) => ({ ...prev, [name]: value }));
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log("Form submitted:", formData);
// Here you would typically send the form data to your backend
};
return ( return (
<Layout> <Layout>
<div className="relative min-h-screen bg-black text-white overflow-hidden"> <div className="relative min-h-screen bg-black text-white overflow-hidden">
{/* Background */}
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#3b82f6_0,rgba(0,0,0,0.45)_55%,rgba(0,0,0,0.9)_100%)]" /> <div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#3b82f6_0,rgba(0,0,0,0.45)_55%,rgba(0,0,0,0.9)_100%)]" />
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(transparent_0,transparent_calc(100%-1px),rgba(59,130,246,0.05)_calc(100%-1px))] bg-[length:100%_32px]" /> <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(transparent_0,transparent_calc(100%-1px),rgba(59,130,246,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
<div className="pointer-events-none absolute inset-0 opacity-[0.08] [background-image:linear-gradient(90deg,rgba(59,130,246,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(59,130,246,0.1)_1px,transparent_1px)] [background-size:50px_50px] animate-pulse" /> <div className="pointer-events-none absolute inset-0 opacity-[0.08] [background-image:linear-gradient(90deg,rgba(59,130,246,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(59,130,246,0.1)_1px,transparent_1px)] [background-size:50px_50px] animate-pulse" />
@ -23,6 +76,7 @@ export default function CorpContactUs() {
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-blue-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" /> <div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-blue-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
<main className="relative z-10"> <main className="relative z-10">
{/* Header */}
<section className="py-16"> <section className="py-16">
<div className="container mx-auto max-w-6xl px-4"> <div className="container mx-auto max-w-6xl px-4">
<Button <Button
@ -34,157 +88,198 @@ export default function CorpContactUs() {
</Button> </Button>
<h1 className="text-4xl lg:text-5xl font-black text-blue-300 mb-4"> <h1 className="text-4xl lg:text-5xl font-black text-blue-300 mb-4">
Get in Touch Get In Touch
</h1> </h1>
<p className="text-lg text-blue-100/80 max-w-3xl"> <p className="text-lg text-blue-100/80 max-w-3xl">
Have questions? We'd love to hear from you. Send us a message and we'll respond as soon as possible. Have questions about our services? Want to schedule a consultation? Contact our enterprise team and we'll get back to you quickly.
</p> </p>
</div> </div>
</section> </section>
{/* Contact Methods */}
<section className="py-16"> <section className="py-16">
<div className="container mx-auto max-w-6xl px-4"> <div className="container mx-auto max-w-6xl px-4">
<div className="grid md:grid-cols-2 gap-12"> <h2 className="text-3xl font-bold text-blue-300 mb-8">
{/* Contact Info */} Ways to Reach Us
<div className="space-y-8"> </h2>
<h2 className="text-2xl font-bold text-blue-300 mb-8"> <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
Contact Information {contactMethods.map((method, idx) => {
</h2> const Icon = method.icon;
return (
<div className="space-y-6"> <Card
<div className="flex gap-4"> key={idx}
<Mail className="h-6 w-6 text-blue-400 flex-shrink-0 mt-1" /> className="bg-blue-950/20 border-blue-400/30 hover:border-blue-400/60 transition-all"
<div> >
<p className="text-sm font-semibold text-blue-400 mb-1"> <CardContent className="pt-6 text-center">
Email <Icon className="h-8 w-8 text-blue-400 mx-auto mb-3" />
<h3 className="font-bold text-blue-300 mb-2">
{method.title}
</h3>
<p className="text-sm font-semibold text-blue-200 mb-1">
{method.value}
</p> </p>
<a <p className="text-xs text-blue-200/60">
href="mailto:info@aethex.biz" {method.description}
className="text-blue-300 hover:text-blue-200 transition-colors"
>
info@aethex.biz
</a>
</div>
</div>
<div className="flex gap-4">
<Phone className="h-6 w-6 text-blue-400 flex-shrink-0 mt-1" />
<div>
<p className="text-sm font-semibold text-blue-400 mb-1">
Phone
</p> </p>
<a </CardContent>
href="tel:+13465567100" </Card>
className="text-blue-300 hover:text-blue-200 transition-colors" );
> })}
(346) 556-7100 </div>
</a> </div>
</div> </section>
</div>
<div className="flex gap-4"> {/* Contact Form */}
<Clock className="h-6 w-6 text-blue-400 flex-shrink-0 mt-1" /> <section className="py-16 border-t border-blue-400/10 bg-black/40">
<div> <div className="container mx-auto max-w-2xl px-4">
<p className="text-sm font-semibold text-blue-400 mb-1"> <Card className="bg-blue-950/30 border-blue-400/40">
Response Time <CardHeader>
</p> <CardTitle className="text-blue-300">
<p className="text-blue-300"> Send us a message
Within 24 business hours </CardTitle>
</p> </CardHeader>
</div> <CardContent>
</div> <form onSubmit={handleSubmit} className="space-y-6">
</div> <div className="grid md:grid-cols-2 gap-6">
{/* Name */}
<div className="pt-8 border-t border-blue-400/10">
<h3 className="text-lg font-bold text-blue-300 mb-4">
Quick Links
</h3>
<div className="space-y-2">
<Button
variant="ghost"
className="w-full justify-start text-blue-300 hover:bg-blue-500/10"
onClick={() => navigate("/services")}
>
View Services →
</Button>
<Button
variant="ghost"
className="w-full justify-start text-blue-300 hover:bg-blue-500/10"
onClick={() => navigate("/corp/view-case-studies")}
>
Case Studies →
</Button>
<Button
variant="ghost"
className="w-full justify-start text-blue-300 hover:bg-blue-500/10"
onClick={() => navigate("/corp/schedule-consultation")}
>
Schedule Consultation →
</Button>
</div>
</div>
</div>
{/* Contact Form */}
<div>
<Card className="bg-blue-950/20 border-blue-400/30">
<CardContent className="pt-8 space-y-6">
<div> <div>
<label className="block text-sm font-semibold text-blue-300 mb-2"> <label className="block text-sm font-semibold text-blue-300 mb-2">
Name Full Name *
</label> </label>
<input <input
type="text" type="text"
name="name"
value={formData.name} value={formData.name}
onChange={(e) => onChange={handleInputChange}
setFormData({ ...formData, name: e.target.value }) required
} className="w-full bg-blue-950/50 border border-blue-400/30 rounded-lg px-4 py-2 text-white placeholder-blue-200/40 focus:outline-none focus:border-blue-400/60"
className="w-full px-4 py-2 bg-blue-950/40 border border-blue-400/30 rounded text-blue-300 placeholder-blue-400/50" placeholder="John Doe"
placeholder="Your name"
/> />
</div> </div>
{/* Email */}
<div> <div>
<label className="block text-sm font-semibold text-blue-300 mb-2"> <label className="block text-sm font-semibold text-blue-300 mb-2">
Email Email Address *
</label> </label>
<input <input
type="email" type="email"
name="email"
value={formData.email} value={formData.email}
onChange={(e) => onChange={handleInputChange}
setFormData({ ...formData, email: e.target.value }) required
} className="w-full bg-blue-950/50 border border-blue-400/30 rounded-lg px-4 py-2 text-white placeholder-blue-200/40 focus:outline-none focus:border-blue-400/60"
className="w-full px-4 py-2 bg-blue-950/40 border border-blue-400/30 rounded text-blue-300 placeholder-blue-400/50" placeholder="john@company.com"
placeholder="your@email.com"
/> />
</div> </div>
{/* Company */}
<div> <div>
<label className="block text-sm font-semibold text-blue-300 mb-2"> <label className="block text-sm font-semibold text-blue-300 mb-2">
Message Company *
</label> </label>
<textarea <input
value={formData.message} type="text"
onChange={(e) => name="company"
setFormData({ value={formData.company}
...formData, onChange={handleInputChange}
message: e.target.value, required
}) className="w-full bg-blue-950/50 border border-blue-400/30 rounded-lg px-4 py-2 text-white placeholder-blue-200/40 focus:outline-none focus:border-blue-400/60"
} placeholder="Your Company"
rows={5}
className="w-full px-4 py-2 bg-blue-950/40 border border-blue-400/30 rounded text-blue-300 placeholder-blue-400/50"
placeholder="Tell us about your project..."
/> />
</div> </div>
<Button className="w-full bg-blue-400 text-black hover:bg-blue-300 py-6"> {/* Phone */}
Send Message <div>
<ArrowRight className="ml-2 h-4 w-4" /> <label className="block text-sm font-semibold text-blue-300 mb-2">
</Button> Phone Number
</CardContent> </label>
</Card> <input
</div> type="tel"
</div> name="phone"
value={formData.phone}
onChange={handleInputChange}
className="w-full bg-blue-950/50 border border-blue-400/30 rounded-lg px-4 py-2 text-white placeholder-blue-200/40 focus:outline-none focus:border-blue-400/60"
placeholder="+1 (555) 123-4567"
/>
</div>
</div>
{/* Service Type */}
<div>
<label className="block text-sm font-semibold text-blue-300 mb-2">
Service of Interest
</label>
<select
name="service"
value={formData.service}
onChange={handleInputChange}
className="w-full bg-blue-950/50 border border-blue-400/30 rounded-lg px-4 py-2 text-white placeholder-blue-200/40 focus:outline-none focus:border-blue-400/60"
>
<option value="">Select a service...</option>
<option value="custom-dev">
Custom Software Development
</option>
<option value="consulting">
Technology Consulting
</option>
<option value="game-dev">
Game Development Services
</option>
<option value="enterprise">Enterprise Solutions</option>
</select>
</div>
{/* Message */}
<div>
<label className="block text-sm font-semibold text-blue-300 mb-2">
Message *
</label>
<textarea
name="message"
value={formData.message}
onChange={handleInputChange}
required
rows={5}
className="w-full bg-blue-950/50 border border-blue-400/30 rounded-lg px-4 py-2 text-white placeholder-blue-200/40 focus:outline-none focus:border-blue-400/60 resize-none"
placeholder="Tell us about your project or business challenge..."
/>
</div>
{/* Submit Button */}
<Button
type="submit"
className="w-full bg-blue-400 text-black hover:bg-blue-300 shadow-[0_0_30px_rgba(59,130,246,0.35)]"
>
Send Message
<ArrowRight className="ml-2 h-4 w-4" />
</Button>
</form>
</CardContent>
</Card>
</div>
</section>
{/* Response Time */}
<section className="py-16">
<div className="container mx-auto max-w-4xl px-4">
<Card className="bg-gradient-to-r from-blue-500/20 to-cyan-500/20 border-blue-400/40">
<CardContent className="pt-6">
<div className="flex items-start gap-4">
<Clock className="h-6 w-6 text-blue-400 flex-shrink-0 mt-1" />
<div>
<h3 className="font-bold text-blue-300 mb-2">
Expected Response Time
</h3>
<p className="text-blue-200/80">
We typically respond to inquiries within 24 business hours.
For urgent matters, please call our direct line during
business hours (9AM-6PM EST, Monday-Friday).
</p>
</div>
</div>
</CardContent>
</Card>
</div> </div>
</section> </section>
</main> </main>