index.html

---
layout: default
title: 'Inspired Workspaces'

cta_link: 'https://app.acuityscheduling.com/schedule.php?owner=12094610&calendarID=489881'
---
<div class="video__container">
	<video class="video" autoplay loop muted poster="{{ site.baseurl }}/assets/img/banner.jpg">
		<source src="{{ site.baseurl }}/assets/vid/catalyst-timelapse.webm" type="video/webm">
		<source src="{{ site.baseurl }}/assets/vid/catalyst-timelapse.mp4" type="video/mp4">
	</video>
</div>
<header class="banner" role="banner">
	<a class="btn btn--login" href="https://CatalystSpaces.spaces.nexudus.com/en/profile" target="_blank">Member Login</a>
	<h1 class="logo">
		<img class="logo__img" src="{{ site.baseurl }}/assets/img/catalyst-logo.svg" alt="Catalyst Inspired Workspaces">
	</h1>
	<ul class="list list--featured">
		<li class="list__item">
			<i class="fa fa-plus"></i>Flexible, month-to-month coworking spaces
		</li>
		<li class="list__item">
			<i class="fa fa-plus"></i>A diverse community of interesting, helpful entrepreneurs
		</li>
		<li class="list__item">
			<i class="fa fa-plus"></i>Resources to help you and your business grow
		</li>
	</ul>
	<a class="btn btn--primary" href="{{ page.cta_link }}" target="_blank" id="firstCtaBtn">
		Schedule a Tour
	</a>
</header>

<main role="main">
	<section id="amenities">
		<h2 class="heading">Amenities</h2>
		<p class="subheading u-hidden--laptop">Tap for details</p>
		<ul class="amenity-list">
			{% for amenity in site.data.amenities %}
				{% if amenity.info %}
					<!-- example of amenity -->
					<li class="amenity" 
					    style="background-image: url({{ site.baseurl }}/assets/img/{{ amenity.img }}.jpg)">
						<div class="amenity__overlay">
							<h4 class="amenity__title">{{ amenity.title }}</h4>
							<p class="amenity__info">{{ amenity.info }}</p>
						</div>
					</li>
				{% else %}
					<!-- example of small amenity -->
					<li class="amenity amenity--small">
						<h4 class="amenity__title">{{ amenity.title }}</h4>
					</li>
				{% endif %}
			{% endfor %}
		</ul>
	</section>

	<section id="realtalk">
		<h2 class="heading">#realtalk</h2>
		<ul class="quote-list">
			{% for quote in site.data.quotes %}
				<li class="quote">
					<div class="avatar">
						<img class="avatar__person" 
						     src="{{ site.baseurl }}/assets/img/{{ quote.av-person }}.jpg">
						<img class="avatar__company" 
						     src="{{ site.baseurl }}/assets/img/{{ quote.av-company }}.jpg">
					</div>
					<h4 class="quote__byline">
						{{ quote.person }}
						<span class="quote__byline--company">{{ quote.company }}</span>
					</h4>
					<blockquote class="quote__quote">
						{{ quote.quote }}
					</blockquote>
				</li>
			{% endfor %}
		</ul>
		<!--<a class="btn btn--secondary" href="#">Join the Community</a>-->
	</section>

	<section id="memberships">
		<h2 class="heading">Memberships</h2>
		<p class="subheading">Different spaces and prices<br>depending on your needs</p>
		<ul class="card-list">
			{% for m in site.data.memberships %}
				<li class="card">
					<header class="card__header">
						<img class="card__icon" src="{{ site.baseurl }}/assets/img/{{ m.icon }}.svg">
						<h4 class="card__title">{{ m.title }}</h4>
						<p class="card__subtitle">{{ m.subtitle }}</p>
					</header>
					<div class="card__body">
						<p>{{ m.body }}</p>
						{% if m.list %}
							<ul class="card__body--list">
								{% for item in m.list%}
									<li>{{ item }}</li>
								{% endfor %}
							</ul>
						{% endif %}
					</div>
					<footer class="card__footer">
						<span class="card__price">{{ m.price }}</span>
						<button class="card__btn card__btn--ancillary">Details</button>
						{% if m.alt_cta %}
							<a class="card__btn card__btn--cta" href="{{ m.alt_cta_link }}" target="_blank" data-plan="{{ m.title }}">{{ m.alt_cta }}</a>
						{% else %}
							<a class="card__btn card__btn--cta" href="{{ m.payment_link }}" target="_blank" data-plan="{{ m.title }}">Start Plan</a>
						{% endif %}
					</footer>
				</li>
			{% endfor %}
		</ul>
	</section>

	<section id="cta">
		<h2 class="heading">
			The space.<br>
			The people.<br>
			The resources.
		</h2>
		<p class="subheading">Catalyst has what you need to improve yourself and your business.</p>
		<a class="btn btn--primary" href="{{ page.cta_link }}" target="_blank" id="secondCtaBtn">
			Schedule a Tour
		</a>
	</section>
</main>