mirror of
https://github.com/Snigdha-OS/Snigdha-OS.github.io.git
synced 2025-09-07 13:15:17 +02:00
74 lines
3.5 KiB
Plaintext
74 lines
3.5 KiB
Plaintext
---
|
|
import DefaultLayout from '../layouts/DefaultLayout.astro'
|
|
import Hero from '../components/Hero.astro'
|
|
import Feature from '../components/Feature.astro'
|
|
import Counter from '../components/Counter.astro'
|
|
import ContentMedia from '../components/ContentMedia.astro'
|
|
---
|
|
|
|
<DefaultLayout title="Home">
|
|
<Hero />
|
|
<section class="my-64">
|
|
<div class="container">
|
|
<h2 class="mb-16 text-6xl">Features</h2>
|
|
<div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
|
|
<Feature icon="mdi:tailwind" title="Tailwind CSS">
|
|
Use the power of Tailwind to greatly improve your productivity and enhance your developer workflow.
|
|
</Feature>
|
|
<Feature icon="mdi:wheelchair-accessibility" title="a11y Components">
|
|
17 components and counting, all tried and tested for the most optimal accessible experience for your visitors.
|
|
</Feature>
|
|
<Feature icon="mdi:looks" title="Prettier">
|
|
Less worry about formatting your code, let the Astro Prettier integration do the heavy lifting.
|
|
</Feature>
|
|
<Feature icon="mdi:eslint" title="ESLint">
|
|
Lint your code with strict a11y settings to ensure you stay on track with the WCAG standards.
|
|
</Feature>
|
|
<Feature icon="mdi:book-open-page-variant" title="Blog">
|
|
This theme comes with a fully integrated blog, dynamic pages and SEO optimization.
|
|
</Feature>
|
|
<Feature icon="mdi:language-markdown" title="Markdown & MDX">
|
|
Easily use .md and .mdx pages to build your websites or use it with Netlify CMS.
|
|
</Feature>
|
|
<Feature icon="mdi:theme-light-dark" title="Dark mode">
|
|
Fully integrated Dark mode gives your users the choice for their favorite viewing mode.
|
|
</Feature>
|
|
<Feature icon="mdi:cog" title="Design System">
|
|
The theme offers some very handy utilities to help you build your website faster.
|
|
</Feature>
|
|
<Feature icon="mdi:lighthouse" title="Lighthouse Scores">
|
|
Excellent lighthouse scores means your website will load faster and get better SEO rankings.
|
|
</Feature>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<ContentMedia imgSrc="/accessible-components.webp">
|
|
<h2>Accessible Components</h2>
|
|
<p class="text-2xl">
|
|
This theme provides plenty of tried and tested Accessible Astro Components. Some are native to this theme and a
|
|
lot of others are integrated using a <a href="https://github.com/markteekman/accessible-astro-components"
|
|
>separate package</a
|
|
>. They'll get you up and running in building an accessible solution for your visitors.
|
|
</p>
|
|
</ContentMedia>
|
|
<ContentMedia imgSrc="/wcag-compliant.webp" reverseImg={true}>
|
|
<h2>WCAG 2.1 AA Compliant</h2>
|
|
<p class="text-2xl">
|
|
Using semantic HTML, landmarks, skip links, screen reader friendly content, aria-labels, keyboard accessible
|
|
navigation and components, clear outlines and tab indicators and the right color contrast, you're more certain of
|
|
reaching WCAG AA compliance.
|
|
</p>
|
|
</ContentMedia>
|
|
<section class="mb-32 mt-64">
|
|
<div class="container">
|
|
<h2 class="mb-16 text-6xl">Counters</h2>
|
|
<div class="grid grid-cols-1 gap-12 sm:grid-cols-2 md:grid-cols-4">
|
|
<Counter count="520" title="Stars" sub="On GitHub" />
|
|
<Counter count="17" title="Accessible" sub="Components" />
|
|
<Counter count="500" title="Commits" sub="Merged" />
|
|
<Counter count="18+" title="Months" sub="Since launch" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</DefaultLayout>
|