S.1.1.1
This commit is contained in:
Flatlogic Bot
parent
aca3281e53
commit
205eee3c6c
@ -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,205 @@
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import type { ReactElement } from 'react';
|
||||
import React, { ReactElement, useEffect, 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 { getPageTitle } from '../config';
|
||||
import { useAppSelector } from '../stores/hooks';
|
||||
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
||||
|
||||
type Product = {
|
||||
name: string;
|
||||
category: string;
|
||||
price: string;
|
||||
badge: string;
|
||||
palette: string[];
|
||||
imageClass: string;
|
||||
description: string;
|
||||
reviews: number;
|
||||
};
|
||||
|
||||
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('left');
|
||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
||||
type WorkflowStep = 'upload' | 'configure' | 'checkout';
|
||||
|
||||
const title = 'Made Dreams'
|
||||
const categories = [
|
||||
{ title: 'Adult Paint By Numbers', copy: 'Museum-inspired canvases with layered color maps for mindful evenings.', accent: 'from-stone-200 to-amber-100' },
|
||||
{ title: 'Anime Collection', copy: 'Cinematic linework, expressive palettes, and premium numbered detail.', accent: 'from-violet-200 to-pink-100' },
|
||||
{ title: 'Celebrity Collection', copy: 'Iconic portraits translated into statement art kits for grown-up spaces.', accent: 'from-zinc-200 to-neutral-100' },
|
||||
{ title: 'Family Memories Collection', copy: 'Turn weddings, vacations, and heirloom photos into keepsake canvases.', accent: 'from-rose-100 to-orange-100' },
|
||||
{ title: 'Custom Paint By Numbers Generator', copy: 'Upload your photo, preview the conversion, then choose your kit finish.', accent: 'from-emerald-100 to-cyan-100' },
|
||||
];
|
||||
|
||||
// Fetch Pexels image/video
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
const image = await getPexelsImage();
|
||||
const video = await getPexelsVideo();
|
||||
setIllustrationImage(image);
|
||||
setIllustrationVideo(video);
|
||||
}
|
||||
fetchData();
|
||||
}, []);
|
||||
const products: Product[] = [
|
||||
{
|
||||
name: 'Golden Hour Atelier Kit', category: 'Best seller', price: '$68', badge: 'Ships in 3 days',
|
||||
palette: ['#1f2937', '#b45309', '#f59e0b', '#fde68a', '#fff7ed'], imageClass: 'from-[#19130f] via-[#9a5b22] to-[#f6d287]',
|
||||
description: 'A warm architectural canvas with 28 rich acrylic colors and three fine-detail brushes.', reviews: 184,
|
||||
},
|
||||
{
|
||||
name: 'Moonlit Anime Portrait', category: 'New arrival', price: '$74', badge: 'Limited drop',
|
||||
palette: ['#111827', '#4c1d95', '#7c3aed', '#c4b5fd', '#f5f3ff'], imageClass: 'from-[#111827] via-[#6d28d9] to-[#ddd6fe]',
|
||||
description: 'A dramatic anime-inspired design with crisp numbered shapes and luminous violet hues.', reviews: 92,
|
||||
},
|
||||
{
|
||||
name: 'Forever Family Custom Kit', category: 'Personalized', price: '$89', badge: 'Upload-ready',
|
||||
palette: ['#292524', '#7f1d1d', '#fb7185', '#fed7aa', '#fff7ed'], imageClass: 'from-[#292524] via-[#be123c] to-[#fed7aa]',
|
||||
description: 'Our premium custom kit for treasured photos, hand-balanced for a painterly finish.', reviews: 267,
|
||||
},
|
||||
];
|
||||
|
||||
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 reviews = [
|
||||
'The kit felt like opening a luxury gift. My wedding photo turned into a beautiful weekend project.',
|
||||
'The numbered canvas was detailed but relaxing, and the paints were much richer than craft-store kits.',
|
||||
'I bought one for my mom and one for myself. The custom preview made ordering feel effortless.',
|
||||
];
|
||||
|
||||
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 faqs = [
|
||||
{ question: 'How does the custom generator work?', answer: 'Upload a clear photo, choose your canvas size and difficulty, and Made Dreams prepares a numbered canvas kit with acrylic paints and brushes.' },
|
||||
{ question: 'What makes these kits premium?', answer: 'Each kit is designed for adults with elevated palettes, gallery-style packaging, pre-numbered canvas, curated paints, and detail brushes.' },
|
||||
{ question: 'Can I use a family or pet photo?', answer: 'Yes. Family portraits, travel memories, pets, and celebration photos are ideal for the custom workflow.' },
|
||||
];
|
||||
|
||||
export default function MadeDreamsHome() {
|
||||
const [step, setStep] = useState<WorkflowStep>('upload');
|
||||
const [selectedProduct, setSelectedProduct] = useState(products[0]);
|
||||
const [uploadedFile, setUploadedFile] = useState<File | null>(null);
|
||||
const [previewUrl, setPreviewUrl] = useState('');
|
||||
const [size, setSize] = useState('16 × 20 in');
|
||||
const [difficulty, setDifficulty] = useState('Balanced');
|
||||
const [error, setError] = useState('');
|
||||
const [success, setSuccess] = useState('');
|
||||
const [cartCount, setCartCount] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!uploadedFile) {
|
||||
setPreviewUrl('');
|
||||
return undefined;
|
||||
}
|
||||
const objectUrl = URL.createObjectURL(uploadedFile);
|
||||
setPreviewUrl(objectUrl);
|
||||
return () => URL.revokeObjectURL(objectUrl);
|
||||
}, [uploadedFile]);
|
||||
|
||||
const kitPrice = useMemo(() => {
|
||||
const base = size === '12 × 16 in' ? 64 : size === '16 × 20 in' ? 89 : 124;
|
||||
const difficultyPremium = difficulty === 'Masterpiece' ? 18 : difficulty === 'Simple' ? 0 : 9;
|
||||
return base + difficultyPremium;
|
||||
}, [difficulty, size]);
|
||||
|
||||
const handleUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
setSuccess('');
|
||||
if (!file) return;
|
||||
if (!file.type.startsWith('image/')) {
|
||||
setError('Please upload a JPG, PNG, or WEBP image so we can create your custom canvas preview.');
|
||||
setUploadedFile(null);
|
||||
setStep('upload');
|
||||
return;
|
||||
}
|
||||
setError('');
|
||||
setUploadedFile(file);
|
||||
setStep('configure');
|
||||
};
|
||||
|
||||
const handleCheckout = () => {
|
||||
if (!uploadedFile) {
|
||||
setError('Upload a photo first to create your custom Made Dreams kit.');
|
||||
setStep('upload');
|
||||
return;
|
||||
}
|
||||
setError('');
|
||||
setSuccess(`Custom kit request added: ${uploadedFile.name} · ${size} · ${difficulty} difficulty · $${kitPrice}`);
|
||||
setCartCount((current) => current + 1);
|
||||
setStep('checkout');
|
||||
};
|
||||
|
||||
const addProductToCart = (product: Product) => {
|
||||
setSelectedProduct(product);
|
||||
setCartCount((current) => current + 1);
|
||||
setSuccess(`${product.name} added to your Made Dreams cart.`);
|
||||
};
|
||||
|
||||
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',
|
||||
}
|
||||
: {}
|
||||
}
|
||||
>
|
||||
<div className="min-h-screen bg-[#f8f1e8] text-[#201713] antialiased">
|
||||
<Head>
|
||||
<title>{getPageTitle('Starter Page')}</title>
|
||||
<title>{getPageTitle('Made Dreams Premium Paint By Numbers')}</title>
|
||||
<meta name="description" content="Made Dreams creates premium adult paint by numbers canvas kits and custom photo-to-canvas painting experiences." />
|
||||
</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 Made Dreams 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'
|
||||
/>
|
||||
|
||||
</BaseButtons>
|
||||
</CardBox>
|
||||
<header className="sticky top-0 z-30 border-b border-[#e5d5c4]/80 bg-[#f8f1e8]/90 backdrop-blur-xl">
|
||||
<div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4 lg:px-8">
|
||||
<Link href="/" className="group flex items-center gap-3" aria-label="Made Dreams home">
|
||||
<span className="grid h-10 w-10 place-items-center rounded-full bg-[#201713] text-lg font-semibold text-[#f8f1e8] shadow-lg shadow-[#201713]/20">MD</span>
|
||||
<span><span className="block font-serif text-xl tracking-[0.18em] text-[#201713]">Made Dreams</span><span className="text-xs uppercase tracking-[0.32em] text-[#8b6f57]">Painted personally</span></span>
|
||||
</Link>
|
||||
<nav className="hidden items-center gap-8 text-sm font-medium text-[#4e3b31] md:flex">
|
||||
<a className="transition hover:text-[#a0672a]" href="#collections">Collections</a>
|
||||
<a className="transition hover:text-[#a0672a]" href="#generator">Custom generator</a>
|
||||
<a className="transition hover:text-[#a0672a]" href="#products">Products</a>
|
||||
<a className="transition hover:text-[#a0672a]" href="#faq">FAQ</a>
|
||||
</nav>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="hidden rounded-full border border-[#dcc5ad] px-3 py-1 text-xs text-[#6d5546] sm:inline-flex">Cart {cartCount}</span>
|
||||
<Link href="/login" className="rounded-full bg-[#201713] px-4 py-2 text-sm font-semibold text-[#fffaf3] shadow-lg shadow-[#201713]/15 transition hover:-translate-y-0.5 hover:bg-[#3a2921] focus:outline-none focus:ring-2 focus:ring-[#c99455] focus:ring-offset-2 focus:ring-offset-[#f8f1e8]">Admin login</Link>
|
||||
</div>
|
||||
</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>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section className="relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(208,158,95,0.35),_transparent_34%),radial-gradient(circle_at_80%_20%,_rgba(75,43,32,0.18),_transparent_28%)]" />
|
||||
<div className="relative mx-auto grid max-w-7xl gap-12 px-5 py-16 lg:grid-cols-[1.02fr_0.98fr] lg:px-8 lg:py-24">
|
||||
<div className="flex flex-col justify-center">
|
||||
<p className="mb-5 inline-flex w-fit rounded-full border border-[#d5b98f] bg-white/45 px-4 py-2 text-xs font-semibold uppercase tracking-[0.35em] text-[#9a6332]">Premium custom canvas kits</p>
|
||||
<h1 className="max-w-3xl font-serif text-5xl leading-[0.95] tracking-[-0.04em] text-[#201713] md:text-7xl">Turn your most meaningful photos into frame-worthy paint by numbers art.</h1>
|
||||
<p className="mt-6 max-w-2xl text-lg leading-8 text-[#6d5546]">Made Dreams sells adult paint by numbers kits for collectors, gift-givers, and creative nights in. Upload a photo, preview the numbered artwork, choose your finish, and start painting something personal.</p>
|
||||
<div className="mt-9 flex flex-col gap-3 sm:flex-row">
|
||||
<a href="#generator" className="rounded-full bg-[#a0672a] px-7 py-4 text-center text-sm font-bold uppercase tracking-[0.18em] text-white shadow-2xl shadow-[#a0672a]/30 transition hover:-translate-y-1 hover:bg-[#8c5520] focus:outline-none focus:ring-2 focus:ring-[#201713] focus:ring-offset-2 focus:ring-offset-[#f8f1e8]">Create custom kit</a>
|
||||
<a href="#products" className="rounded-full border border-[#cbb49b] bg-white/40 px-7 py-4 text-center text-sm font-bold uppercase tracking-[0.18em] text-[#2b201a] transition hover:-translate-y-1 hover:bg-white focus:outline-none focus:ring-2 focus:ring-[#c99455] focus:ring-offset-2 focus:ring-offset-[#f8f1e8]">Shop best sellers</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative min-h-[520px]">
|
||||
<div className="absolute left-4 top-8 h-64 w-52 rounded-[2rem] bg-gradient-to-br from-[#201713] via-[#7b5030] to-[#f0c171] p-4 shadow-2xl shadow-[#3b261d]/30 md:left-10"><div className="h-full rounded-[1.5rem] border border-white/30 bg-white/10 p-4 backdrop-blur-sm"><div className="grid h-full grid-cols-4 gap-2 opacity-80">{Array.from({ length: 24 }).map((_, index) => <span key={index} className="rounded-full bg-white/20 text-center text-[10px] text-white">{index + 1}</span>)}</div></div></div>
|
||||
<div className="absolute right-0 top-0 h-[430px] w-[78%] rounded-[3rem] bg-[#fff8ef] p-5 shadow-2xl shadow-[#533621]/20 md:w-[68%]"><div className="relative h-full overflow-hidden rounded-[2.4rem] bg-gradient-to-br from-[#271b16] via-[#9d6737] to-[#f3d4a3]"><div className="absolute inset-0 bg-[linear-gradient(115deg,_transparent_0_18%,_rgba(255,255,255,0.28)_18%_19%,_transparent_19%_42%,_rgba(255,255,255,0.18)_42%_43%,_transparent_43%)]" /><div className="absolute bottom-5 left-5 right-5 rounded-3xl border border-white/30 bg-white/20 p-5 text-white backdrop-blur-md"><p className="text-xs uppercase tracking-[0.3em]">Custom preview</p><p className="mt-2 font-serif text-3xl">AI numbered canvas</p></div></div></div>
|
||||
<div className="absolute bottom-8 left-0 rounded-3xl border border-[#eadac9] bg-white/80 p-5 shadow-xl backdrop-blur"><p className="text-xs uppercase tracking-[0.28em] text-[#a0672a]">Kit includes</p><p className="mt-2 font-semibold">Numbered canvas · Acrylic paints · 3 brushes</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="collections" className="mx-auto max-w-7xl px-5 py-16 lg:px-8">
|
||||
<div className="mb-9 flex flex-col justify-between gap-4 md:flex-row md:items-end"><div><p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#a0672a]">Shop by mood</p><h2 className="mt-3 font-serif text-4xl tracking-[-0.03em] md:text-5xl">Product categories</h2></div><p className="max-w-xl text-[#6d5546]">A high-end art-store experience for adults who want beautiful kits, personal stories, and polished gifts.</p></div>
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5">{categories.map((category) => <a key={category.title} href={category.title.includes('Generator') ? '#generator' : '#products'} className="group rounded-[2rem] border border-[#e3d0bc] bg-white/55 p-4 shadow-sm transition hover:-translate-y-1 hover:bg-white hover:shadow-xl"><div className={`mb-5 h-36 rounded-[1.5rem] bg-gradient-to-br ${category.accent} transition group-hover:scale-[1.02]`} /><h3 className="font-serif text-2xl leading-7">{category.title}</h3><p className="mt-3 text-sm leading-6 text-[#725b4c]">{category.copy}</p></a>)}</div>
|
||||
</section>
|
||||
|
||||
<section id="generator" className="bg-[#201713] px-5 py-16 text-[#fff8ef] lg:px-8">
|
||||
<div className="mx-auto grid max-w-7xl gap-8 lg:grid-cols-[0.92fr_1.08fr]">
|
||||
<div><p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#d7a25d]">Custom Paint By Numbers Generator</p><h2 className="mt-4 font-serif text-4xl tracking-[-0.03em] md:text-6xl">Upload → AI pattern → choose your kit → checkout.</h2><p className="mt-6 max-w-xl text-lg leading-8 text-[#d9c9bc]">This first Made Dreams workflow gives customers a complete guided request: image upload, conversion preview, size and difficulty selection, and a checkout-ready confirmation.</p><div className="mt-8 grid gap-3 sm:grid-cols-3">{(['upload', 'configure', 'checkout'] as WorkflowStep[]).map((item, index) => <div key={item} className={`rounded-2xl border p-4 ${step === item ? 'border-[#d7a25d] bg-[#d7a25d]/15' : 'border-white/10 bg-white/5'}`}><span className="text-xs uppercase tracking-[0.25em] text-[#d7a25d]">Step {index + 1}</span><p className="mt-2 capitalize">{item}</p></div>)}</div></div>
|
||||
<div className="rounded-[2.2rem] border border-white/10 bg-[#2b201a] p-4 shadow-2xl shadow-black/25 md:p-6"><div className="grid gap-5 lg:grid-cols-[1fr_0.9fr]">
|
||||
<div className="rounded-[1.75rem] border border-white/10 bg-[#fff8ef] p-4 text-[#201713]"><div className="flex min-h-[350px] items-center justify-center overflow-hidden rounded-[1.4rem] bg-[#ead8c3]">{previewUrl ? <div className="relative h-full min-h-[350px] w-full"><img src={previewUrl} alt="Uploaded custom kit preview" className="absolute inset-0 h-full w-full object-cover" /><div className="absolute inset-0 bg-[linear-gradient(to_right,_rgba(32,23,19,0.22)_1px,_transparent_1px),linear-gradient(to_bottom,_rgba(32,23,19,0.22)_1px,_transparent_1px)] bg-[size:54px_54px] mix-blend-multiply" /><div className="absolute inset-0 bg-[#fff8ef]/20" /><div className="absolute bottom-4 left-4 right-4 rounded-2xl bg-[#201713]/80 p-4 text-[#fff8ef] backdrop-blur"><p className="text-xs uppercase tracking-[0.3em] text-[#d7a25d]">AI pattern preview</p><p className="mt-1 text-sm">Generated from {uploadedFile?.name}</p></div></div> : <div className="p-8 text-center"><div className="mx-auto mb-5 grid h-20 w-20 place-items-center rounded-full bg-[#201713] text-3xl text-[#fff8ef]">＋</div><p className="font-serif text-3xl">Upload your photo</p><p className="mt-3 text-sm leading-6 text-[#725b4c]">JPG, PNG, or WEBP images work best. Choose bright, high-resolution photos.</p></div>}</div>{error ? <p className="mt-4 rounded-2xl bg-red-50 px-4 py-3 text-sm text-red-700">{error}</p> : null}{success ? <p className="mt-4 rounded-2xl bg-emerald-50 px-4 py-3 text-sm text-emerald-800">{success}</p> : null}</div>
|
||||
<div className="space-y-4"><label className="block rounded-[1.5rem] border border-dashed border-[#d7a25d]/70 bg-white/5 p-5 transition hover:bg-white/10"><span className="text-sm font-semibold uppercase tracking-[0.22em] text-[#d7a25d]">1. Upload image</span><input className="mt-4 block w-full cursor-pointer rounded-xl border border-white/10 bg-[#201713] text-sm text-[#fff8ef] file:mr-4 file:cursor-pointer file:border-0 file:bg-[#d7a25d] file:px-4 file:py-3 file:font-semibold file:text-[#201713]" type="file" accept="image/*" onChange={handleUpload} /></label>
|
||||
<div className="rounded-[1.5rem] border border-white/10 bg-white/5 p-5"><p className="text-sm font-semibold uppercase tracking-[0.22em] text-[#d7a25d]">2. Select size</p><div className="mt-4 grid gap-2">{['12 × 16 in', '16 × 20 in', '24 × 36 in'].map((option) => <button key={option} type="button" onClick={() => setSize(option)} className={`rounded-2xl border px-4 py-3 text-left transition focus:outline-none focus:ring-2 focus:ring-[#d7a25d] ${size === option ? 'border-[#d7a25d] bg-[#d7a25d] text-[#201713]' : 'border-white/10 bg-[#201713] text-[#fff8ef] hover:border-white/30'}`}>{option}</button>)}</div></div>
|
||||
<div className="rounded-[1.5rem] border border-white/10 bg-white/5 p-5"><p className="text-sm font-semibold uppercase tracking-[0.22em] text-[#d7a25d]">3. Choose difficulty</p><select value={difficulty} onChange={(event) => setDifficulty(event.target.value)} className="mt-4 w-full rounded-2xl border border-white/10 bg-[#201713] px-4 py-3 text-[#fff8ef] focus:border-[#d7a25d] focus:outline-none focus:ring-2 focus:ring-[#d7a25d]"><option>Simple</option><option>Balanced</option><option>Masterpiece</option></select></div>
|
||||
<button type="button" onClick={handleCheckout} className="w-full rounded-full bg-[#d7a25d] px-6 py-4 text-sm font-black uppercase tracking-[0.2em] text-[#201713] shadow-xl shadow-[#d7a25d]/20 transition hover:-translate-y-1 hover:bg-[#e8b66f] focus:outline-none focus:ring-2 focus:ring-white">Continue to checkout · ${kitPrice}</button>
|
||||
</div>
|
||||
</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="products" className="mx-auto max-w-7xl px-5 py-16 lg:px-8">
|
||||
<div className="mb-9 flex flex-col justify-between gap-4 md:flex-row md:items-end"><div><p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#a0672a]">Best sellers & new arrivals</p><h2 className="mt-3 font-serif text-4xl tracking-[-0.03em] md:text-5xl">Premium product pages</h2></div><p className="max-w-xl text-[#6d5546]">Select a kit to view its gallery-style detail panel with canvas preview, paints, brushes, reviews, and add-to-cart.</p></div>
|
||||
<div className="grid gap-6 lg:grid-cols-[1fr_1.05fr]"><div className="grid gap-4 md:grid-cols-3 lg:grid-cols-1">{products.map((product) => <button type="button" key={product.name} onClick={() => setSelectedProduct(product)} className={`rounded-[2rem] border bg-white/60 p-4 text-left shadow-sm transition hover:-translate-y-1 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-[#a0672a] ${selectedProduct.name === product.name ? 'border-[#a0672a]' : 'border-[#e3d0bc]'}`}><div className={`mb-4 h-36 rounded-[1.5rem] bg-gradient-to-br ${product.imageClass}`} /><span className="text-xs font-bold uppercase tracking-[0.25em] text-[#a0672a]">{product.category}</span><h3 className="mt-2 font-serif text-2xl">{product.name}</h3><p className="mt-2 text-sm text-[#725b4c]">{product.description}</p><p className="mt-4 font-bold">{product.price}</p></button>)}</div>
|
||||
<article className="rounded-[2.4rem] border border-[#e3d0bc] bg-[#fffaf3] p-4 shadow-2xl shadow-[#5b3a22]/10 md:p-6"><div className="grid gap-5 md:grid-cols-[0.95fr_1.05fr]"><div><div className={`h-80 rounded-[2rem] bg-gradient-to-br ${selectedProduct.imageClass} p-5`}><div className="h-full rounded-[1.5rem] border border-white/40 bg-white/10 p-4"><div className="grid h-full grid-cols-5 gap-2">{Array.from({ length: 35 }).map((_, index) => <span key={index} className="rounded-lg border border-white/30 bg-white/20 text-center text-[10px] text-white">{index + 1}</span>)}</div></div></div><div className="mt-3 grid grid-cols-3 gap-3">{[1, 2, 3].map((item) => <div key={item} className={`h-20 rounded-2xl bg-gradient-to-br ${selectedProduct.imageClass} ${item === 1 ? 'opacity-100' : 'opacity-70'}`} />)}</div></div>
|
||||
<div className="flex flex-col"><span className="w-fit rounded-full bg-[#f0dfca] px-3 py-1 text-xs font-bold uppercase tracking-[0.22em] text-[#8c5520]">{selectedProduct.badge}</span><h3 className="mt-4 font-serif text-4xl tracking-[-0.03em]">{selectedProduct.name}</h3><p className="mt-4 leading-7 text-[#6d5546]">{selectedProduct.description}</p><div className="mt-6 rounded-3xl bg-[#f5eadc] p-5"><p className="text-sm font-semibold uppercase tracking-[0.25em] text-[#a0672a]">Paint colors</p><div className="mt-4 flex gap-2">{selectedProduct.palette.map((color) => <span key={color} className="h-10 w-10 rounded-full border border-white shadow" style={{ backgroundColor: color }} />)}</div></div><div className="mt-4 grid gap-3 sm:grid-cols-2"><div className="rounded-3xl border border-[#e3d0bc] p-4"><p className="font-semibold">Brush information</p><p className="mt-2 text-sm text-[#725b4c]">Includes wide, medium, and micro-detail nylon brushes.</p></div><div className="rounded-3xl border border-[#e3d0bc] p-4"><p className="font-semibold">Reviews</p><p className="mt-2 text-sm text-[#725b4c]">★★★★★ {selectedProduct.reviews} verified painters</p></div></div><button type="button" onClick={() => addProductToCart(selectedProduct)} className="mt-6 rounded-full bg-[#201713] px-6 py-4 text-sm font-bold uppercase tracking-[0.2em] text-white transition hover:-translate-y-1 hover:bg-[#3a2921] focus:outline-none focus:ring-2 focus:ring-[#a0672a] focus:ring-offset-2 focus:ring-offset-[#fffaf3]">Add to cart · {selectedProduct.price}</button></div>
|
||||
</div></article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-[#fffaf3] px-5 py-16 lg:px-8"><div className="mx-auto grid max-w-7xl gap-6 lg:grid-cols-[0.8fr_1.2fr]"><div><p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#a0672a]">Customer reviews</p><h2 className="mt-3 font-serif text-4xl tracking-[-0.03em] md:text-5xl">Made to become a memory.</h2></div><div className="grid gap-4 md:grid-cols-3">{reviews.map((review) => <blockquote key={review} className="rounded-[2rem] border border-[#ead8c3] bg-white p-6 shadow-sm"><p className="text-lg leading-8 text-[#4e3b31]">“{review}”</p><footer className="mt-5 text-sm font-semibold uppercase tracking-[0.22em] text-[#a0672a]">Verified customer</footer></blockquote>)}</div></div></section>
|
||||
|
||||
<section id="faq" className="mx-auto grid max-w-7xl gap-8 px-5 py-16 lg:grid-cols-[0.8fr_1.2fr] lg:px-8"><div><p className="text-sm font-semibold uppercase tracking-[0.35em] text-[#a0672a]">FAQ</p><h2 className="mt-3 font-serif text-4xl tracking-[-0.03em] md:text-5xl">Questions before you paint?</h2><div className="mt-8 rounded-[2rem] bg-[#201713] p-6 text-[#fff8ef]"><p className="font-serif text-3xl">Join the studio list</p><p className="mt-3 text-sm leading-6 text-[#d9c9bc]">Get new arrivals, custom kit tips, and launch offers.</p><form className="mt-5 flex flex-col gap-3 sm:flex-row" onSubmit={(event) => event.preventDefault()}><input className="min-w-0 flex-1 rounded-full border border-white/10 bg-white/10 px-5 py-3 text-white placeholder:text-[#d9c9bc] focus:border-[#d7a25d] focus:outline-none focus:ring-2 focus:ring-[#d7a25d]" placeholder="you@example.com" type="email" aria-label="Email address" /><button className="rounded-full bg-[#d7a25d] px-5 py-3 text-sm font-bold uppercase tracking-[0.18em] text-[#201713]" type="submit">Subscribe</button></form></div></div><div className="space-y-3">{faqs.map((faq) => <details key={faq.question} className="group rounded-[1.5rem] border border-[#e3d0bc] bg-white/65 p-5 open:bg-white"><summary className="cursor-pointer list-none font-serif text-2xl text-[#201713] marker:hidden">{faq.question}</summary><p className="mt-3 leading-7 text-[#6d5546]">{faq.answer}</p></details>)}</div></section>
|
||||
</main>
|
||||
|
||||
<footer className="bg-[#130f0d] px-5 py-14 text-[#fff8ef] lg:px-8"><div className="mx-auto grid max-w-7xl gap-10 md:grid-cols-[1.2fr_repeat(3,1fr)]"><div><p className="font-serif text-3xl tracking-[0.18em]">Made Dreams</p><p className="mt-4 max-w-sm leading-7 text-[#cdbbac]">A premium personalized art marketplace for adult paint by numbers canvas kits.</p></div><div><h4 className="text-sm font-bold uppercase tracking-[0.3em] text-[#d7a25d]">Shop</h4><ul className="mt-4 space-y-3 text-[#d9c9bc]"><li><a href="#collections" className="hover:text-white">Adult Paint By Numbers</a></li><li><a href="#collections" className="hover:text-white">Anime Collection</a></li><li><a href="#generator" className="hover:text-white">Custom Generator</a></li></ul></div><div><h4 className="text-sm font-bold uppercase tracking-[0.3em] text-[#d7a25d]">Customer Support</h4><ul className="mt-4 space-y-3 text-[#d9c9bc]"><li><a href="#faq" className="hover:text-white">FAQ</a></li><li><a href="#faq" className="hover:text-white">Returns Policy</a></li><li><a href="mailto:hello@madedreams.example" className="hover:text-white">Contact Us</a></li></ul></div><div><h4 className="text-sm font-bold uppercase tracking-[0.3em] text-[#d7a25d]">Policies</h4><ul className="mt-4 space-y-3 text-[#d9c9bc]"><li><Link href="/privacy-policy" className="hover:text-white">Privacy Policy</Link></li><li><a href="#faq" className="hover:text-white">Terms Of Service</a></li><li><Link href="/login" className="hover:text-white">Admin interface</Link></li></ul></div></div><div className="mx-auto mt-10 max-w-7xl border-t border-white/10 pt-6 text-sm text-[#a89587]">© 2026 Made Dreams. All rights reserved.</div></footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
||||
MadeDreamsHome.getLayout = function getLayout(page: ReactElement) {
|
||||
return <LayoutGuest>{page}</LayoutGuest>;
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user