Spaces:

---

starfysh

/

systemfoundry

Like 0

Running

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>System Thinking for Startup Founders | Master Complexity</title>

<script src="https://cdn.tailwindcss.com"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>

<!-- Navigation -->

<nav class="bg-white shadow-sm sticky top-0 z-50">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<div class="flex justify-between h-16">

<div class="flex items-center">

<div class="flex-shrink-0 flex items-center">

<i class="fas fa-project-diagram text-purple-600 text-2xl mr-2"></i>

<span class="text-xl font-bold text-gray-900">SystemFoundry</span>

</div>

</div>

<div class="hidden sm:ml-6 sm:flex sm:space-x-8">

<a href="#overview" class="border-purple-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Overview</a>

<a href="#curriculum" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Curriculum</a>

<a href="#instructor" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Instructor</a>

<a href="#testimonials" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Testimonials</a>

</div>

<div class="hidden sm:ml-6 sm:flex sm:items-center">

<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">Enroll Now</button>

</div>

<div class="-mr-2 flex items-center sm:hidden">

<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">

<span class="sr-only">Open main menu</span>

<i class="fas fa-bars"></i>

</button>

</div>

</div>

</div>

<!-- Mobile menu -->

<div class="hidden sm:hidden" id="mobile-menu">

<div class="pt-2 pb-3 space-y-1">

<a href="#overview" class="bg-purple-50 border-purple-500 text-purple-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Overview</a>

<a href="#curriculum" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Curriculum</a>

<a href="#instructor" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Instructor</a>

<a href="#testimonials" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Testimonials</a>

<div class="mt-4 pl-3 pr-4 py-2">

<button class="w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Enroll Now</button>

</div>

</div>

</div>

</nav>

<!-- Hero Section -->

<section class="hero-gradient text-white py-20">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<div class="lg:grid lg:grid-cols-12 lg:gap-8">

<div class="px-4 sm:px-0 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">

<div>

<h1 class="mt-4 text-4xl tracking-tight font-extrabold sm:mt-5 sm:leading-none lg:mt-6 lg:text-5xl xl:text-6xl">

<span class="block">Master Systems Thinking</span>

<span class="block text-purple-200">For Startup Success</span>

</h1>

<p class="mt-3 text-base text-purple-100 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">

Learn how to see the bigger picture, identify leverage points, and build resilient startups that thrive in complex environments.

</p>

<div class="mt-10 sm:flex sm:justify-center lg:justify-start">

<div class="rounded-md shadow">