Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
f0343610d2 |
@ -117,7 +117,7 @@ app.use('/api/media_assets', passport.authenticate('jwt', {session: false}), med
|
|||||||
|
|
||||||
app.use('/api/section_media_links', passport.authenticate('jwt', {session: false}), section_media_linksRoutes);
|
app.use('/api/section_media_links', passport.authenticate('jwt', {session: false}), section_media_linksRoutes);
|
||||||
|
|
||||||
app.use('/api/contact_submissions', passport.authenticate('jwt', {session: false}), contact_submissionsRoutes);
|
app.use('/api/contact_submissions', contact_submissionsRoutes);
|
||||||
|
|
||||||
app.use('/api/career_postings', passport.authenticate('jwt', {session: false}), career_postingsRoutes);
|
app.use('/api/career_postings', passport.authenticate('jwt', {session: false}), career_postingsRoutes);
|
||||||
|
|
||||||
|
|||||||
@ -1,166 +1,157 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
import React, { useEffect, useState } from 'react';
|
|
||||||
import type { ReactElement } from 'react';
|
import type { ReactElement } from 'react';
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import BaseButton from '../components/BaseButton';
|
import axios from 'axios';
|
||||||
import CardBox from '../components/CardBox';
|
|
||||||
import SectionFullScreen from '../components/SectionFullScreen';
|
|
||||||
import LayoutGuest from '../layouts/Guest';
|
import LayoutGuest from '../layouts/Guest';
|
||||||
import BaseDivider from '../components/BaseDivider';
|
|
||||||
import BaseButtons from '../components/BaseButtons';
|
|
||||||
import { getPageTitle } from '../config';
|
import { getPageTitle } from '../config';
|
||||||
import { useAppSelector } from '../stores/hooks';
|
|
||||||
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
|
||||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
export default function Starter() {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
const [illustrationImage, setIllustrationImage] = useState({
|
e.preventDefault();
|
||||||
src: undefined,
|
setIsSubmitting(true);
|
||||||
photographer: undefined,
|
try {
|
||||||
photographer_url: undefined,
|
await axios.post('/contact_submissions', { data: { ...formData, source: 'Stealth Landing' } });
|
||||||
})
|
setSubmitted(true);
|
||||||
const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
|
} catch (err) {
|
||||||
const [contentType, setContentType] = useState('image');
|
console.error('Submission failed', err);
|
||||||
const [contentPosition, setContentPosition] = useState('background');
|
} finally {
|
||||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
setIsSubmitting(false);
|
||||||
|
|
||||||
const title = 'Jocket Stealth Site'
|
|
||||||
|
|
||||||
// Fetch Pexels image/video
|
|
||||||
useEffect(() => {
|
|
||||||
async function fetchData() {
|
|
||||||
const image = await getPexelsImage();
|
|
||||||
const video = await getPexelsVideo();
|
|
||||||
setIllustrationImage(image);
|
|
||||||
setIllustrationVideo(video);
|
|
||||||
}
|
|
||||||
fetchData();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const imageBlock = (image) => (
|
|
||||||
<div
|
|
||||||
className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
|
|
||||||
style={{
|
|
||||||
backgroundImage: `${
|
|
||||||
image
|
|
||||||
? `url(${image?.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={image?.photographer_url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Photo by {image?.photographer} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const videoBlock = (video) => {
|
|
||||||
if (video?.video_files?.length > 0) {
|
|
||||||
return (
|
|
||||||
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
|
|
||||||
<video
|
|
||||||
className='absolute top-0 left-0 w-full h-full object-cover'
|
|
||||||
autoPlay
|
|
||||||
loop
|
|
||||||
muted
|
|
||||||
>
|
|
||||||
<source src={video?.video_files[0]?.link} type='video/mp4'/>
|
|
||||||
Your browser does not support the video tag.
|
|
||||||
</video>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={video?.user?.url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Video by {video.user.name} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>)
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<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">
|
||||||
style={
|
|
||||||
contentPosition === 'background'
|
|
||||||
? {
|
|
||||||
backgroundImage: `${
|
|
||||||
illustrationImage
|
|
||||||
? `url(${illustrationImage.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}
|
|
||||||
: {}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Head>
|
<Head>
|
||||||
<title>{getPageTitle('Starter Page')}</title>
|
<title>{getPageTitle('JOCKET')}</title>
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<SectionFullScreen bg='violet'>
|
{/* Abstract Turbine Visual */}
|
||||||
<div
|
<div className="absolute inset-0 flex items-center justify-center opacity-20 pointer-events-none">
|
||||||
className={`flex ${
|
<svg
|
||||||
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
className="w-[800px] h-[800px] animate-[spin_60s_linear_infinite]"
|
||||||
} min-h-screen w-full`}
|
viewBox="0 0 100 100"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="0.1"
|
||||||
>
|
>
|
||||||
{contentType === 'image' && contentPosition !== 'background'
|
{Array.from({ length: 24 }).map((_, i) => (
|
||||||
? imageBlock(illustrationImage)
|
<path
|
||||||
: null}
|
key={i}
|
||||||
{contentType === 'video' && contentPosition !== 'background'
|
d="M50 50 L50 10"
|
||||||
? videoBlock(illustrationVideo)
|
transform={`rotate(${i * 15} 50 50)`}
|
||||||
: null}
|
className="stroke-cyan-500/50"
|
||||||
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
|
||||||
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
|
|
||||||
<CardBoxComponentTitle title="Welcome to your Jocket Stealth Site app!"/>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
<p className='text-center '>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
|
|
||||||
<p className='text-center '>For guides and documentation please check
|
|
||||||
your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<BaseButtons>
|
|
||||||
<BaseButton
|
|
||||||
href='/login'
|
|
||||||
label='Login'
|
|
||||||
color='info'
|
|
||||||
className='w-full'
|
|
||||||
/>
|
/>
|
||||||
|
))}
|
||||||
|
<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>
|
||||||
|
|
||||||
</BaseButtons>
|
{/* Main Content */}
|
||||||
</CardBox>
|
<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>
|
</div>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</SectionFullScreen>
|
)}
|
||||||
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
</main>
|
||||||
<p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
|
|
||||||
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
{/* Footer */}
|
||||||
Privacy Policy
|
<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>
|
</Link>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
JocketLanding.getLayout = function getLayout(page: ReactElement) {
|
||||||
return <LayoutGuest>{page}</LayoutGuest>;
|
return <LayoutGuest>{page}</LayoutGuest>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export default JocketLanding;
|
||||||
Loading…
x
Reference in New Issue
Block a user