Skip to content

Instantly share code, notes, and snippets.

@mattstauffer

mattstauffer/laravel-template.blade.php Secret

Last active April 17, 2023 02:02
Show Gist options
  • Save mattstauffer/c0e98afd731d52232d5f16eec94df80b to your computer and use it in GitHub Desktop.
Save mattstauffer/c0e98afd731d52232d5f16eec94df80b to your computer and use it in GitHub Desktop.
Download ZIP
Templates to be used in Tighten+EE blog post
Raw
laravel-template.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-50 dark:bg-gray-950">
<div class="relative pt-6">
<div class="mx-auto max-w-7xl px-4 sm:px-6">
<nav class="relative flex items-center justify-between sm:h-10 md:justify-center" aria-label="Global">
<div class="flex flex-1 items-center md:absolute md:inset-y-0 md:left-0">
<div class="flex w-full items-center justify-between md:w-auto">
<a href="#" class="flex items-center space-x-2">
<span class="text-2xl">{{ config('app.name', 'Laravel') }}</span>
</a>
</div>
</div>
<div class="hidden md:flex md:space-x-10">
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Product</a>
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Features</a>
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Marketplace</a>
<a href="#" class="font-medium text-gray-500 hover:text-gray-900">Company</a>
</div>
<div class="hidden md:absolute md:inset-y-0 md:right-0 md:flex md:items-center md:justify-end">
<span class="inline-flex rounded-md shadow">
<a href="#" class="inline-flex items-center rounded-md border border-transparent bg-white px-4 py-2 text-base font-medium text-amber-600 hover:bg-gray-50">Log in</a>
</span>
</div>
</nav>
</div>
<div class="top-0 z-10 origin-top-right transform p-2 transition md:hidden">
<div class="overflow-hidden rounded-lg bg-white shadow-md ring-1 ring-black ring-opacity-5">
<div class="px-2 pt-2 pb-3">
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900">Product</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900">Features</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900">Marketplace</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900">Company</a>
</div>
<a href="#" class="block w-full bg-gray-50 px-5 py-3 text-center font-medium text-amber-600 hover:bg-gray-100">Log in</a>
</div>
</div>
</div>
<!-- Page Content -->
<main>
<section id="hero">
<div class="mx-auto mt-16 max-w-7xl px-4 sm:mt-24 pb-16 sm:pb-24">
<div class="text-center">
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">
<span class="block xl:inline">Capture your ideas with Doodle</span>
</h1>
<p class="mx-auto mt-3 max-w-md text-base text-gray-500 sm:text-lg md:mt-5 md:max-w-3xl md:text-xl">Effortlessly take notes and stay on top of your tasks without missing a beat.</p>
</div>
</div>
</section>
<section id="faq">
<div class="mx-auto max-w-7xl divide-y divide-gray-900/10 px-6 py-24 sm:py-32 lg:py-40 lg:px-8">
<div class="mx-auto max-w-3xl text-center">
<h2 class="text-lg font-semibold leading-8 tracking-tight text-amber-600">Frequently Asked Questions</h2>
<p class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">We've answered all your burning questions. Hopefully.</p>
</div>
<dl class="mt-10 space-y-8 divide-y divide-gray-900/10">
<div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-8">
<dt class="text-base font-semibold leading-7 text-gray-900 lg:col-span-5">Is this a real app?</dt>
<dd class="mt-4 lg:col-span-7 lg:mt-0">
<p class="text-base leading-7 text-gray-600">No, this is a example Laravel application built by the lovely folks at <a href="https://tighten.com/">Tighten</a> to showcase various implementations of CoilPack for Expression Engine.</p>
</dd>
</div>
<!-- More questions... -->
</dl>
</div>
</section>
</main>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment