diff --git a/frontend/src/components/NavBarItem.tsx b/frontend/src/components/NavBarItem.tsx index eb155e3..fb0fca2 100644 --- a/frontend/src/components/NavBarItem.tsx +++ b/frontend/src/components/NavBarItem.tsx @@ -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' diff --git a/frontend/src/layouts/Authenticated.tsx b/frontend/src/layouts/Authenticated.tsx index 1b9907d..73d8391 100644 --- a/frontend/src/layouts/Authenticated.tsx +++ b/frontend/src/layouts/Authenticated.tsx @@ -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' diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx index ff75f4a..01a0222 100644 --- a/frontend/src/pages/index.tsx +++ b/frontend/src/pages/index.tsx @@ -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) => ( -
-
- - Photo by {image?.photographer} on Pexels - -
-
- ); +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 ( -
- -
- - Video by {video.user.name} on Pexels - -
-
) - } - }; +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('upload'); + const [selectedProduct, setSelectedProduct] = useState(products[0]); + const [uploadedFile, setUploadedFile] = useState(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) => { + 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 ( -
+
- {getPageTitle('Starter Page')} + {getPageTitle('Made Dreams Premium Paint By Numbers')} + - -
- {contentType === 'image' && contentPosition !== 'background' - ? imageBlock(illustrationImage) - : null} - {contentType === 'video' && contentPosition !== 'background' - ? videoBlock(illustrationVideo) - : null} -
- - - -
-

This is a React.js/Node.js app generated by the Flatlogic Web App Generator

-

For guides and documentation please check - your local README.md and the Flatlogic documentation

-
- - - - - - +
+
+ + MD + Made DreamsPainted personally + + +
+ Cart {cartCount} + Admin login +
-
- -
-

© 2026 {title}. All rights reserved

- - Privacy Policy - -
+ +
+
+
+
+
+

Premium custom canvas kits

+

Turn your most meaningful photos into frame-worthy paint by numbers art.

+

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.

+ +
+
+
{Array.from({ length: 24 }).map((_, index) => {index + 1})}
+

Custom preview

AI numbered canvas

+

Kit includes

Numbered canvas · Acrylic paints · 3 brushes

+
+
+
+ +
+

Shop by mood

Product categories

A high-end art-store experience for adults who want beautiful kits, personal stories, and polished gifts.

+
{categories.map((category) => +
+ +
+
+

Custom Paint By Numbers Generator

Upload → AI pattern → choose your kit → checkout.

This first Made Dreams workflow gives customers a complete guided request: image upload, conversion preview, size and difficulty selection, and a checkout-ready confirmation.

{(['upload', 'configure', 'checkout'] as WorkflowStep[]).map((item, index) =>
Step {index + 1}

{item}

)}
+
+
{previewUrl ?
Uploaded custom kit preview

AI pattern preview

Generated from {uploadedFile?.name}

:
＋

Upload your photo

JPG, PNG, or WEBP images work best. Choose bright, high-resolution photos.

}
{error ?

{error}

: null}{success ?

{success}

: null}
+
+

2. Select size

{['12 × 16 in', '16 × 20 in', '24 × 36 in'].map((option) => )}
+

3. Choose difficulty

+ +
+
+
+
+ +
+

Best sellers & new arrivals

Premium product pages

Select a kit to view its gallery-style detail panel with canvas preview, paints, brushes, reviews, and add-to-cart.

+
{products.map((product) => )}
+
{Array.from({ length: 35 }).map((_, index) => {index + 1})}
{[1, 2, 3].map((item) =>
)}
+
{selectedProduct.badge}

{selectedProduct.name}

{selectedProduct.description}

Paint colors

{selectedProduct.palette.map((color) => )}

Brush information

Includes wide, medium, and micro-detail nylon brushes.

Reviews

★★★★★ {selectedProduct.reviews} verified painters

+
+
+
+ +

Customer reviews

Made to become a memory.

{reviews.map((review) =>

“{review}”

Verified customer
)}
+ +

FAQ

Questions before you paint?

Join the studio list

Get new arrivals, custom kit tips, and launch offers.

event.preventDefault()}>
{faqs.map((faq) =>
{faq.question}

{faq.answer}

)}
+
+ +
); } -Starter.getLayout = function getLayout(page: ReactElement) { +MadeDreamsHome.getLayout = function getLayout(page: ReactElement) { return {page}; }; -