Edit: request access

Path: /request-access

Content / Source Code

'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import { submitAccessRequest } from './actions';
import Link from 'next/link';

export default function RequestAccessPage() {
  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
  const [errorMessage, setErrorMessage] = useState('');

return (
    <div style={{ 
      minHeight: '100vh', 
      display: 'flex', 
      alignItems: 'center', 
      justifyContent: 'center',
      padding: '4rem 1rem'
    }}>
      <motion.div 
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
        style={{ width: '100%', maxWidth: '500px', backgroundColor: 'var(--color-surface)', padding: '3rem', border: '1px solid var(--color-border)' }}
      >
        {status === 'success' ? (
          <div style={{ textAlign: 'center' }}>
            <h1 style={{ fontSize: '1.5rem', marginBottom: '1rem', fontFamily: 'var(--font-heading)', textTransform: 'uppercase' }}>Request Received</h1>
            <p style={{ color: 'var(--color-secondary)', lineHeight: 1.6, marginBottom: '2rem' }}>
              Your access request has been successfully submitted. Our team will review your details and you will be notified via email once approved.
            </p>
            <Link 
              href="/" 
              style={{ 
                display: 'inline-block',
                padding: '0.75rem 2rem', 
                backgroundColor: 'var(--color-primary)', 
                color: 'var(--color-background)', 
                textDecoration: 'none', 
                textTransform: 'uppercase', 
                fontSize: '0.85rem', 
                letterSpacing: '0.1em' 
              }}
            >
              Return Home
            </Link>
          </div>
        ) : (
          <>
            <h1 style={{ fontSize: '1.5rem', marginBottom: '0.5rem', fontFamily: 'var(--font-heading)', textTransform: 'uppercase' }}>Request Portal Access</h1>
            <p style={{ color: 'var(--color-secondary)', fontSize: '0.9rem', marginBottom: '2rem' }}>
              Please provide your details below. Access to the Route Bleue brand portal is strictly regulated and reviewed by our administrative team.
            </p>

{status === 'error' && (
              <div style={{ padding: '1rem', backgroundColor: 'rgba(255,0,0,0.1)', border: '1px solid var(--color-error)', color: 'var(--color-error)', marginBottom: '1.5rem', fontSize: '0.85rem' }}>
                {errorMessage}
              </div>
            )}

<div>
                <label style={{ display: 'block', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--color-secondary)', marginBottom: '0.5rem' }}>Relationship to Route Bleue</label>
                <select 
                  name="requestedRole" 
                  style={{ width: '100%', padding: '0.85rem', backgroundColor: 'transparent', border: '1px solid var(--color-border)', color: 'var(--color-primary)', outline: 'none', appearance: 'none', WebkitAppearance: 'none' }}
                >
                  <option value="Press" style={{ backgroundColor: 'var(--color-background)' }}>Press / Media</option>
                  <option value="Retail Partner" style={{ backgroundColor: 'var(--color-background)' }}>Retail Partner</option>
                  <option value="Distributor" style={{ backgroundColor: 'var(--color-background)' }}>Distributor</option>
                  <option value="Agency" style={{ backgroundColor: 'var(--color-background)' }}>Creative Agency</option>
                  <option value="Internal Team" style={{ backgroundColor: 'var(--color-background)' }}>Internal Team</option>
                </select>
              </div>

<button 
                type="submit" 
                disabled={status === 'loading'}
                style={{ 
                  padding: '1rem', 
                  backgroundColor: 'var(--color-primary)', 
                  color: 'var(--color-background)', 
                  border: 'none', 
                  textTransform: 'uppercase', 
                  fontSize: '0.85rem', 
                  letterSpacing: '0.1em',
                  cursor: status === 'loading' ? 'not-allowed' : 'pointer',
                  opacity: status === 'loading' ? 0.7 : 1,
                  marginTop: '1rem'
                }}
              >
                {status === 'loading' ? 'Submitting...' : 'Submit Request'}
              </button>
            </form>
          </>
        )}
      </motion.div>
    </div>
  );
}

Publish Status

Published to Production

Live Route/request-access

StorageMySQL PageContent

Editor ModeSource

Quick Media Upload

Upload Image, Video, or PDF