157 lines
5.8 KiB
TypeScript
157 lines
5.8 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import type { ReactElement } from 'react';
|
|
import Head from 'next/head';
|
|
import Link from 'next/link';
|
|
import axios from 'axios';
|
|
import LayoutGuest from '../layouts/Guest';
|
|
import { getPageTitle } from '../config';
|
|
|
|
const JocketLanding = () => {
|
|
const [formData, setFormData] = useState({ visitor_name: '', visitor_email: '', message: '' });
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [submitted, setSubmitted] = useState(false);
|
|
const [showForm, setShowForm] = useState(false);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsSubmitting(true);
|
|
try {
|
|
await axios.post('/contact_submissions', { data: { ...formData, source: 'Stealth Landing' } });
|
|
setSubmitted(true);
|
|
} catch (err) {
|
|
console.error('Submission failed', err);
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#050505] text-gray-400 font-sans selection:bg-cyan-500/30 flex flex-col items-center justify-center overflow-hidden relative">
|
|
<Head>
|
|
<title>{getPageTitle('JOCKET')}</title>
|
|
</Head>
|
|
|
|
{/* Abstract Turbine Visual */}
|
|
<div className="absolute inset-0 flex items-center justify-center opacity-20 pointer-events-none">
|
|
<svg
|
|
className="w-[800px] h-[800px] animate-[spin_60s_linear_infinite]"
|
|
viewBox="0 0 100 100"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="0.1"
|
|
>
|
|
{Array.from({ length: 24 }).map((_, i) => (
|
|
<path
|
|
key={i}
|
|
d="M50 50 L50 10"
|
|
transform={`rotate(${i * 15} 50 50)`}
|
|
className="stroke-cyan-500/50"
|
|
/>
|
|
))}
|
|
<circle cx="50" cy="50" r="10" className="stroke-cyan-500" />
|
|
<circle cx="50" cy="50" r="40" className="stroke-cyan-500/20" />
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<main className="z-10 flex flex-col items-center text-center px-6">
|
|
<h1 className="text-6xl md:text-8xl font-light tracking-[0.3em] text-white mb-2">
|
|
JOCKET
|
|
</h1>
|
|
<p className="text-xs uppercase tracking-[0.5em] opacity-40 mb-12">
|
|
Propulsion Systems
|
|
</p>
|
|
|
|
{!showForm ? (
|
|
<button
|
|
onClick={() => setShowForm(true)}
|
|
className="text-xs uppercase tracking-[0.3em] hover:text-cyan-400 transition-colors duration-500 border-b border-white/10 pb-1"
|
|
>
|
|
Inquire
|
|
</button>
|
|
) : (
|
|
<div className="w-full max-w-xs animate-fade-in">
|
|
{submitted ? (
|
|
<p className="text-xs tracking-widest text-cyan-400 animate-pulse italic">
|
|
Awaiting clearance.
|
|
</p>
|
|
) : (
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<input
|
|
type="text"
|
|
placeholder="NAME"
|
|
required
|
|
className="w-full bg-transparent border-b border-white/10 py-2 text-[10px] tracking-widest focus:outline-none focus:border-cyan-500/50 transition-colors"
|
|
value={formData.visitor_name}
|
|
onChange={(e) => setFormData({ ...formData, visitor_name: e.target.value })}
|
|
/>
|
|
<input
|
|
type="email"
|
|
placeholder="EMAIL"
|
|
required
|
|
className="w-full bg-transparent border-b border-white/10 py-2 text-[10px] tracking-widest focus:outline-none focus:border-cyan-500/50 transition-colors"
|
|
value={formData.visitor_email}
|
|
onChange={(e) => setFormData({ ...formData, visitor_email: e.target.value })}
|
|
/>
|
|
<textarea
|
|
placeholder="MESSAGE (OPTIONAL)"
|
|
className="w-full bg-transparent border-b border-white/10 py-2 text-[10px] tracking-widest focus:outline-none focus:border-cyan-500/50 transition-colors h-16 resize-none"
|
|
value={formData.message}
|
|
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
|
|
/>
|
|
<div className="flex justify-between items-center">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowForm(false)}
|
|
className="text-[8px] tracking-widest opacity-40 hover:opacity-100 transition-opacity"
|
|
>
|
|
CLOSE
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="text-[10px] tracking-widest hover:text-cyan-400 transition-colors"
|
|
>
|
|
{isSubmitting ? 'SENDING...' : 'SUBMIT'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</div>
|
|
)}
|
|
</main>
|
|
|
|
{/* Footer */}
|
|
<footer className="absolute bottom-8 w-full flex justify-center space-x-12 z-10">
|
|
<a
|
|
href="mailto:careers@jocket.com"
|
|
className="text-[10px] tracking-[0.3em] uppercase opacity-30 hover:opacity-60 transition-opacity"
|
|
>
|
|
Careers
|
|
</a>
|
|
<Link
|
|
href="/login"
|
|
className="text-[10px] tracking-[0.3em] uppercase opacity-5 hover:opacity-20 transition-opacity"
|
|
>
|
|
Access
|
|
</Link>
|
|
</footer>
|
|
|
|
<style jsx global>{`
|
|
@keyframes fade-in {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-fade-in {
|
|
animation: fade-in 1s ease-out forwards;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
JocketLanding.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutGuest>{page}</LayoutGuest>;
|
|
};
|
|
|
|
export default JocketLanding; |