🧪

Flavor Society Homepage — Super Staging

🧪

Super staging page. Not mapped to the public homepage. Content remains editable in Notion; Super CSS and JavaScript will progressively enhance the marked blocks.

FS_SECTION_HERO

FS_ASSET_WORDMARK

Flavor Society wordmark

FS_ASSET_FOOD_SHAPES

Flavor Society food shapes layer

FS_ASSET_WOK

Flavor Society wok layer

FS_HERO_WORDS

COME
BE
ENJOY
LIVE
PEACE

TOGETHER.

Global flavors. Shared tables. Real connection. Come curious and leave with something worth remembering.

Find us next

See what’s cooking

FS_SECTION_FOOD

The World at Your Table

FS_FOOD_VISUALS

Visual asset area — final food imagery will live here as Notion image blocks.

FOOD WORTH GATHERING AROUND

The world is bigger than the same ten dishes.

We rotate through dishes, regions, and traditions—sharing food with a story and giving curiosity a place at the table.

Explore the Kitchen

FS_SECTION_PURPOSE

The Purpose

The world doesn’t need another feed. It needs another table.

Come hungry. Leave connected.

FS_PURPOSE_ITEMS

Explore

Discover dishes beyond the familiar ten.

Gather

Meals become invitations to share a table.

Connect

Food opens the door to real conversation.

Belong

Shared tables can grow into community.

Read Who We Are

FS_IMPLEMENTATION_NOTES

‣

Architecture audit and migration map

Core rule

Notion owns content, ordering, links, and uploaded image assets. Super CSS owns layout and appearance. Super JavaScript finds the marker blocks, adds classes and wrappers, and initializes interaction without recreating the page copy.

Existing landing-page audit

Preserve the Kitchen, Who We Are, Blog, Contact, Instagram, and web-database destinations from the current landing page.
Replace the current callout-driven landing layout only on the staging page.
Keep the current live Landing Page unchanged until the staging route passes review.

Block-by-block migration

Prototype element	Notion source	Super enhancement
Wordmark	`FS_ASSET_WORDMARK` • image block	Position as the stable top logo plane
Food pieces	`FS_ASSET_FOOD_SHAPES` • image block	Align over the wok and animate upward during the toss
Wok	`FS_ASSET_WOK` • image block	Align beneath the shapes and apply the diagonal rock/toss transform
Gold disc	No content asset required	Decorative CSS background behind the two logo layers
Rotating hero word	Bulleted list after `FS_HERO_WORDS`	Read list items and rotate the visible word
Together	Notion heading	Keep visible and static
Hero copy and CTAs	Notion paragraphs and links	Typography, spacing, and reveal behavior only
Food chapter	Blocks after `FS_SECTION_FOOD`	Sticky/scroll-story layout and visual timing
Food visuals	Image blocks after `FS_FOOD_VISUALS`	Arrange uploaded images into the approved composition
Purpose statement	Notion headings and paragraph	Layout and reveal behavior
Purpose orbit	Headings and paragraphs after `FS_PURPOSE_ITEMS`	Convert four item groups into interactive orbit nodes
Orbit ring and center	No image required	Draw with CSS; JavaScript only controls pause, selection, and reset
Who We Are CTA	Notion link	Style as the final purpose CTA

Purpose-orbit implementation

The rotating radial section is not a bitmap or uploaded illustration. The ring, center circle, and orbital positions are CSS geometry. The four labels and descriptions live in Notion. JavaScript converts those four content groups into accessible buttons, rotates their container, pauses on interaction, and restores the default state when the visitor clicks elsewhere.

Production JavaScript responsibilities

Locate exact marker blocks and their associated content ranges.
Add namespaced fs- classes and minimal wrappers.
Never own or duplicate editable page copy.
Initialize rotating words, scroll progress, wok toss, food story, purpose orbit, navigation reveal, keyboard behavior, and reduced motion.
Exit safely if the staging-page markers are not present.

Staging acceptance checks

Desktop and 390 px mobile.
Reduced-motion behavior.
Direct load, refresh, and navigation back to the page.
Editable Notion copy and links remain functional.
Images load from Notion-hosted image blocks.
No homepage takeover occurs on other routes.
Current public Landing Page remains available for rollback.