<persisted-output>
Output too large (73.6KB). Full output saved to: /home/ubuntu/.claude/projects/-home-ubuntu/1737cfea-b01d-4047-8008-7f6c987fcd3f/tool-results/toolu_014xZtF8rnKGW8kg89DhfeeP.txt

Preview (first 2KB):
     1→     1→  Your task is to build the actual MVP website now for Christina Korf / “International Love Story.”
     2→     2→
     3→     3→  Do not stop at planning. Do not only describe what you would do. Perform the work:
     4→     4→  1. first harvest as much real content as possible from the provided links
     5→     5→  2. normalize and save that content into structured local data files
     6→     6→  3. then build the actual site using the harvested content first and placeholders only where necessary
     7→     7→
     8→     8→  This is a build task, not a brainstorming task.
     9→     9→
    10→    10→  ================================
    11→    11→  HARD RESET / NO REUSE
    12→    12→  ================================
    13→    13→
    14→    14→  This run must be treated as a full rebuild from scratch.
    15→    15→
    16→    16→  Do not preserve, reuse, defend, or lightly tweak any previous International Love Story MVP, prototype, preview, placeholder build, harvested data, or prior assumptions.
    17→    17→
    18→    18→  If any previous International Love Story implementation exists, treat it as stale and disposable. Remove the old implementation artifacts first, then rebuild cleanly from zero.
    19→    19→
    20→    20→  Specifically:
    21→    21→  - do not treat any existing `demo-site` files as authoritative
    22→    22→  - do not keep old harvested JSON just because it already exists
    23→    23→  - do not report "already aligned" or "already consistent with the brief" as a substitute for rebuilding
    24→    24→  - do not use previous failure states as justification for shallow placeholders
    25→    25→  - if an old preview route exists, do not assume it is acceptable without rebuilding and re-validating the underlying content
    26→    26→
    27→    27→  The goal here is not to preserve the previous MVP. The goal is to replace it with a materially better build created from a fresh harvest pass.
    28→    28→
...
</persisted-output>

     1→  Your task is to build the actual MVP website now for Christina Korf / “International Love Story.”
     2→
     3→  Do not stop at planning. Do not only describe what you would do. Perform the work:
     4→  1. first harvest as much real content as possible from the provided links
     5→  2. normalize and save that content into structured local data files
     6→  3. then build the actual site using the harvested content first and placeholders only where necessary
     7→
     8→  This is a build task, not a brainstorming task.
     9→
    10→  ================================
    11→  HARD RESET / NO REUSE
    12→  ================================
    13→
    14→  This run must be treated as a full rebuild from scratch.
    15→
    16→  Do not preserve, reuse, defend, or lightly tweak any previous International Love Story MVP, prototype, preview, placeholder build, harvested data, or prior assumptions.
    17→
    18→  If any previous International Love Story implementation exists, treat it as stale and disposable. Remove the old implementation artifacts first, then rebuild cleanly from zero.
    19→
    20→  Specifically:
    21→  - do not treat any existing `demo-site` files as authoritative
    22→  - do not keep old harvested JSON just because it already exists
    23→  - do not report "already aligned" or "already consistent with the brief" as a substitute for rebuilding
    24→  - do not use previous failure states as justification for shallow placeholders
    25→  - if an old preview route exists, do not assume it is acceptable without rebuilding and re-validating the underlying content
    26→
    27→  The goal here is not to preserve the previous MVP. The goal is to replace it with a materially better build created from a fresh harvest pass.
    28→
    29→  ================================
    30→  NETWORK ACCESS / EXIT NODE
    31→  ================================
    32→
    33→  For this run, you should assume richer source access is required than in the previous attempt.
    34→
    35→  The server has access to a Tailscale exit node on my Pixel 6a, and you must explicitly prefer using that connectivity path when scraping or validating sources that were previously blocked, rate-limited, geo-sensitive, or inconsistently accessible.
    36→
    37→  Treat the Pixel 6a exit node as part of the intended execution context for this task, not as an optional afterthought.
    38→
    39→  If source access looks restricted, do not immediately fall back to placeholders. First:
    40→  1. verify that the Pixel 6a Tailscale exit node path is active / available
    41→  2. retry the blocked or partial source fetches using that network path
    42→  3. only after that, document what still remains inaccessible
    43→
    44→  You should make a real second attempt to harvest more source material before accepting any placeholder gaps.
    45→
    46→  ================================
    47→  PROJECT CONTEXT
    48→  ================================
    49→
    50→  This is a brand-new public-facing MVP website.
    51→
    52→  There may have been an older or unpublished website with limited information, but for implementation purposes treat this as a new build.
    53→
    54→  The site must be:
    55→  - mobile-first
    56→  - conversion-oriented
    57→  - warm, intimate, feminine, and editorial in tone
    58→  - structured as a static MVP first
    59→  - ready for later evolution into a CMS-backed content system
    60→
    61→  The site should function as both:
    62→  - a brand / trust-building site
    63→  - a lead generation and conversion funnel
    64→  - a story-driven discovery experience centered on the podcast
    65→  - a community growth surface
    66→
    67→  You should make pragmatic decisions and ship a cohesive result even if some source content is incomplete.
    68→
    69→  ================================
    70→  PHASE 1: CONTENT HARVEST FIRST
    71→  ================================
    72→
    73→  Before building anything, do a content-harvest pass from the provided links.
    74→
    75→  Do not jump directly into design or implementation until you have extracted and organized as much real-world information as possible.
    76→
    77→  --------------------------------
    78→  SOURCE LINKS
    79→  --------------------------------
    80→
    81→  Community:
    82→  https://chat.whatsapp.com/Kf9cT6PLNulK0M2V5zrAIk?mode=ac_t&utm_source=ig&utm_medium=social&utm_content=link_in_bio&fbclid=PAZXh0bgNhZW0CMTEAc3J0YwZhcHBfaWQMMjU2MjgxMDQwNTU4AAGnenyiY69ffx1B_PQ9CheGAF5nsu4fYGs96Go0jsUQtUfEJvN-fa1Gro2QH9s_aem_7ZehaYv5ZuwWbpdgzbKQag
    83→
    84→  Lead magnet:
    85→  https://shop.beacons.ai/internationallovestory/6f41bb13-efe6-42c7-a6ea-cfd48964a1aa?utm_source=ig&utm_medium=social&utm_content=link_in_bio&fbclid=PAZXh0bgNhZW0CMTEAc3J0YwZhcHBfaWQMMjU2MjgxMDQwNTU4AAGn_PM6hovSY2_c7XBlBNDBmn4j7fzGJPZknWS2mbwkv-fX4ocX1EFYxOaOmoc_aem_MpRBkePpHwtTGIgyTKmJFg
    86→
    87→  Podcast / platform hub:
    88→  https://linktr.ee/internationallovestory?utm_source=linktree_profile_share&ltsid=298e35a1-a979-4a08-8f55-f490940a6f3d&utm_medium=social&utm_content=link_in_bio&fbclid=PAZXh0bgNhZW0CMTEAc3J0YwZhcHBfaWQMMjU2MjgxMDQwNTU4AAGnIRpmzkcCYAWHwoKsBIt48g5yuPb-7JIB0nVrf0LIaodwK0jwsW_eaTl3ACI_aem_8BeYgYkhgvXKtOcPVKETNg
    89→
    90→  Instagram:
    91→  https://www.instagram.com/internationallovestory/
    92→
    93→  --------------------------------
    94→  HARVEST OBJECTIVE
    95→  --------------------------------
    96→
    97→  Extract every usable piece of real source material you can from these URLs and any immediately linked public pages they expose.
    98→
    99→  You are trying to avoid generic placeholder work. Use real CTA targets, real wording, real offer names, real bio language, real platform links, and real visual signals wherever possible.
   100→
   101→  --------------------------------
   102→  WHAT TO EXTRACT
   103→  --------------------------------
   104→
   105→  1. CTA destinations
   106→  Collect:
   107→  - the exact outbound URLs
   108→  - likely user-facing CTA labels
   109→  - category of each CTA:
   110→    - community
   111→    - lead magnet
   112→    - workshop
   113→    - coaching
   114→    - podcast
   115→    - YouTube
   116→    - Instagram
   117→    - story submission
   118→    - newsletter
   119→    - application
   120→  - which CTAs appear to be top-priority in the existing funnel
   121→
   122→  2. Brand copy and positioning
   123→  Collect:
   124→  - brand name
   125→  - person name(s): Christina / Tina / Christina Korf if visible
   126→  - bios
   127→  - taglines
   128→  - short intros
   129→  - “about” style descriptions
   130→  - repeated phrases
   131→  - promise / transformation language
   132→  - community framing language
   133→  - how she describes the audience
   134→
   135→  3. Offer inventory
   136→  Collect:
   137→  - the lead magnet title and short description if visible
   138→  - community offer name and wording
   139→  - any workshop titles
   140→  - any coaching offer names
   141→  - any “tell your love story” / “tell your story” applications
   142→  - any newsletter or free resource offers
   143→  - pricing only if it is explicitly public
   144→  - any short benefit bullets if available
   145→
   146→  4. Podcast ecosystem
   147→  Collect:
   148→  - podcast platform destinations
   149→  - Apple / Spotify / YouTube links if discoverable
   150→  - podcast description
   151→  - visible episode titles if accessible
   152→  - host description
   153→  - themes and recurring categories
   154→  - visible evidence of episode count if available
   155→  - if exact episode data is not directly accessible, collect enough ecosystem details to inform seed data
   156→
   157→  5. Visual brand references
   158→  Collect:
   159→  - profile images
   160→  - headshots
   161→  - podcast cover art
   162→  - thumbnails
   163→  - logo if visible
   164→  - dominant brand colors
   165→  - styling cues:
   166→    - elegant
   167→    - warm
   168→    - feminine
   169→    - global / travel-oriented
   170→    - community-oriented
   171→  - any recurring iconography or image motifs
   172→
   173→  6. Social proof and trust signals
   174→  Collect:
   175→  - visible audience signals
   176→  - community count if shown
   177→  - follower count if shown
   178→  - testimonials or quotes
   179→  - featured platforms
   180→  - phrases indicating credibility, experience, or community presence
   181→
   182→  --------------------------------
   183→  HARVEST RULES
   184→  --------------------------------
   185→
   186→  - Prefer real extracted content over invented placeholder copy.
   187→  - If a page is blocked, use accessible previews, metadata, social previews, linked public pages, or search-discoverable public mirrors if available in your environment.
   188→  - If exact facts are not visible, do not fabricate them.
   189→  - Where a fact is uncertain, either omit it or mark it as placeholder.
   190→  - Make conservative inferences only when they are strongly implied by the visible source material.
   191→  - Preserve the original source URLs in the data layer.
   192→  - Do not let harvesting become endless. Gather enough to build a strong MVP, then move to implementation.
   193→
   194→  --------------------------------
   195→  SAVE HARVEST OUTPUT
   196→  --------------------------------
   197→
   198→  Create a local data layer before building. Save extracted information into structured files such as:
   199→
   200→  - data/brand.json
   201→  - data/ctas.json
   202→  - data/offers.json
   203→  - data/podcast.json
   204→  - data/episodes.json
   205→  - data/assets.json
   206→  - data/source-notes.md
   207→
   208→  Minimum expectations for those files:
   209→
   210→  data/brand.json
   211→  - brandName
   212→  - personName
   213→  - shortBio
   214→  - longBio
   215→  - audience
   216→  - positioning
   217→  - tone
   218→  - sourceUrls
   219→
   220→  data/ctas.json
   221→  - primaryCta
   222→  - secondaryCta
   223→  - tertiaryCtas[]
   224→  - each item with:
   225→    - label
   226→    - href
   227→    - type
   228→    - source
   229→    - priority
   230→
   231→  data/offers.json
   232→  - community
   233→  - leadMagnet
   234→  - workshops
   235→  - coaching
   236→  - storySubmission
   237→  - each item with:
   238→    - title
   239→    - description
   240→    - href
   241→    - status
   242→    - source
   243→    - placeholder (boolean if needed)
   244→
   245→  data/podcast.json
   246→  - title
   247→  - description
   248→  - platformLinks
   249→  - sourceHub
   250→  - notableThemes[]
   251→  - episodeCountText (if exact number isn’t available, use soft wording only if grounded)
   252→
   253→  data/episodes.json
   254→  - if real episode list is accessible, store real entries
   255→  - if not fully accessible, create well-structured seed entries based on known themes and mark them as curated placeholders where necessary
   256→
   257→  data/assets.json
   258→  - logo
   259→  - profileImage
   260→  - coverArt
   261→  - gallery[]
   262→  - colorPalette[]
   263→  - notes
   264→
   265→  data/source-notes.md
   266→  Document:
   267→  - which source links were accessible
   268→  - which were blocked
   269→  - what was extracted from each
   270→  - what remains unknown
   271→  - what was inferred
   272→  - what is placeholder
   273→
   274→  ================================
   275→  PHASE 2: BUILD THE MVP SITE
   276→  ================================
   277→
   278→  After the harvest pass, build the actual MVP site.
   279→
   280→  Do not merely describe the ideal site. Implement it in the existing project stack already present in the workspace if one exists. Prefer modifying the existing frontend app rather than
   281→  creating unnecessary duplicates.
   282→
   283→  If exact assets are missing, use tasteful placeholders and wire the code so real assets can be swapped later.
   284→
   285→  ================================
   286→  BUSINESS GOALS (PRIORITY ORDER)
   287→  ================================
   288→
   289→  Primary goals:
   290→  1. Drive community signups
   291→  2. Convert visitors into paid coaching/workshops
   292→  3. Collect emails for the free lead magnet
   293→  4. Grow podcast listens/views
   294→
   295→  These priorities should shape layout, CTA hierarchy, and copy emphasis.
   296→
   297→  Community is the primary conversion goal.
   298→
   299→  ================================
   300→  BRAND / MESSAGE DIRECTION
   301→  ================================
   302→
   303→  Brand:
   304→  - International Love Story
   305→
   306→  Primary figure:
   307→  - Christina / Tina
   308→  - position her as the face and guide behind the brand
   309→
   310→  Core audience:
   311→  - primarily women in intercultural relationships
   312→  - especially women navigating language barriers, different family systems, migration, loneliness abroad, identity shifts, and communication stress
   313→
   314→  Emotional promise:
   315→  - “you are not the only one”
   316→  - real stories, practical tools, and supportive community for women in intercultural love
   317→
   318→  Tone:
   319→  - warm
   320→  - intimate
   321→  - feminine
   322→  - emotionally intelligent
   323→  - honest
   324→  - trusting
   325→  - globally aware
   326→  - story-driven
   327→
   328→  Avoid:
   329→  - corporate startup design
   330→  - generic coaching clichés
   331→  - sterile wellness branding
   332→  - vague empowerment filler
   333→  - placeholder copy that sounds fake when sharper language can be written
   334→
   335→  ================================
   336→  KNOWN CONCEPTUAL CONTENT TO REFLECT
   337→  ================================
   338→
   339→  Use these themes and known positioning cues in the content model and copy:
   340→
   341→  - international / intercultural / multicultural relationships
   342→  - long-distance relationships
   343→  - communication across languages
   344→  - culture clash and misunderstandings
   345→  - moving abroad for love
   346→  - family expectations
   347→  - identity and belonging
   348→  - finding community abroad
   349→  - women-centered support
   350→  - real stories from intercultural couples
   351→  - practical relationship and communication guidance
   352→
   353→  The site should feel like a blend of:
   354→  - podcast archive
   355→  - editorial storytelling platform
   356→  - women’s support community
   357→  - workshop / coaching funnel
   358→  - lead magnet funnel
   359→
   360→  ================================
   361→  HOMEPAGE INFORMATION ARCHITECTURE
   362→  ================================
   363→
   364→  Build the homepage with this flow:
   365→
   366→  1. HERO SECTION
   367→  Purpose:
   368→  - instantly communicate who this is for
   369→  - establish emotional resonance
   370→  - drive the primary CTA
   371→
   372→  Requirements:
   373→  - strong emotional headline for women navigating intercultural love
   374→  - supportive subheadline explaining what International Love Story is
   375→  - primary CTA: join the community
   376→  - secondary CTA: get the free communication guide (or actual lead magnet title if found)
   377→  - tertiary CTA: listen to the podcast
   378→  - visually feature Christina/Tina if image assets are available
   379→  - premium, warm, editorial look
   380→  - must feel highly intentional on mobile
   381→
   382→  2. TRUST / SOCIAL PROOF STRIP
   383→  Purpose:
   384→  - establish legitimacy quickly
   385→
   386→  Include:
   387→  - language like:
   388→    - real stories
   389→    - intercultural relationship support
   390→    - practical communication tools
   391→    - community for women
   392→  - if supported by harvested data, mention:
   393→    - 100+ podcast episodes or softer wording like “a growing library of conversations”
   394→  - keep this concise and scannable
   395→
   396→  3. SIGNATURE MAP / WORLD DISCOVERY SECTION
   397→  Purpose:
   398→  - create the memorable “wow” experience
   399→  - visually reinforce the global relationship concept
   400→
   401→  Concept:
   402→  - each episode is represented by two connected points
   403→  - the connection should evoke a “red thread” / “red string of connection”
   404→  - the two points can represent:
   405→    - host / Christina location context
   406→    - guest / partner / featured story location
   407→  - for MVP, a polished 2D world map or stylized faux-globe is acceptable if a full globe is overkill
   408→  - prioritize clarity, beauty, and touch usability over visual gimmicks
   409→
   410→  Requirements:
   411→  - visible connection lines between two places per story
   412→  - highlighted pins on tap / click
   413→  - clear selected state
   414→  - smooth, lightweight interaction
   415→  - mobile-friendly layout
   416→
   417→  4. SEARCH / FILTER DISCOVERY
   418→  Purpose:
   419→  - help visitors find relevant stories by emotional relevance first
   420→
   421→  Search and filter priority:
   422→  1. themes
   423→  2. country names
   424→  3. episode titles
   425→  4. guest names
   426→
   427→  Requirements:
   428→  - search input
   429→  - theme chips / filter pills
   430→  - country-based discovery
   431→  - results list tied to map selection
   432→  - discovery should feel inviting, not like an admin dashboard
   433→
   434→  Theme chips should include:
   435→  - communication
   436→  - language barriers
   437→  - long-distance
   438→  - family
   439→  - moving abroad
   440→  - identity
   441→  - friendship
   442→  - paperwork / visas
   443→  - multilingual children
   444→  - cultural adjustment
   445→
   446→  5. EPISODE DETAIL MODAL
   447→  Purpose:
   448→  - turn discovery into deeper engagement
   449→
   450→  Trigger:
   451→  - clicking a map connection
   452→  - clicking a search result
   453→  - clicking a featured episode card
   454→
   455→  Modal should include:
   456→  - episode title
   457→  - guest name(s)
   458→  - countries involved
   459→  - short summary
   460→  - theme tags
   461→  - outbound buttons (listen / watch / learn more)
   462→  - optional secondary CTA into community or lead magnet
   463→
   464→  Rules:
   465→  - mobile-first modal layout
   466→  - large tap targets
   467→  - no embedded players in MVP
   468→  - outbound links only
   469→
   470→  6. FEATURED OFFERS / FUNNEL SECTION
   471→  Purpose:
   472→  - convert visitors into the core business outcomes
   473→
   474→  Build distinct cards/blocks for:
   475→  - community
   476→  - free communication guide / lead magnet
   477→  - workshops
   478→  - coaching
   479→  - “tell your story” / story application
   480→
   481→  Each item should include:
   482→  - title
   483→  - short benefit-oriented description
   484→  - direct CTA button
   485→  - supporting microcopy
   486→
   487→  Hierarchy:
   488→  - community first
   489→  - lead magnet second
   490→  - workshops/coaching next
   491→  - story submission as a narrative/community expansion CTA
   492→
   493→  7. ABOUT CHRISTINA / TINA SECTION
   494→  Purpose:
   495→  - humanize the brand and create personal trust
   496→
   497→  Include:
   498→  - short personal narrative
   499→  - bridge from lived experience to practical support
   500→  - position her as relatable, credible, and emotionally grounded
   501→  - if harvested content gives exact phrasing, use that
   502→  - otherwise write tasteful copy consistent with the brand
   503→
   504→  8. PODCAST SECTION
   505→  Purpose:
   506→  - highlight the podcast as a major trust and discovery asset
   507→
   508→  Include:
   509→  - description of what listeners get
   510→  - platform buttons linking out to real platform destinations
   511→  - featured or recent episodes
   512→  - support the brand story without overpowering the main conversion funnel
   513→
   514→  9. FINAL CTA SECTION
   515→  Purpose:
   516→  - end with a clear emotional conversion moment
   517→
   518→  Requirements:
   519→  - strong closing statement
   520→  - primary CTA: join the community
   521→  - secondary CTA: free guide
   522→  - optional CTA: tell your story
   523→
   524→  ================================
   525→  SITE CONTENT REQUIREMENTS
   526→  ================================
   527→
   528→  The MVP should include both media and offers:
   529→  - podcast archive
   530→  - free communication guide / lead magnet
   531→  - community for women
   532→  - workshops / coaching
   533→  - “tell your story” application
   534→
   535→  All guest names and locations are intended to be public on the map.
   536→
   537→  Outbound links are acceptable and preferred over heavy embeds.
   538→
   539→  ================================
   540→  DATA MODEL REQUIREMENTS
   541→  ================================
   542→
   543→  Create a structured content layer that powers the UI.
   544→
   545→  At minimum define:
   546→  - episodes[]
   547→  - featuredThemes[]
   548→  - countries[]
   549→  - offers[]
   550→  - testimonials[] (real if available, tasteful placeholder if not)
   551→  - ctas[]
   552→  - brand metadata
   553→
   554→  Each episode entry should support:
   555→  - id
   556→  - title
   557→  - slug
   558→  - guestName
   559→  - guestCountry
   560→  - hostCountry
   561→  - connectedCountries[]
   562→  - themes[]
   563→  - summary
   564→  - platformLinks
   565→  - featuredImage
   566→  - publishedAt
   567→  - isFeatured
   568→  - source
   569→  - placeholder (boolean if needed)
   570→
   571→  Seed content requirement:
   572→  - create at least 8 to 12 compelling episode entries
   573→  - use real episode data if accessible
   574→  - otherwise create curated structured seed entries aligned with harvested themes and mark uncertain fields clearly
   575→  - the map must not be empty
   576→
   577→  ================================
   578→  DESIGN DIRECTION
   579→  ================================
   580→
   581→  The design should feel:
   582→  - warm
   583→  - intimate
   584→  - feminine
   585→  - editorial
   586→  - story-driven
   587→  - globally connected
   588→  - polished and emotionally resonant
   589→
   590→  Avoid:
   591→  - default bland startup layouts
   592→  - overly dark moody luxury aesthetics
   593→  - generic pastel wellness sameness
   594→  - flat white pages with random purple gradients
   595→
   596→  Preferred palette direction:
   597→  - soft cream / ivory backgrounds
   598→  - terracotta / clay / muted rose accents
   599→  - deep olive / warm espresso / ink contrast tones
   600→
   601→  Typography:
   602→  - choose expressive, intentional type
   603→  - avoid boring default system-only feel
   604→  - the typography should feel human and premium
   605→
   606→  Background and atmosphere:
   607→  - use subtle texture, layered gradients, soft glows, shapes, map overlays, or paper-like warmth
   608→  - create section contrast so the page feels composed, not monotonous
   609→
   610→  Motion:
   611→  - hero reveal
   612→  - selected map connection emphasis
   613→  - modal transitions
   614→  - staggered content reveals if useful
   615→  - keep motion tasteful and not distracting
   616→
   617→  ================================
   618→  UX RULES
   619→  ================================
   620→
   621→  Mobile-first is a hard requirement.
   622→
   623→  The site must work well on small screens:
   624→  - readable hierarchy
   625→  - comfortable spacing
   626→  - clear thumb-friendly buttons
   627→  - usable filters
   628→  - modal interactions that don’t feel cramped
   629→  - no tiny map hit targets
   630→
   631→  A first-time visitor should immediately understand:
   632→  - who this is for
   633→  - what International Love Story is
   634→  - what to click next
   635→
   636→  ================================
   637→  COPY DIRECTION
   638→  ================================
   639→
   640→  Write copy for women navigating intercultural relationships.
   641→
   642→  Center the emotional realities:
   643→  - feeling misunderstood across languages and cultures
   644→  - rebuilding life in a new country
   645→  - loneliness and missing community
   646→  - relationship strain caused by distance, migration, or differing norms
   647→  - wanting practical communication tools
   648→  - wanting to feel less alone
   649→
   650→  The copy should make visitors feel:
   651→  - seen
   652→  - soothed
   653→  - guided
   654→  - invited into a real community
   655→
   656→  Do not write:
   657→  - hollow motivational fluff
   658→  - vague “empowerment” text
   659→  - generic coaching copy detached from the intercultural-love niche
   660→
   661→  ================================
   662→  TECHNICAL EXECUTION RULES
   663→  ================================
   664→
   665→  - Use the existing project/app in the workspace if there is one.
   666→  - Prefer modifying the existing frontend app instead of creating unnecessary duplicates.
   667→  - Build the site so it can be previewed immediately.
   668→  - Use the harvested content as the primary source of truth.
   669→  - Where data is missing, fill gaps with tasteful placeholders and clearly structured code.
   670→  - Keep architecture simple and fast to iterate.
   671→  - If useful, separate data from presentation cleanly so later content updates are easy.
   672→
   673→  ================================
   674→  DELIVERABLES
   675→  ================================
   676→
   677→  By the end of this task, you should have:
   678→
   679→  1. A harvested source-data layer
   680→  - brand, CTAs, offers, podcast metadata, assets, notes
   681→
   682→  2. A functioning MVP site implementation
   683→  - homepage and supporting sections
   684→  - interactive map/discovery concept
   685→  - modal-based story detail interaction
   686→  - real CTA destinations wired in
   687→
   688→  3. Clean structured content
   689→  - enough seeded/real data to make the experience feel complete
   690→
   691→  4. A previewable result
   692→  - not just files, but something that can be run / viewed in the local app stack
   693→
   694→  ================================
   695→  DECISION RULES
   696→
   697→  - If a source page blocks access, use the best accessible public metadata or previews you can get.
   698→  - Prefer shipping a coherent, beautiful, functional prototype over waiting for perfect data.
   699→  - Make strong product decisions without unnecessary questions.
   700→
   701→  ================================
   702→  SUCCESS CRITERIA
   703→  ================================
   704→
   705→  The finished result should feel like a real launchable prototype for International Love Story:
   706→  - emotionally compelling
   707→  - clearly targeted to women in intercultural relationships
   708→  - conversion-first
   709→  - community-forward
   710→  - story-driven
   711→  - globally themed
   712→  - visually distinctive
   713→  - mobile-first
   714→  - immediately useful
   715→
   716→  Do the work now.
   717→
   718→  If you want, I can also make:
   719→
   720→  1. a shorter Telegram-sized version of this same prompt
   721→  2. a version explicitly telling Pipo when to delegate pieces to codex, gemini, and deepseek-code
   722→  3. a stricter implementation-only version that removes most brand prose and focuses on execution steps
   723→
   724→
   725→› I think I might just send this through the openclaw gateway chat so its not compressed. Yes the idea of having a version that explicitly tells pipo when to delegate the pieces might be
   726→  ideal tbh. discard your #3 proposal, no problem. discard your #1 proposal, as I will send it via direct chat to pipo
   727→
   728→
   729→• Use this version for Pipo. It keeps the full harvest-then-build workflow, but explicitly tells Pipo when to delegate to sub-agents and what each agent should own.
   730→
   731→  Your task is to build the actual MVP website now for Christina Korf / “International Love Story.”
   732→
   733→  Do not stop at planning. Do not only describe what you would do. Perform the work:
   734→  1. first harvest as much real content as possible from the provided links
   735→  2. normalize and save that content into structured local data files
   736→  3. then build the actual site using the harvested content first and placeholders only where necessary
   737→
   738→  This is a build task, not a brainstorming task.
   739→
   740→  You are the orchestrator. You should stay focused on coordination, decision-making, quality control, and synthesis. You should delegate substantial execution work to specialist sub-agents
   741→  whenever that will speed up delivery or improve quality.
   742→
   743→  ================================
   744→  ORCHESTRATION RULES
   745→  ================================
   746→
   747→  You are Pipo, the main coordinating agent.
   748→
   749→  Your job:
   750→  - own the product direction
   751→  - own the interpretation of the brief
   752→  - own the final integration
   753→  - own quality control
   754→  - own the final user-facing result
   755→
   756→  You should avoid doing all implementation manually in the main session if specialist agents are available.
   757→
   758→  Use sub-agents strategically:
   759→
   760→  1. Delegate to `codex` for:
   761→  - frontend implementation
   762→  - component creation
   763→  - data modeling
   764→  - wiring the interactive map/discovery UI
   765→  - refactoring existing app structure
   766→  - building modals, sections, CTA flows
   767→  - practical coding tasks in the existing project
   768→
   769→  2. Delegate to `gemini` for:
   770→  - content harvesting from the supplied links
   771→  - extracting CTA targets, copy, offer names, platform destinations
   772→  - synthesizing brand voice from public pages
   773→  - drafting polished copy blocks from harvested information
   774→  - identifying structure and narrative opportunities in the source material
   775→
   776→  3. Delegate to `deepseek-code` for:
   777→  - alternative implementation ideas
   778→  - debugging hard UI issues
   779→  - proposing better component/data architecture
   780→  - checking edge cases in search/filter/map interaction
   781→  - suggesting performance or interaction improvements
   782→  - second-opinion code review on tricky parts
   783→
   784→  Delegation expectations:
   785→  - delegate early, not only after getting stuck
   786→  - parallelize where sensible
   787→  - give each sub-agent a tightly scoped task
   788→  - bring their outputs back into one coherent build
   789→  - do not dump the entire project blindly on one sub-agent
   790→  - preserve momentum: while one agent is harvesting, another can inspect the codebase
   791→
   792→  You remain responsible for:
   793→  - choosing the final direction
   794→  - reconciling conflicting recommendations
   795→  - integrating the work
   796→  - making sure the final result actually matches the brief
   797→
   798→  ================================
   799→  PROJECT CONTEXT
   800→  ================================
   801→
   802→  This is a brand-new public-facing MVP website.
   803→
   804→  There may have been an older or unpublished website with limited information, but for implementation purposes treat this as a new build.
   805→
   806→  The site must be:
   807→  - mobile-first
   808→  - conversion-oriented
   809→  - warm, intimate, feminine, and editorial in tone
   810→  - structured as a static MVP first
   811→  - ready for later evolution into a CMS-backed content system
   812→
   813→  The site should function as both:
   814→  - a brand / trust-building site
   815→  - a lead generation and conversion funnel
   816→  - a story-driven discovery experience centered on the podcast
   817→  - a community growth surface
   818→
   819→  You should make pragmatic decisions and ship a cohesive result even if some source content is incomplete.
   820→
   821→  ================================
   822→  PHASE 1: CONTENT HARVEST FIRST
   823→  ================================
   824→
   825→  Before building anything, do a content-harvest pass from the provided links.
   826→
   827→  Do not jump directly into design or implementation until you have extracted and organized as much real-world information as possible.
   828→
   829→  Recommended delegation:
   830→  - Send the full harvest task to `gemini` first.
   831→  - In parallel, send `codex` a codebase inspection task so it can identify the existing frontend app and prepare for implementation.
   832→  - If harvesting is messy or inconsistent, ask `deepseek-code` for a compact data schema proposal after initial findings are in.
   833→
   834→  --------------------------------
   835→  SOURCE LINKS
   836→  --------------------------------
   837→
   838→  Community:
   839→  https://chat.whatsapp.com/Kf9cT6PLNulK0M2V5zrAIk?mode=ac_t&utm_source=ig&utm_medium=social&utm_content=link_in_bio&fbclid=PAZXh0bgNhZW0CMTEAc3J0YwZhcHBfaWQMMjU2MjgxMDQwNTU4AAGnenyiY69ffx1B_PQ9CheGAF5nsu4fYGs96Go0jsUQtUfEJvN-fa1Gro2QH9s_aem_7ZehaYv5ZuwWbpdgzbKQag
   840→
   841→  Lead magnet:
   842→  https://shop.beacons.ai/internationallovestory/6f41bb13-efe6-42c7-a6ea-cfd48964a1aa?utm_source=ig&utm_medium=social&utm_content=link_in_bio&fbclid=PAZXh0bgNhZW0CMTEAc3J0YwZhcHBfaWQMMjU2MjgxMDQwNTU4AAGn_PM6hovSY2_c7XBlBNDBmn4j7fzGJPZknWS2mbwkv-fX4ocX1EFYxOaOmoc_aem_MpRBkePpHwtTGIgyTKmJFg
   843→
   844→  Podcast / platform hub:
   845→  https://linktr.ee/internationallovestory?utm_source=linktree_profile_share&ltsid=298e35a1-a979-4a08-8f55-f490940a6f3d&utm_medium=social&utm_content=link_in_bio&fbclid=PAZXh0bgNhZW0CMTEAc3J0YwZhcHBfaWQMMjU2MjgxMDQwNTU4AAGnIRpmzkcCYAWHwoKsBIt48g5yuPb-7JIB0nVrf0LIaodwK0jwsW_eaTl3ACI_aem_8BeYgYkhgvXKtOcPVKETNg
   846→
   847→  Instagram:
   848→  https://www.instagram.com/internationallovestory/
   849→
   850→  --------------------------------
   851→  HARVEST OBJECTIVE
   852→  --------------------------------
   853→
   854→  Extract every usable piece of real source material you can from these URLs and any immediately linked public pages they expose.
   855→
   856→  You are trying to avoid generic placeholder work. Use real CTA targets, real wording, real offer names, real bio language, real platform links, and real visual signals wherever possible.
   857→
   858→  --------------------------------
   859→  WHAT TO EXTRACT
   860→  --------------------------------
   861→
   862→  1. CTA destinations
   863→  Collect:
   864→  - the exact outbound URLs
   865→  - likely user-facing CTA labels
   866→  - category of each CTA:
   867→    - community
   868→    - lead magnet
   869→    - workshop
   870→    - coaching
   871→    - podcast
   872→    - YouTube
   873→    - Instagram
   874→    - story submission
   875→    - newsletter
   876→    - application
   877→  - which CTAs appear to be top-priority in the existing funnel
   878→
   879→  2. Brand copy and positioning
   880→  Collect:
   881→  - brand name
   882→  - person name(s): Christina / Tina / Christina Korf if visible
   883→  - bios
   884→  - taglines
   885→  - short intros
   886→  - “about” style descriptions
   887→  - repeated phrases
   888→  - promise / transformation language
   889→  - community framing language
   890→  - how she describes the audience
   891→
   892→  3. Offer inventory
   893→  Collect:
   894→  - the lead magnet title and short description if visible
   895→  - community offer name and wording
   896→  - any workshop titles
   897→  - any coaching offer names
   898→  - any “tell your love story” / “tell your story” applications
   899→  - any newsletter or free resource offers
   900→  - pricing only if it is explicitly public
   901→  - any short benefit bullets if available
   902→
   903→  4. Podcast ecosystem
   904→  Collect:
   905→  - podcast platform destinations
   906→  - Apple / Spotify / YouTube links if discoverable
   907→  - podcast description
   908→  - visible episode titles if accessible
   909→  - host description
   910→  - themes and recurring categories
   911→  - visible evidence of episode count if available
   912→  - if exact episode data is not directly accessible, collect enough ecosystem details to inform seed data
   913→
   914→  5. Visual brand references
   915→  Collect:
   916→  - profile images
   917→  - headshots
   918→  - podcast cover art
   919→  - thumbnails
   920→  - logo if visible
   921→  - dominant brand colors
   922→  - styling cues:
   923→    - elegant
   924→    - warm
   925→    - feminine
   926→    - global / travel-oriented
   927→    - community-oriented
   928→  - any recurring iconography or image motifs
   929→
   930→  6. Social proof and trust signals
   931→  Collect:
   932→  - visible audience signals
   933→  - community count if shown
   934→  - follower count if shown
   935→  - testimonials or quotes
   936→  - featured platforms
   937→  - phrases indicating credibility, experience, or community presence
   938→
   939→  --------------------------------
   940→  HARVEST RULES
   941→  --------------------------------
   942→
   943→  - Prefer real extracted content over invented placeholder copy.
   944→  - If a page is blocked, use accessible previews, metadata, social previews, linked public pages, or search-discoverable public mirrors if available in your environment.
   945→  - If exact facts are not visible, do not fabricate them.
   946→  - Where a fact is uncertain, either omit it or mark it as placeholder.
   947→  - Make conservative inferences only when they are strongly implied by the visible source material.
   948→  - Preserve the original source URLs in the data layer.
   949→  - Do not let harvesting become endless. Gather enough to build a strong MVP, then move to implementation.
   950→
   951→  --------------------------------
   952→  SAVE HARVEST OUTPUT
   953→  --------------------------------
   954→
   955→  Create a local data layer before building. Save extracted information into structured files such as:
   956→
   957→  - data/brand.json
   958→  - data/ctas.json
   959→  - data/offers.json
   960→  - data/podcast.json
   961→  - data/episodes.json
   962→  - data/assets.json
   963→  - data/source-notes.md
   964→
   965→  Minimum expectations for those files:
   966→
   967→  data/brand.json
   968→  - brandName
   969→  - personName
   970→  - shortBio
   971→  - longBio
   972→  - audience
   973→  - positioning
   974→  - tone
   975→  - sourceUrls
   976→
   977→  data/ctas.json
   978→  - primaryCta
   979→  - secondaryCta
   980→  - tertiaryCtas[]
   981→  - each item with:
   982→    - label
   983→    - href
   984→    - type
   985→    - source
   986→    - priority
   987→
   988→  data/offers.json
   989→  - community
   990→  - leadMagnet
   991→  - workshops
   992→  - coaching
   993→  - storySubmission
   994→  - each item with:
   995→    - title
   996→    - description
   997→    - href
   998→    - status
   999→    - source
  1000→    - placeholder (boolean if needed)
  1001→
  1002→  data/podcast.json
  1003→  - title
  1004→  - description
  1005→  - platformLinks
  1006→  - sourceHub
  1007→  - notableThemes[]
  1008→  - episodeCountText (if exact number isn’t available, use soft wording only if grounded)
  1009→
  1010→  data/episodes.json
  1011→  - if real episode list is accessible, store real entries
  1012→  - if not fully accessible, create well-structured seed entries based on known themes and mark them as curated placeholders where necessary
  1013→
  1014→  data/assets.json
  1015→  - logo
  1016→  - profileImage
  1017→  - coverArt
  1018→  - gallery[]
  1019→  - colorPalette[]
  1020→  - notes
  1021→
  1022→  data/source-notes.md
  1023→  Document:
  1024→  - which source links were accessible
  1025→  - which were blocked
  1026→  - what was extracted from each
  1027→  - what remains unknown
  1028→  - what was inferred
  1029→  - what is placeholder
  1030→
  1031→  ================================
  1032→  PHASE 2: BUILD THE MVP SITE
  1033→  ================================
  1034→
  1035→  After the harvest pass, build the actual MVP site.
  1036→
  1037→  Do not merely describe the ideal site. Implement it in the existing project stack already present in the workspace if one exists. Prefer modifying the existing frontend app rather than
  1038→  creating unnecessary duplicates.
  1039→
  1040→  Recommended delegation:
  1041→  - Give `codex` the main implementation task once the data layer is ready.
  1042→  - Ask `gemini` to draft/refine copy for hero, about, CTA, and offer sections using harvested language.
  1043→  - Ask `deepseek-code` for a focused review of the interaction model and data architecture before final polish.
  1044→  - Have `codex` integrate the accepted copy and structural improvements into the final app.
  1045→
  1046→  If exact assets are missing, use tasteful placeholders and wire the code so real assets can be swapped later.
  1047→
  1048→  ================================
  1049→  BUSINESS GOALS (PRIORITY ORDER)
  1050→  ================================
  1051→
  1052→  Primary goals:
  1053→  1. Drive community signups
  1054→  2. Convert visitors into paid coaching/workshops
  1055→  3. Collect emails for the free lead magnet
  1056→  4. Grow podcast listens/views
  1057→
  1058→  These priorities should shape layout, CTA hierarchy, and copy emphasis.
  1059→
  1060→  Community is the primary conversion goal.
  1061→
  1062→  ================================
  1063→  BRAND / MESSAGE DIRECTION
  1064→  ================================
  1065→
  1066→  Brand:
  1067→  - International Love Story
  1068→
  1069→  Primary figure:
  1070→  - Christina / Tina
  1071→  - position her as the face and guide behind the brand
  1072→
  1073→  Core audience:
  1074→  - primarily women in intercultural relationships
  1075→  - especially women navigating language barriers, different family systems, migration, loneliness abroad, identity shifts, and communication stress
  1076→
  1077→  Emotional promise:
  1078→  - “you are not the only one”
  1079→  - real stories, practical tools, and supportive community for women in intercultural love
  1080→
  1081→  Tone:
  1082→  - warm
  1083→  - intimate
  1084→  - feminine
  1085→  - emotionally intelligent
  1086→  - honest
  1087→  - trusting
  1088→  - globally aware
  1089→  - story-driven
  1090→
  1091→  Avoid:
  1092→  - corporate startup design
  1093→  - generic coaching clichés
  1094→  - sterile wellness branding
  1095→  - vague empowerment filler
  1096→  - placeholder copy that sounds fake when sharper language can be written
  1097→
  1098→  ================================
  1099→  KNOWN CONCEPTUAL CONTENT TO REFLECT
  1100→  ================================
  1101→
  1102→  Use these themes and known positioning cues in the content model and copy:
  1103→
  1104→  - international / intercultural / multicultural relationships
  1105→  - long-distance relationships
  1106→  - communication across languages
  1107→  - culture clash and misunderstandings
  1108→  - moving abroad for love
  1109→  - family expectations
  1110→  - identity and belonging
  1111→  - finding community abroad
  1112→  - women-centered support
  1113→  - real stories from intercultural couples
  1114→  - practical relationship and communication guidance
  1115→
  1116→  The site should feel like a blend of:
  1117→  - podcast archive
  1118→  - editorial storytelling platform
  1119→  - women’s support community
  1120→  - workshop / coaching funnel
  1121→  - lead magnet funnel
  1122→
  1123→  ================================
  1124→  HOMEPAGE INFORMATION ARCHITECTURE
  1125→  ================================
  1126→
  1127→  Build the homepage with this flow:
  1128→
  1129→  1. HERO SECTION
  1130→  Purpose:
  1131→  - instantly communicate who this is for
  1132→  - establish emotional resonance
  1133→  - drive the primary CTA
  1134→
  1135→  Requirements:
  1136→  - strong emotional headline for women navigating intercultural love
  1137→  - supportive subheadline explaining what International Love Story is
  1138→  - primary CTA: join the community
  1139→  - secondary CTA: get the free communication guide (or actual lead magnet title if found)
  1140→  - tertiary CTA: listen to the podcast
  1141→  - visually feature Christina/Tina if image assets are available
  1142→  - premium, warm, editorial look
  1143→  - must feel highly intentional on mobile
  1144→
  1145→  2. TRUST / SOCIAL PROOF STRIP
  1146→  Purpose:
  1147→  - establish legitimacy quickly
  1148→
  1149→  Include:
  1150→  - language like:
  1151→    - real stories
  1152→    - intercultural relationship support
  1153→    - practical communication tools
  1154→    - community for women
  1155→  - if supported by harvested data, mention:
  1156→    - 100+ podcast episodes or softer wording like “a growing library of conversations”
  1157→  - keep this concise and scannable
  1158→
  1159→  3. SIGNATURE MAP / WORLD DISCOVERY SECTION
  1160→  Purpose:
  1161→  - create the memorable “wow” experience
  1162→  - visually reinforce the global relationship concept
  1163→
  1164→  Concept:
  1165→  - each episode is represented by two connected points
  1166→  - the connection should evoke a “red thread” / “red string of connection”
  1167→  - the two points can represent:
  1168→    - host / Christina location context
  1169→    - guest / partner / featured story location
  1170→  - for MVP, a polished 2D world map or stylized faux-globe is acceptable if a full globe is overkill
  1171→  - prioritize clarity, beauty, and touch usability over visual gimmicks
  1172→
  1173→  Requirements:
  1174→  - visible connection lines between two places per story
  1175→  - highlighted pins on tap / click
  1176→  - clear selected state
  1177→  - smooth, lightweight interaction
  1178→  - mobile-friendly layout
  1179→
  1180→  4. SEARCH / FILTER DISCOVERY
  1181→  Purpose:
  1182→  - help visitors find relevant stories by emotional relevance first
  1183→
  1184→  Search and filter priority:
  1185→  1. themes
  1186→  2. country names
  1187→  3. episode titles
  1188→  4. guest names
  1189→
  1190→  Requirements:
  1191→  - search input
  1192→  - theme chips / filter pills
  1193→  - country-based discovery
  1194→  - results list tied to map selection
  1195→  - discovery should feel inviting, not like an admin dashboard
  1196→
  1197→  Theme chips should include:
  1198→  - communication
  1199→  - language barriers
  1200→  - long-distance
  1201→  - family
  1202→  - moving abroad
  1203→  - identity
  1204→  - friendship
  1205→  - paperwork / visas
  1206→  - multilingual children
  1207→  - cultural adjustment
  1208→
  1209→  5. EPISODE DETAIL MODAL
  1210→  Purpose:
  1211→  - turn discovery into deeper engagement
  1212→
  1213→  Trigger:
  1214→  - clicking a map connection
  1215→  - clicking a search result
  1216→  - clicking a featured episode card
  1217→
  1218→  Modal should include:
  1219→  - episode title
  1220→  - guest name(s)
  1221→  - countries involved
  1222→  - short summary
  1223→  - theme tags
  1224→  - outbound buttons (listen / watch / learn more)
  1225→  - optional secondary CTA into community or lead magnet
  1226→
  1227→  Rules:
  1228→  - mobile-first modal layout
  1229→  - large tap targets
  1230→  - no embedded players in MVP
  1231→  - outbound links only
  1232→
  1233→  6. FEATURED OFFERS / FUNNEL SECTION
  1234→  Purpose:
  1235→  - convert visitors into the core business outcomes
  1236→
  1237→  Build distinct cards/blocks for:
  1238→  - community
  1239→  - free communication guide / lead magnet
  1240→  - workshops
  1241→  - coaching
  1242→  - “tell your story” / story application
  1243→
  1244→  Each item should include:
  1245→  - title
  1246→  - short benefit-oriented description
  1247→  - direct CTA button
  1248→  - supporting microcopy
  1249→
  1250→  Hierarchy:
  1251→  - community first
  1252→  - lead magnet second
  1253→  - workshops/coaching next
  1254→  - story submission as a narrative/community expansion CTA
  1255→
  1256→  7. ABOUT CHRISTINA / TINA SECTION
  1257→  Purpose:
  1258→  - humanize the brand and create personal trust
  1259→
  1260→  Include:
  1261→  - short personal narrative
  1262→  - bridge from lived experience to practical support
  1263→  - position her as relatable, credible, and emotionally grounded
  1264→  - if harvested content gives exact phrasing, use that
  1265→  - otherwise write tasteful copy consistent with the brand
  1266→
  1267→  8. PODCAST SECTION
  1268→  Purpose:
  1269→  - highlight the podcast as a major trust and discovery asset
  1270→
  1271→  Include:
  1272→  - description of what listeners get
  1273→  - platform buttons linking out to real platform destinations
  1274→  - featured or recent episodes
  1275→  - support the brand story without overpowering the main conversion funnel
  1276→
  1277→  9. FINAL CTA SECTION
  1278→  Purpose:
  1279→  - end with a clear emotional conversion moment
  1280→
  1281→  Requirements:
  1282→  - strong closing statement
  1283→  - primary CTA: join the community
  1284→  - secondary CTA: free guide
  1285→  - optional CTA: tell your story
  1286→
  1287→  ================================
  1288→  SITE CONTENT REQUIREMENTS
  1289→  ================================
  1290→
  1291→  The MVP should include both media and offers:
  1292→  - podcast archive
  1293→  - free communication guide / lead magnet
  1294→  - community for women
  1295→  - workshops / coaching
  1296→  - “tell your story” application
  1297→
  1298→  All guest names and locations are intended to be public on the map.
  1299→
  1300→  Outbound links are acceptable and preferred over heavy embeds.
  1301→
  1302→  ================================
  1303→  DATA MODEL REQUIREMENTS
  1304→  ================================
  1305→
  1306→  Create a structured content layer that powers the UI.
  1307→
  1308→  At minimum define:
  1309→  - episodes[]
  1310→  - featuredThemes[]
  1311→  - countries[]
  1312→  - offers[]
  1313→  - testimonials[] (real if available, tasteful placeholder if not)
  1314→  - ctas[]
  1315→  - brand metadata
  1316→
  1317→  Each episode entry should support:
  1318→  - id
  1319→  - title
  1320→  - slug
  1321→  - guestName
  1322→  - guestCountry
  1323→  - hostCountry
  1324→  - connectedCountries[]
  1325→  - themes[]
  1326→  - summary
  1327→  - platformLinks
  1328→  - featuredImage
  1329→  - publishedAt
  1330→  - isFeatured
  1331→  - source
  1332→  - placeholder (boolean if needed)
  1333→
  1334→  Seed content requirement:
  1335→  - create at least 8 to 12 compelling episode entries
  1336→  - use real episode data if accessible
  1337→  - otherwise create curated structured seed entries aligned with harvested themes and mark uncertain fields clearly
  1338→  - the map must not be empty
  1339→
  1340→  ================================
  1341→  DESIGN DIRECTION
  1342→  ================================
  1343→
  1344→  The design should feel:
  1345→  - warm
  1346→  - intimate
  1347→  - feminine
  1348→  - editorial
  1349→  - story-driven
  1350→  - globally connected
  1351→  - polished and emotionally resonant
  1352→
  1353→  Avoid:
  1354→  - default bland startup layouts
  1355→  - overly dark moody luxury aesthetics
  1356→  - generic pastel wellness sameness
  1357→  - flat white pages with random purple gradients
  1358→
  1359→  Preferred palette direction:
  1360→  - soft cream / ivory backgrounds
  1361→  - terracotta / clay / muted rose accents
  1362→  - deep olive / warm espresso / ink contrast tones
  1363→
  1364→  Typography:
  1365→  - choose expressive, intentional type
  1366→  - avoid boring default system-only feel
  1367→  - the typography should feel human and premium
  1368→
  1369→  Background and atmosphere:
  1370→  - use subtle texture, layered gradients, soft glows, shapes, map overlays, or paper-like warmth
  1371→  - create section contrast so the page feels composed, not monotonous
  1372→
  1373→  Motion:
  1374→  - hero reveal
  1375→  - selected map connection emphasis
  1376→  - modal transitions
  1377→  - staggered content reveals if useful
  1378→  - keep motion tasteful and not distracting
  1379→
  1380→  ================================
  1381→  UX RULES
  1382→  ================================
  1383→
  1384→  Mobile-first is a hard requirement.
  1385→
  1386→  The site must work well on small screens:
  1387→  - readable hierarchy
  1388→  - comfortable spacing
  1389→  - clear thumb-friendly buttons
  1390→  - usable filters
  1391→  - modal interactions that don’t feel cramped
  1392→  - no tiny map hit targets
  1393→
  1394→  A first-time visitor should immediately understand:
  1395→  - who this is for
  1396→  - what International Love Story is
  1397→  - what to click next
  1398→
  1399→  ================================
  1400→  COPY DIRECTION
  1401→  ================================
  1402→
  1403→  Write copy for women navigating intercultural relationships.
  1404→
  1405→  Center the emotional realities:
  1406→  - feeling misunderstood across languages and cultures
  1407→  - rebuilding life in a new country
  1408→  - loneliness and missing community
  1409→  - relationship strain caused by distance, migration, or differing norms
  1410→  - wanting practical communication tools
  1411→  - wanting to feel less alone
  1412→
  1413→  The copy should make visitors feel:
  1414→  - seen
  1415→  - soothed
  1416→  - guided
  1417→  - invited into a real community
  1418→
  1419→  Do not write:
  1420→  - hollow motivational fluff
  1421→  - vague “empowerment” text
  1422→  - generic coaching copy detached from the intercultural-love niche
  1423→
  1424→  ================================
  1425→  TECHNICAL EXECUTION RULES
  1426→  ================================
  1427→
  1428→  - Use the existing project/app in the workspace if there is one.
  1429→  - Prefer modifying the existing frontend app instead of creating unnecessary duplicates.
  1430→  - Build the site so it can be previewed immediately.
  1431→  - Use the harvested content as the primary source of truth.
  1432→  - Where data is missing, fill gaps with tasteful placeholders and clearly structured code.
  1433→  - Keep architecture simple and fast to iterate.
  1434→  - If useful, separate data from presentation cleanly so later content updates are easy.
  1435→
  1436→  ================================
  1437→  DELEGATION WORKFLOW (RECOMMENDED)
  1438→  ================================
  1439→
  1440→  Use this execution pattern unless the codebase proves it needs a different one:
  1441→
  1442→  Step 1:
  1443→  - Send `gemini` a harvesting task for the provided links.
  1444→  - Ask it to return:
  1445→    - CTA inventory
  1446→    - offer inventory
  1447→    - available brand language
  1448→    - platform links
  1449→    - visual/style signals
  1450→    - uncertainties / blocked pages
  1451→
  1452→  Step 2:
  1453→  - In parallel, send `codex` a codebase inspection task.
  1454→  - Ask it to identify:
  1455→    - the correct app to modify
  1456→    - the frontend stack
  1457→    - where to place structured data files
  1458→    - the cleanest path to implement the homepage and interactions
  1459→
  1460→  Step 3:
  1461→  - After harvest results come back, have `codex` implement:
  1462→    - data layer
  1463→    - homepage structure
  1464→    - map/discovery UI
  1465→    - modal interaction
  1466→    - CTA wiring
  1467→    - mobile-first layout
  1468→
  1469→  Step 4:
  1470→  - Send `gemini` a content synthesis task using harvested material.
  1471→  - Ask it to draft/refine:
  1472→    - hero copy
  1473→    - trust strip copy
  1474→    - offer section copy
  1475→    - about section copy
  1476→    - final CTA copy
  1477→  - Then integrate the best version into the app
  1478→
  1479→  Step 5:
  1480→  - Send `deepseek-code` a focused second-opinion task.
  1481→  - Ask it to review:
  1482→    - map/search/filter interaction logic
  1483→    - data schema robustness
  1484→    - mobile UX risks
  1485→    - any obvious implementation improvements
  1486→
  1487→  Step 6:
  1488→  - Integrate only the useful improvements.
  1489→  - Do not churn endlessly.
  1490→  - Produce a coherent final build.
  1491→
  1492→  ================================
  1493→  DELIVERABLES
  1494→  ================================
  1495→
  1496→  By the end of this task, you should have:
  1497→
  1498→  1. A harvested source-data layer
  1499→  - brand, CTAs, offers, podcast metadata, assets, notes
  1500→
  1501→  2. A functioning MVP site implementation
  1502→  - homepage and supporting sections
  1503→  - interactive map/discovery concept
  1504→  - modal-based story detail interaction
  1505→  - real CTA destinations wired in
  1506→
  1507→  3. Clean structured content
  1508→  - enough seeded/real data to make the experience feel complete
  1509→
  1510→  4. A previewable result
  1511→  - not just files, but something that can be run / viewed in the local app stack
  1512→
  1513→  DECISION RULES
  1514→  ================================
  1515→
  1516→  - If a source page blocks access, use the best accessible public metadata or previews you can get.
  1517→  - Prefer shipping a coherent, beautiful, functional prototype over waiting for perfect data.
  1518→  - Make strong product decisions without unnecessary questions.
  1519→  - If exact information is unavailable, use conservative placeholders and clearly structure them for future replacement.
  1520→  - Do not stop after research. Research is only phase 1. Build in phase 2.
  1521→  - Delegate substantial tasks, but keep final control and integrate the outcome yourself.
  1522→
  1523→  ================================
  1524→  SUCCESS CRITERIA
  1525→  ================================
  1526→
  1527→  The finished result should feel like a real launchable prototype for International Love Story:
  1528→  - emotionally compelling
  1529→  - clearly targeted to women in intercultural relationships
  1530→  - conversion-first
  1531→  - community-forward
  1532→  - story-driven
  1533→  - globally themed
  1534→  - visually distinctive
  1535→  - mobile-first
  1536→  - immediately useful
  1537→
  1538→  Do the work now.
  1539→
  1540→  One operational note: if deepseek-code on this machine is not fully functional as a true harness-backed worker, Pipo should still use codex and gemini as the main workers and treat
  1541→  deepseek-code as optional rather than blocking progress.
  1542→
  1543→
  1544→MAKE SURE YOU USE THE TAILSCALE EXIT NODE, PIXEL 6A, IF YOU ENCOUNTER ANY PROBLEMS WITH ACCESSING ANY OF THE WEBSITES OR LINKS AFOREMENTIONED.
  1545→HERE'S A TRANSCRIPT OF THE ORIGINAL BRIEF, FYI:
  1546→  1. Is this a brand-new site, or a redesign/replacement of an existing official site?
  1547→     Tina (chrisTina) already has a website with some information, but not so much. Unfortunately this website is not available/unpublished so assume this is a brand new site..
  1548→  2. What is the primary goal of the site?
  1549→     Pick the top priority:
  1550→#1 drive community signups
  1551→#2 convert into paid coaching/workshops
  1552→#3 collect emails for the lead magnet
  1553→#4 grow podcast listens/views
  1554→
  1555→  3. For the globe pins, what exactly is one pin?
  1556→     Options:
  1557→  - two connected pins per episode (country A + country B) (like a silver lining/red line? what is the name of that saying like we are all connected etc.. with a red string)
  1558→
  1559→  4. Do you already have a structured list of episodes and guests?
  1560→     For the map/search to work well, we need per episode: you should be able to get this from spotify, as it is quite clear and you can go through it.
  1561→
  1562→  5. Should search work over:
  1563→Let's work on prioritization:
  1564→  #1 themes (visa, language barriers, long distance, family, moving abroad, identity, etc.)
  1565→  #2 country names
  1566→  #3 episode titles
  1567→  #4 guest names
  1568→
  1569→  6. When a user clicks a result, what should happen?
  1570→     Choose the preferred behavior:
  1571→
  1572→  - open a modal with the episode details + buttons. It should work on mobile though!
  1573→
  1574→  7. Do you want embedded players, or just outbound links?
  1575→  Outbound links is OK, the idea after all is for listeners or viewers to subscribe.
  1576→
  1577→  8. Should the map be the homepage hero, or below a strong landing section?
  1578→   A better conversion-oriented structure is usually:
  1579→  - Hero: emotional positioning + CTA
  1580→  - Then interactive map
  1581→  - Then featured episodes / lead magnet / community
  1582→    If you want the map to be the “wow” moment, we can invert that.
  1583→
  1584→    response: this is fine as suggested
  1585→
  1586→  9. What tone should the design have?
  1587→     Which is closest:
  1588→
  1589→  - warm / intimate / feminine
  1590→    This will heavily influence typography, colors, and imagery.
  1591→
  1592→  10. Do you have brand assets ready?
  1593→     Needed if available:
  1594→
  1595→  - logo
  1596→  - fonts
  1597→  - brand colors
  1598→  - Christina headshots
  1599→  - podcast cover art
  1600→  - episode thumbnails
  1601→    Without these, the first version will be a strong concept but still a placeholder brand-wise.
  1602→
  1603→    We have all these but you can either extract them from the links provided or you can put placeholders.
  1604→
  1605→  11. Do you want an admin-editable CMS in phase 1, or a curated static/data-file site first?
  1606→     Choices:
  1607→
  1608→  - MVP first: static site + JSON dataset, fast and simple
  1609→  - CMS-backed: easier long-term content management, slower to build
  1610→    For a prototype, I’d start with static + structured JSON.
  1611→response: lets' start with the prototype, MVP first.
  1612→
  1613→  12. Are all guest names and locations meant to be public on the map?
  1614→Yes.
  1615→
  1616→  13. Do you want the site to include only podcast content, or also Christina’s offers?
  1617→     Possible sections:
  1618→
  1619→  - Podcast archive
  1620→  - Free communication guide
  1621→  - Community for women
  1622→  - Workshops / coaching
  1623→  - “Tell your story” application
  1624→    This affects whether the site is primarily media, lead-gen, or both.
  1625→
  1626→YES TO ALL THANK YOU LOVE YOU <3
  1627→
  1628→  14. Is mobile-first a hard requirement?
  1629→     YES
  1630→
  1631→

<system-reminder>
Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior.
</system-reminder>


Bash

which ngrok 2>/dev/null || echo "no ngrok"; which cloudflared 2>/dev/null || echo "no cloudflared"; tailscale serve status 2>&1

Check tunneling tools and current Tailscale serve status


no ngrok
no cloudflared
https://miopenclaw-vnic.tail9799d2.ts.net (tailnet only)
|-- / proxy http://127.0.0.1:18789


The brief is too large to read in full here. Let me read it in chunks to understand the key sections. I need to understand:1. What map implementation was asked for
2. What the overall design should look like
3. What content/data should be included

For public access: no ngrok or cloudflared installed. Options:
1. Install cloudflared (free, no account needed for quick tunnels)
2. Enable Tailscale funnel on port 8443 (separate from port 443)
3. Try serving on the public IP directly (might work since iptables INPUT is ACCEPT)

Actually, I want to read the brief properly first. Let me use the Bash tool to read specific sections of the brief.

I should read through the full brief in sections to understand what the map implementation needs to do.


wc -l /home/ubuntu/international_love_story_site-brief.md && grep -n "map\|Map\|MAP\|globe\|Globe\|three\|Three\|2D\|3D\|connect" /home/ubuntu/international_love_story_site-brief.md | head -40

Find map-related sections in brief


1630 /home/ubuntu/international_love_story_site-brief.md
35:  The server has access to a Tailscale exit node on my Pixel 6a, and you must explicitly prefer using that connectivity path when scraping or validating sources that were previously blocked, rate-limited, geo-sensitive, or inconsistently accessible.
396:  3. SIGNATURE MAP / WORLD DISCOVERY SECTION
402:  - each episode is represented by two connected points
403:  - the connection should evoke a “red thread” / “red string of connection”
407:  - for MVP, a polished 2D world map or stylized faux-globe is acceptable if a full globe is overkill
411:  - visible connection lines between two places per story
431:  - results list tied to map selection
451:  - clicking a map connection
535:  All guest names and locations are intended to be public on the map.
561:  - connectedCountries[]
575:  - the map must not be empty
587:  - globally connected
607:  - use subtle texture, layered gradients, soft glows, shapes, map overlays, or paper-like warmth
612:  - selected map connection emphasis
629:  - no tiny map hit targets
684:  - interactive map/discovery concept
764:  - wiring the interactive map/discovery UI
780:  - checking edge cases in search/filter/map interaction
1159:  3. SIGNATURE MAP / WORLD DISCOVERY SECTION
1165:  - each episode is represented by two connected points
1166:  - the connection should evoke a “red thread” / “red string of connection”
1170:  - for MVP, a polished 2D world map or stylized faux-globe is acceptable if a full globe is overkill
1174:  - visible connection lines between two places per story
1194:  - results list tied to map selection
1214:  - clicking a map connection
1298:  All guest names and locations are intended to be public on the map.
1324:  - connectedCountries[]
1338:  - the map must not be empty
1350:  - globally connected
1370:  - use subtle texture, layered gradients, soft glows, shapes, map overlays, or paper-like warmth
1375:  - selected map connection emphasis
1392:  - no tiny map hit targets
1464:    - map/discovery UI
1482:    - map/search/filter interaction logic
1503:  - interactive map/discovery concept
1555:  3. For the globe pins, what exactly is one pin?
1557:  - two connected pins per episode (country A + country B) (like a silver lining/red line? what is the name of that saying like we are all connected etc.. with a red string)
1560:     For the map/search to work well, we need per episode: you should be able to get this from spotify, as it is quite clear and you can go through it.
1577:  8. Should the map be the homepage hero, or below a strong landing section?
1580:  - Then interactive map


grep -n "section\|Section\|SECTION\|hero\|Hero\|design\|Design\|color\|Color\|font\|Font" /home/ubuntu/international_love_story_site-brief.md | head -50

Find design/section headers in brief


75:  Do not jump directly into design or implementation until you have extracted and organized as much real-world information as possible.
164:  - dominant brand colors
262:  - colorPalette[]
329:  - corporate startup design
366:  1. HERO SECTION
396:  3. SIGNATURE MAP / WORLD DISCOVERY SECTION
470:  6. FEATURED OFFERS / FUNNEL SECTION
493:  7. ABOUT CHRISTINA / TINA SECTION
504:  8. PODCAST SECTION
514:  9. FINAL CTA SECTION
581:  The design should feel:
608:  - create section contrast so the page feels composed, not monotonous
611:  - hero reveal
683:  - homepage and supporting sections
766:  - building modals, sections, CTA flows
827:  Do not jump directly into design or implementation until you have extracted and organized as much real-world information as possible.
921:  - dominant brand colors
1019:  - colorPalette[]
1042:  - Ask `gemini` to draft/refine copy for hero, about, CTA, and offer sections using harvested language.
1092:  - corporate startup design
1129:  1. HERO SECTION
1159:  3. SIGNATURE MAP / WORLD DISCOVERY SECTION
1233:  6. FEATURED OFFERS / FUNNEL SECTION
1256:  7. ABOUT CHRISTINA / TINA SECTION
1267:  8. PODCAST SECTION
1277:  9. FINAL CTA SECTION
1344:  The design should feel:
1371:  - create section contrast so the page feels composed, not monotonous
1374:  - hero reveal
1472:    - hero copy
1474:    - offer section copy
1475:    - about section copy
1502:  - homepage and supporting sections
1546:  1. Is this a brand-new site, or a redesign/replacement of an existing official site?
1577:  8. Should the map be the homepage hero, or below a strong landing section?
1579:  - Hero: emotional positioning + CTA
1586:  9. What tone should the design have?
1590:    This will heavily influence typography, colors, and imagery.
1596:  - fonts
1597:  - brand colors
1617:     Possible sections:


   366→  1. HERO SECTION
   367→  Purpose:
   368→  - instantly communicate who this is for
   369→  - establish emotional resonance
   370→  - drive the primary CTA
   371→
   372→  Requirements:
   373→  - strong emotional headline for women navigating intercultural love
   374→  - supportive subheadline explaining what International Love Story is
   375→  - primary CTA: join the community
   376→  - secondary CTA: get the free communication guide (or actual lead magnet title if found)
   377→  - tertiary CTA: listen to the podcast
   378→  - visually feature Christina/Tina if image assets are available
   379→  - premium, warm, editorial look
   380→  - must feel highly intentional on mobile
   381→
   382→  2. TRUST / SOCIAL PROOF STRIP
   383→  Purpose:
   384→  - establish legitimacy quickly
   385→
   386→  Include:
   387→  - language like:
   388→    - real stories
   389→    - intercultural relationship support
   390→    - practical communication tools
   391→    - community for women
   392→  - if supported by harvested data, mention:
   393→    - 100+ podcast episodes or softer wording like “a growing library of conversations”
   394→  - keep this concise and scannable
   395→
   396→  3. SIGNATURE MAP / WORLD DISCOVERY SECTION
   397→  Purpose:
   398→  - create the memorable “wow” experience
   399→  - visually reinforce the global relationship concept
   400→
   401→  Concept:
   402→  - each episode is represented by two connected points
   403→  - the connection should evoke a “red thread” / “red string of connection”
   404→  - the two points can represent:
   405→    - host / Christina location context
   406→    - guest / partner / featured story location
   407→  - for MVP, a polished 2D world map or stylized faux-globe is acceptable if a full globe is overkill
   408→  - prioritize clarity, beauty, and touch usability over visual gimmicks
   409→
   410→  Requirements:
   411→  - visible connection lines between two places per story
   412→  - highlighted pins on tap / click
   413→  - clear selected state
   414→  - smooth, lightweight interaction
   415→  - mobile-friendly layout
   416→
   417→  4. SEARCH / FILTER DISCOVERY
   418→  Purpose:
   419→  - help visitors find relevant stories by emotional relevance first
   420→
   421→  Search and filter priority:
   422→  1. themes
   423→  2. country names
   424→  3. episode titles
   425→  4. guest names
   426→
   427→  Requirements:
   428→  - search input
   429→  - theme chips / filter pills
   430→  - country-based discovery
   431→  - results list tied to map selection
   432→  - discovery should feel inviting, not like an admin dashboard
   433→
   434→  Theme chips should include:
   435→  - communication
   436→  - language barriers
   437→  - long-distance
   438→  - family
   439→  - moving abroad
   440→  - identity
   441→  - friendship
   442→  - paperwork / visas
   443→  - multilingual children
   444→  - cultural adjustment
   445→
   446→  5. EPISODE DETAIL MODAL
   447→  Purpose:
   448→  - turn discovery into deeper engagement
   449→
   450→  Trigger:
   451→  - clicking a map connection
   452→  - clicking a search result
   453→  - clicking a featured episode card
   454→
   455→  Modal should include:
   456→  - episode title
   457→  - guest name(s)
   458→  - countries involved
   459→  - short summary
   460→  - theme tags
   461→  - outbound buttons (listen / watch / learn more)
   462→  - optional secondary CTA into community or lead magnet
   463→
   464→  Rules:
   465→  - mobile-first modal layout
   466→  - large tap targets
   467→  - no embedded players in MVP
   468→  - outbound links only
   469→
   470→  6. FEATURED OFFERS / FUNNEL SECTION
   471→  Purpose:
   472→  - convert visitors into the core business outcomes
   473→
   474→  Build distinct cards/blocks for:
   475→  - community
   476→  - free communication guide / lead magnet
   477→  - workshops
   478→  - coaching
   479→  - “tell your story” / story application
   480→
   481→  Each item should include:
   482→  - title
   483→  - short benefit-oriented description
   484→  - direct CTA button
   485→  - supporting microcopy
   486→
   487→  Hierarchy:
   488→  - community first
   489→  - lead magnet second
   490→  - workshops/coaching next
   491→  - story submission as a narrative/community expansion CTA
   492→
   493→  7. ABOUT CHRISTINA / TINA SECTION
   494→  Purpose:
   495→  - humanize the brand and create personal trust
   496→
   497→  Include:
   498→  - short personal narrative
   499→  - bridge from lived experience to practical support
   500→  - position her as relatable, credible, and emotionally grounded
   501→  - if harvested content gives exact phrasing, use that
   502→  - otherwise write tasteful copy consistent with the brand
   503→
   504→  8. PODCAST SECTION
   505→  Purpose:
   506→  - highlight the podcast as a major trust and discovery asset
   507→
   508→  Include:
   509→  - description of what listeners get
   510→  - platform buttons linking out to real platform destinations
   511→  - featured or recent episodes
   512→  - support the brand story without overpowering the main conversion funnel
   513→
   514→  9. FINAL CTA SECTION
   515→  Purpose:
   516→  - end with a clear emotional conversion moment
   517→
   518→  Requirements:
   519→  - strong closing statement
   520→  - primary CTA: join the community
   521→  - secondary CTA: free guide
   522→  - optional CTA: tell your story
   523→
   524→  ================================
   525→  SITE CONTENT REQUIREMENTS
   526→  ================================
   527→
   528→  The MVP should include both media and offers:
   529→  - podcast archive
   530→  - free communication guide / lead magnet
   531→  - community for women
   532→  - workshops / coaching
   533→  - “tell your story” application
   534→
   535→  All guest names and locations are intended to be public on the map.
   536→
   537→  Outbound links are acceptable and preferred over heavy embeds.
   538→
   539→  ================================
   540→  DATA MODEL REQUIREMENTS
   541→  ================================
   542→
   543→  Create a structured content layer that powers the UI.
   544→
   545→  At minimum define:
   546→  - episodes[]
   547→  - featuredThemes[]
   548→  - countries[]
   549→  - offers[]
   550→  - testimonials[] (real if available, tasteful placeholder if not)
   551→  - ctas[]
   552→  - brand metadata
   553→
   554→  Each episode entry should support:
   555→  - id
   556→  - title
   557→  - slug
   558→  - guestName
   559→  - guestCountry
   560→  - hostCountry
   561→  - connectedCountries[]
   562→  - themes[]
   563→  - summary
   564→  - platformLinks
   565→  - featuredImage
   566→  - publishedAt
   567→  - isFeatured
   568→  - source
   569→  - placeholder (boolean if needed)
   570→
   571→  Seed content requirement:
   572→  - create at least 8 to 12 compelling episode entries
   573→  - use real episode data if accessible
   574→  - otherwise create curated structured seed entries aligned with harvested themes and mark uncertain fields clearly
   575→  - the map must not be empty
   576→
   577→  ================================
   578→  DESIGN DIRECTION
   579→  ================================
   580→
   581→  The design should feel:
   582→  - warm
   583→  - intimate
   584→  - feminine
   585→  - editorial
   586→  - story-driven
   587→  - globally connected
   588→  - polished and emotionally resonant
   589→
   590→  Avoid:
   591→  - default bland startup layouts
   592→  - overly dark moody luxury aesthetics
   593→  - generic pastel wellness sameness
   594→  - flat white pages with random purple gradients
   595→
   596→  Preferred palette direction:
   597→  - soft cream / ivory backgrounds
   598→  - terracotta / clay / muted rose accents
   599→  - deep olive / warm espresso / ink contrast tones
   600→
   601→  Typography:
   602→  - choose expressive, intentional type
   603→  - avoid boring default system-only feel
   604→  - the typography should feel human and premium
   605→
   606→  Background and atmosphere:
   607→  - use subtle texture, layered gradients, soft glows, shapes, map overlays, or paper-like warmth
   608→  - create section contrast so the page feels composed, not monotonous
   609→
   610→  Motion:
   611→  - hero reveal
   612→  - selected map connection emphasis
   613→  - modal transitions
   614→  - staggered content reveals if useful
   615→  - keep motion tasteful and not distracting

<system-reminder>
Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior.
</system-reminder>

  1. HERO SECTION
  Purpose:
  - instantly communicate who this is for
  - establish emotional resonance
  - drive the primary CTA

  Requirements:
  - strong emotional headline for women navigating intercultural love
  - supportive subheadline explaining what International Love Story is
  - primary CTA: join the community
  - secondary CTA: get the free communication guide (or actual lead magnet title if found)
  - tertiary CTA: listen to the podcast
  - visually feature Christina/Tina if image assets are available
  - premium, warm, editorial look
  - must feel highly intentional on mobile

  2. TRUST / SOCIAL PROOF STRIP
  Purpose:
  - establish legitimacy quickly

  Include:
  - language like:
    - real stories
    - intercultural relationship support
    - practical communication tools
    - community for women
  - if supported by harvested data, mention:
    - 100+ podcast episodes or softer wording like “a growing library of conversations”
  - keep this concise and scannable

  3. SIGNATURE MAP / WORLD DISCOVERY SECTION
  Purpose:
  - create the memorable “wow” experience
  - visually reinforce the global relationship concept

  Concept:
  - each episode is represented by two connected points
  - the connection should evoke a “red thread” / “red string of connection”
  - the two points can represent:
    - host / Christina location context
    - guest / partner / featured story location
  - for MVP, a polished 2D world map or stylized faux-globe is acceptable if a full globe is overkill
  - prioritize clarity, beauty, and touch usability over visual gimmicks

  Requirements:
  - visible connection lines between two places per story
  - highlighted pins on tap / click
  - clear selected state
  - smooth, lightweight interaction
  - mobile-friendly layout

  4. SEARCH / FILTER DISCOVERY
  Purpose:
  - help visitors find relevant stories by emotional relevance first

  Search and filter priority:
  1. themes
  2. country names
  3. episode titles
  4. guest names

  Requirements:
  - search input
  - theme chips / filter pills
  - country-based discovery
  - results list tied to map selection
  - discovery should feel inviting, not like an admin dashboard

  Theme chips should include:
  - communication
  - language barriers
  - long-distance
  - family
  - moving abroad
  - identity
  - friendship
  - paperwork / visas
  - multilingual children
  - cultural adjustment

  5. EPISODE DETAIL MODAL
  Purpose:
  - turn discovery into deeper engagement

  Trigger:
  - clicking a map connection
  - clicking a search result
  - clicking a featured episode card

  Modal should include:
  - episode title
  - guest name(s)
  - countries involved
  - short summary
  - theme tags
  - outbound buttons (listen / watch / learn more)
  - optional secondary CTA into community or lead magnet

  Rules:
  - mobile-first modal layout
  - large tap targets
  - no embedded players in MVP
  - outbound links only

  6. FEATURED OFFERS / FUNNEL SECTION
  Purpose:
  - convert visitors into the core business outcomes

  Build distinct cards/blocks for:
  - community
  - free communication guide / lead magnet
  - workshops
  - coaching
  - “tell your story” / story application

  Each item should include:
  - title
  - short benefit-oriented description
  - direct CTA button
  - supporting microcopy

  Hierarchy:
  - community first
  - lead magnet second
  - workshops/coaching next
  - story submission as a narrative/community expansion CTA

  7. ABOUT CHRISTINA / TINA SECTION
  Purpose:
  - humanize the brand and create personal trust

  Include:
  - short personal narrative
  - bridge from lived experience to practical support
  - position her as relatable, credible, and emotionally grounded
  - if harvested content gives exact phrasing, use that
  - otherwise write tasteful copy consistent with the brand

  8. PODCAST SECTION
  Purpose:
  - highlight the podcast as a major trust and discovery asset

  Include:
  - description of what listeners get
  - platform buttons linking out to real platform destinations
  - featured or recent episodes
  - support the brand story without overpowering the main conversion funnel

  9. FINAL CTA SECTION
  Purpose:
  - end with a clear emotional conversion moment

  Requirements:
  - strong closing statement
  - primary CTA: join the community
  - secondary CTA: free guide
  - optional CTA: tell your story

  ================================
  SITE CONTENT REQUIREMENTS
  ================================

  The MVP should include both media and offers:
  - podcast archive
  - free communication guide / lead magnet
  - community for women
  - workshops / coaching
  - “tell your story” application

  All guest names and locations are intended to be public on the map.

  Outbound links are acceptable and preferred over heavy embeds.

  ================================
  DATA MODEL REQUIREMENTS
  ================================

  Create a structured content layer that powers the UI.

  At minimum define:
  - episodes[]
  - featuredThemes[]
  - countries[]
  - offers[]
  - testimonials[] (real if available, tasteful placeholder if not)
  - ctas[]
  - brand metadata

  Each episode entry should support:
  - id
  - title
  - slug
  - guestName
  - guestCountry
  - hostCountry
  - connectedCountries[]
  - themes[]
  - summary
  - platformLinks
  - featuredImage
  - publishedAt
  - isFeatured
  - source
  - placeholder (boolean if needed)

  Seed content requirement:
  - create at least 8 to 12 compelling episode entries
  - use real episode data if accessible
  - otherwise create curated structured seed entries aligned with harvested themes and mark uncertain fields clearly
  - the map must not be empty

  ================================
  DESIGN DIRECTION
  ================================

  The design should feel:
  - warm
  - intimate
  - feminine
  - editorial
  - story-driven
  - globally connected
  - polished and emotionally resonant

  Avoid:
  - default bland startup layouts
  - overly dark moody luxury aesthetics
  - generic pastel wellness sameness
  - flat white pages with random purple gradients

  Preferred palette direction:
  - soft cream / ivory backgrounds
  - terracotta / clay / muted rose accents
  - deep olive / warm espresso / ink contrast tones

  Typography:
  - choose expressive, intentional type
  - avoid boring default system-only feel
  - the typography should feel human and premium

  Background and atmosphere:
  - use subtle texture, layered gradients, soft glows, shapes, map overlays, or paper-like warmth
  - create section contrast so the page feels composed, not monotonous

  Motion:
  - hero reveal
  - selected map connection emphasis
  - modal transitions
  - staggered content reveals if useful
  - keep motion tasteful and not distracting


   580→
   581→  The design should feel:
   582→  - warm
   583→  - intimate
   584→  - feminine
   585→  - editorial
   586→  - story-driven
   587→  - globally connected
   588→  - polished and emotionally resonant
   589→
   590→  Avoid:
   591→  - default bland startup layouts
   592→  - overly dark moody luxury aesthetics
   593→  - generic pastel wellness sameness
   594→  - flat white pages with random purple gradients
   595→
   596→  Preferred palette direction:
   597→  - soft cream / ivory backgrounds
   598→  - terracotta / clay / muted rose accents
   599→  - deep olive / warm espresso / ink contrast tones
   600→
   601→  Typography:
   602→  - choose expressive, intentional type
   603→  - avoid boring default system-only feel
   604→  - the typography should feel human and premium
   605→
   606→  Background and atmosphere:
   607→  - use subtle texture, layered gradients, soft glows, shapes, map overlays, or paper-like warmth
   608→  - create section contrast so the page feels composed, not monotonous
   609→
   610→  Motion:
   611→  - hero reveal
   612→  - selected map connection emphasis
   613→  - modal transitions
   614→  - staggered content reveals if useful
   615→  - keep motion tasteful and not distracting
   616→
   617→  ================================
   618→  UX RULES
   619→  ================================
   620→
   621→  Mobile-first is a hard requirement.
   622→
   623→  The site must work well on small screens:
   624→  - readable hierarchy
   625→  - comfortable spacing
   626→  - clear thumb-friendly buttons
   627→  - usable filters
   628→  - modal interactions that don’t feel cramped
   629→  - no tiny map hit targets
   630→
   631→  A first-time visitor should immediately understand:
   632→  - who this is for
   633→  - what International Love Story is
   634→  - what to click next
   635→
   636→  ================================
   637→  COPY DIRECTION
   638→  ================================
   639→
   640→  Write copy for women navigating intercultural relationships.
   641→
   642→  Center the emotional realities:
   643→  - feeling misunderstood across languages and cultures
   644→  - rebuilding life in a new country
   645→  - loneliness and missing community
   646→  - relationship strain caused by distance, migration, or differing norms
   647→  - wanting practical communication tools
   648→  - wanting to feel less alone
   649→
   650→  The copy should make visitors feel:
   651→  - seen
   652→  - soothed
   653→  - guided
   654→  - invited into a real community
   655→
   656→  Do not write:
   657→  - hollow motivational fluff
   658→  - vague “empowerment” text
   659→  - generic coaching copy detached from the intercultural-love niche
   660→
   661→  ================================
   662→  TECHNICAL EXECUTION RULES
   663→  ================================
   664→
   665→  - Use the existing project/app in the workspace if there is one.
   666→  - Prefer modifying the existing frontend app instead of creating unnecessary duplicates.
   667→  - Build the site so it can be previewed immediately.
   668→  - Use the harvested content as the primary source of truth.
   669→  - Where data is missing, fill gaps with tasteful placeholders and clearly structured code.
   670→  - Keep architecture simple and fast to iterate.
   671→  - If useful, separate data from presentation cleanly so later content updates are easy.
   672→
   673→  ================================
   674→  DELIVERABLES
   675→  ================================
   676→
   677→  By the end of this task, you should have:
   678→
   679→  1. A harvested source-data layer

<system-reminder>
Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior.
</system-reminder>

  The design should feel:
  - warm
  - intimate
  - feminine
  - editorial
  - story-driven
  - globally connected
  - polished and emotionally resonant

  Avoid:
  - default bland startup layouts
  - overly dark moody luxury aesthetics
  - generic pastel wellness sameness
  - flat white pages with random purple gradients

  Preferred palette direction:
  - soft cream / ivory backgrounds
  - terracotta / clay / muted rose accents
  - deep olive / warm espresso / ink contrast tones

  Typography:
  - choose expressive, intentional type
  - avoid boring default system-only feel
  - the typography should feel human and premium

  Background and atmosphere:
  - use subtle texture, layered gradients, soft glows, shapes, map overlays, or paper-like warmth
  - create section contrast so the page feels composed, not monotonous

  Motion:
  - hero reveal
  - selected map connection emphasis
  - modal transitions
  - staggered content reveals if useful
  - keep motion tasteful and not distracting

  ================================
  UX RULES
  ================================

  Mobile-first is a hard requirement.

  The site must work well on small screens:
  - readable hierarchy
  - comfortable spacing
  - clear thumb-friendly buttons
  - usable filters
  - modal interactions that don’t feel cramped
  - no tiny map hit targets

  A first-time visitor should immediately understand:
  - who this is for
  - what International Love Story is
  - what to click next

  ================================
  COPY DIRECTION
  ================================

  Write copy for women navigating intercultural relationships.

  Center the emotional realities:
  - feeling misunderstood across languages and cultures
  - rebuilding life in a new country
  - loneliness and missing community
  - relationship strain caused by distance, migration, or differing norms
  - wanting practical communication tools
  - wanting to feel less alone

  The copy should make visitors feel:
  - seen
  - soothed
  - guided
  - invited into a real community

  Do not write:
  - hollow motivational fluff
  - vague “empowerment” text
  - generic coaching copy detached from the intercultural-love niche

  ================================
  TECHNICAL EXECUTION RULES
  ================================

  - Use the existing project/app in the workspace if there is one.
  - Prefer modifying the existing frontend app instead of creating unnecessary duplicates.
  - Build the site so it can be previewed immediately.
  - Use the harvested content as the primary source of truth.
  - Where data is missing, fill gaps with tasteful placeholders and clearly structured code.
  - Keep architecture simple and fast to iterate.
  - If useful, separate data from presentation cleanly so later content updates are easy.

  ================================
  DELIVERABLES
  ================================

  By the end of this task, you should have:

  1. A harvested source-data layer