@sfdc-webapps/app-vibe-coding-starter 1.0.2

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@sfdc-webapps/app-vibe-coding-starter",
+  "version": "1.0.2",
+  "description": "Vibe coding starter app template",
+  "license": "ISC",
+  "author": "",
+  "type": "module",
+  "main": "index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "cd dist/digitalExperiences/webApplications/reference-app-vibe-coding-starter && yarn && yarn dev",
+    "test-patch": "npx tsx ../cli/src/index.ts apply-patches packages/reference-app-vibe-coding-starter packages/base-react-app packages/reference-app-vibe-coding-starter/dist --clean",
+    "watch": "npx tsx ../cli/src/index.ts watch-patches packages/reference-app-vibe-coding-starter packages/base-react-app packages/reference-app-vibe-coding-starter/dist --clean"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitest/ui": "^2.1.8",
+    "jsdom": "^25.0.1",
+    "react-dom": "^19.2.1",
+    "react-router": "^7.10.1",
+    "vitest": "^2.1.8"
+  }
+}

package/patches.ts

@@ -0,0 +1,7 @@
+import type { Feature } from '../cli/src/types.js';
+
+const feature: Feature = {
+  dependencies: ['packages/feature-authentication'],
+};
+
+export default feature;

package/template/webApp/src/__inherit__appLayout.tsx

@@ -0,0 +1,9 @@
+import { Outlet } from "react-router";
+
+export default function AppLayout() {
+    return (
+        <>
+            <Outlet />
+        </>
+    );
+}

package/template/webApp/src/components/Footer.test.tsx

@@ -0,0 +1,44 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Footer from './Footer';
+
+describe('Footer', () => {
+  it('renders the section title', () => {
+    render(<Footer />);
+
+    expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
+      'Helpful content for your first build'
+    );
+  });
+
+  it('renders all resource links', () => {
+    render(<Footer />);
+
+    const links = screen.getAllByRole('link');
+    expect(links).toHaveLength(4);
+
+    expect(screen.getByRole('link', { name: /walkthroughs/i })).toHaveAttribute(
+      'href',
+      '#walkthroughs'
+    );
+    expect(screen.getByRole('link', { name: /docs/i })).toHaveAttribute(
+      'href',
+      '#docs'
+    );
+    expect(screen.getByRole('link', { name: /examples/i })).toHaveAttribute(
+      'href',
+      '#examples'
+    );
+    expect(screen.getByRole('link', { name: /xx/i })).toHaveAttribute(
+      'href',
+      '#more'
+    );
+  });
+
+  it('includes icons with each link', () => {
+    const { container } = render(<Footer />);
+
+    const images = container.querySelectorAll('img');
+    expect(images.length).toBeGreaterThan(0);
+  });
+});

package/template/webApp/src/components/Footer.tsx

@@ -0,0 +1,71 @@
+import type React from 'react';
+import bookIcon from '@assets/icons/book.svg';
+import rocketIcon from '@assets/icons/rocket.svg';
+import starIcon from '@assets/icons/star.svg';
+
+export default function Footer() {
+  return (
+    <section style={styles.resourcesSection}>
+      <h2 style={styles.resourcesTitle}>
+        Helpful content for your first build
+      </h2>
+      <div style={styles.resourcesLinks}>
+        <a href="#walkthroughs" style={styles.resourceLink}>
+          <img src={starIcon} alt="" width="16" height="16" />
+          <span>Walkthroughs</span>
+        </a>
+        <a href="#docs" style={styles.resourceLink}>
+          <img src={bookIcon} alt="" width="16" height="16" />
+          <span>Docs</span>
+        </a>
+        <a href="#examples" style={styles.resourceLink}>
+          <img src={rocketIcon} alt="" width="16" height="16" />
+          <span>Examples</span>
+        </a>
+        <a href="#more" style={styles.resourceLink}>
+          <img src={rocketIcon} alt="" width="16" height="16" />
+          <span>XX</span>
+        </a>
+      </div>
+    </section>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  resourcesSection: {
+    position: 'relative',
+    background:
+      'linear-gradient(rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.5))',
+    border: '2px solid #055fff',
+    borderRadius: '100px',
+    padding: '56px 64px',
+    marginTop: '64px',
+    marginBottom: '4rem',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '24px',
+    backdropFilter: 'blur(24px)',
+    WebkitBackdropFilter: 'blur(24px)',
+  },
+  resourcesTitle: {
+    fontSize: '24px',
+    fontWeight: 600,
+    lineHeight: 'normal',
+    color: '#002775',
+    margin: 0,
+  },
+  resourcesLinks: {
+    display: 'flex',
+    gap: '64px',
+    alignItems: 'center',
+  },
+  resourceLink: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    fontSize: '16px',
+    color: '#002775',
+    textDecoration: 'none',
+    transition: 'opacity 0.2s ease',
+  },
+};

package/template/webApp/src/components/Hero.test.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Hero from './Hero';
+
+describe('Hero', () => {
+  it('renders heading and default image', () => {
+    render(<Hero heading="Welcome to Vibe Coding" />);
+
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent(
+      'Welcome to Vibe Coding'
+    );
+    expect(screen.getByRole('img')).toBeInTheDocument();
+  });
+
+  it('renders with subtext when provided', () => {
+    render(<Hero heading="Test" subtext="This is a subtext" />);
+
+    expect(screen.getByText('Test')).toBeInTheDocument();
+    expect(screen.getByText('This is a subtext')).toBeInTheDocument();
+  });
+
+  it('accepts custom image and alt text', () => {
+    render(
+      <Hero heading="Test" image="/custom-image.png" imageAlt="Custom Alt" />
+    );
+
+    const img = screen.getByAltText('Custom Alt');
+    expect(img).toHaveAttribute('src', '/custom-image.png');
+  });
+
+  it('supports JSX content in heading and subtext', () => {
+    const heading = (
+      <>
+        Welcome <strong>Hero</strong>
+      </>
+    );
+    const subtext = (
+      <span>
+        Get <em>started</em>
+      </span>
+    );
+
+    render(<Hero heading={heading} subtext={subtext} />);
+
+    expect(screen.getByText('Hero')).toBeInTheDocument();
+    expect(screen.getByText('started')).toBeInTheDocument();
+  });
+});

package/template/webApp/src/components/Hero.tsx

@@ -0,0 +1,61 @@
+import type React from 'react';
+import vibeCodey from '@assets/images/vibe-codey.svg';
+
+interface HeroProps {
+  heading: React.ReactNode;
+  subtext?: React.ReactNode;
+  image?: string;
+  imageAlt?: string;
+}
+
+export default function Hero({
+  heading,
+  subtext,
+  image = vibeCodey,
+  imageAlt = 'Agentforce',
+}: HeroProps) {
+  return (
+    <section style={styles.heroSection}>
+      <div style={styles.heroImageContainer}>
+        <img src={image} alt={imageAlt} style={styles.heroImage} />
+      </div>
+      <h1 style={styles.heroHeading}>{heading}</h1>
+      {subtext && <p style={styles.heroSubtext}>{subtext}</p>}
+    </section>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  heroSection: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    paddingTop: '4rem',
+    paddingBottom: '4rem',
+    textAlign: 'center',
+  },
+  heroImageContainer: {
+    marginBottom: '2rem',
+    position: 'relative',
+  },
+  heroImage: {
+    width: '100%',
+    maxWidth: '383px',
+    height: 'auto',
+  },
+  heroHeading: {
+    fontSize: '4rem',
+    fontWeight: 700,
+    lineHeight: 1.2,
+    marginBottom: '1.5rem',
+    color: 'var(--on-surface-3)',
+    maxWidth: '800px',
+  },
+  heroSubtext: {
+    fontSize: '1.25rem',
+    lineHeight: 1.6,
+    color: 'var(--on-surface-3)',
+    maxWidth: '100%',
+    margin: '0 auto',
+  },
+};

package/template/webApp/src/components/PromptCard.test.tsx

@@ -0,0 +1,71 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import PromptCard from './PromptCard';
+
+describe('PromptCard', () => {
+  beforeEach(() => {
+    // Mock clipboard API for tests
+    Object.defineProperty(navigator, 'clipboard', {
+      value: {
+        writeText: vi.fn(() => Promise.resolve()),
+      },
+      writable: true,
+      configurable: true,
+    });
+
+    // Mock isSecureContext to true so the modern clipboard API is used
+    Object.defineProperty(window, 'isSecureContext', {
+      value: true,
+      writable: true,
+      configurable: true,
+    });
+  });
+
+  it('renders title, description, and prompt text', () => {
+    render(
+      <PromptCard
+        title="Create a component"
+        description="Build a React component"
+        promptText="Generate a button component"
+      />
+    );
+
+    expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
+      'Create a component'
+    );
+    expect(screen.getByText('Build a React component')).toBeInTheDocument();
+    expect(screen.getByText('Generate a button component')).toBeInTheDocument();
+  });
+
+  it('renders a clickable copy button', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <PromptCard
+        title="Test"
+        description="Description"
+        promptText="Copy this text"
+      />
+    );
+
+    const button = screen.getByRole('button', { name: /copy prompt/i });
+    expect(button).toBeInTheDocument();
+
+    await expect(user.click(button)).resolves.not.toThrow();
+  });
+
+  it('handles long prompt text', () => {
+    const longPrompt = 'A'.repeat(500);
+
+    render(
+      <PromptCard
+        title="Test"
+        description="Description"
+        promptText={longPrompt}
+      />
+    );
+
+    expect(screen.getByText(longPrompt)).toBeInTheDocument();
+  });
+});

package/template/webApp/src/components/PromptCard.tsx

@@ -0,0 +1,307 @@
+import type React from 'react';
+import copyIcon from '@assets/icons/copy.svg';
+
+interface PromptCardProps {
+  title: string;
+  description: string;
+  promptText: string;
+}
+
+interface ListItem {
+  content: string;
+  subItems: string[];
+}
+
+function renderMarkdown(text: string): React.ReactNode {
+  const lines = text.split('\n');
+  const elements: React.ReactNode[] = [];
+  let bulletItems: string[] = [];
+  let numberedItems: ListItem[] = [];
+
+  const renderInlineMarkdown = (line: string): React.ReactNode => {
+    // Handle bold text with **
+    const parts: React.ReactNode[] = [];
+    const boldRegex = /\*\*(.+?)\*\*/g;
+    let lastIndex = 0;
+    let match;
+
+    while ((match = boldRegex.exec(line)) !== null) {
+      if (match.index > lastIndex) {
+        parts.push(line.slice(lastIndex, match.index));
+      }
+      parts.push(
+        <strong key={match.index} style={markdownStyles.bold}>
+          {match[1]}
+        </strong>
+      );
+      lastIndex = match.index + match[0].length;
+    }
+
+    if (lastIndex < line.length) {
+      parts.push(line.slice(lastIndex));
+    }
+
+    return parts.length > 0 ? parts : line;
+  };
+
+  const flushBulletList = () => {
+    if (bulletItems.length > 0) {
+      elements.push(
+        <ul key={`ul-${elements.length}`} style={markdownStyles.list}>
+          {bulletItems.map((item, i) => (
+            <li key={i} style={markdownStyles.listItem}>
+              {renderInlineMarkdown(item)}
+            </li>
+          ))}
+        </ul>
+      );
+      bulletItems = [];
+    }
+  };
+
+  const flushNumberedList = () => {
+    if (numberedItems.length > 0) {
+      elements.push(
+        <ol key={`ol-${elements.length}`} style={markdownStyles.numberedList}>
+          {numberedItems.map((item, i) => (
+            <li key={i} style={markdownStyles.listItem}>
+              {renderInlineMarkdown(item.content)}
+              {item.subItems.length > 0 && (
+                <ul style={markdownStyles.nestedList}>
+                  {item.subItems.map((subItem, j) => (
+                    <li key={j} style={markdownStyles.listItem}>
+                      {renderInlineMarkdown(subItem)}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </li>
+          ))}
+        </ol>
+      );
+      numberedItems = [];
+    }
+  };
+
+  const flushAllLists = () => {
+    flushBulletList();
+    flushNumberedList();
+  };
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    // H3 headers (###)
+    if (line.startsWith('### ')) {
+      flushAllLists();
+      elements.push(
+        <h4 key={`h3-${i}`} style={markdownStyles.h3}>
+          {line.slice(4)}
+        </h4>
+      );
+      continue;
+    }
+
+    // H2 headers (##)
+    if (line.startsWith('## ')) {
+      flushAllLists();
+      elements.push(
+        <h3 key={`h2-${i}`} style={markdownStyles.h2}>
+          {line.slice(3)}
+        </h3>
+      );
+      continue;
+    }
+
+    // Numbered list items (1. 2. etc)
+    const numberedMatch = line.match(/^\d+\.\s+(.+)$/);
+    if (numberedMatch) {
+      flushBulletList();
+      numberedItems.push({ content: numberedMatch[1], subItems: [] });
+      continue;
+    }
+
+    // Indented sub-items under numbered list (   - item)
+    const indentedBulletMatch = line.match(/^\s{2,}[-*]\s+(.+)$/);
+    if (indentedBulletMatch && numberedItems.length > 0) {
+      numberedItems[numberedItems.length - 1].subItems.push(
+        indentedBulletMatch[1]
+      );
+      continue;
+    }
+
+    // Top-level unordered list items (- or *)
+    const bulletMatch = line.match(/^[-*]\s+(.+)$/);
+    if (bulletMatch) {
+      flushNumberedList();
+      bulletItems.push(bulletMatch[1]);
+      continue;
+    }
+
+    // Empty lines
+    if (line.trim() === '') {
+      // Don't flush numbered lists on empty lines - they may have more items
+      flushBulletList();
+      continue;
+    }
+
+    // Regular paragraph
+    flushAllLists();
+    elements.push(
+      <p key={`p-${i}`} style={markdownStyles.paragraph}>
+        {renderInlineMarkdown(line)}
+      </p>
+    );
+  }
+
+  flushAllLists();
+  return elements;
+}
+
+const markdownStyles: Record<string, React.CSSProperties> = {
+  h2: {
+    fontSize: '13px',
+    fontWeight: 700,
+    color: 'var(--on-surface-3)',
+    margin: '8px 0 4px 0',
+  },
+  h3: {
+    fontSize: '12px',
+    fontWeight: 600,
+    color: 'var(--on-surface-3)',
+    margin: '8px 0 4px 0',
+  },
+  paragraph: {
+    margin: '0 0 4px 0',
+  },
+  list: {
+    margin: '4px 0',
+    paddingLeft: '16px',
+    listStyleType: 'disc',
+  },
+  numberedList: {
+    margin: '4px 0',
+    paddingLeft: '18px',
+    listStyleType: 'decimal',
+  },
+  nestedList: {
+    margin: '2px 0 2px 0',
+    paddingLeft: '16px',
+    listStyleType: 'disc',
+  },
+  listItem: {
+    margin: '2px 0',
+  },
+  bold: {
+    fontWeight: 600,
+  },
+};
+
+export default function PromptCard({
+  title,
+  description,
+  promptText,
+}: PromptCardProps) {
+  const handleCopy = () => {
+    // Try modern clipboard API first
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard.writeText(promptText).catch(() => {
+        // Fallback if modern API fails
+        fallbackCopy(promptText);
+      });
+    } else {
+      // Use fallback method for restricted environments like VSCode tabs
+      fallbackCopy(promptText);
+    }
+  };
+
+  const fallbackCopy = (text: string) => {
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    textArea.style.position = 'fixed';
+    textArea.style.left = '-999999px';
+    textArea.style.top = '-999999px';
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+    document.execCommand('copy');
+    textArea.remove();
+  };
+
+  return (
+    <div style={styles.promptContent}>
+      <h2 style={styles.promptTitle}>{title}</h2>
+      <p style={styles.promptDescription}>{description}</p>
+      <div style={styles.promptField}>
+        <div style={styles.promptFieldInner}>
+          <div style={styles.promptText}>{renderMarkdown(promptText)}</div>
+          <button
+            type="button"
+            style={styles.copyButton}
+            aria-label="Copy prompt"
+            onClick={handleCopy}
+          >
+            <img src={copyIcon} alt="Copy" width="20" height="20" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  promptContent: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '10px',
+    minWidth: 0,
+  },
+  promptTitle: {
+    fontSize: '36px',
+    fontWeight: 600,
+    lineHeight: 1.03,
+    color: 'var(--on-surface-3)',
+    margin: 0,
+  },
+  promptDescription: {
+    fontSize: '16px',
+    lineHeight: 1.45,
+    color: 'var(--on-surface-3)',
+    margin: 0,
+  },
+  promptField: {
+    border: '2px solid #055fff',
+    borderRadius: '20px',
+    overflow: 'hidden',
+  },
+  promptFieldInner: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: '8px',
+    padding: '18px',
+  },
+  promptText: {
+    flex: 1,
+    fontSize: '12px',
+    fontWeight: 500,
+    lineHeight: 1.4,
+    color: 'var(--on-surface-2)',
+    margin: 0,
+    minHeight: '45px',
+    maxHeight: '150px',
+    overflow: 'auto',
+  },
+  copyButton: {
+    background: 'rgba(3,45,96,0.17)',
+    border: 'none',
+    borderRadius: '58px',
+    padding: '8px',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    transition: 'background 0.2s ease',
+  },
+};

package/template/webApp/src/components/PromptHighlight.test.tsx

@@ -0,0 +1,87 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import PromptHighlight from './PromptHighlight';
+
+describe('PromptHighlight', () => {
+  const defaultProps = {
+    image: '/test-image.png',
+    imageAlt: 'Test Image',
+  };
+
+  it('renders children and image', () => {
+    render(
+      <PromptHighlight {...defaultProps}>
+        <div>Test Content</div>
+      </PromptHighlight>
+    );
+
+    expect(screen.getByText('Test Content')).toBeInTheDocument();
+    expect(screen.getByAltText('Test Image')).toBeInTheDocument();
+  });
+
+  it('positions image on the right by default', () => {
+    const { container } = render(
+      <PromptHighlight {...defaultProps}>
+        <div data-testid="content">Content</div>
+      </PromptHighlight>
+    );
+
+    const layout = container.firstChild as HTMLElement;
+    const children = Array.from(layout.children);
+
+    expect(children[0]).toContainElement(screen.getByTestId('content'));
+    expect(children[1]).toContainElement(screen.getByAltText('Test Image'));
+  });
+
+  it('positions image on the left when specified', () => {
+    const { container } = render(
+      <PromptHighlight {...defaultProps} imagePosition="left">
+        <div data-testid="content">Content</div>
+      </PromptHighlight>
+    );
+
+    const layout = container.firstChild as HTMLElement;
+    const children = Array.from(layout.children);
+
+    expect(children[0]).toContainElement(screen.getByAltText('Test Image'));
+    expect(children[1]).toContainElement(screen.getByTestId('content'));
+  });
+
+  it('supports landscape and square image sizes', () => {
+    const { rerender } = render(
+      <PromptHighlight {...defaultProps} imageSize="landscape">
+        <div>Content</div>
+      </PromptHighlight>
+    );
+
+    let img = screen.getByAltText('Test Image');
+    expect(img.parentElement).toBeInTheDocument();
+
+    rerender(
+      <PromptHighlight {...defaultProps} imageSize="square">
+        <div>Content</div>
+      </PromptHighlight>
+    );
+
+    img = screen.getByAltText('Test Image');
+    expect(img.parentElement).toBeInTheDocument();
+  });
+
+  it('renders complex children content', () => {
+    render(
+      <PromptHighlight {...defaultProps}>
+        <div>
+          <h2>Heading</h2>
+          <p>Paragraph</p>
+          <button type="button">Click me</button>
+        </div>
+      </PromptHighlight>
+    );
+
+    expect(screen.getByText('Heading')).toBeInTheDocument();
+    expect(screen.getByText('Paragraph')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Click me' })
+    ).toBeInTheDocument();
+  });
+});

package/template/webApp/src/components/PromptHighlight.tsx

@@ -0,0 +1,75 @@
+import type React from 'react';
+
+interface PromptHighlightProps {
+  children: React.ReactNode;
+  image: string | React.ReactNode;
+  imageAlt: string;
+  imagePosition?: 'left' | 'right';
+  imageSize?: 'landscape' | 'square';
+}
+
+export default function PromptHighlight({
+  children,
+  image,
+  imageAlt,
+  imagePosition = 'right',
+  imageSize = 'landscape',
+}: PromptHighlightProps) {
+  const imageContainerStyle =
+    imageSize === 'square'
+      ? styles.promptImageContainerSquare
+      : styles.promptImageContainer;
+
+  const imageElement =
+    typeof image === 'string' ? (
+      <div style={imageContainerStyle}>
+        <img src={image} alt={imageAlt} style={styles.promptImage} />
+      </div>
+    ) : (
+      <div style={imageContainerStyle}>{image}</div>
+    );
+
+  return (
+    <div style={styles.layout}>
+      {imagePosition === 'left' ? (
+        <>
+          {imageElement}
+          {children}
+        </>
+      ) : (
+        <>
+          {children}
+          {imageElement}
+        </>
+      )}
+    </div>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  layout: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '20px',
+    width: '100%',
+  },
+  promptImageContainer: {
+    flexShrink: 0,
+    width: '480px',
+    height: '250px',
+    overflow: 'hidden',
+    borderRadius: '8px',
+  },
+  promptImageContainerSquare: {
+    flexShrink: 0,
+    width: '371px',
+    height: '371px',
+    overflow: 'hidden',
+    borderRadius: '8px',
+  },
+  promptImage: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain',
+  },
+};

package/template/webApp/src/index.tsx

@@ -0,0 +1,135 @@
+import codey1 from '@assets/images/codey-1.png';
+import codey3 from '@assets/images/codey-3.png';
+// import Footer from '@components/Footer';
+import Hero from '@components/Hero';
+import PromptCard from '@components/PromptCard';
+import PromptHighlight from '@components/PromptHighlight';
+
+import '@styles/global.css';
+
+const styles: Record<string, React.CSSProperties> = {
+    container: {
+        position: 'relative',
+        width: '100%',
+        minHeight: '100vh',
+        overflow: 'hidden',
+        background:
+            'linear-gradient(180deg, #EDF4FF 0%, #F6F2FB 50%, #E5B9FE 100%)',
+    },
+    content: {
+        position: 'relative',
+        zIndex: 1,
+        width: '100%',
+        maxWidth: '1100px',
+        margin: '0 auto',
+        padding: '0 2rem',
+    },
+    agentforceText: {
+        background: 'linear-gradient(135deg, #5867E8 0%, #E5B9FE 100%)',
+        WebkitBackgroundClip: 'text',
+        WebkitTextFillColor: 'transparent',
+        backgroundClip: 'text',
+    },
+    newProjectLink: {
+        color: 'var(--on-surface-3)',
+        textDecoration: 'underline',
+        fontWeight: 500,
+    },
+    promptsSection: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '100px',
+        paddingBottom: '4rem',
+    },
+    toast: {
+        position: 'fixed' as const,
+        bottom: '2rem',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        background: '#c62828',
+        color: 'white',
+        padding: '1rem 2rem',
+        borderRadius: '8px',
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+        zIndex: 1000,
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.75rem',
+        animation: 'slideUp 0.3s ease',
+    },
+    toastCloseButton: {
+        background: 'transparent',
+        border: 'none',
+        color: 'white',
+        cursor: 'pointer',
+        fontSize: '1.25rem',
+        padding: '0',
+        lineHeight: 1,
+    },
+};
+
+export default function Home(): React.ReactElement {
+
+    return (
+        <div style={styles.container}>
+            <div style={styles.content}>
+                <Hero
+                    heading={
+                        <>
+                            Try Building React with{' '}
+                            <span style={styles.agentforceText}>Agentforce</span>
+                        </>
+                    }
+                    subtext={
+                        <>
+                            Get started with the example prompts below or start fresh with a{' '}
+                            <a href="#new-project" style={styles.newProjectLink}>
+                                new project
+                            </a>
+                        </>
+                    }
+                />
+
+                <section style={styles.promptsSection}>
+                    <PromptHighlight
+                        image={codey1}
+                        imageAlt="Dark Mode Example"
+                        imagePosition="right"
+                        imageSize="landscape"
+                    >
+                        <PromptCard
+                            title="Create a Dark Mode"
+                            description="Instantly add a Dark Mode switch that updates your app's background, text, and accent colors."
+                            promptText="Add a Dark Mode to my app that updates background, text, and accent colors when toggled, with a smooth, polished animation for the transition.
+
+### Dark Mode Toggle
+
+A sliding switch should be placed in the top right of the index page. The switch should slide between sun and moon icons. When the moon icon is selected, Dark Mode should be displayed, and when the sun icon is selected, Light Mode (the current color scheme) should be selected.
+
+### Colors
+
+The word **Agentforce** in the heading is a gradient. The app's background is also a gradient. In Dark Mode these two gradients should complement each other, as they do in light mode. Also keep in mind the colors of the various SVG images on the page. These images need to look good in Dark mode.
+
+Be sure to also change the footer background. Remember to change every component's foreground and background color to appropriately contrast with the Dark mode background."
+                        />
+                    </PromptHighlight>
+
+                    <PromptHighlight
+                        image={codey3}
+                        imageAlt="Animations Example"
+                        imagePosition="right"
+                        imageSize="square"
+                    >
+                        <PromptCard
+                            title="Add animations to give personality"
+                            description="Bring your UI to life and give it personality with animations. Send the prompt to the agent to see the magic happen."
+                            promptText="Animate the sections of this page to fly in from the sides on load. when you finish reload the page to show the animations"
+                        />
+                    </PromptHighlight>
+                </section>
+
+                {/* <Footer /> */}
+            </div>
+        </div>
+    );
+}

package/template/webApp/src/pages/__delete__About.tsx

@@ -0,0 +1,7 @@
+export default function About() {
+    return (
+        <div>
+            <h1>About</h1>
+        </div>
+    );
+}

package/template/webApp/src/routes.tsx

@@ -0,0 +1,22 @@
+import type { RouteObject } from "react-router";
+import Home from ".";
+import AppLayout from "./__inherit__appLayout";
+import About from "./pages/__delete__about";
+
+export const routes: RouteObject[] = [
+  {
+    path: '/',
+    element: <AppLayout/>,
+    children: [
+      {
+        index: true,
+        element: <Home />,
+        handle: { showInNavigation: true, label: 'Home' }
+      },
+      {
+        path: '__delete__about',
+        element: <About />,
+      }
+    ]
+  }
+]

package/template/webApp/src/styles/__append__global.css

@@ -0,0 +1,176 @@
+
+:root {
+  /* Salesforce Design Tokens - Colors */
+  --constant-white: #ffffff;
+  --vibrant-purple-95: #f6f2fb;
+  --electric-blue-50: #066afe;
+  --electric-blue-40: #0250d9;
+  --electric-blue-20: #002775;
+  --electric-blue-95: #edf4ff;
+  --vibrant-violet-80: #e5b9fe;
+  --indigo-50: #5867e8;
+  --indigo-30: #2f2cb7;
+  --indigo-90: #e0e5f8;
+  --hot-orange-65: #ff784f;
+  --hot-orange-80: #feb9a5;
+  --aubergine: #df9ff4;
+  --soft-contrast-gray: #f3f3f3;
+  --on-surface-3: #03234d;
+  --on-surface-2: #2e2e2e;
+
+  /* Typography */
+  font-family:
+    'SF Pro',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  /* Color scheme */
+  color-scheme: light;
+  color: var(--on-surface-3);
+  background-color: var(--constant-white);
+
+  /* Rendering optimizations */
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-size-adjust: 100%;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+#root {
+  width: 100%;
+  margin: 0 auto;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0 0 1rem 0;
+}
+
+a {
+  font-weight: 500;
+  color: var(--electric-blue-50);
+  text-decoration: inherit;
+  transition: color 0.2s ease-in-out;
+}
+
+a:hover {
+  color: var(--electric-blue-40);
+}
+
+a:focus-visible {
+  outline: 2px solid var(--electric-blue-50);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: var(--electric-blue-50);
+  color: white;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+button:hover {
+  background-color: var(--electric-blue-40);
+  transform: translateY(-1px);
+}
+
+button:active {
+  transform: translateY(0);
+}
+
+button:focus,
+button:focus-visible {
+  outline: 2px solid var(--electric-blue-50);
+  outline-offset: 2px;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+code {
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.9em;
+}
+
+pre {
+  background-color: rgba(255, 255, 255, 0.05);
+  padding: 1em;
+  border-radius: 8px;
+  overflow-x: auto;
+}
+
+pre code {
+  background-color: transparent;
+  padding: 0;
+}
+
+/* Smooth scrolling for better UX */
+html {
+  scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Image optimization */
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Focus styles for accessibility */
+:focus-visible {
+  outline: 2px solid var(--electric-blue-50);
+  outline-offset: 2px;
+}
+
+/* Selection styling */
+::selection {
+  background-color: var(--electric-blue-50);
+  color: white;
+}

package/template/webApp/src/testCmp.tsx

@@ -0,0 +1,9 @@
+import AppLayout from "./__inherit__appLayout";
+
+export default function TestCmp() {
+    return (
+        <div>
+            <AppLayout />
+        </div>
+    );
+}

package/tsconfig.app.json

@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    /* Path mapping */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./template/webApp/src/*"],
+      "@api/*": ["./template/webApp/src/api/*"],
+      "@components/*": ["./template/webApp/src/components/*"],
+      "@utils/*": ["./template/webApp/src/utils/*"],
+      "@styles/*": ["./template/webApp/src/styles/*"],
+      "@assets/*": ["./template/webApp/src/assets/*"]
+    }
+  },
+  "include": ["./template/webApp/src"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,41 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import { resolve } from 'path';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig(({ mode }) => {
+  return {
+    plugins: [tailwindcss(), react()],
+
+    // Build configuration
+    build: {
+      outDir: resolve(__dirname, 'dist'),
+      assetsDir: 'assets',
+      sourcemap: false,
+    },
+
+    // Resolve aliases (shared between build and test)
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './template/src'),
+        '@api': path.resolve(__dirname, './template/src/api'),
+        '@components': path.resolve(__dirname, './template/src/components'),
+        '@utils': path.resolve(__dirname, './template/src/utils'),
+        '@styles': path.resolve(__dirname, './template/src/styles'),
+        '@assets': path.resolve(__dirname, './template/src/assets'),
+      },
+    },
+
+    // Vitest configuration
+    test: {
+      root: resolve(__dirname),
+      environment: 'jsdom',
+      include: [
+        'template/src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
+        'template/src/**/__tests__/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
+      ],
+      globals: true,
+    },
+  };
+});