@finsweet/webflow-apps-utils 1.0.2 → 1.0.4

package/dist/router/examples/pages/AboutPage.svelte

@@ -0,0 +1,568 @@
+<script lang="ts">
+	import type { Router } from '../../router.svelte';
+
+	interface Props {
+		params: Record<string, string>;
+		location: {
+			pathname: string;
+			search: string;
+			params: Record<string, string>;
+		};
+		router: Router;
+	}
+
+	let { params, location, router }: Props = $props();
+
+	// Extract section from params
+	let section = $derived(params.section || null);
+
+	// Section content mapping
+	const sectionContent = {
+		team: {
+			title: 'Our Team',
+			content: 'Meet the talented individuals who make our company great.',
+			items: [
+				{
+					name: 'Alice Johnson',
+					role: 'CEO & Founder',
+					bio: 'Visionary leader with 15+ years experience.'
+				},
+				{ name: 'Bob Smith', role: 'CTO', bio: 'Technical architect passionate about innovation.' },
+				{
+					name: 'Carol Davis',
+					role: 'Lead Designer',
+					bio: 'Creative mind behind our beautiful interfaces.'
+				}
+			]
+		},
+		history: {
+			title: 'Our History',
+			content: 'Learn about our journey from startup to industry leader.',
+			items: [
+				{
+					year: '2018',
+					event: 'Company founded',
+					description: 'Started with a small team and big dreams.'
+				},
+				{
+					year: '2020',
+					event: 'First major product launch',
+					description: 'Released our flagship product to market.'
+				},
+				{
+					year: '2023',
+					event: 'International expansion',
+					description: 'Opened offices in 5 new countries.'
+				}
+			]
+		},
+		mission: {
+			title: 'Our Mission',
+			content: 'We strive to create technology that empowers people and transforms businesses.',
+			items: [
+				{ value: 'Innovation', description: "Always pushing boundaries of what's possible." },
+				{ value: 'Quality', description: 'Delivering excellence in everything we do.' },
+				{ value: 'Integrity', description: 'Building trust through transparent practices.' }
+			]
+		}
+	};
+
+	let currentSection = $derived(
+		(section && sectionContent[section as keyof typeof sectionContent]) || null
+	);
+</script>
+
+<div class="about-page">
+	{#if section && currentSection}
+		<!-- Section-specific content -->
+		<div class="section-header">
+			<button class="back-button" onclick={() => router.navigate('/about')}>
+				← Back to About
+			</button>
+			<h1>{currentSection.title}</h1>
+			<p class="section-description">{currentSection.content}</p>
+		</div>
+
+		<div class="section-content">
+			{#if section === 'team' && currentSection}
+				<div class="team-grid">
+					{#each currentSection.items as member, index (index)}
+						<div class="team-card">
+							<div class="avatar">
+								{#if 'name' in member}
+									{member.name
+										.split(' ')
+										.map((n: string) => n[0])
+										.join('')}
+								{/if}
+							</div>
+							<h3>
+								{#if 'name' in member}
+									{member.name}
+								{/if}
+							</h3>
+							<p class="role">
+								{#if 'role' in member}
+									{member.role}
+								{/if}
+							</p>
+							<p class="bio">
+								{#if 'bio' in member}
+									{member.bio}
+								{/if}
+							</p>
+						</div>
+					{/each}
+				</div>
+			{:else if section === 'history' && currentSection}
+				<div class="timeline">
+					{#each currentSection.items as item, index (index)}
+						<div class="timeline-item">
+							<div class="timeline-year">
+								{#if 'year' in item}
+									{item.year}
+								{/if}
+							</div>
+							<div class="timeline-content">
+								<h3>
+									{#if 'event' in item}
+										{item.event}
+									{/if}
+								</h3>
+								<p>
+									{#if 'description' in item}
+										{item.description}
+									{/if}
+								</p>
+							</div>
+						</div>
+					{/each}
+				</div>
+			{:else if section === 'mission' && currentSection}
+				<div class="values-grid">
+					{#each currentSection.items as value, index (index)}
+						<div class="value-card">
+							<h3>
+								{#if 'value' in value}
+									{value.value}
+								{/if}
+							</h3>
+							<p>
+								{#if 'description' in value}
+									{value.description}
+								{/if}
+							</p>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+
+		<!-- Navigation to other sections -->
+		<div class="section-navigation">
+			<h3>Explore More</h3>
+			<div class="nav-buttons">
+				{#each Object.keys(sectionContent) as key (key)}
+					{#if key !== section}
+						<button class="nav-btn" onclick={() => router.navigate(`/about/${key}`)}>
+							{sectionContent[key as keyof typeof sectionContent].title}
+						</button>
+					{/if}
+				{/each}
+			</div>
+		</div>
+	{:else}
+		<!-- Main about page -->
+		<div class="main-about">
+			<header class="about-header">
+				<h1>About Our Company</h1>
+				<p class="lead">
+					We're a technology company dedicated to building innovative solutions that make a
+					difference in people's lives.
+				</p>
+			</header>
+
+			<div class="about-sections">
+				<h2>Learn More About Us</h2>
+				<div class="sections-grid">
+					<button class="section-card" onclick={() => router.navigate('/about/team')}>
+						<div class="section-icon">👥</div>
+						<h3>Our Team</h3>
+						<p>Meet the passionate people behind our success.</p>
+						<span class="section-link">Learn more →</span>
+					</button>
+
+					<button class="section-card" onclick={() => router.navigate('/about/history')}>
+						<div class="section-icon">📈</div>
+						<h3>Our History</h3>
+						<p>Discover our journey from startup to industry leader.</p>
+						<span class="section-link">Learn more →</span>
+					</button>
+
+					<button class="section-card" onclick={() => router.navigate('/about/mission')}>
+						<div class="section-icon">🎯</div>
+						<h3>Our Mission</h3>
+						<p>Understand the values and principles that guide us.</p>
+						<span class="section-link">Learn more →</span>
+					</button>
+				</div>
+			</div>
+
+			<div class="stats-section">
+				<h2>By the Numbers</h2>
+				<div class="stats-grid">
+					<div class="stat-item">
+						<div class="stat-number">50+</div>
+						<div class="stat-label">Team Members</div>
+					</div>
+					<div class="stat-item">
+						<div class="stat-number">1000+</div>
+						<div class="stat-label">Happy Customers</div>
+					</div>
+					<div class="stat-item">
+						<div class="stat-number">5</div>
+						<div class="stat-label">Countries</div>
+					</div>
+					<div class="stat-item">
+						<div class="stat-number">99.9%</div>
+						<div class="stat-label">Uptime</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	{/if}
+
+	<!-- Debug information -->
+	<div class="debug-section">
+		<h3>Route Debug Information</h3>
+		<div class="debug-info">
+			<p><strong>Current Path:</strong> {location?.pathname}</p>
+			<p><strong>Section Parameter:</strong> {section || 'None'}</p>
+			<p><strong>All Parameters:</strong> {JSON.stringify(params)}</p>
+			<p><strong>Search Query:</strong> {location?.search || 'None'}</p>
+		</div>
+	</div>
+</div>
+
+<style>
+	.about-page {
+		max-width: 100%;
+	}
+
+	/* Main About Page Styles */
+	.about-header {
+		text-align: center;
+		margin-bottom: 3rem;
+	}
+
+	.about-header h1 {
+		font-size: 2.5rem;
+		color: #2c3e50;
+		margin: 0 0 1rem 0;
+		font-weight: 600;
+	}
+
+	.lead {
+		font-size: 1.25rem;
+		color: #6c757d;
+		margin: 0;
+		line-height: 1.6;
+		max-width: 600px;
+		margin: 0 auto;
+	}
+
+	.about-sections h2 {
+		text-align: center;
+		color: #2c3e50;
+		margin-bottom: 2rem;
+		font-size: 2rem;
+	}
+
+	.sections-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		gap: 1.5rem;
+		margin-bottom: 3rem;
+	}
+
+	.section-card {
+		padding: 2rem;
+		border: 1px solid #e1e5e9;
+		border-radius: 12px;
+		background: white;
+		text-align: center;
+		cursor: pointer;
+		transition: all 0.3s ease;
+		width: 100%;
+		font-family: inherit;
+		font-size: inherit;
+	}
+
+	.section-card:hover {
+		transform: translateY(-4px);
+		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+		border-color: #007bff;
+	}
+
+	.section-icon {
+		font-size: 3rem;
+		margin-bottom: 1rem;
+	}
+
+	.section-card h3 {
+		font-size: 1.5rem;
+		color: #2c3e50;
+		margin: 0 0 1rem 0;
+	}
+
+	.section-card p {
+		color: #6c757d;
+		margin: 0 0 1rem 0;
+		line-height: 1.5;
+	}
+
+	.section-link {
+		color: #007bff;
+		font-weight: 500;
+		font-size: 0.9rem;
+	}
+
+	/* Section-specific styles */
+	.section-header {
+		margin-bottom: 3rem;
+	}
+
+	.back-button {
+		background: none;
+		border: 1px solid #ddd;
+		padding: 0.5rem 1rem;
+		border-radius: 6px;
+		cursor: pointer;
+		color: #6c757d;
+		margin-bottom: 1rem;
+		transition: all 0.2s ease;
+	}
+
+	.back-button:hover {
+		background: #f8f9fa;
+		border-color: #adb5bd;
+	}
+
+	.section-header h1 {
+		font-size: 2.5rem;
+		color: #2c3e50;
+		margin: 0 0 1rem 0;
+	}
+
+	.section-description {
+		font-size: 1.25rem;
+		color: #6c757d;
+		margin: 0;
+		line-height: 1.6;
+	}
+
+	/* Team styles */
+	.team-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+		gap: 1.5rem;
+		margin-bottom: 3rem;
+	}
+
+	.team-card {
+		padding: 2rem;
+		border: 1px solid #e1e5e9;
+		border-radius: 12px;
+		background: white;
+		text-align: center;
+	}
+
+	.avatar {
+		width: 80px;
+		height: 80px;
+		border-radius: 50%;
+		background: #007bff;
+		color: white;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 1.5rem;
+		font-weight: 600;
+		margin: 0 auto 1rem auto;
+	}
+
+	.team-card h3 {
+		font-size: 1.25rem;
+		color: #2c3e50;
+		margin: 0 0 0.5rem 0;
+	}
+
+	.role {
+		color: #007bff;
+		font-weight: 500;
+		margin: 0 0 1rem 0;
+	}
+
+	.bio {
+		color: #6c757d;
+		margin: 0;
+		line-height: 1.5;
+		font-size: 0.9rem;
+	}
+
+	/* Timeline styles */
+	.timeline {
+		margin-bottom: 3rem;
+	}
+
+	.timeline-item {
+		display: flex;
+		gap: 2rem;
+		margin-bottom: 2rem;
+		padding: 1.5rem;
+		border: 1px solid #e1e5e9;
+		border-radius: 8px;
+		background: white;
+	}
+
+	.timeline-year {
+		font-size: 1.5rem;
+		font-weight: 600;
+		color: #007bff;
+		min-width: 80px;
+	}
+
+	.timeline-content h3 {
+		font-size: 1.25rem;
+		color: #2c3e50;
+		margin: 0 0 0.5rem 0;
+	}
+
+	.timeline-content p {
+		color: #6c757d;
+		margin: 0;
+		line-height: 1.5;
+	}
+
+	/* Values styles */
+	.values-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+		gap: 1.5rem;
+		margin-bottom: 3rem;
+	}
+
+	.value-card {
+		padding: 2rem;
+		border: 1px solid #e1e5e9;
+		border-radius: 8px;
+		background: #f8f9fa;
+		text-align: center;
+	}
+
+	.value-card h3 {
+		font-size: 1.25rem;
+		color: #2c3e50;
+		margin: 0 0 1rem 0;
+	}
+
+	.value-card p {
+		color: #6c757d;
+		margin: 0;
+		line-height: 1.5;
+	}
+
+	/* Stats section */
+	.stats-section {
+		text-align: center;
+		margin-bottom: 3rem;
+	}
+
+	.stats-section h2 {
+		color: #2c3e50;
+		margin-bottom: 2rem;
+		font-size: 2rem;
+	}
+
+	.stats-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+		gap: 2rem;
+	}
+
+	.stat-item {
+		text-align: center;
+	}
+
+	.stat-number {
+		font-size: 3rem;
+		font-weight: 700;
+		color: #007bff;
+		margin-bottom: 0.5rem;
+	}
+
+	.stat-label {
+		color: #6c757d;
+		font-size: 1rem;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+	}
+
+	/* Section navigation */
+	.section-navigation {
+		margin-bottom: 3rem;
+	}
+
+	.section-navigation h3 {
+		color: #2c3e50;
+		margin-bottom: 1rem;
+	}
+
+	.nav-buttons {
+		display: flex;
+		gap: 1rem;
+		flex-wrap: wrap;
+	}
+
+	.nav-btn {
+		padding: 0.75rem 1.5rem;
+		border: 1px solid #007bff;
+		border-radius: 6px;
+		background: white;
+		color: #007bff;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		font-size: 0.9rem;
+	}
+
+	.nav-btn:hover {
+		background: #007bff;
+		color: white;
+	}
+
+	/* Debug section */
+	.debug-section {
+		background: #f8f9fa;
+		border: 1px solid #e1e5e9;
+		border-radius: 8px;
+		padding: 1.5rem;
+		margin-top: 2rem;
+	}
+
+	.debug-section h3 {
+		margin: 0 0 1rem 0;
+		color: #2c3e50;
+		font-size: 1.125rem;
+	}
+
+	.debug-info p {
+		margin: 0.5rem 0;
+		font-family: 'SFMono-Regular', Consolas, monospace;
+		font-size: 0.875rem;
+		color: #495057;
+	}
+
+	.debug-info strong {
+		color: #2c3e50;
+	}
+</style>

package/dist/router/examples/pages/AboutPage.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Router } from '../../router.svelte';
+interface Props {
+    params: Record<string, string>;
+    location: {
+        pathname: string;
+        search: string;
+        params: Record<string, string>;
+    };
+    router: Router;
+}
+declare const AboutPage: import("svelte").Component<Props, {}, "">;
+type AboutPage = ReturnType<typeof AboutPage>;
+export default AboutPage;