index.astro

---
import Layout from '../layouts/Layout.astro';
import Company from '../components/Company.astro';
import CompaniesSection from '../components/CompaniesSection.astro';
import BenefitsSection from '../components/BenefitsSection.astro';
import BenefitCard from '../components/BenefitCard.astro';
import Hero from '../components/Hero.astro';
import CodeSection from '../components/CodeSection.astro';
---

<Layout title="BEM — Block Element Modifier">
	<section>
		<Hero/>
	</section>
	
	<section>
		<CodeSection></CodeSection>
	</section>

	<section>
		<BenefitsSection>
			<BenefitCard color="green" heading="Easy" description="To use BEM, you only need to employ BEM’s naming convention."/>
			<BenefitCard color="blue" heading="Modular" description="Independent blocks and CSS selectors make your code reusable and modular."/>
			<BenefitCard color="red" heading="Flexible" description="Using BEM, methodologies and tools can be recomposed and configured the way you like."/>
		</BenefitsSection>
	</section>

	<section>
		<CompaniesSection>
			<Company href="https://yandex.com" name="Yandex" src={import("../assets/companies/yandex.png")}/>
			<Company href="http://www.jetbrains.com" name="JetBrains" src={import("../assets/companies/jetbrains.png")}/>
			<Company href="http://factory.mn" name="Manufactura" src={import("../assets/companies/manufactura.png")}/>
			<Company href="http://eu.ideus.biz" name="iDeus" src={import("../assets/companies/ideus.png")}/>
			<Company href="http://alfabank.com" name="Alfa-Bank" src={import("../assets/companies/alfabank.png")}/>
			<Company href="http://edster.ru" name="Edster" src={import("../assets/companies/edster.png")}/>
			<Company href="http://www.wimdu.com" name="Wimdu" src={import("../assets/companies/wimdu.png")}/>
			<Company href="http://megafon.com" name="Megafon" src={import("../assets/companies/megafon.png")}/>
			<Company href="http://decaf.de" name="Decaf" src={import("../assets/companies/decaf.png")}/>
			<Company href="http://epam.com" name="EPAM" src={import("../assets/companies/epam.png")}/>
			<Company href="https://renuo.ch" name="Renuo" src={import("../assets/companies/renuo.png")}/>
			<Company href="https://www.searchapi.io/" name="SearchApi" src={import("../assets/companies/searchapi.png")}/>
		</CompaniesSection>
	</section>
</Layout>