<div class="min-h-[440px] lg:min-h-[max(calc(100vh-160px),700px)] lg:min-h-[max(100vh,700px)] z-0 grid w-full relative overflow-hidden pt-[100px] lg:pt-[130px] pb-26 lg:pb-44">
<div class="h-[250px] absolute top-0 left-0 z-10 w-full hero-gradient pointer-events-none opacity-25"></div>
<div class="bg-brand-gradient absolute w-full left-0 top-0 h-full z-5"></div>
<picture class="w-full h-full top-0 left-0 absolute z-5 ">
<source media="(max-width: 1023px)" srcset="../../front-end/images/test-imagery/hero-bg@2-1@1920w.jpg">
<source media="(min-width: 1024px)" srcset="../../front-end/images/test-imagery/hero-bg@2-1@1920w.jpg">
<img alt="" srcset="../../front-end/images/test-imagery/hero-bg@2-1@1920w.jpg" sizes="100vw" class="object-cover object-center w-full h-full" />
</picture>
<div class="z-20 w-full">
<div class="container flex h-full flex-col justify-between mx-auto">
<div class="flex-1 py-24 lg:pt-[10%] lg:pb-[7%]">
<h1>
<span class="block max-w-[900px] hero-text font-extrabold italic uppercase text-[clamp(2.4rem,8vw,88px)] text-white leading-[0.9] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">We're on</span>
<span class="block max-w-[900px] hero-text font-extrabold italic uppercase text-[clamp(2.4rem,8vw,88px)] text-white leading-[0.9] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">a mission</span>
</h1>
<div class="max-w-[900px] hero-text mt-6 font-extrabold italic text-[clamp(1.2rem,3vw,32px)] text-white leading-snug js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
For the best speed, home connectivity and service
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="container">
<div class="max-w-screen-lg mx-auto">
<div class="prose prose-rte max-w-none">
<h2>Transforming rural Britain</h2>
<p>Gigaclear is proud to be transforming digital connectivity in rural Britain. Founded on a simple idea - that communities outside major towns and cities deserve world class broadband - we design, build and operate ultrafast, full fibre networks where they’re needed most.</p>
<p>We were proud to be named as Rural ISP of the year for 2025 at the UK Fibre Awards. We were founded over 15 years ago and have vast experience in helping to level up the digital divide that exists between rural and urban areas.</p>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="container relative">
<div class="grid grid-cols-1 gap-8 md:grid-cols-3 ">
<a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl card-hover bg-grey-50 px-6 lg:px-11 pb-14 lg:pb-12 ">
<div class="w-full flex justify-center overflow-hidden">
<div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">Built for rural communities</h2>
</div>
<div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
We believe communities outside major towns and cities deserve world-class broadband.
</div>
</a>
<a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl card-hover bg-grey-50 px-6 lg:px-11 pb-14 lg:pb-12 ">
<div class="w-full flex justify-center overflow-hidden">
<div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">Trusted by 170,000+ customers</h2>
</div>
<div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
We design, build and operate full fibre networks where they're needed most.
</div>
</a>
<a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl card-hover bg-grey-50 px-6 lg:px-11 pb-14 lg:pb-12 ">
<div class="w-full flex justify-center overflow-hidden">
<div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">Over 15 years in rural fibre</h2>
</div>
<div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
We've been connecting rural Britain for a while now. That experience is built into every network we design, build and operate.
</div>
</a>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="container">
<div class="max-w-screen-lg mx-auto">
<div class="prose prose-rte max-w-none">
<h2>Why is Gigaclear better?</h2>
<p>Ageing copper networks cannot support the growing demands of modern homes and businesses. When we launched the business we saw an opportunity to help change that and today, our fibre-to-the-premises (FTTP) network serves more than 250 communities across 26 counties. As one of the UK’s leading rural full fibre providers, we deliver connectivity through both commercial investment and the Government’s Building Digital UK (BDUK) programme.</p>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="container ">
<div class="w-full mx-auto gap-6 flex flex-col md:flex-row justify-center">
<div class="flex-1 flex justify-center">
<div class="w-full max-w-screen-lg">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-md w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-10@1200w.jpg">
</picture>
<div class="mt-3 text-grey-800">
Gigaclear is principally owned by Infracapital, the infrastructure equity investment arm of M&G Plc, together with Equitix and Railpen.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="container">
<div class="max-w-screen-lg mx-auto">
<div class="prose prose-rte max-w-none">
<h2>Our ambition is clear</h2>
<p>Dramatically reduce the digital divide by bringing future proof broadband to homes in towns, villages and hamlets and support rural businesses to help make our UK economy thrive. We’re proud to be an award winning employer and a recognised leader in rural fibre deployment, committed to supporting the customers and communities we serve.</p>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin ">
<div class="max-w-[1532px] mx-auto ">
<div class="container ">
<div class="lg:flex w-full lg:gap-14 2xl:gap-16">
<div class="lg:flex-1 flex relative justify-center align-center lg:mx-0 mb-8 lg:mb-0">
<div class="relative w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-2xl w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-10@1200w.jpg">
</picture>
</div>
</div>
<div class="lg:flex-1 flex flex-col justify-center align-center ">
<div>
<h2 class="text-3xl lg:text-5xl xl:text-7xl mb-6 font-heading font-bold leading-tight text-bravo">Award winning employer</h2>
<div class="mb-8 max-w-none prose prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl">
<p>Being named a Top Employer 2026 reflects what our people tell us matters most: a supportive culture, opportunities to grow, and a workplace where individuals are valued and trusted.</p>
</div>
<div class="flex gap-6 flex-wrap">
<div>
<a href="./index.html" class="btn group bg-alpha text-white border-2 border-alpha">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Learn more
</div>
<div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin ">
<div class="max-w-[1532px] mx-auto component-spacer-padding bg-grey-50 rounded-lg ">
<div class="container ">
<div class="lg:flex w-full lg:gap-14 2xl:gap-16">
<div class="lg:flex-1 flex relative justify-center align-center lg:mx-0 mb-8 lg:mb-0">
<div class="relative w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-2xl w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-10@1200w.jpg">
</picture>
</div>
</div>
<div class="lg:flex-1 flex flex-col justify-center align-center lg:order-first">
<div>
<h2 class="text-3xl lg:text-5xl xl:text-7xl mb-6 font-heading font-bold leading-tight text-bravo">Best Rural Fibre Provider</h2>
<div class="mb-8 max-w-none prose prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl">
<p>Gigaclear was named Best Rural Fibre Provider at the 2025 UK Fibre Awards, recognising our work bringing gigabit-capable broadband to the UK's hardest-to-reach communities. With 600,000 premises passed across 26 counties, we're proud to be closing the digital divide for rural Britain.</p>
</div>
<div class="flex gap-6 flex-wrap">
<div>
<a href="./index.html" class="btn group bg-alpha text-white border-2 border-alpha">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Learn more
</div>
<div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="container ">
<div class="text-center mb-10 lg:mb-16">
<div>
<h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo mb-4 lg:mb-6">Can your home get Gigaclear?</h2>
</div>
<div class="">
</div>
</div>
<div class="flex justify-center">
<div data-vanilla-module="PostcodeLookupControl" class="opacity-0 transition ease-in-out duration-300 w-full max-w-[540px]">
<div data-initial-step="Search" class="block w-full">
<form class="bg-white/20 rounded-full shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur-[5px] border border-white/30 flex gap-6 items-center p-2 focus-within:ring-2 focus-within:ring-white transition-shadow duration-200">
<div class="bg-white w-full flex gap-2 lg:gap-6 items-center p-2 pl-3 lg:pl-6 rounded-full">
<div class="flex-1">
<input autocomplete="off" required class="js-postcode-input w-full disabled:opacity-50 border-0 leading-none lg:text-lg text-bravo font-bold placeholder:text-bravo placeholder:font-bold focus:outline-none focus:ring-0 focus:border-0" placeholder="Enter your postcode">
</div>
<div class="flex-shrink-0">
<button class="flex max-md:justify-center disabled:opacity-50 disabled:pointer-events-none items-center relative z-0 font-body font-bold lg:text-[19px] align-middle md:leading-none md:py-3.5 leading-normal md:px-8 no-underline rounded-full transition duration-500 ease-in-out group max-md:text-base text-grey-800 bg-brand-gradient-4 w-11 h-11 md:w-auto md:h-auto">
<div class="js-btn-search-icon-mob block w-4 h-4 md:hidden">
<svg class="fill-current w-full h-full text-bravo" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-search"></use>
</svg>
</div>
<div class="js-btn-loading-spinner md:mr-4.5 hidden">
<svg aria-hidden="true" class="w-4 h-4 text-white animate-spin dark:text-gray-600 fill-alpha" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor" />
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill" />
</svg>
</div>
<div class="js-submit-label hidden md:block relative z-10 lg:group-hover:-translate-x-2 transition ease-in-out duration-300">
Check availability
</div>
<div class="max-md:hidden w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</button>
</div>
</div>
</form>
</div>
<div data-initial-step="Continue" data-type="" class="hidden w-full">
<div class="bg-white/20 rounded-full shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur-[5px] border border-white/30 flex gap-6 items-center p-2 focus-within:ring-2 focus-within:ring-white transition-shadow duration-200">
<div class="bg-white w-full flex gap-2 lg:gap-6 items-center p-2 pl-3 lg:pl-6 rounded-full">
<div class="flex-1 w-full border-0 leading-none lg:text-lg">
<div class="flex gap-6 items-center">
<div class="w-4 flex-shrink-0 hidden [[data-type='HasService']_&]:block">
<svg width="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.23936 8.7415C3.24438 7.81087 1.669 7.81087 0.674022 8.8261C-0.238042 9.84133 -0.238042 11.4488 0.756936 12.3794L8.21928 19.5706C9.29717 20.5858 10.9555 20.5012 11.8675 19.3168L23.4756 4.08836C24.3048 2.98852 24.1389 1.38108 23.061 0.535051C21.9832 -0.310974 20.4078 -0.141769 19.5786 0.958064L9.62883 13.9869L4.23936 8.7415Z" fill="#078937" />
</svg>
</div>
<div class="flex-1 [[data-type='NoService']_&]:pl-2 [[data-type='Business']_&]:pl-2">
<div class="text-s-green-800 lg:text-lg font-bold leading-tight hidden [[data-type='HasService']_&]:block">
Available<span class="hidden sm:inline"> at your address</span>
</div>
<div class="text-grey-700 lg:text-lg font-bold leading-tight hidden [[data-type='NoService']_&]:block">
Not available yet
</div>
<div class="text-grey-700 lg:text-lg font-bold leading-tight hidden [[data-type='Business']_&]:block">
Get a business quote
</div>
<div class="text-grey-700 lg:text-lg font-bold leading-tight hidden [[data-type='HasOpenOrder']_&]:block">
Call us
</div>
<button class="js-reset text-bravo-700 text-sm hover:underline">Search again</button>
</div>
</div>
</div>
<div class="flex-shrink-0">
<button class="js-continue-link inline-flex items-center relative z-0 font-body font-bold lg:text-[19px] align-middle leading-none py-3.5 px-4 lg:px-8 no-underline rounded-full transition duration-500 ease-in-out group max-lg:text-base text-grey-800 bg-brand-gradient-4 disabled:opacity-50 disabled:pointer-events-none">
<div class="relative z-10 lg:group-hover:-translate-x-2 transition ease-in-out duration-300">
<span class="js-continue-label">
<span class="hidden [[data-type='HasService']_&]:block">View packages</span>
<span class="hidden [[data-type='NoService']_&]:block">Register interest</span>
<span class="hidden [[data-type='Business']_&]:block">Contact us</span>
<span class="hidden [[data-type='HasOpenOrder']_&]:block">Request callback</span>
</span>
<span class="js-continue-loading hidden">Please wait...</span>
</div>
<div class="max-lg:hidden w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% render "@hero-variant-1", hero, true %}
{% for component in componentsList %}
{% render "@" + component.name, component.data, true %}
{% endfor %}
{
"siteName": "Gigaclear Pattern Library",
"pageName": "Our story",
"activeSection": "personal",
"hero": {
"heading": [
"We're on",
"a mission"
],
"caption": "To transform rural communities across the UK",
"video": null,
"image": {
"desktop": "/front-end/images/test-imagery/hero-bg@2-1@1920w.jpg"
}
},
"componentsList": [
{
"name": "rich-text-component",
"data": {
"text": "<h2>Transforming rural Britain</h2><p>Gigaclear is proud to be transforming digital connectivity in rural Britain. Founded on a simple idea - that communities outside major towns and cities deserve world class broadband - we design, build and operate ultrafast, full fibre networks where they’re needed most.</p><p>We were proud to be named as Rural ISP of the year for 2025 at the UK Fibre Awards. We were founded over 15 years ago and have vast experience in helping to level up the digital divide that exists between rural and urban areas.</p>"
}
},
{
"name": "summary-card-list-component",
"data": {
"headline": null,
"summaryList": [
{
"heading": "Built for rural communities",
"copy": "We believe communities outside major towns and cities deserve world-class broadband.",
"icon": "icon-pin"
},
{
"heading": "Trusted by 170,000+ customers",
"copy": " We design, build and operate full fibre networks where they're needed most.",
"icon": "icon-pin"
},
{
"heading": "Over 15 years in rural fibre",
"copy": "We've been connecting rural Britain for a while now. That experience is built into every network we design, build and operate.",
"icon": "icon-pin"
}
]
}
},
{
"name": "rich-text-component",
"data": {
"text": "<h2>Why is Gigaclear better?</h2><p>Ageing copper networks cannot support the growing demands of modern homes and businesses. When we launched the business we saw an opportunity to help change that and today, our fibre-to-the-premises (FTTP) network serves more than 250 communities across 26 counties. As one of the UK’s leading rural full fibre providers, we deliver connectivity through both commercial investment and the Government’s Building Digital UK (BDUK) programme.</p>"
}
},
{
"name": "image-list-component",
"data": {
"caption": "Lorem ipsum dolor",
"image": {
"src": "images/test-imagery/example2@16-10@1200w.jpg",
"width": 1200,
"height": 750,
"srcSet": [
{
"url": "images/test-imagery/example2@16-10@1200w.jpg",
"size": 1200
}
]
}
}
},
{
"name": "rich-text-component",
"data": {
"text": "<h2>Our ambition is clear</h2><p>Dramatically reduce the digital divide by bringing future proof broadband to homes in towns, villages and hamlets and support rural businesses to help make our UK economy thrive. We’re proud to be an award winning employer and a recognised leader in rural fibre deployment, committed to supporting the customers and communities we serve.</p>"
}
},
{
"name": "media-content-panel-style-1-component",
"data": {
"heading": "Award winning employer",
"description": "Being named a Top Employer 2026 reflects what our people tell us matters most: a supportive culture, opportunities to grow, and a workplace where individuals are valued and trusted.",
"image": {
"src": "images/test-imagery/example4@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example4@16-10@1200w.jpg",
"size": "1200"
}
]
},
"links": [
{
"text": "Learn more",
"url": "./index"
}
]
}
},
{
"name": "media-content-panel-style-1-component",
"data": {
"flipped": true,
"bgContrast": true,
"heading": "Best Rural Fibre Provider",
"description": "Gigaclear was named Best Rural Fibre Provider at the 2025 UK Fibre Awards, recognising our work bringing gigabit-capable broadband to the UK's hardest-to-reach communities. With 600,000 premises passed across 26 counties, we're proud to be closing the digital divide for rural Britain.",
"image": {
"src": "images/test-imagery/example2@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example2@16-10@1200w.jpg",
"size": "1200"
}
]
},
"links": [
{
"text": "Learn more",
"url": "./index"
}
]
}
},
{
"name": "postcode-lookup-component",
"data": {
"headline": {
"heading": "Can your home get Gigaclear?",
"summary": ""
}
}
}
]
}
No notes defined.