45 lines
1.4 KiB
Svelte
45 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { getCategoriesWithCounts, calculators } from '$lib/data/calculators';
|
|
import CategoryCard from '$lib/components/CategoryCard.svelte';
|
|
import SearchBar from '$lib/components/SearchBar.svelte';
|
|
|
|
const cats = getCategoriesWithCounts();
|
|
const totalCalculators = calculators.length;
|
|
const totalCategories = cats.length;
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>HowDoYouConvert.com — Free Unit Conversion Calculators</title>
|
|
<meta name="description" content="Convert between hundreds of units instantly. Free online calculators for length, weight, temperature, volume, area, speed, energy, power, data and more." />
|
|
</svelte:head>
|
|
|
|
<section class="hero">
|
|
<h1>How Do You Convert?</h1>
|
|
<p>Fast, bidirectional unit conversions with no ads.</p>
|
|
<div class="search-center">
|
|
<SearchBar />
|
|
</div>
|
|
</section>
|
|
|
|
<div class="stats-row">
|
|
<div class="stat">
|
|
<div class="stat-num">{totalCalculators}</div>
|
|
<div class="stat-label">Converters</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-num">{totalCategories}</div>
|
|
<div class="stat-label">Categories</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="category-section">
|
|
<div class="category-section__inner">
|
|
<h2 class="section-heading">Browse by Category</h2>
|
|
<div class="category-grid">
|
|
{#each cats as cat}
|
|
<CategoryCard icon={cat.icon} label={cat.label} href="/category/{cat.key}" />
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</section>
|