Legal Downtown
This commit is contained in:
Flatlogic Bot
parent
893337c745
commit
7c6943e05a
@ -1,6 +1,5 @@
|
||||
import React, {useEffect, useRef} from 'react'
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { useState } from 'react'
|
||||
import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
|
||||
import BaseDivider from './BaseDivider'
|
||||
import BaseIcon from './BaseIcon'
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React, { ReactNode, useEffect } from 'react'
|
||||
import { useState } from 'react'
|
||||
import React, { ReactNode, useEffect, useState } from 'react'
|
||||
import jwt from 'jsonwebtoken';
|
||||
import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
|
||||
import menuAside from '../menuAside'
|
||||
|
||||
@ -1,166 +1,209 @@
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import type { ReactElement } from 'react';
|
||||
import React, { ReactElement, useMemo, useState } from 'react';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import BaseButton from '../components/BaseButton';
|
||||
import CardBox from '../components/CardBox';
|
||||
import SectionFullScreen from '../components/SectionFullScreen';
|
||||
import LayoutGuest from '../layouts/Guest';
|
||||
import BaseDivider from '../components/BaseDivider';
|
||||
import BaseButtons from '../components/BaseButtons';
|
||||
import LayoutGuest from '../layouts/Guest';
|
||||
import { getPageTitle } from '../config';
|
||||
import { useAppSelector } from '../stores/hooks';
|
||||
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
||||
|
||||
type Product = {
|
||||
id: string;
|
||||
title: string;
|
||||
category: string;
|
||||
price: string;
|
||||
description: string;
|
||||
badge: string;
|
||||
};
|
||||
|
||||
type Inquiry = {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
firm: string;
|
||||
products: string[];
|
||||
message: string;
|
||||
};
|
||||
|
||||
const businessName = 'Texas Law Books Co.';
|
||||
const navItems = ['Catalog', 'Services', 'About', 'Contact'];
|
||||
const products: Product[] = [
|
||||
{
|
||||
id: 'civil',
|
||||
title: 'Texas Civil Practice Library',
|
||||
category: 'Practice Guides',
|
||||
price: '$189',
|
||||
description: 'Courthouse-ready procedure notes, pleadings checklists, and motion workflow references.',
|
||||
badge: 'Best seller',
|
||||
},
|
||||
{
|
||||
id: 'probate',
|
||||
title: 'Estate & Probate Deskbook',
|
||||
category: 'Law Books',
|
||||
price: '$145',
|
||||
description: 'Texas-specific estate planning, probate administration, forms, and desk reference guidance.',
|
||||
badge: 'New edition',
|
||||
},
|
||||
{
|
||||
id: 'business',
|
||||
title: 'Texas Business Law Forms',
|
||||
category: 'Forms & Products',
|
||||
price: '$119',
|
||||
description: 'Reusable entity formation, contract, compliance, and registered-office form templates.',
|
||||
badge: 'Digital + print',
|
||||
},
|
||||
];
|
||||
|
||||
const buildDownloadHtml = () => `<!doctype html>
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${businessName}</title>
|
||||
<style>:root{--ink:#0b0f0d;--paper:#fff;--mist:#f6fbf7;--green:#b7efc5;--strong:#57b66d;--line:#dce8df}*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:var(--paper)}a{color:inherit}.wrap{max-width:1180px;margin:auto;padding:0 24px}header{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-size:24px;font-weight:900;letter-spacing:-.04em}.brand span{background:var(--green);border-radius:999px;padding:2px 8px}nav{display:flex;gap:18px}nav a{text-decoration:none;font-weight:800}.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border-radius:999px;padding:0 20px;font-weight:900;text-decoration:none;border:1px solid var(--ink);background:var(--ink);color:white}.hero{background:radial-gradient(circle at 82% 20%,rgba(183,239,197,.85),transparent 30%),linear-gradient(135deg,#fff 0%,#f7fbf8 62%,#ecf8ef 100%);border-bottom:1px solid var(--line)}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:94px 24px}.eyebrow{display:inline-flex;border:1px solid var(--line);background:white;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:900}h1{font-size:clamp(42px,7vw,78px);line-height:.92;letter-spacing:-.07em;margin:20px 0}.lead{font-size:19px;line-height:1.7;max-width:650px;color:#36443b}.partner{margin-top:22px;font-weight:900}.partner a{color:#0d5f25;text-decoration-thickness:3px;text-underline-offset:5px}.hero-card{border:1px solid #151515;background:#101410;color:white;border-radius:34px;padding:30px;box-shadow:18px 18px 0 var(--green)}.row{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.16);padding:16px 0}.section{padding:76px 0}.section-title{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:28px}h2{font-size:clamp(32px,4vw,52px);letter-spacing:-.05em;margin:0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{border:1px solid var(--line);border-radius:28px;padding:24px;background:white;box-shadow:0 20px 60px rgba(15,23,18,.06)}.badge{display:inline-block;border-radius:999px;padding:7px 11px;background:var(--green);font-size:12px;font-weight:900}.price{font-size:30px;font-weight:950;margin:18px 0 8px}.contact{background:var(--ink);color:white;border-radius:38px;padding:38px;display:grid;grid-template-columns:1fr 1fr;gap:30px}input,textarea,select{width:100%;min-height:48px;border-radius:16px;border:1px solid #cfe0d4;padding:12px 14px;margin-bottom:12px;font:inherit}textarea{min-height:108px;resize:vertical}footer{padding:34px 0;background:#050505;color:white}.muted{color:#5d6c62}@media(max-width:820px){.hero-grid,.contact,.grid{grid-template-columns:1fr}nav{display:none}}</style></head>
|
||||
<body><header><div class="wrap nav"><div class="brand">Texas <span>Law</span> Books</div><nav><a href="#catalog">Catalog</a><a href="#services">Services</a><a href="#about">About</a><a href="#contact">Contact</a></nav><a class="button" href="#contact">Request info</a></div></header><main><section class="hero"><div class="wrap hero-grid"><div><div class="eyebrow">Texas-based legal bookseller</div><h1>Professional law books and legal products for serious Texas practice.</h1><p class="lead">Curated law books, desk references, forms, and practice tools for attorneys, firms, libraries, and students who need reliable Texas-focused legal materials.</p><p class="partner">Business partner/dealer: <a href="https://legaldowntown.com/">Law Source</a></p><p><a class="button" href="#catalog">Browse products</a></p></div><aside class="hero-card"><h2>Quick order desk</h2><div class="row"><span>Texas references</span><strong>Print + digital</strong></div><div class="row"><span>Firm purchasing</span><strong>PO ready</strong></div><div class="row"><span>Delivery area</span><strong>Texas</strong></div></aside></div></section><section class="section" id="catalog"><div class="wrap"><div class="section-title"><h2>Featured catalog</h2><p class="muted">Select editions for immediate quote requests.</p></div><div class="grid">${products.map((product) => `<article class="card"><span class="badge">${product.badge}</span><h3>${product.title}</h3><p class="muted">${product.category}</p><p>${product.description}</p><div class="price">${product.price}</div><a class="button" href="#contact">Request this title</a></article>`).join('')}</div></div></section><section class="section" id="services"><div class="wrap"><div class="grid"><div class="card"><h3>Law library sourcing</h3><p>Locate dependable Texas practice guides, statutes, supplements, and deskbooks.</p></div><div class="card"><h3>Bulk firm orders</h3><p>Request bundled pricing for firms, students, and library refreshes.</p></div><div class="card"><h3>Product recommendations</h3><p>Tell us your practice area and we will suggest a practical starting set.</p></div></div></div></section><section class="section" id="contact"><div class="wrap contact"><div><h2>Request product info</h2><p>Send a demo inquiry and we will prepare a catalog recommendation, quote, and availability note.</p></div><form onsubmit="event.preventDefault();document.getElementById('thanks').textContent='Thanks — your demo request is ready to send.';"><input required placeholder="Full name"><input type="email" required placeholder="Email address"><select><option>Texas Civil Practice Library</option><option>Estate & Probate Deskbook</option><option>Texas Business Law Forms</option></select><textarea placeholder="What are you looking for?"></textarea><button class="button" type="submit">Prepare request</button><p id="thanks"></p></form></div></section></main><footer><div class="wrap">© 2026 ${businessName}. Demo links use # except the required Law Source partner link in the hero.</div></footer></body></html>`;
|
||||
|
||||
export default function Starter() {
|
||||
const [illustrationImage, setIllustrationImage] = useState({
|
||||
src: undefined,
|
||||
photographer: undefined,
|
||||
photographer_url: undefined,
|
||||
})
|
||||
const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
|
||||
const [contentType, setContentType] = useState('image');
|
||||
const [contentPosition, setContentPosition] = useState('right');
|
||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
||||
const [selectedBookIds, setSelectedBookIds] = useState<string[]>([products[0].id]);
|
||||
const [form, setForm] = useState({ name: '', email: '', firm: '', message: '' });
|
||||
const [inquiries, setInquiries] = useState<Inquiry[]>([]);
|
||||
const [selectedInquiryId, setSelectedInquiryId] = useState<number | null>(null);
|
||||
const [formError, setFormError] = useState('');
|
||||
const [downloadReady, setDownloadReady] = useState(false);
|
||||
|
||||
const title = 'Texas Law Books Site'
|
||||
const selectedProducts = useMemo(
|
||||
() => products.filter((product) => selectedBookIds.includes(product.id)),
|
||||
[selectedBookIds],
|
||||
);
|
||||
const selectedInquiry = inquiries.find((inquiry) => inquiry.id === selectedInquiryId) ?? inquiries[0];
|
||||
|
||||
// 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 toggleProduct = (productId: string) => {
|
||||
setSelectedBookIds((current) =>
|
||||
current.includes(productId) ? current.filter((id) => id !== productId) : [...current, productId],
|
||||
);
|
||||
};
|
||||
|
||||
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>)
|
||||
}
|
||||
const submitInquiry = (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
setFormError('');
|
||||
if (!form.name.trim() || !form.email.trim()) {
|
||||
setFormError('Please add your name and email before preparing the request.');
|
||||
return;
|
||||
}
|
||||
if (selectedProducts.length === 0) {
|
||||
setFormError('Please select at least one law book or product.');
|
||||
return;
|
||||
}
|
||||
const newInquiry: Inquiry = {
|
||||
id: Date.now(),
|
||||
name: form.name.trim(),
|
||||
email: form.email.trim(),
|
||||
firm: form.firm.trim() || 'Independent buyer',
|
||||
message: form.message.trim() || 'Please send availability and purchasing details.',
|
||||
products: selectedProducts.map((product) => product.title),
|
||||
};
|
||||
setInquiries((current) => [newInquiry, ...current]);
|
||||
setSelectedInquiryId(newInquiry.id);
|
||||
setForm({ name: '', email: '', firm: '', message: '' });
|
||||
};
|
||||
|
||||
const downloadHtml = () => {
|
||||
const blob = new Blob([buildDownloadHtml()], { type: 'text/html;charset=utf-8' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const anchor = document.createElement('a');
|
||||
anchor.href = url;
|
||||
anchor.download = 'texas-law-books-partner-website.html';
|
||||
document.body.appendChild(anchor);
|
||||
anchor.click();
|
||||
anchor.remove();
|
||||
URL.revokeObjectURL(url);
|
||||
setDownloadReady(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
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>
|
||||
<title>{getPageTitle('Starter Page')}</title>
|
||||
<title>{getPageTitle('Texas Law Books Partner Website')}</title>
|
||||
<meta name='description' content='Professional Texas law books website with a downloadable HTML file.' />
|
||||
</Head>
|
||||
|
||||
<SectionFullScreen bg='violet'>
|
||||
<div
|
||||
className={`flex ${
|
||||
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
||||
} min-h-screen w-full`}
|
||||
>
|
||||
{contentType === 'image' && contentPosition !== 'background'
|
||||
? imageBlock(illustrationImage)
|
||||
: null}
|
||||
{contentType === 'video' && contentPosition !== 'background'
|
||||
? videoBlock(illustrationVideo)
|
||||
: null}
|
||||
<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 Texas Law Books 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 className='min-h-screen bg-white text-[#0b0f0d]'>
|
||||
<header className='sticky top-0 z-30 border-b border-[#dce8df] bg-white/90 backdrop-blur-xl'>
|
||||
<div className='mx-auto flex max-w-7xl items-center justify-between gap-6 px-5 py-4 sm:px-8'>
|
||||
<a href='#' className='text-xl font-black tracking-[-0.04em] text-black sm:text-2xl'>
|
||||
Texas <span className='rounded-full bg-[#b7efc5] px-2'>Law</span> Books
|
||||
</a>
|
||||
<nav aria-label='Demo navigation' className='hidden items-center gap-6 text-sm font-bold text-[#27312b] md:flex'>
|
||||
{navItems.map((item) => (
|
||||
<a key={item} href='#' className='transition hover:text-[#247236] focus:outline-none focus:ring-2 focus:ring-[#57b66d]'>
|
||||
{item}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
<div className='flex items-center gap-3'>
|
||||
<Link href='/login' className='hidden text-sm font-extrabold text-black underline-offset-4 hover:underline sm:inline'>
|
||||
Admin login
|
||||
</Link>
|
||||
<button type='button' onClick={downloadHtml} className='rounded-full border border-black bg-black px-4 py-2 text-sm font-extrabold text-white transition hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-[#57b66d]'>
|
||||
Download HTML
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<BaseButtons>
|
||||
<BaseButton
|
||||
href='/login'
|
||||
label='Login'
|
||||
color='info'
|
||||
className='w-full'
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
</BaseButtons>
|
||||
</CardBox>
|
||||
</div>
|
||||
</div>
|
||||
</SectionFullScreen>
|
||||
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
||||
<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/'>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</div>
|
||||
<main>
|
||||
<section className='overflow-hidden border-b border-[#dce8df] bg-[radial-gradient(circle_at_82%_20%,rgba(183,239,197,0.85),transparent_30%),linear-gradient(135deg,#ffffff_0%,#f7fbf8_62%,#ecf8ef_100%)]'>
|
||||
<div className='mx-auto grid min-h-[680px] max-w-7xl items-center gap-12 px-5 py-20 sm:px-8 lg:grid-cols-[1.05fr_0.95fr] lg:py-28'>
|
||||
<div>
|
||||
<div className='inline-flex rounded-full border border-[#dce8df] bg-white px-4 py-2 text-xs font-black uppercase tracking-[0.24em] text-[#1a2c20] shadow-sm'>Texas-based legal bookseller</div>
|
||||
<h1 className='mt-6 max-w-4xl text-5xl font-black leading-[0.92] tracking-[-0.07em] text-black sm:text-7xl lg:text-8xl'>Law books and legal products built for Texas practice.</h1>
|
||||
<p className='mt-6 max-w-2xl text-lg leading-8 text-[#36443b] sm:text-xl'>A professional black, white, and light-green website for a law-focused retailer selling practice guides, deskbooks, forms, and firm-ready legal products.</p>
|
||||
<p className='mt-5 max-w-2xl text-base font-bold text-[#1a2c20]'>
|
||||
Business partner/dealer:{' '}
|
||||
<a href='https://legaldowntown.com/' className='text-[#0d5f25] underline decoration-[#57b66d] decoration-4 underline-offset-4 transition hover:text-black focus:outline-none focus:ring-2 focus:ring-[#57b66d]'>Law Source</a>
|
||||
</p>
|
||||
<BaseButtons type='justify-start' className='mt-8'>
|
||||
<BaseButton label='Build quote request' asAnchor onClick={() => document.getElementById('request')?.scrollIntoView({ behavior: 'smooth' })} className='border-black bg-black px-6 py-3 text-white hover:bg-[#172018]' />
|
||||
<BaseButton label='Download HTML file' asAnchor onClick={downloadHtml} className='border-black bg-white px-6 py-3 text-black hover:bg-[#b7efc5]' />
|
||||
</BaseButtons>
|
||||
<div className='mt-6 flex flex-wrap gap-3 text-sm font-bold text-[#405246]'>
|
||||
<span className='rounded-full border border-[#dce8df] bg-white px-4 py-2'>No extra external links</span>
|
||||
<span className='rounded-full border border-[#dce8df] bg-white px-4 py-2'>Single-file export</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside className='rounded-[2rem] border border-black bg-[#101410] p-6 text-white shadow-[18px_18px_0_#b7efc5] sm:p-8'>
|
||||
<div className='mb-6 flex items-center justify-between gap-4'><div><p className='text-sm font-bold uppercase tracking-[0.22em] text-[#b7efc5]'>Website preview</p><h2 className='mt-2 text-3xl font-black tracking-[-0.05em]'>Quick order desk</h2></div><div className='rounded-2xl bg-white px-4 py-3 text-right text-black'><p className='text-xs font-black uppercase tracking-widest text-[#477052]'>Ready</p><p className='text-2xl font-black'>{products.length}</p></div></div>
|
||||
<div className='space-y-4'>{products.map((product) => (<div key={product.id} className='rounded-3xl border border-white/15 bg-white/5 p-4'><div className='flex items-start justify-between gap-4'><div><p className='text-xs font-black uppercase tracking-[0.2em] text-[#b7efc5]'>{product.category}</p><h3 className='mt-2 text-xl font-black'>{product.title}</h3></div><span className='rounded-full bg-[#b7efc5] px-3 py-1 text-sm font-black text-black'>{product.price}</span></div></div>))}</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<section className='bg-white py-20' id='catalog'>
|
||||
<div className='mx-auto max-w-7xl px-5 sm:px-8'>
|
||||
<div className='mb-10 flex flex-col justify-between gap-4 md:flex-row md:items-end'><div><p className='text-sm font-black uppercase tracking-[0.24em] text-[#247236]'>Featured catalog</p><h2 className='mt-3 text-4xl font-black tracking-[-0.05em] text-black sm:text-5xl'>Select products for the quote flow</h2></div><p className='max-w-xl text-base leading-7 text-[#5d6c62]'>Choose products, prepare an inquiry, confirm the request, and download the static HTML file.</p></div>
|
||||
<div className='grid gap-5 md:grid-cols-3'>{products.map((product) => { const selected = selectedBookIds.includes(product.id); return (<article key={product.id} className={`rounded-[1.75rem] border p-6 shadow-[0_20px_60px_rgba(15,23,18,0.06)] transition ${selected ? 'border-black bg-[#f6fbf7] ring-4 ring-[#b7efc5]' : 'border-[#dce8df] bg-white hover:-translate-y-1'}`}><div className='flex items-start justify-between gap-4'><span className='rounded-full bg-[#b7efc5] px-3 py-1 text-xs font-black text-black'>{product.badge}</span><span className='text-2xl font-black text-black'>{product.price}</span></div><h3 className='mt-6 text-2xl font-black tracking-[-0.04em] text-black'>{product.title}</h3><p className='mt-1 text-sm font-bold uppercase tracking-[0.16em] text-[#57b66d]'>{product.category}</p><p className='mt-4 min-h-[96px] text-base leading-7 text-[#46564b]'>{product.description}</p><button type='button' onClick={() => toggleProduct(product.id)} className={`mt-6 w-full rounded-full border px-4 py-3 text-sm font-black transition focus:outline-none focus:ring-2 focus:ring-[#57b66d] ${selected ? 'border-black bg-black text-white hover:bg-[#172018]' : 'border-black bg-white text-black hover:bg-[#b7efc5]'}`}>{selected ? 'Selected for quote' : 'Add to request'}</button></article>); })}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className='bg-[#f6fbf7] py-20' id='request'>
|
||||
<div className='mx-auto grid max-w-7xl gap-6 px-5 sm:px-8 lg:grid-cols-[0.95fr_1.05fr]'>
|
||||
<div className='rounded-[2rem] bg-black p-7 text-white sm:p-9'><p className='text-sm font-black uppercase tracking-[0.24em] text-[#b7efc5]'>End-to-end workflow</p><h2 className='mt-3 text-4xl font-black tracking-[-0.05em] sm:text-5xl'>Prepare a customer request</h2><p className='mt-4 text-base leading-7 text-white/75'>The form validates required fields, creates a local confirmation, and shows a visible inquiry list before backend persistence is added.</p><div className='mt-8 rounded-3xl border border-white/15 bg-white/5 p-5'><h3 className='text-lg font-black'>Selected products</h3>{selectedProducts.length > 0 ? <ul className='mt-4 space-y-3'>{selectedProducts.map((product) => (<li key={product.id} className='flex items-center justify-between gap-4 rounded-2xl bg-white/10 px-4 py-3'><span>{product.title}</span><span className='font-black text-[#b7efc5]'>{product.price}</span></li>))}</ul> : <p className='mt-4 rounded-2xl border border-dashed border-white/30 p-4 text-sm text-white/70'>Empty state: choose at least one product from the catalog.</p>}</div></div>
|
||||
<div className='rounded-[2rem] border border-[#dce8df] bg-white p-6 shadow-[0_20px_70px_rgba(15,23,18,0.08)] sm:p-8'>
|
||||
<form onSubmit={submitInquiry} className='grid gap-4'>
|
||||
<div className='grid gap-4 md:grid-cols-2'><label className='text-sm font-black text-black'>Full name<input value={form.name} onChange={(event) => setForm((current) => ({ ...current, name: event.target.value }))} className='mt-2 h-12 w-full rounded-2xl border border-[#cfe0d4] px-4 text-base font-medium outline-none transition focus:border-black focus:ring-4 focus:ring-[#b7efc5]' placeholder='Jordan Ellis' /></label><label className='text-sm font-black text-black'>Email<input type='email' value={form.email} onChange={(event) => setForm((current) => ({ ...current, email: event.target.value }))} className='mt-2 h-12 w-full rounded-2xl border border-[#cfe0d4] px-4 text-base font-medium outline-none transition focus:border-black focus:ring-4 focus:ring-[#b7efc5]' placeholder='buyer@example.com' /></label></div>
|
||||
<label className='text-sm font-black text-black'>Firm or organization<input value={form.firm} onChange={(event) => setForm((current) => ({ ...current, firm: event.target.value }))} className='mt-2 h-12 w-full rounded-2xl border border-[#cfe0d4] px-4 text-base font-medium outline-none transition focus:border-black focus:ring-4 focus:ring-[#b7efc5]' placeholder='Lone Star Legal Group' /></label>
|
||||
<label className='text-sm font-black text-black'>Message<textarea value={form.message} onChange={(event) => setForm((current) => ({ ...current, message: event.target.value }))} className='mt-2 min-h-[118px] w-full rounded-2xl border border-[#cfe0d4] px-4 py-3 text-base font-medium outline-none transition focus:border-black focus:ring-4 focus:ring-[#b7efc5]' placeholder='Tell us the practice area, quantity, or delivery needs.' /></label>
|
||||
{formError ? <div className='rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm font-bold text-red-700'>{formError}</div> : null}
|
||||
<button type='submit' className='rounded-full border border-black bg-black px-6 py-3 text-base font-black text-white transition hover:-translate-y-0.5 hover:bg-[#172018] focus:outline-none focus:ring-2 focus:ring-[#57b66d]'>Prepare request confirmation</button>
|
||||
</form>
|
||||
<div className='mt-8 border-t border-[#dce8df] pt-6'><div className='flex items-center justify-between gap-4'><h3 className='text-xl font-black tracking-[-0.03em]'>Inquiry confirmations</h3><span className='rounded-full bg-[#b7efc5] px-3 py-1 text-xs font-black text-black'>{inquiries.length} prepared</span></div>{inquiries.length === 0 ? <div className='mt-4 rounded-3xl border border-dashed border-[#cfe0d4] bg-[#f6fbf7] p-5 text-[#405246]'>No requests yet. Submit the form to create the first confirmation.</div> : <div className='mt-4 grid gap-4 lg:grid-cols-[0.9fr_1.1fr]'><div className='space-y-2'>{inquiries.map((inquiry) => (<button key={inquiry.id} type='button' onClick={() => setSelectedInquiryId(inquiry.id)} className={`w-full rounded-2xl border px-4 py-3 text-left transition focus:outline-none focus:ring-2 focus:ring-[#57b66d] ${selectedInquiry?.id === inquiry.id ? 'border-black bg-black text-white' : 'border-[#dce8df] bg-white hover:bg-[#f6fbf7]'}`}><span className='block font-black'>{inquiry.name}</span><span className='text-sm opacity-75'>{inquiry.products.length} selected products</span></button>))}</div>{selectedInquiry ? <div className='rounded-3xl bg-[#f6fbf7] p-5'><p className='text-xs font-black uppercase tracking-[0.2em] text-[#247236]'>Confirmation detail</p><h4 className='mt-2 text-xl font-black'>{selectedInquiry.name}</h4><p className='text-sm text-[#5d6c62]'>{selectedInquiry.firm} · {selectedInquiry.email}</p><ul className='mt-4 list-inside list-disc space-y-1 text-sm font-bold text-[#27312b]'>{selectedInquiry.products.map((product) => <li key={product}>{product}</li>)}</ul><p className='mt-4 text-sm leading-6 text-[#405246]'>{selectedInquiry.message}</p></div> : null}</div>}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className='bg-white py-20'><div className='mx-auto max-w-7xl px-5 sm:px-8'><div className='rounded-[2rem] border border-black bg-[#101410] p-8 text-white shadow-[14px_14px_0_#b7efc5] md:flex md:items-center md:justify-between md:gap-8'><div><p className='text-sm font-black uppercase tracking-[0.24em] text-[#b7efc5]'>Download deliverable</p><h2 className='mt-3 text-4xl font-black tracking-[-0.05em]'>Single-page HTML file is ready.</h2><p className='mt-4 max-w-2xl text-white/75'>The downloaded file contains embedded CSS and JavaScript, demo # navigation links, and only one external URL: Law Source in the hero.</p>{downloadReady ? <p className='mt-4 font-bold text-[#b7efc5]'>Download started successfully.</p> : null}</div><button type='button' onClick={downloadHtml} className='mt-6 rounded-full border border-white bg-white px-6 py-3 text-base font-black text-black transition hover:-translate-y-0.5 hover:bg-[#b7efc5] focus:outline-none focus:ring-2 focus:ring-[#57b66d] md:mt-0'>Download website HTML</button></div></div></section>
|
||||
</main>
|
||||
|
||||
<footer className='bg-black px-5 py-8 text-white sm:px-8'><div className='mx-auto flex max-w-7xl flex-col gap-4 text-sm md:flex-row md:items-center md:justify-between'><p>© 2026 {businessName}. Professional legal product website demo.</p><div className='flex flex-wrap gap-4 font-bold'><a href='#' className='hover:text-[#b7efc5]'>Privacy</a><a href='#' className='hover:text-[#b7efc5]'>Terms</a><Link href='/login' className='hover:text-[#b7efc5]'>Admin interface</Link></div></div></footer>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
||||
return <LayoutGuest>{page}</LayoutGuest>;
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user