Website Phase 1

Overview: The “Beachhead” Strategy for Phase 1

For sdc.com, Phase 1 is not about building the entire Plan.md structure. It’s about launching a lean, focused site that accomplishes three core goals:

Communicate the Mission: Clearly state the “what” and “why” of the $MART DEBT mission.
Capture Leads: Get interested US Financial Advisors to raise their hands and opt-in.
Validate the Concept: Start gathering real-world feedback and building an audience.

Resolving Your Key Issues to Unlock Progress

1. Issue: Branding Paralysis (Colors & Logo)

Action: Commit to the blue theme and the current logo initially. This decision is temporary and reversible.

2. Issue: Fast AI Prototyping vs. Templates

Decision: Use a Template/Boilerplate. Do NOT get distracted by AI tools.
Action: Find an Astro starter template that includes Tailwind CSS and Svelte integration. The official Astro examples are a great place to start. Then, use the shadcn-svelte CLI to add components. This directly implements your plan, but starts you on third base. Svelte Shadcn Blocks will be invaluable for building out page sections quickly.

3. Issue: TS.com and SDC.com Split

Decision: For Phase 1, sdc.com is the flagship and sole focus. ts.com is secondary.
- sdc.com (The Mission Hub): This is the future. It’s focused 100% on the U.S. Advisor market. It will house the mission, the pledge, the lead magnet, and the future blog/academy.
- ts.com (The Author Hub): This site becomes your personal brand/author site. It can house your bio, legacy Canadian content, and existing Canadian products. Its primary call-to-action on the homepage should be a large, prominent banner: “Discover my new mission to help U.S. advisors build wealth with $MART DEBT. Visit SmartDebtCoach.com ->“

4. Issue: E-commerce

Decision: No shopping cart for Phase 1. Use Stripe Payment Links.
- Reasoning: A full e-commerce setup is complex. Your immediate need is to process simple payments for a potential lead magnet or initial product, not manage a multi-product inventory.
- How it Works: In Stripe, you can create a “product” (e.g., “$MART DEBT Myths eBooklet - Branded Version”) and generate a simple URL. You put this link on a button on your website. The user clicks, pays on a secure Stripe-hosted page, and you get notified. This is a 95% solution with 5% of the effort.
- Automation: You can use an n8n webhook to listen for successful Stripe payments and automatically email the buyer their PDF, add them to a specific email list in Sendy, and update your CRM.

5. Issue: US vs. Canada Content

Decision: Phase 1 is 100% US-focused.
- Reasoning: Your own strategic plan states a “~100% focus on U.S. Advisor Education.” Honor that to simplify the launch.
- Implementation: Build the sdc.com site without the i18n routing initially. All content will live in src/content/... not src/content/us/en/.... You can refactor to the full i18n structure (/us/en/, /ca/en/) in Phase 2 when you’re ready to launch Canadian-specific content. Build the foundation for one country first.

The SDC.com Phase 1 MVP: A Concrete Plan

Website Pages (4-5 Total):

Home Page:
- Headline: Your condensed vision: “A future where average investors confidently increase wealth…”
- Sub-headline: What you do: “We provide client-first education and marketing systems for U.S. financial advisors on $MART DEBT strategies.”
- Primary CTA: A large button/section for your lead magnet: “Download the Free ‘$MART DEBT Myths’ eBooklet”.
- Mission/Pledge: A section briefly explaining the mission and the 50% pledge.
- For Advisors: Briefly list the benefits from your USP (objective education, marketing systems, etc.).
About/Mission Page:
- A dedicated page expanding on your mission, vision, and pledge. Include your story. This builds trust and connection.
“Myths” eBooklet Landing Page:
- A simple squeeze page dedicated to the lead magnet.
- Form: Name, Email, Country (Dropdown: United States, Canada, Other). This is critical for segmentation.
- This form submits to Web3Forms, which triggers an n8n workflow to deliver the PDF and add the contact to Sendy.
Blog (Placeholder):
- Create a single “Hello World” or “Welcome to the Mission” blog post. This sets up the structure and shows the site is active. You don’t need 10 posts to launch.
(Optional) Contact Page: A simple page with an email link.

Phase 1 Technical Objectives:

Set up the monorepo structure as planned.
Initialize the sdc.com site using an Astro/Svelte/Tailwind starter.
Build the 4-5 pages above using Shadcn-Svelte components.
Set up the lead capture flow: HTML Form -> Web3Forms -> n8n -> Sendy/EspoCRM.
Host the static site on Cloudflare Pages.
Point sdc.com domain to the Cloudflare Pages deployment.

Your 7-Step Action Plan to Launch

Lock In Decisions (1 Day): Formally commit to the “good enough for now” plan: Blue theme, current logo, focus on the US, and Stripe Payment Links for any paid items. Write it down.
Tech Foundation Setup (2-3 Days):
- Create the GitHub monorepo.
- Set up the pnpm-workspace.yaml.
- Initialize the sites/sdc.com project using an Astro starter template.
- Install shadcn-svelte and its dependencies.
- Deploy the “hello world” starter to Cloudflare Pages to ensure the pipeline works.
Build Core Pages (3-5 Days):
- Create the file structure for the 4-5 MVP pages.
- Use Svelte Shadcn Blocks and your own content to build out the static pages. Focus on clear copy, not complex design.
Write Lead Magnet Content (2-3 Days):
- Draft the content for the “$MART DEBT Myths” eBooklet. It doesn’t need to be a 50-page book. A well-designed 10-page PDF is perfect.
Integrate Lead Capture (2 Days):
- Create the opt-in form.
- Set up the Web3Forms endpoint.
- Build the n8n workflow to catch the form submission, add the user to a “US Advisors” list in Sendy, and email the PDF from your server (or via a Cloudflare R2 link).
Final Review (1 Day):
- Test the form flow end-to-end.
- Proofread all copy.
- Check mobile and desktop views.
LAUNCH.
- Announce it to your existing network. Start directing people to the site.

This focused plan is achievable in a few weeks, not months. It gets you online, allows you to start collecting leads, and provides the “beachhead” you need to build your empire. The rest of your excellent, detailed planning in Plan.md and Web Tech Stack.md becomes the roadmap for Phase 2, fueled by the momentum and feedback from your successful launch.

Excellent. This is exactly the kind of focused decision-making that builds momentum. Deferring Stripe and leveraging existing book content for the lead magnet is a brilliant move—it dramatically simplifies Phase 1 and gets you to the launch line faster.

The discovery of the Shadcn MCP server is a game-changer for UI development. It allows us to describe the components we need, and the AI (me) can generate the fluid, responsive Svelte code for you to drop directly into your project.

Action Plan, Phase 1

High-Level Plan: From Zero to a Live Foundation

We’ll break this down into three logical phases for this task:

Phase 1: Foundation & Structure: Set up the monorepo, initialize the Astro project, and deploy a “blank slate” to Cloudflare to confirm the CI/CD pipeline works.
Phase 2: Styling & Core Components: Configure the global styling with your brand colors and Utopia’s fluid design principles. Build the core layout components (Header, Footer).
Phase 3: Building the MVP Pages: Create the initial pages using the Shadcn MCP server to accelerate component generation.

Phase 1: Foundation & Structure (The “Scaffolding”)

Goal: Create the project structure and deploy a starter page.

Step 1.1: Create the Monorepo Root

On your local machine, create the main project folder and initialize it with pnpm.

mkdir smart-debt-monorepo
cd smart-debt-monorepo
pnpm init

Step 1.2: Configure the PNPM Workspace

Create a file named pnpm-workspace.yaml in the root of your smart-debt-monorepo folder. This tells pnpm where to find the individual projects (your websites).

packages:
  - 'sites/*'
  - 'packages/*'

Step 1.3: Create the Astro Project for sdc.com

Now, from the root of the monorepo, use pnpm to run Astro’s creator CLI.

# Make sure you are in the smart-debt-monorepo directory
pnpm create astro@latest sites/sdc.com

You will be prompted with several questions. Choose the following:

Where should we create your new project? sites/sdc.com (this should be pre-filled)
How would you like to start your new project? A few best practices (recommended)
Install dependencies? Yes
Do you plan to write TypeScript? Strict (recommended)
Initialize a new git repository? No (You will initialize one for the entire monorepo later).

Step 1.4: Add Svelte and Tailwind Integrations

Navigate into your new site’s directory and add the necessary Astro integrations.

cd sites/sdc.com
pnpm astro add svelte
pnpm astro add tailwind

Follow the prompts for each. It will automatically update your astro.config.mjs file.

Step 1.5: Git and Initial Cloudflare Deployment

Now, set up Git and push to GitHub/GitLab.

# Go back to the monorepo root
cd ../../

# Now initialize the git repository for the whole project
git init
git add .
git commit -m "feat: initial project structure with sdc.com Astro site"

# Create a new repository on GitHub and then run:
git remote add origin <YOUR_GITHUB_REPOSITORY_URL>
git branch -M main
git push -u origin main

Finally, log into your Cloudflare Pages account, connect it to this new GitHub repository, and configure the build settings:

Project Name: smart-debt-coach
Production Branch: main
Framework Preset: Astro
Build command: pnpm build
Build output directory: /dist
Root Directory: sites/sdc.com <— This is CRITICAL!

Deploy the site. In a few minutes, the default Astro starter page will be live on a *.pages.dev URL. This confirms your foundation and deployment pipeline are working.

Build the sdc.com site without the i18n routing initially. All content will live in src/content/... not src/content/us/en/.... You can refactor to the full i18n structure (/us/en/, /ca/en/) in Phase 2

Phase 2: Styling & Core Components (The “Design System”)

Goal: Implement your brand’s look and feel.

Step 2.1: Generate Fluid Design Tokens with Utopia

Go to the Utopia Fluid Type Scale Calculator.
Set your base parameters. Good starting points:
- Min width: 320px
- Max width: 1240px
- Min font size: 16px
- Max font size: 20px
- Min type scale: 1.2 (Major Third)
- Max type scale: 1.25
Go to the Utopia Fluid Space Calculator and generate spacing tokens.
Click “Get CSS” and copy the generated CSS variables.

Step 2.2: Configure Global CSS

Paste the Utopia CSS variables into sites/sdc.com/src/styles/global.css. Then, add your theme colors and other base styles.

/* UTOPIA CSS VARIABLES GO HERE */
:root {
  /* Paste all --step-x variables from Utopia */

  /* FLUID SPACE VARIABLES FROM UTOPIA GO HERE */
  /* Paste all --space-x variables from Utopia */
}

/* YOUR THEME AND BRAND VARIABLES */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;

  /* Your chosen BLUE theme */
  --primary: 210 40% 50%; /* A nice, trustworthy blue */
  --primary-foreground: 210 40% 98%;

  /* Other shadcn variables... */
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;

  /* etc... */

  --radius: 0.5rem;
}

/* A few base styles */
body {
  font-family: system-ui, sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

h1, h2, h3, h4 {
  font-weight: 700;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
/* etc... */

Step 2.3: Initialize Shadcn-Svelte

In your terminal, from the sites/sdc.com directory, run the shadcn-svelte init command.

npx shadcn-svelte@latest init

It will ask you questions to configure components.json. Point it to your global.css file and use CSS Variables for colors.

Step 2.4: Integrate Utopia with Tailwind

Open sites/sdc.com/tailwind.config.mjs and extend the theme to use your new fluid variables. This is the key to making everything responsive.

import { fontFamily } from "tailwindcss/defaultTheme";

/** @type {import('tailwindcss').Config} */
const config = {
  // ... (other shadcn config)
  theme: {
    container: {
      // ...
    },
    extend: {
      colors: {
        // ... (shadcn colors)
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      fontFamily: {
        sans: [...fontFamily.sans],
      },
            //  THIS IS THE UTOPIA INTEGRATION
            fontSize: {
                'step--2': 'var(--step--2)',
                'step--1': 'var(--step--1)',
                'step-0': 'var(--step-0)',
                'step-1': 'var(--step-1)',
                'step-2': 'var(--step-2)',
                'step-3': 'var(--step-3)',
                'step-4': 'var(--step-4)',
                'step-5': 'var(--step-5)',
            },
            spacing: {
                'space-3xs': 'var(--space-3xs)',
                'space-2xs': 'var(--space-2xs)',
                'space-xs': 'var(--space-xs)',
                'space-s': 'var(--space-s)',
                'space-m': 'var(--space-m)',
                'space-l': 'var(--space-l)',
                // ... add all your space sizes
            }
    },
  },
};

export default config;

Phase 3: Building the MVP Pages

Goal: Create the homepage and lead magnet landing page.

Step 3.1: Create a Base Layout

In sites/sdc.com/src/layouts/, create a BaseLayout.astro file. This will contain your header, footer, and basic SEO meta tags. We can build these components as we go.

Step 3.2: Build the Homepage (index.astro)

This is where the Shadcn MCP Server becomes your superpower.

Define a component in words: “I need a hero section for a financial education website. The main heading should be ‘$MART DEBT Mission’. The subheading should be ‘Helping US financial advisors…’ and it needs a primary call-to-action button that says ‘Download Free Chapters’ and a secondary button that says ‘Learn More’.”
Generate with MCP: (Assuming you have me or another MCP-enabled assistant) I will provide the Svelte component code generated by the server.
Implement:
- Save the generated code as HeroSection.svelte in src/components/.
- Add the shadcn components it requires (e.g., Button) using the CLI: npx shadcn-svelte@latest add button.
- Import and use the component in sites/sdc.com/src/pages/index.astro.

Your index.astro might look this simple:

---
import BaseLayout from '../layouts/BaseLayout.astro';
import HeroSection from '../components/marketing/HeroSection.svelte';
import FeaturesSection from '../components/marketing/FeaturesSection.svelte';
---

<BaseLayout title="Smart Debt Coach" description="Client-first education for US financial advisors.">
    <main>
        <HeroSection client:load />
        <FeaturesSection client:load />
        <!-- ... other sections ... -->
    </main>
</BaseLayout>

Repeat this process for other sections of the homepage (features, mission statement preview, etc.).

UI Design Modeling (from Mobbin.com)

Here are a few sites on Mobbin that serve as excellent models for your brand’s goals:

Stripe
- Why it’s a good model: It’s the gold standard for developer/business tools. It projects immense trust, professionalism, and clarity.
- What to borrow:
  - Clear Value Proposition: The headline is always benefits-driven.
  - Clean Typography: Excellent hierarchy and use of white space. It feels authoritative.
  - Trust Signals: They subtly feature logos of companies that use them. You can feature testimonials or “As seen in” logos.
Vercel
- Why it’s a good model: Like Stripe, it caters to a technical audience but excels at making complex ideas seem simple and powerful.
- What to borrow:
  - Dark/Light Mode: Notice their excellent use of a dark theme. While you’re starting with blue/light, your CSS variable setup makes this easy to add later.
  - Feature Grids: They use clean, icon-driven grids to explain what their product does. This is perfect for your “Education and Marketing Solutions” section.
Linear
- Why it’s a good model: It’s an example of opinionated, beautiful design that is also highly functional. It feels modern and efficient.
- What to borrow:
  - Subtle Gradients & Accents: While your base is blue, notice how they use subtle gradients and a single bright accent color to draw the eye to CTAs.
  - Minimalism: They don’t waste a single pixel. Every element has a purpose. This aligns with your “efficient and easy” value prop for busy advisors.

Your next step is to execute Phase 1. Get the monorepo built and the starter deployed. Then, we can move on to styling and start generating the Svelte components for your pages. You are on the right track, and the path ahead is clear.