Public facing landing page
Products in i.AI tend to be built for internal Civil Service users. Due to platform setup internally, this means that the main application will be behind the Single Sign-On (SSO) and our own internal app specific authentication.
We therefore have a need for a public facing landing page that is accessible to the general public.
If you are currently in the experimental stage, you may not need to worry about this public page for now. It is easy to add later.
Technical implementation
This page should be a static html page which imports the same components and styles as the main application.
Coming soon
The full technical implementation of the public page pattern will be added to the cookie cutter and written up here.
Until then you can see implementations of this from our other projects:
Structure
Use the folowing template to structure this page:
Active description of the application
Some text about who can access the product and who to contact if they can't access it
What's new
01 Jan 2000: We've launched V1
Add a what's new log here for users to see that the product is working to add things
Show code
<!DOCTYPE html>
<html lang="en" class="govuk-template">
<head>
<meta charset="utf-8">
<title>GOV.UK - The best place to find government services and information</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#1d70b8">
<link rel="stylesheet" href="/stylesheets/govuk-frontend.min.css">
<link rel="stylesheet" href="govuk-frontend.min.css" />
<link rel="stylesheet" href="/styles/i-ai-design-system.min.css" />
<link rel="icon" sizes="48x48" href="/assets/images/favicon.ico">
<link rel="icon" sizes="any" href="/assets/images/favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="/assets/images/govuk-icon-mask.svg" color="#1d70b8">
<link rel="apple-touch-icon" href="/assets/images/govuk-icon-180.png">
<link rel="manifest" href="/assets/manifest.json">
</head>
<body class="govuk-template__body govuk-template__body--iai-theme">
<script>
document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');
</script>
<a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
<header class="govuk-template__header">
<div class="govuk-generic-header">
<div class="govuk-generic-header__container govuk-width-container">
<div class="govuk-generic-header__logo">
<a href="#" class="govuk-generic-header__homepage-link">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="30" viewBox="0 0 995 1053"
aria-lable="i.AI">
<g>
<path
d="M 0.00 0.00 L 995.00 0.00 L 995.00 1053.00 L 0.00 1053.00 ZM 400.78 824.69 L 397.06 835.00 L 485.77 835.00 L 494.93 808.25 C499.97,793.54 505.76,776.66 507.80,770.75 L 511.50 760.00 L 577.41 760.25 L 643.31 760.50 L 669.76 834.50 L 753.38 834.76 L 837.00 835.01 L 837.00 447.00 L 755.01 447.00 L 754.75 629.43 L 754.50 811.86 L 713.12 700.68 C690.37,639.53 659.81,557.44 645.22,518.25 L 618.69 447.00 L 578.60 447.01 L 538.50 447.03 L 471.50 630.70 C434.65,731.72 402.83,819.01 400.78,824.69 ZM 215.00 540.00 L 215.00 838.00 L 297.00 838.00 L 297.00 540.00 ZM 620.00 684.03 C620.00,684.55 539.38,684.69 536.69,684.18 C535.76,684.00 535.00,683.60 535.00,683.28 C535.00,682.07 578.15,551.82 578.45,552.15 C578.80,552.55 620.00,683.31 620.00,684.03 ZM 248.18 527.93 C254.28,529.13 256.98,529.14 263.04,527.99 C288.67,523.13 303.09,497.11 293.87,472.36 C290.82,464.17 279.95,453.28 271.50,449.94 C263.05,446.61 249.02,446.58 240.72,449.87 C227.91,454.96 216.96,469.50 215.47,483.43 C213.26,504.07 227.86,523.93 248.18,527.93 ZM 341.37 836.92 C347.99,838.49 360.72,837.58 367.28,835.05 C379.27,830.45 389.67,817.28 392.03,803.73 C396.69,776.99 372.62,752.63 345.82,756.95 C315.01,761.91 300.84,797.37 319.77,822.12 C324.94,828.88 334.17,835.20 341.37,836.92 Z"
fill="rgb(34,34,34)"></path>
<path
d="M 215.00 689.00 L 215.00 540.00 L 256.00 540.00 L 297.00 540.00 L 297.00 689.00 L 297.00 838.00 L 256.00 838.00 L 215.00 838.00 L 215.00 689.00 ZM 341.37 836.92 C334.17,835.20 324.94,828.88 319.77,822.12 C300.84,797.37 315.01,761.91 345.82,756.95 C372.62,752.63 396.69,776.99 392.03,803.73 C389.67,817.28 379.27,830.45 367.28,835.05 C360.72,837.58 347.99,838.49 341.37,836.92 ZM 400.78 824.69 C402.83,819.01 434.65,731.72 471.50,630.70 L 538.50 447.03 L 578.60 447.01 L 618.69 447.00 L 645.22 518.25 C659.81,557.44 690.37,639.53 713.12,700.68 L 754.50 811.86 L 754.75 629.43 L 755.01 447.00 L 796.00 447.00 L 837.00 447.00 L 837.00 641.01 L 837.00 835.01 L 753.38 834.76 L 669.76 834.50 L 656.53 797.50 L 643.31 760.50 L 577.41 760.25 L 511.50 760.00 L 507.80 770.75 C505.76,776.66 499.97,793.54 494.93,808.25 L 485.77 835.00 L 441.41 835.00 L 397.06 835.00 L 400.78 824.69 ZM 620.00 684.03 C620.00,683.31 578.80,552.55 578.45,552.15 C578.15,551.82 535.00,682.07 535.00,683.28 C535.00,683.60 535.76,684.00 536.69,684.18 C539.38,684.69 620.00,684.55 620.00,684.03 ZM 248.18 527.93 C227.86,523.93 213.26,504.07 215.47,483.43 C216.96,469.50 227.91,454.96 240.72,449.87 C249.02,446.58 263.05,446.61 271.50,449.94 C279.95,453.28 290.82,464.17 293.87,472.36 C303.09,497.11 288.67,523.13 263.04,527.99 C256.98,529.14 254.28,529.13 248.18,527.93 Z"
fill="rgb(254,254,254)"></path>
</g>
</svg> Service name
</a>
</div>
</div>
</div>
</header>
<main id="main-content">
<div class="app-masthead">
<div class="govuk-width-container">
<div class="govuk-main-wrapper">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl app-masthead__title">
Active description of the application
</h1>
<p class="govuk-body-l app-masthead__body">
Some text about who can access the product and who to contact if they can't access it
</p>
<button href="#" class="govuk-button govuk-button--start">
Sign in
<svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5"
height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
<path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
</svg>
</button>
</div>
<div class="govuk-grid-column-one-third">
<svg viewBox="0 0 28 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<circle cx="13.5549" cy="4.21349" r="4.21349" />
<circle cx="13.5549" cy="25.7865" r="4.21349" />
<circle cx="22.8963" cy="9.6068" r="4.21349" />
<circle cx="4.2135" cy="20.3932" r="4.21349" />
<circle cx="22.8963" cy="20.3932" r="4.21349" />
<circle cx="4.21351" cy="9.60674" r="4.21349" />
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="govuk-main-wrapper ">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<h2 class="govuk-heading-l">What's new</h2>
<h3 class="govuk-heading-m">
01 Jan 2000: We've launched V1
</h3>
<p class="govuk-body">
Add a what's new log here for users to see that the product is working to add things
</p>
</div>
<div class="govuk-grid-column-one-half">
<img src="/images/screenshot-design-kit.webp" alt="Minute screenshot" style="
width: 100%;
height: auto;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
">
</div>
</div>
</div>
</div>
</main>
<footer class="govuk-footer iai-footer">
<div class="govuk-width-container">
<div class="govuk-footer__meta">
<div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
<h2 class="govuk-visually-hidden">Support links</h2>
<ul class="govuk-footer__inline-list">
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#">Accessibility statement</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#">Sitemap</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#">Cookies</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#">Privacy</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#">Contact the team</a>
</li>
</ul>
<div class="govuk-footer__meta-custom">
Built by the <a class="govuk-footer__link" href="https://ai.gov.uk/">Incubator for Artificial
Intelligence</a>
</div>
</div>
<div class="govuk-footer__meta-item"></div>
</div>
</div>
</footer>
<script type="module" src="/javascripts/govuk-frontend.min.js"></script>
<script type="module" src="/javascripts/i-ai-design-system.min.js"></script>
<script type="module">
import {
initAll
} from '/javascripts/govuk-frontend.min.js'
import {
initAllIAIDesignSystem
} from '/javascripts/i-ai-design-system.min.js'
initAll()
initAllIAIDesignSystem()
</script>
</body>
</html>Recommended Content
You can put whatever you believe will be useful to the public on this page. In general, the following can be useful. These are meant as recommendations rather than rules
Header
Use the same header as your main application
Title
It is good to have the action that your application does as a title to the page. E.g. "Transcribe meetings" or "Extract planning data"
Description
Have a quick description of who can use the tool and who to contact if users are experiencing access issues.
Sign in button
Use the primary start variant of the button to link to the internal main application.
Product logo
You can then show the main product logo in the right hand side to that panel to space out the content.
What's new sectoin
Under the main app banner, it can be useful to have a "what's new section." This enables you to inform users of new features and also point to things coming in the future.
Footer
Use the GOV.UK Footer here, where you probably won't have included this in the main application.
Informational content
You can also add content such as data privacy policy, cookie policies or anything that might be useful for external teams looking to use the product if they do not currently have access.
Extra content
Include anything else that you want everyone to have access to such as user guides.