first commit
This commit is contained in:
17
resources/views/layouts/anonymous/master.blade.php
Normal file
17
resources/views/layouts/anonymous/master.blade.php
Normal file
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ session()->get('locale') ?? app()->getLocale() }}"
|
||||
data-base-url="{{ url('/') . '/' }}"
|
||||
data-template="{{ $_layout['template'] }}"
|
||||
prefix="og: http://ogp.me/ns#">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
@include('vuexy-website-admin::layouts.base.header')
|
||||
@include('vuexy-website-layout-simple-koneko::layouts.anonymous.partials.styles')
|
||||
</head>
|
||||
<body>
|
||||
@yield('header')
|
||||
@yield('content')
|
||||
@yield('footer')
|
||||
@include('vuexy-website-layout-simple-koneko::layouts.anonymous.partials.scripts')
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,3 @@
|
||||
@vite([
|
||||
'vendor/koneko/laravel-vuexy-website-layout-simple-koneko/resources/assets/templates/anonymous/css/app.css'
|
||||
])
|
||||
17
resources/views/layouts/landwind/master.blade.php
Normal file
17
resources/views/layouts/landwind/master.blade.php
Normal file
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ session()->get('locale') ?? app()->getLocale() }}"
|
||||
data-base-url="{{ url('/') . '/' }}"
|
||||
data-template="{{ $_layout['template'] }}"
|
||||
prefix="og: http://ogp.me/ns#">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
@include('vuexy-website-admin::layouts.base.header')
|
||||
@include('vuexy-website-layout-simple-koneko::layouts.landwind.partials.styles')
|
||||
</head>
|
||||
<body>
|
||||
@yield('header')
|
||||
@yield('content')
|
||||
@yield('footer')
|
||||
@include('vuexy-website-layout-simple-koneko::layouts.landwind.partials.scripts')
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,3 @@
|
||||
@vite([
|
||||
'vendor/koneko/laravel-vuexy-website-layout-simple-koneko/resources/assets/templates/landwind/css/app.css'
|
||||
])
|
||||
17
resources/views/layouts/limaa-m/master.blade.php
Normal file
17
resources/views/layouts/limaa-m/master.blade.php
Normal file
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ session()->get('locale') ?? app()->getLocale() }}"
|
||||
data-base-url="{{ url('/') . '/' }}"
|
||||
data-template="{{ $_layout['template'] }}"
|
||||
prefix="og: http://ogp.me/ns#">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
@include('vuexy-website-admin::layouts.base.header')
|
||||
@include('vuexy-website-layout-simple-koneko::layouts.limaa-m.partials.styles')
|
||||
</head>
|
||||
<body>
|
||||
@yield('header')
|
||||
@yield('content')
|
||||
@yield('footer')
|
||||
@include('vuexy-website-layout-simple-koneko::layouts.limaa-m.partials.scripts')
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,3 @@
|
||||
@vite([
|
||||
'vendor/koneko/laravel-vuexy-website-layout-simple-koneko/resources/assets/templates/limaa-m/js/app.js'
|
||||
])
|
||||
@ -0,0 +1,3 @@
|
||||
@vite([
|
||||
'vendor/koneko/laravel-vuexy-website-layout-simple-koneko/resources/assets/templates/limaa-m/css/app.css'
|
||||
])
|
||||
17
resources/views/layouts/maximus/master.blade.php
Normal file
17
resources/views/layouts/maximus/master.blade.php
Normal file
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ session()->get('locale') ?? app()->getLocale() }}"
|
||||
data-base-url="{{ url('/') . '/' }}"
|
||||
data-template="{{ $_layout['template'] }}"
|
||||
prefix="og: http://ogp.me/ns#">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
@include('vuexy-website-admin::layouts.base.header')
|
||||
@include('vuexy-website-layout-simple-koneko::layouts.maximus.partials.styles')
|
||||
</head>
|
||||
<body class="font-sans text-gray-800 bg-gradient-to-b from-sky-50 to-white">
|
||||
@yield('header')
|
||||
@yield('content')
|
||||
@yield('footer')
|
||||
@include('vuexy-website-layout-simple-koneko::layouts.maximus.partials.scripts')
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,3 @@
|
||||
@vite([
|
||||
'vendor/koneko/laravel-vuexy-website-layout-simple-koneko/resources/assets/templates/maximus/css/app.css'
|
||||
])
|
||||
17
resources/views/layouts/notus/master.blade.php
Normal file
17
resources/views/layouts/notus/master.blade.php
Normal file
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ session()->get('locale') ?? app()->getLocale() }}"
|
||||
data-base-url="{{ url('/') . '/' }}"
|
||||
data-template="{{ $_layout['template'] }}"
|
||||
prefix="og: http://ogp.me/ns#">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
@include('vuexy-website-admin::layouts.base.header')
|
||||
@include('vuexy-website-layout-simple-koneko::layouts.notus.partials.styles')
|
||||
</head>
|
||||
<body class="text-blueGray-700 antialiased">
|
||||
@yield('header')
|
||||
@yield('content')
|
||||
@yield('footer')
|
||||
@include('vuexy-website-layout-simple-koneko::layouts.notus.partials.scripts')
|
||||
</body>
|
||||
</html>
|
||||
28
resources/views/layouts/notus/partials/scripts.blade.php
Normal file
28
resources/views/layouts/notus/partials/scripts.blade.php
Normal file
@ -0,0 +1,28 @@
|
||||
@vite([
|
||||
'vendor/koneko/laravel-vuexy-website-layout-simple-koneko/resources/assets/templates/notus-tailwind/vendor/popper/popper.js',
|
||||
'vendor/koneko/laravel-vuexy-website-layout-simple-koneko/resources/assets/templates/notus-tailwind/js/app.js',
|
||||
])
|
||||
|
||||
<script>
|
||||
/* Function for opning navbar on mobile */
|
||||
function toggleNavbar(collapseID) {
|
||||
document.getElementById(collapseID).classList.toggle("hidden");
|
||||
document.getElementById(collapseID).classList.toggle("block");
|
||||
}
|
||||
|
||||
/* Function for dropdowns */
|
||||
function openDropdown(event, dropdownID) {
|
||||
let element = event.target;
|
||||
|
||||
while (element.nodeName !== "A") {
|
||||
element = element.parentNode;
|
||||
}
|
||||
|
||||
Popper.createPopper(element, document.getElementById(dropdownID), {
|
||||
placement: "bottom-start"
|
||||
});
|
||||
|
||||
document.getElementById(dropdownID).classList.toggle("hidden");
|
||||
document.getElementById(dropdownID).classList.toggle("block");
|
||||
}
|
||||
</script>
|
||||
4
resources/views/layouts/notus/partials/styles.blade.php
Normal file
4
resources/views/layouts/notus/partials/styles.blade.php
Normal file
@ -0,0 +1,4 @@
|
||||
@vite([
|
||||
'vendor/koneko/laravel-vuexy-website-layout-simple-koneko/resources/assets/templates/notus/css/app.css',
|
||||
'vendor/koneko/laravel-vuexy-website-layout-simple-koneko/resources/assets/templates/notus/vendor/fonts/fontawesome.scss',
|
||||
])
|
||||
15
resources/views/layouts/samuel-coming-soon/master.blade.php
Normal file
15
resources/views/layouts/samuel-coming-soon/master.blade.php
Normal file
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ session()->get('locale') ?? app()->getLocale() }}"
|
||||
data-base-url="{{ url('/') . '/' }}"
|
||||
data-template="{{ $_layout['template'] }}"
|
||||
prefix="og: http://ogp.me/ns#">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
@include('vuexy-website-admin::layouts.base.header')
|
||||
@include('vuexy-website-layout-simple-koneko::layouts.samuel-coming-soon.partials.styles')
|
||||
</head>
|
||||
<body>
|
||||
@yield('content')
|
||||
@include('vuexy-website-layout-simple-koneko::layouts.samuel-coming-soon.partials.scripts')
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,3 @@
|
||||
@vite([
|
||||
'vendor/koneko/laravel-vuexy-website-layout-simple-koneko/resources/assets/templates/samuel-coming-soon/js/app.js'
|
||||
])
|
||||
@ -0,0 +1,3 @@
|
||||
@vite([
|
||||
'vendor/koneko/laravel-vuexy-website-layout-simple-koneko/resources/assets/templates/samuel-coming-soon/css/app.css'
|
||||
])
|
||||
@ -0,0 +1,15 @@
|
||||
<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
|
||||
<nav class="list-none mb-10">
|
||||
<li>
|
||||
<a class="text-gray-600 hover:text-gray-800">First Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-gray-600 hover:text-gray-800">Second Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-gray-600 hover:text-gray-800">Third Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-gray-600 hover:text-gray-800">Fourth Link</a>
|
||||
</li>
|
||||
</nav>
|
||||
@ -0,0 +1,6 @@
|
||||
<nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
|
||||
<a class="mr-5 hover:text-gray-900">First Link</a>
|
||||
<a class="mr-5 hover:text-gray-900">Second Link</a>
|
||||
<a class="mr-5 hover:text-gray-900">Third Link</a>
|
||||
<a class="mr-5 hover:text-gray-900">Fourth Link</a>
|
||||
</nav>
|
||||
642
resources/views/templates/anonymous/page.blade.php
Normal file
642
resources/views/templates/anonymous/page.blade.php
Normal file
@ -0,0 +1,642 @@
|
||||
@extends('vuexy-website-layout-simple-koneko::layouts.anonymous.master')
|
||||
|
||||
@section('header')
|
||||
<header class="text-gray-700 body-font border-b border-gray-200">
|
||||
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
|
||||
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0" href="https://tailblocks.cc" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
|
||||
</svg>
|
||||
<span class="ml-3 text-xl">TAILBLOCKS</span>
|
||||
</a>
|
||||
<x-anonymous::menu-top />
|
||||
<button class="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">Button
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<section class="text-gray-700 body-font">
|
||||
<div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
|
||||
<div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
|
||||
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">Before they sold out
|
||||
<br class="hidden lg:inline-block">readymade gluten
|
||||
</h1>
|
||||
<p class="mb-8 leading-relaxed">Copper mug try-hard pitchfork pour-over freegan heirloom neutra air plant cold-pressed tacos poke beard tote bag. Heirloom echo park mlkshk tote bag selvage hot chicken authentic tumeric truffaut hexagon try-hard chambray.</p>
|
||||
<div class="flex justify-center">
|
||||
<button class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">Button</button>
|
||||
<button class="ml-4 inline-flex text-gray-700 bg-gray-200 border-0 py-2 px-6 focus:outline-none hover:bg-gray-300 rounded text-lg">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
|
||||
<img class="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600/edf2f7/a5afbd">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text-gray-700 body-font border-t border-gray-200">
|
||||
<div class="container px-5 py-24 mx-auto">
|
||||
<div class="flex flex-col text-center w-full mb-20">
|
||||
<h2 class="text-xs text-indigo-500 tracking-widest font-medium title-font mb-1">ROOF PARTY POLAROID</h2>
|
||||
<h1 class="sm:text-3xl text-2xl font-medium title-font text-gray-900">Master Cleanse Reliac Heirloom</h1>
|
||||
</div>
|
||||
<div class="flex flex-wrap -m-4">
|
||||
<div class="p-4 md:w-1/3">
|
||||
<div class="flex rounded-lg h-full bg-gray-100 p-8 flex-col">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-indigo-500 text-white flex-shrink-0">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-gray-900 text-lg title-font font-medium">Shooting Stars</h2>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</p>
|
||||
<a class="mt-3 text-indigo-500 inline-flex items-center">Learn More
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 md:w-1/3">
|
||||
<div class="flex rounded-lg h-full bg-gray-100 p-8 flex-col">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-indigo-500 text-white flex-shrink-0">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-gray-900 text-lg title-font font-medium">The Catalyzer</h2>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</p>
|
||||
<a class="mt-3 text-indigo-500 inline-flex items-center">Learn More
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 md:w-1/3">
|
||||
<div class="flex rounded-lg h-full bg-gray-100 p-8 flex-col">
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-indigo-500 text-white flex-shrink-0">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<circle cx="6" cy="6" r="3"></circle>
|
||||
<circle cx="6" cy="18" r="3"></circle>
|
||||
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-gray-900 text-lg title-font font-medium">Neptune</h2>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</p>
|
||||
<a class="mt-3 text-indigo-500 inline-flex items-center">Learn More
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text-gray-700 body-font border-t border-gray-200">
|
||||
<div class="container px-5 py-24 mx-auto flex flex-wrap">
|
||||
<div class="lg:w-1/2 w-full mb-10 lg:mb-0 rounded-lg overflow-hidden">
|
||||
<img alt="feature" class="object-cover object-center h-full w-full" src="https://dummyimage.com/600x600/edf2f7/a5afbd">
|
||||
</div>
|
||||
<div class="flex flex-col flex-wrap lg:py-6 -mb-10 lg:w-1/2 lg:pl-12 lg:text-left text-center">
|
||||
<div class="flex flex-col mb-10 lg:items-start items-center">
|
||||
<div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<h2 class="text-gray-900 text-lg title-font font-medium mb-3">Shooting Stars</h2>
|
||||
<p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</p>
|
||||
<a class="mt-3 text-indigo-500 inline-flex items-center">Learn More
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col mb-10 lg:items-start items-center">
|
||||
<div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
|
||||
<circle cx="6" cy="6" r="3"></circle>
|
||||
<circle cx="6" cy="18" r="3"></circle>
|
||||
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<h2 class="text-gray-900 text-lg title-font font-medium mb-3">The Catalyzer</h2>
|
||||
<p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</p>
|
||||
<a class="mt-3 text-indigo-500 inline-flex items-center">Learn More
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col mb-10 lg:items-start items-center">
|
||||
<div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<h2 class="text-gray-900 text-lg title-font font-medium mb-3">Neptune</h2>
|
||||
<p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</p>
|
||||
<a class="mt-3 text-indigo-500 inline-flex items-center">Learn More
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text-gray-700 body-font border-t border-gray-200">
|
||||
<div class="container px-5 py-24 mx-auto">
|
||||
<div class="flex flex-wrap w-full mb-20 flex-col items-center text-center">
|
||||
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">Pitchfork Kickstarter Taxidermy</h1>
|
||||
<p class="lg:w-1/2 w-full leading-relaxed text-base">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify, subway tile poke farm-to-table.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap -m-4">
|
||||
<div class="xl:w-1/3 md:w-1/2 p-4">
|
||||
<div class="border border-gray-300 p-6 rounded-lg">
|
||||
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Shooting Stars</h2>
|
||||
<p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waist co, subway tile poke farm.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="xl:w-1/3 md:w-1/2 p-4">
|
||||
<div class="border border-gray-300 p-6 rounded-lg">
|
||||
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
|
||||
<circle cx="6" cy="6" r="3"></circle>
|
||||
<circle cx="6" cy="18" r="3"></circle>
|
||||
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">The Catalyzer</h2>
|
||||
<p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waist co, subway tile poke farm.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="xl:w-1/3 md:w-1/2 p-4">
|
||||
<div class="border border-gray-300 p-6 rounded-lg">
|
||||
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Neptune</h2>
|
||||
<p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waist co, subway tile poke farm.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="xl:w-1/3 md:w-1/2 p-4">
|
||||
<div class="border border-gray-300 p-6 rounded-lg">
|
||||
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
|
||||
<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zM4 22v-7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Melanchole</h2>
|
||||
<p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waist co, subway tile poke farm.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="xl:w-1/3 md:w-1/2 p-4">
|
||||
<div class="border border-gray-300 p-6 rounded-lg">
|
||||
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
|
||||
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Bunker</h2>
|
||||
<p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waist co, subway tile poke farm.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="xl:w-1/3 md:w-1/2 p-4">
|
||||
<div class="border border-gray-300 p-6 rounded-lg">
|
||||
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Ramona Falls</h2>
|
||||
<p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waist co, subway tile poke farm.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">Button</button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text-gray-700 body-font border-t border-gray-200">
|
||||
<div class="container px-5 py-24 mx-auto">
|
||||
<div class="flex flex-col text-center w-full mb-20">
|
||||
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Our Team</h1>
|
||||
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of them.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap -m-2">
|
||||
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
|
||||
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
|
||||
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/80x80/edf2f7/a5afbd">
|
||||
<div class="flex-grow">
|
||||
<h2 class="text-gray-900 title-font font-medium">Holden Caulfield</h2>
|
||||
<p class="text-gray-500">UI Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
|
||||
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
|
||||
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/84x84/edf2f7/a5afbd">
|
||||
<div class="flex-grow">
|
||||
<h2 class="text-gray-900 title-font font-medium">Henry Letham</h2>
|
||||
<p class="text-gray-500">CTO</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
|
||||
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
|
||||
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/88x88/edf2f7/a5afbd">
|
||||
<div class="flex-grow">
|
||||
<h2 class="text-gray-900 title-font font-medium">Oskar Blinde</h2>
|
||||
<p class="text-gray-500">Founder</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
|
||||
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
|
||||
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/90x90/edf2f7/a5afbd">
|
||||
<div class="flex-grow">
|
||||
<h2 class="text-gray-900 title-font font-medium">John Doe</h2>
|
||||
<p class="text-gray-500">DevOps</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
|
||||
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
|
||||
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/94x94/edf2f7/a5afbd">
|
||||
<div class="flex-grow">
|
||||
<h2 class="text-gray-900 title-font font-medium">Martin Eden</h2>
|
||||
<p class="text-gray-500">Software Engineer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
|
||||
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
|
||||
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/98x98/edf2f7/a5afbd">
|
||||
<div class="flex-grow">
|
||||
<h2 class="text-gray-900 title-font font-medium">Boris Kitua</h2>
|
||||
<p class="text-gray-500">UX Researcher</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
|
||||
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
|
||||
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/100x90/edf2f7/a5afbd">
|
||||
<div class="flex-grow">
|
||||
<h2 class="text-gray-900 title-font font-medium">Atticus Finch</h2>
|
||||
<p class="text-gray-500">QA Engineer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
|
||||
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
|
||||
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/104x94/edf2f7/a5afbd">
|
||||
<div class="flex-grow">
|
||||
<h2 class="text-gray-900 title-font font-medium">Alper Kamu</h2>
|
||||
<p class="text-gray-500">System</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
|
||||
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
|
||||
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://dummyimage.com/108x98/edf2f7/a5afbd">
|
||||
<div class="flex-grow">
|
||||
<h2 class="text-gray-900 title-font font-medium">Rodrigo Monchi</h2>
|
||||
<p class="text-gray-500">Product Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text-gray-700 body-font overflow-hidden border-t border-gray-200">
|
||||
<div class="container px-5 py-24 mx-auto flex flex-wrap">
|
||||
<div class="lg:w-1/4 mt-48 hidden lg:block">
|
||||
<div class="mt-px border-t border-gray-300 border-b border-l rounded-tl-lg rounded-bl-lg overflow-hidden">
|
||||
<p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start -mt-px">Fingerstache disrupt</p>
|
||||
<p class="text-gray-900 h-12 text-center px-4 flex items-center justify-start">Franzen hashtag</p>
|
||||
<p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">Tilde art party</p>
|
||||
<p class="text-gray-900 h-12 text-center px-4 flex items-center justify-start">Banh mi cornhole</p>
|
||||
<p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">Waistcoat squid hexagon</p>
|
||||
<p class="text-gray-900 h-12 text-center px-4 flex items-center justify-start">Pinterest occupy authentic</p>
|
||||
<p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">Brooklyn helvetica</p>
|
||||
<p class="text-gray-900 h-12 text-center px-4 flex items-center justify-start">Long Feature Two</p>
|
||||
<p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">Feature One</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex lg:w-3/4 w-full flex-wrap lg:border border-gray-300 rounded-lg">
|
||||
<div class="lg:w-1/3 lg:mt-px w-full mb-10 lg:mb-0 border-2 border-gray-300 lg:border-none rounded-lg lg:rounded-none">
|
||||
<div class="px-2 text-center h-48 flex flex-col items-center justify-center">
|
||||
<h3 class="tracking-widest">START</h3>
|
||||
<h2 class="text-5xl text-gray-900 font-medium leading-none mb-4 mt-2">Free</h2>
|
||||
<span class="text-sm text-gray-600">Next 3 months</span>
|
||||
</div>
|
||||
<p class="bg-gray-100 text-gray-600 h-12 text-center px-2 flex items-center -mt-px justify-center border-t border-gray-300">Schlitz single-origin</p>
|
||||
<p class="text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
|
||||
<path d="M20 6L9 17l-5-5"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</p>
|
||||
<p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
|
||||
<path d="M20 6L9 17l-5-5"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</p>
|
||||
<p class="h-12 text-gray-600 px-6 text-center leading-relaxed flex items-center justify-center">Feature</p>
|
||||
<p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
|
||||
<path d="M20 6L9 17l-5-5"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" class="w-5 h-5 text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M18 6L6 18M6 6l12 12"></path>
|
||||
</svg>
|
||||
</p>
|
||||
<p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" class="w-5 h-5 text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M18 6L6 18M6 6l12 12"></path>
|
||||
</svg>
|
||||
</p>
|
||||
<p class="text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" class="w-5 h-5 text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M18 6L6 18M6 6l12 12"></path>
|
||||
</svg>
|
||||
</p>
|
||||
<p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" class="w-5 h-5 text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M18 6L6 18M6 6l12 12"></path>
|
||||
</svg>
|
||||
</p>
|
||||
<div class="border-t border-gray-300 p-6 text-center rounded-bl-lg">
|
||||
<button class="flex items-center mt-auto text-white bg-indigo-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-indigo-600 rounded">Button
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-auto" viewBox="0 0 24 24">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<p class="text-xs text-gray-500 mt-3">Literally you probably haven't heard of them jean shorts.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-1/3 lg:-mt-px w-full mb-10 lg:mb-0 border-2 rounded-lg border-indigo-500 relative">
|
||||
<span class="bg-indigo-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl">POPULAR</span>
|
||||
<div class="px-2 text-center h-48 flex flex-col items-center justify-center">
|
||||
<h3 class="tracking-widest">PRO</h3>
|
||||
<h2 class="text-5xl text-gray-900 font-medium flex items-center justify-center leading-none mb-4 mt-2">$38
|
||||
<span class="text-gray-600 text-base ml-1">/mo</span>
|
||||
</h2>
|
||||
<span class="text-sm text-gray-600">Charging $456 per year</span>
|
||||
</div>
|
||||
<p class="bg-gray-100 text-gray-600 h-12 text-center px-2 flex items-center -mt-px justify-center border-t border-gray-300">Schlitz single-origin</p>
|
||||
<p class="text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
|
||||
<path d="M20 6L9 17l-5-5"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</p>
|
||||
<p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
|
||||
<path d="M20 6L9 17l-5-5"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</p>
|
||||
<p class="h-12 text-gray-600 text-center leading-relaxed flex items-center justify-center">Feature</p>
|
||||
<p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
|
||||
<path d="M20 6L9 17l-5-5"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
|
||||
<path d="M20 6L9 17l-5-5"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</p>
|
||||
<p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" class="w-5 h-5 text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M18 6L6 18M6 6l12 12"></path>
|
||||
</svg>
|
||||
</p>
|
||||
<p class="text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" class="w-5 h-5 text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M18 6L6 18M6 6l12 12"></path>
|
||||
</svg>
|
||||
</p>
|
||||
<p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" class="w-5 h-5 text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M18 6L6 18M6 6l12 12"></path>
|
||||
</svg>
|
||||
</p>
|
||||
<div class="p-6 text-center border-t border-gray-300">
|
||||
<button class="flex items-center mt-auto text-white bg-indigo-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-indigo-600 rounded">Button
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-auto" viewBox="0 0 24 24">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<p class="text-xs text-gray-500 mt-3">Literally you probably haven't heard of them jean shorts.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-1/3 w-full lg:mt-px border-2 border-gray-300 lg:border-none rounded-lg lg:rounded-none">
|
||||
<div class="px-2 text-center h-48 flex flex-col items-center justify-center">
|
||||
<h3 class="tracking-widest">BUSINESS</h3>
|
||||
<h2 class="text-5xl text-gray-900 font-medium flex items-center justify-center leading-none mb-4 mt-2">$54
|
||||
<span class="text-gray-600 text-base ml-1">/mo</span>
|
||||
</h2>
|
||||
<span class="text-sm text-gray-600">Charging $648 per year</span>
|
||||
</div>
|
||||
<p class="bg-gray-100 text-gray-600 h-12 text-center px-2 flex items-center -mt-px justify-center border-t border-gray-300">Schlitz single-origin</p>
|
||||
<p class="text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
|
||||
<path d="M20 6L9 17l-5-5"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</p>
|
||||
<p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
|
||||
<path d="M20 6L9 17l-5-5"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</p>
|
||||
<p class="h-12 text-gray-600 text-center leading-relaxed flex items-center justify-center">Feature</p>
|
||||
<p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
|
||||
<path d="M20 6L9 17l-5-5"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" class="w-5 h-5 text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M18 6L6 18M6 6l12 12"></path>
|
||||
</svg>
|
||||
</p>
|
||||
<p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" class="w-5 h-5 text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M18 6L6 18M6 6l12 12"></path>
|
||||
</svg>
|
||||
</p>
|
||||
<p class="text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" class="w-5 h-5 text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M18 6L6 18M6 6l12 12"></path>
|
||||
</svg>
|
||||
</p>
|
||||
<p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" class="w-5 h-5 text-gray-500" viewBox="0 0 24 24">
|
||||
<path d="M18 6L6 18M6 6l12 12"></path>
|
||||
</svg>
|
||||
</p>
|
||||
<div class="p-6 text-center border-t border-gray-300">
|
||||
<button class="flex items-center mt-auto text-white bg-indigo-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-indigo-600 rounded">Button
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-auto" viewBox="0 0 24 24">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<p class="text-xs text-gray-500 mt-3">Literally you probably haven't heard of them jean shorts.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text-gray-700 body-font border-t border-gray-200">
|
||||
<div class="container px-5 py-24 mx-auto">
|
||||
<div class="xl:w-1/2 lg:w-3/4 w-full mx-auto text-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="inline-block w-8 h-8 text-gray-400 mb-8" viewBox="0 0 975.036 975.036">
|
||||
<path d="M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z"></path>
|
||||
</svg>
|
||||
<p class="leading-relaxed text-lg">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware. Man bun next level coloring book skateboard four loko knausgaard. Kitsch keffiyeh master cleanse direct trade indigo juice before they sold out gentrify plaid gastropub normcore XOXO 90's pickled cindigo jean shorts. Slow-carb next level shoindigoitch ethical authentic, yr scenester sriracha forage franzen organic drinking vinegar.</p>
|
||||
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-8 mb-6"></span>
|
||||
<h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">HOLDEN CAULFIELD</h2>
|
||||
<p class="text-gray-500">Senior Product Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text-gray-700 body-font relative">
|
||||
<div class="absolute inset-0 bg-gray-300">
|
||||
<iframe width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0" title="map" scrolling="no" src="https://maps.google.com/maps?width=100%&height=600&hl=en&q=%C4%B0zmir+(My%20Business%20Name)&ie=UTF8&t=&z=14&iwloc=B&output=embed" style="filter: grayscale(1) contrast(1.2) opacity(0.4);"></iframe>
|
||||
</div>
|
||||
<div class="container px-5 py-24 mx-auto flex">
|
||||
<div class="lg:w-1/3 md:w-1/2 bg-white rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10">
|
||||
<h2 class="text-gray-900 text-lg mb-1 font-medium title-font">Feedback</h2>
|
||||
<p class="leading-relaxed mb-5 text-gray-600">Post-ironic portland shabby chic echo park, banjo fashion axe</p>
|
||||
<input class="bg-white rounded border border-gray-400 focus:outline-none focus:border-indigo-500 text-base px-4 py-2 mb-4" placeholder="Email" type="email">
|
||||
<textarea class="bg-white rounded border border-gray-400 focus:outline-none h-32 focus:border-indigo-500 text-base px-4 py-2 mb-4 resize-none" placeholder="Message"></textarea>
|
||||
<button class="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">Button</button>
|
||||
<p class="text-xs text-gray-500 mt-3">Chicharrones blog helvetica normcore iceland tousled brook viral artisan.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endsection
|
||||
|
||||
@section('footer')
|
||||
<footer class="text-gray-700 body-font">
|
||||
<div class="container px-5 py-24 mx-auto">
|
||||
<div class="flex flex-wrap md:text-left text-center -mb-10 -mx-4">
|
||||
<div class="lg:w-1/6 md:w-1/2 w-full px-4">
|
||||
<x-anonymous::menu-footer />
|
||||
</div>
|
||||
<div class="lg:w-1/6 md:w-1/2 w-full px-4">
|
||||
<x-anonymous::menu-footer />
|
||||
</div>
|
||||
<div class="lg:w-1/6 md:w-1/2 w-full px-4">
|
||||
<x-anonymous::menu-footer />
|
||||
</div>
|
||||
<div class="lg:w-1/6 md:w-1/2 w-full px-4">
|
||||
<x-anonymous::menu-footer />
|
||||
</div>
|
||||
<div class="lg:w-1/6 md:w-1/2 w-full px-4">
|
||||
<x-anonymous::menu-footer />
|
||||
</div>
|
||||
<div class="lg:w-1/6 md:w-1/2 w-full px-4">
|
||||
<x-anonymous::menu-footer />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-200">
|
||||
<div class="container px-5 py-8 flex flex-wrap mx-auto items-center">
|
||||
<div class="flex md:flex-no-wrap flex-wrap justify-center md:justify-start">
|
||||
<input class="sm:w-64 w-40 bg-gray-100 rounded sm:mr-4 mr-2 border border-gray-400 focus:outline-none focus:border-indigo-500 text-base py-2 px-4" placeholder="Placeholder" type="text">
|
||||
<button class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
|
||||
<p class="text-gray-500 text-sm md:ml-6 md:mt-0 mt-2 sm:text-left text-center">Bitters chicharrones fanny pack
|
||||
<br class="lg:block hidden">waistcoat green juice
|
||||
</p>
|
||||
</div>
|
||||
<span class="inline-flex lg:ml-auto lg:mt-0 mt-6 w-full justify-center md:justify-start md:w-auto">
|
||||
<a class="text-gray-500">
|
||||
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="ml-3 text-gray-500">
|
||||
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="ml-3 text-gray-500">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
|
||||
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="ml-3 text-gray-500">
|
||||
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
|
||||
<circle cx="4" cy="4" r="2" stroke="none"></circle>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-200">
|
||||
<div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
|
||||
<p class="text-gray-500 text-sm text-center sm:text-left">© 2020 Tailwind Blocks —
|
||||
<a href="https://twitter.com/knyttneve" class="text-gray-600 ml-1" target="_blank" rel="noopener noreferrer">@knyttneve</a>
|
||||
</p>
|
||||
<span class="sm:ml-auto sm:mt-0 mt-2 sm:w-auto w-full sm:text-left text-center text-gray-500 text-sm">Enamel pin tousled raclette tacos irony</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@endsection
|
||||
@ -0,0 +1,15 @@
|
||||
<h3 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Company</h3>
|
||||
<ul class="text-gray-500 dark:text-gray-400">
|
||||
<li class="mb-4">
|
||||
<a href="#" class=" hover:underline">About</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="#" class="hover:underline">Careers</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="#" class="hover:underline">Brand Center</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="#" class="hover:underline">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
@ -0,0 +1,22 @@
|
||||
<div class="items-center justify-between hidden w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
|
||||
<ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
|
||||
<li>
|
||||
<a href="#" class="block py-2 pl-3 pr-4 text-white bg-purple-700 rounded lg:bg-transparent lg:text-purple-700 lg:p-0 dark:text-white" aria-current="page">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Company</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Marketplace</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Features</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Team</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
467
resources/views/templates/landwind/page.blade.php
Normal file
467
resources/views/templates/landwind/page.blade.php
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1,5 @@
|
||||
<h2 class="text-lg font-semibold">Important Links</h2>
|
||||
<ul class="mt-4 leading-loose">
|
||||
<li><a href="https://codebushi.com">Terms & Conditions</a></li>
|
||||
<li><a href="https://codebushi.com">Privacy Policy</a></li>
|
||||
</ul>
|
||||
@ -0,0 +1,6 @@
|
||||
<div class="flex mt-4 sm:mt-0">
|
||||
<a class="px-4" href="#features">Features</a>
|
||||
<a class="px-4" href="#services">Services</a>
|
||||
<a class="px-4" href="#stats">Stats</a>
|
||||
<a class="px-4" href="#testimonials">Testimonials</a>
|
||||
</div>
|
||||
1026
resources/views/templates/limaa-m/page.blade.php
Normal file
1026
resources/views/templates/limaa-m/page.blade.php
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1,7 @@
|
||||
<h3 class="text-lg font-bold mb-4">Products</h3>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="#" class="text-gray-400 hover:text-white transition">Swing Sets</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white transition">Playhouses</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white transition">Combo Playsets</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white transition">Accessories</a></li>
|
||||
</ul>
|
||||
@ -0,0 +1,21 @@
|
||||
<div class="hidden md:flex space-x-10 text-white font-medium">
|
||||
<a href="#" class="hover:text-yellow-300 transition">Home 2</a>
|
||||
<a href="#" class="hover:text-yellow-300 transition">Gallery</a>
|
||||
<a href="#" class="hover:text-yellow-300 transition">Products</a>
|
||||
<a href="#" class="hover:text-yellow-300 transition">About</a>
|
||||
<a href="#" class="hover:text-yellow-300 transition">Contact</a>
|
||||
</div>
|
||||
<div class="md:hidden" x-data="{ open: false }">
|
||||
<button @click="open = !open" class="text-white focus:outline-none">
|
||||
<i class="fa fa-bars text-2xl"></i>
|
||||
</button>
|
||||
<div x-show="open" @click.away="open = false" class="absolute top-20 right-6 bg-white shadow-lg rounded-lg p-6 w-48">
|
||||
<div class="flex flex-col space-y-4">
|
||||
<a href="#" class="hover:text-yellow-500 transition">Home 2</a>
|
||||
<a href="#" class="hover:text-yellow-500 transition">Gallery</a>
|
||||
<a href="#" class="hover:text-yellow-500 transition">Products</a>
|
||||
<a href="#" class="hover:text-yellow-500 transition">About</a>
|
||||
<a href="#" class="hover:text-yellow-500 transition">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
734
resources/views/templates/maximus/page.blade.php
Normal file
734
resources/views/templates/maximus/page.blade.php
Normal file
@ -0,0 +1,734 @@
|
||||
@extends('vuexy-website-layout-simple-koneko::layouts.maximus.master')
|
||||
|
||||
@section('header')
|
||||
<!-- Hero Section -->
|
||||
<div class="relative">
|
||||
<!-- Full-width background image -->
|
||||
<div class="absolute inset-0 bg-cover bg-center z-0" style="background-image: url('https://images.unsplash.com/photo-1595434091143-b375ced5fe5c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); height: 85vh;">
|
||||
<div class="absolute inset-0 bg-black opacity-20"></div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="container mx-auto px-6 py-4 flex justify-between items-center relative z-10">
|
||||
<div class="text-white font-bold text-2xl">
|
||||
Demo
|
||||
</div>
|
||||
<x-maximus::menu-top />
|
||||
</nav>
|
||||
|
||||
<!-- Hero Content -->
|
||||
<div class="container mx-auto px-6 pt-32 pb-48 relative z-10" x-data="{ fadeIn: false }" x-init="setTimeout(() => fadeIn = true, 500)">
|
||||
<div class="max-w-3xl transition-all duration-1000" :class="fadeIn ? 'opacity-100 transform translate-y-0' : 'opacity-0 transform translate-y-10'">
|
||||
<h1 class="text-4xl md:text-6xl font-bold text-white leading-tight mb-6">Where Imaginations <br>Come to Life</h1>
|
||||
<p class="text-xl text-white mb-8 md:pr-12">Premium vinyl playsets designed for endless adventures, built to last for generations of fun.</p>
|
||||
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
|
||||
<a href="#featured" class="bg-yellow-500 hover:bg-yellow-400 text-gray-900 font-bold py-3 px-8 rounded-lg transition transform hover:-translate-y-1 inline-flex items-center justify-center">
|
||||
<span>Explore Playsets</span>
|
||||
<i class="fas fa-arrow-right ml-2"></i>
|
||||
</a>
|
||||
<a href="#contact" class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-gray-900 font-bold py-3 px-8 rounded-lg transition transform hover:-translate-y-1 inline-flex items-center justify-center">
|
||||
<span>Get a Quote</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<!-- Features Section -->
|
||||
<div class="py-20 bg-white" id="features">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Why Families Choose SwingIt</h2>
|
||||
<p class="text-gray-600 max-w-2xl mx-auto">Our premium playsets are designed with both children and parents in mind.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
<!-- Feature 1 -->
|
||||
<div class="text-center p-6 rounded-xl hover:shadow-xl transition-all duration-300"
|
||||
x-data="{ hover: false }"
|
||||
@mouseenter="hover = true"
|
||||
@mouseleave="hover = false">
|
||||
<div class="w-16 h-16 mx-auto mb-6 flex items-center justify-center bg-yellow-100 text-yellow-500 rounded-full text-3xl" :class="{ 'transform scale-110': hover }">
|
||||
<i class="fas fa-medal"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">Premium Quality</h3>
|
||||
<p class="text-gray-600">Durable vinyl construction that withstands years of active play without fading, splintering, or requiring maintenance.</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2 -->
|
||||
<div class="text-center p-6 rounded-xl hover:shadow-xl transition-all duration-300"
|
||||
x-data="{ hover: false }"
|
||||
@mouseenter="hover = true"
|
||||
@mouseleave="hover = false">
|
||||
<div class="w-16 h-16 mx-auto mb-6 flex items-center justify-center bg-blue-100 text-blue-500 rounded-full text-3xl" :class="{ 'transform scale-110': hover }">
|
||||
<i class="fas fa-paint-brush"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">Custom Designs</h3>
|
||||
<p class="text-gray-600">Create a personalized playset that fits your space, budget, and your children's unique play preferences.</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 3 -->
|
||||
<div class="text-center p-6 rounded-xl hover:shadow-xl transition-all duration-300"
|
||||
x-data="{ hover: false }"
|
||||
@mouseenter="hover = true"
|
||||
@mouseleave="hover = false">
|
||||
<div class="w-16 h-16 mx-auto mb-6 flex items-center justify-center bg-green-100 text-green-500 rounded-full text-3xl" :class="{ 'transform scale-110': hover }">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">Safety First</h3>
|
||||
<p class="text-gray-600">Built with rounded edges, secure connections, and premium materials that meet rigorous safety standards.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Featured Products -->
|
||||
<div class="py-20 bg-gray-50" id="featured">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Our Most Popular Playsets</h2>
|
||||
<p class="text-gray-600 max-w-2xl mx-auto">Endless adventures start with a SwingIt playset.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<!-- Product 1 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
x-data="{ hover: false }"
|
||||
@mouseenter="hover = true"
|
||||
@mouseleave="hover = false">
|
||||
<div class="relative overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1605276277265-84f97da7d47a?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Adventure Playset" class="w-full h-64 object-cover transition-all duration-500" :class="{ 'transform scale-105': hover }">
|
||||
<div class="absolute top-4 right-4 bg-yellow-500 text-white text-sm font-bold px-3 py-1 rounded-full">
|
||||
Popular
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold mb-2">Adventure World</h3>
|
||||
<p class="text-gray-600 mb-4">Packed with fun: slides, swings, climbing wall, and monkey bars in a compact design.</p>
|
||||
<a href="#" class="text-yellow-500 font-medium hover:text-yellow-600 transition inline-flex items-center">
|
||||
<span>View Details</span>
|
||||
<i class="fas fa-arrow-right ml-2 text-sm"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product 2 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
x-data="{ hover: false }"
|
||||
@mouseenter="hover = true"
|
||||
@mouseleave="hover = false">
|
||||
<div class="relative overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1575783970733-1aaedde1db74?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Castle Kingdom Playset" class="w-full h-64 object-cover transition-all duration-500" :class="{ 'transform scale-105': hover }">
|
||||
<div class="absolute top-4 right-4 bg-blue-500 text-white text-sm font-bold px-3 py-1 rounded-full">
|
||||
New
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold mb-2">Castle Kingdom</h3>
|
||||
<p class="text-gray-600 mb-4">A royal playground with turrets, wave slides, and a spacious playhouse for imaginative play.</p>
|
||||
<a href="#" class="text-yellow-500 font-medium hover:text-yellow-600 transition inline-flex items-center">
|
||||
<span>View Details</span>
|
||||
<i class="fas fa-arrow-right ml-2 text-sm"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product 3 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
x-data="{ hover: false }"
|
||||
@mouseenter="hover = true"
|
||||
@mouseleave="hover = false">
|
||||
<div class="relative overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1596461110761-b4e5d5ad49f8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Backyard Explorer Playset" class="w-full h-64 object-cover transition-all duration-500" :class="{ 'transform scale-105': hover }">
|
||||
<div class="absolute top-4 right-4 bg-green-500 text-white text-sm font-bold px-3 py-1 rounded-full">
|
||||
Best Value
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold mb-2">Backyard Explorer</h3>
|
||||
<p class="text-gray-600 mb-4">Perfect for smaller yards with swing beam, slide, and climbing options at an affordable price.</p>
|
||||
<a href="#" class="text-yellow-500 font-medium hover:text-yellow-600 transition inline-flex items-center">
|
||||
<span>View Details</span>
|
||||
<i class="fas fa-arrow-right ml-2 text-sm"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-12">
|
||||
<a href="#" class="inline-block bg-yellow-500 hover:bg-yellow-400 text-gray-900 font-bold py-3 px-8 rounded-lg transition transform hover:-translate-y-1">
|
||||
View All Playsets
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonials -->
|
||||
<div class="py-20 bg-white" id="testimonials">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Customers Say</h2>
|
||||
<p class="text-gray-600 max-w-2xl mx-auto">Join hundreds of happy families who've chosen SwingIt for their children's outdoor play.</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto" x-data="{ current: 0, testimonials: [0, 1, 2] }">
|
||||
<div class="relative">
|
||||
<!-- Testimonial Slides -->
|
||||
<div class="overflow-hidden relative h-80">
|
||||
<!-- Testimonial 1 -->
|
||||
<div class="absolute inset-0 transition-all duration-500 ease-in-out p-8 bg-gray-50 rounded-xl flex flex-col justify-center"
|
||||
:class="{ 'opacity-100 transform translate-x-0': current === 0, 'opacity-0 transform translate-x-full': current !== 0 }">
|
||||
<div class="text-yellow-500 mb-4">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
<p class="text-gray-600 italic mb-6 text-lg">"I love my swing set! SwingIt helped me with the design and planning and was so pleasant to work with. They helped me stay within my budget and time frame, and the delivery and installation was hassle-free. Such nice people to work with!"</p>
|
||||
<div class="flex items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-gray-300 flex-shrink-0"></div>
|
||||
<div class="ml-4">
|
||||
<h4 class="font-bold">Ruthy J.</h4>
|
||||
<p class="text-gray-500 text-sm">Happy Parent</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial 2 -->
|
||||
<div class="absolute inset-0 transition-all duration-500 ease-in-out p-8 bg-gray-50 rounded-xl flex flex-col justify-center"
|
||||
:class="{ 'opacity-100 transform translate-x-0': current === 1, 'opacity-0 transform translate-x-full': current !== 1 }">
|
||||
<div class="text-yellow-500 mb-4">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
<p class="text-gray-600 italic mb-6 text-lg">"We are so very pleased and happy with our beautiful swing set! The process was super quick and easy and the customer service was unbeatable. Thank you for helping us get an incredible playset that will hopefully last us for many more years to come!"</p>
|
||||
<div class="flex items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-gray-300 flex-shrink-0"></div>
|
||||
<div class="ml-4">
|
||||
<h4 class="font-bold">Tzipora B.</h4>
|
||||
<p class="text-gray-500 text-sm">Delighted Customer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial 3 -->
|
||||
<div class="absolute inset-0 transition-all duration-500 ease-in-out p-8 bg-gray-50 rounded-xl flex flex-col justify-center"
|
||||
:class="{ 'opacity-100 transform translate-x-0': current === 2, 'opacity-0 transform translate-x-full': current !== 2 }">
|
||||
<div class="text-yellow-500 mb-4">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
<p class="text-gray-600 italic mb-6 text-lg">"Highly recommend. Amazing service, very high-quality set. Children are using and abusing it and it's in perfect condition several years later. Only regret is not purchasing an even larger one. Worth every penny."</p>
|
||||
<div class="flex items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-gray-300 flex-shrink-0"></div>
|
||||
<div class="ml-4">
|
||||
<h4 class="font-bold">Tzvi W.</h4>
|
||||
<p class="text-gray-500 text-sm">Satisfied Parent</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Buttons -->
|
||||
<button @click="current = (current - 1 + testimonials.length) % testimonials.length" class="absolute top-1/2 left-0 -translate-y-1/2 -translate-x-6 w-12 h-12 rounded-full bg-white shadow-lg flex items-center justify-center text-gray-800 hover:text-yellow-500 focus:outline-none transition">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
<button @click="current = (current + 1) % testimonials.length" class="absolute top-1/2 right-0 -translate-y-1/2 translate-x-6 w-12 h-12 rounded-full bg-white shadow-lg flex items-center justify-center text-gray-800 hover:text-yellow-500 focus:outline-none transition">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Indicators -->
|
||||
<div class="flex justify-center mt-8 space-x-2">
|
||||
<template x-for="(_, index) in testimonials" :key="index">
|
||||
<button @click="current = index" class="w-3 h-3 rounded-full focus:outline-none transition-all duration-300" :class="{ 'bg-yellow-500 scale-110': current === index, 'bg-gray-300': current !== index }"></button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gallery Section -->
|
||||
<div class="py-20 bg-white" id="gallery">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Our Gallery</h2>
|
||||
<p class="text-gray-600 max-w-2xl mx-auto">See how our playsets bring joy to families across the region.</p>
|
||||
</div>
|
||||
|
||||
<div class="relative" x-data="gallery">
|
||||
<!-- Main Image -->
|
||||
<div class="rounded-xl overflow-hidden shadow-xl mb-4">
|
||||
<template x-for="(photo, index) in photos" :key="index">
|
||||
<div
|
||||
x-show="current === index"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 transform scale-95"
|
||||
x-transition:enter-end="opacity-100 transform scale-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 transform scale-100"
|
||||
x-transition:leave-end="opacity-0 transform scale-95"
|
||||
>
|
||||
<img :src="photo" class="w-full h-96 md:h-[500px] object-cover" :alt="'Gallery image ' + (index + 1)">
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Thumbnails -->
|
||||
<div class="grid grid-cols-4 gap-4 mt-4">
|
||||
<template x-for="(photo, index) in photos" :key="index">
|
||||
<div
|
||||
@click="current = index"
|
||||
class="rounded-lg overflow-hidden cursor-pointer transition-all"
|
||||
:class="{ 'ring-2 ring-yellow-500 ring-offset-2': current === index }"
|
||||
>
|
||||
<img :src="photo" class="w-full h-24 object-cover" :alt="'Thumbnail ' + (index + 1)">
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Buttons -->
|
||||
<button @click="prev()" class="absolute top-1/2 left-4 transform -translate-y-1/2 w-12 h-12 rounded-full bg-white/80 shadow-lg flex items-center justify-center text-gray-800 hover:text-yellow-500 focus:outline-none transition">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
<button @click="next()" class="absolute top-1/2 right-4 transform -translate-y-1/2 w-12 h-12 rounded-full bg-white/80 shadow-lg flex items-center justify-center text-gray-800 hover:text-yellow-500 focus:outline-none transition">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-12">
|
||||
<a href="#" class="inline-block bg-yellow-500 hover:bg-yellow-400 text-gray-900 font-bold py-3 px-8 rounded-lg transition transform hover:-translate-y-1">
|
||||
View Full Gallery
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- How It Works -->
|
||||
<div class="py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">How It Works</h2>
|
||||
<p class="text-gray-600 max-w-2xl mx-auto">From design to installation, we make the process simple and enjoyable.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<!-- Step 1 -->
|
||||
<div class="text-center" x-data="{ visible: false }" x-intersect="visible = true">
|
||||
<div class="w-16 h-16 mx-auto mb-6 flex items-center justify-center bg-yellow-500 text-white rounded-full text-2xl font-bold transition-all duration-700" :class="{ 'opacity-100 transform scale-100': visible, 'opacity-0 transform scale-50': !visible }">
|
||||
1
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">Consultation</h3>
|
||||
<p class="text-gray-600">Discuss your vision, space requirements, and budget with our playset experts.</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<div class="text-center" x-data="{ visible: false }" x-intersect="visible = true">
|
||||
<div class="w-16 h-16 mx-auto mb-6 flex items-center justify-center bg-yellow-500 text-white rounded-full text-2xl font-bold transition-all duration-700 delay-300" :class="{ 'opacity-100 transform scale-100': visible, 'opacity-0 transform scale-50': !visible }">
|
||||
2
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">Design</h3>
|
||||
<p class="text-gray-600">Customize your perfect playset with the features your children will love.</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<div class="text-center" x-data="{ visible: false }" x-intersect="visible = true">
|
||||
<div class="w-16 h-16 mx-auto mb-6 flex items-center justify-center bg-yellow-500 text-white rounded-full text-2xl font-bold transition-all duration-700 delay-600" :class="{ 'opacity-100 transform scale-100': visible, 'opacity-0 transform scale-50': !visible }">
|
||||
3
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">Production</h3>
|
||||
<p class="text-gray-600">Your playset is carefully crafted using premium materials and expert craftsmanship.</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 4 -->
|
||||
<div class="text-center" x-data="{ visible: false }" x-intersect="visible = true">
|
||||
<div class="w-16 h-16 mx-auto mb-6 flex items-center justify-center bg-yellow-500 text-white rounded-full text-2xl font-bold transition-all duration-700 delay-900" :class="{ 'opacity-100 transform scale-100': visible, 'opacity-0 transform scale-50': !visible }">
|
||||
4
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">Installation</h3>
|
||||
<p class="text-gray-600">Professional setup in your yard, ensuring safety and stability for years of play.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<div class="py-20 bg-white" id="faq">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently Asked Questions</h2>
|
||||
<p class="text-gray-600 max-w-2xl mx-auto">Find answers to our most commonly asked questions.</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<!-- FAQ Item 1 -->
|
||||
<div class="mb-6" x-data="{ open: false }">
|
||||
<button
|
||||
@click="open = !open"
|
||||
class="flex justify-between items-center w-full bg-gray-50 hover:bg-gray-100 px-6 py-4 rounded-lg text-left transition-all duration-200"
|
||||
>
|
||||
<h3 class="font-bold text-lg">How long does installation take?</h3>
|
||||
<span class="ml-4 flex-shrink-0 text-yellow-500" x-show="!open">
|
||||
<i class="fas fa-plus"></i>
|
||||
</span>
|
||||
<span class="ml-4 flex-shrink-0 text-yellow-500" x-show="open">
|
||||
<i class="fas fa-minus"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 -translate-y-2"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
class="pl-6 pr-4 py-4"
|
||||
>
|
||||
<p class="text-gray-600">Most standard playset installations take between 4-8 hours, depending on the complexity of your chosen design. Our professional installation team will arrive on the scheduled day with all necessary tools and equipment to complete the job efficiently.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ Item 2 -->
|
||||
<div class="mb-6" x-data="{ open: false }">
|
||||
<button
|
||||
@click="open = !open"
|
||||
class="flex justify-between items-center w-full bg-gray-50 hover:bg-gray-100 px-6 py-4 rounded-lg text-left transition-all duration-200"
|
||||
>
|
||||
<h3 class="font-bold text-lg">What type of maintenance is required?</h3>
|
||||
<span class="ml-4 flex-shrink-0 text-yellow-500" x-show="!open">
|
||||
<i class="fas fa-plus"></i>
|
||||
</span>
|
||||
<span class="ml-4 flex-shrink-0 text-yellow-500" x-show="open">
|
||||
<i class="fas fa-minus"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 -translate-y-2"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
class="pl-6 pr-4 py-4"
|
||||
>
|
||||
<p class="text-gray-600">Our vinyl playsets require minimal maintenance. Simply rinse with a garden hose as needed to remove dirt or debris. Unlike wooden sets, there's no need for staining, sealing, or checking for splinters. We recommend checking hardware connections once a year to ensure everything remains tight and secure.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ Item 3 -->
|
||||
<div class="mb-6" x-data="{ open: false }">
|
||||
<button
|
||||
@click="open = !open"
|
||||
class="flex justify-between items-center w-full bg-gray-50 hover:bg-gray-100 px-6 py-4 rounded-lg text-left transition-all duration-200"
|
||||
>
|
||||
<h3 class="font-bold text-lg">Do you offer financing options?</h3>
|
||||
<span class="ml-4 flex-shrink-0 text-yellow-500" x-show="!open">
|
||||
<i class="fas fa-plus"></i>
|
||||
</span>
|
||||
<span class="ml-4 flex-shrink-0 text-yellow-500" x-show="open">
|
||||
<i class="fas fa-minus"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 -translate-y-2"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
class="pl-6 pr-4 py-4"
|
||||
>
|
||||
<p class="text-gray-600">Yes, we offer several financing options to help make your dream playset affordable. During your consultation, our team can explain the various payment plans available, including 0% interest options for qualified customers.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ Item 4 -->
|
||||
<div class="mb-6" x-data="{ open: false }">
|
||||
<button
|
||||
@click="open = !open"
|
||||
class="flex justify-between items-center w-full bg-gray-50 hover:bg-gray-100 px-6 py-4 rounded-lg text-left transition-all duration-200"
|
||||
>
|
||||
<h3 class="font-bold text-lg">What warranty do your playsets include?</h3>
|
||||
<span class="ml-4 flex-shrink-0 text-yellow-500" x-show="!open">
|
||||
<i class="fas fa-plus"></i>
|
||||
</span>
|
||||
<span class="ml-4 flex-shrink-0 text-yellow-500" x-show="open">
|
||||
<i class="fas fa-minus"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 -translate-y-2"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
class="pl-6 pr-4 py-4"
|
||||
>
|
||||
<p class="text-gray-600">All Demo come with our comprehensive warranty that covers structural components for 15 years, vinyl materials for 10 years, and accessories for 1 year. We stand behind the quality of our products and are committed to your family's satisfaction.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ Item 5 -->
|
||||
<div class="mb-6" x-data="{ open: false }">
|
||||
<button
|
||||
@click="open = !open"
|
||||
class="flex justify-between items-center w-full bg-gray-50 hover:bg-gray-100 px-6 py-4 rounded-lg text-left transition-all duration-200"
|
||||
>
|
||||
<h3 class="font-bold text-lg">Can I add accessories later?</h3>
|
||||
<span class="ml-4 flex-shrink-0 text-yellow-500" x-show="!open">
|
||||
<i class="fas fa-plus"></i>
|
||||
</span>
|
||||
<span class="ml-4 flex-shrink-0 text-yellow-500" x-show="open">
|
||||
<i class="fas fa-minus"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 -translate-y-2"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
class="pl-6 pr-4 py-4"
|
||||
>
|
||||
<p class="text-gray-600">Absolutely! Our playsets are designed to grow with your family. You can easily add or upgrade accessories as your children's interests and abilities develop. From additional swings to challenging climbing features, we make it easy to enhance your playset over time.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Form Section -->
|
||||
<div class="py-20 bg-gray-50" id="quote">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
<!-- Form Column -->
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold mb-6">Request a Free Quote</h2>
|
||||
<p class="text-gray-600 mb-8">Fill out the form below, and our team will get back to you within 24 hours with pricing information tailored to your needs.</p>
|
||||
|
||||
<div x-data="contactForm">
|
||||
<form @submit.prevent="submit">
|
||||
<div class="mb-6">
|
||||
<label for="name" class="block text-gray-700 font-medium mb-2">Your Name*</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
x-model="name"
|
||||
class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent transition"
|
||||
:class="{ 'border-red-500': errors.name }"
|
||||
>
|
||||
<div x-show="errors.name" class="text-red-500 text-sm mt-1" x-text="errors.name"></div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label for="email" class="block text-gray-700 font-medium mb-2">Email Address*</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
x-model="email"
|
||||
class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent transition"
|
||||
:class="{ 'border-red-500': errors.email }"
|
||||
>
|
||||
<div x-show="errors.email" class="text-red-500 text-sm mt-1" x-text="errors.email"></div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
x-model="phone"
|
||||
class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent transition"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label for="message" class="block text-gray-700 font-medium mb-2">Tell Us About Your Project*</label>
|
||||
<textarea
|
||||
id="message"
|
||||
x-model="message"
|
||||
rows="4"
|
||||
class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent transition"
|
||||
:class="{ 'border-red-500': errors.message }"
|
||||
></textarea>
|
||||
<div x-show="errors.message" class="text-red-500 text-sm mt-1" x-text="errors.message"></div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-yellow-500 hover:bg-yellow-400 text-gray-900 font-bold py-3 px-8 rounded-lg transition transform hover:-translate-y-1 inline-flex items-center justify-center"
|
||||
:class="{ 'opacity-75 cursor-not-allowed': loading }"
|
||||
:disabled="loading"
|
||||
>
|
||||
<span x-show="!loading">Submit Request</span>
|
||||
<span x-show="loading" class="flex items-center">
|
||||
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Processing...
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div x-show="submitted" class="mt-4 p-4 bg-green-100 text-green-700 rounded-lg">
|
||||
Thank you for your request! We'll be in touch shortly.
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Column -->
|
||||
<div class="bg-white p-8 rounded-xl shadow-lg">
|
||||
<h3 class="text-2xl font-bold mb-6">Why Choose Demo?</h3>
|
||||
|
||||
<div class="mb-8">
|
||||
<div class="flex mb-4">
|
||||
<div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-500 text-xl mr-4 flex-shrink-0">
|
||||
<i class="fas fa-medal"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-lg mb-1">Premium Materials</h4>
|
||||
<p class="text-gray-600">Our vinyl construction offers superior durability without splinters or maintenance worries.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex mb-4">
|
||||
<div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-500 text-xl mr-4 flex-shrink-0">
|
||||
<i class="fas fa-tools"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-lg mb-1">Professional Installation</h4>
|
||||
<p class="text-gray-600">Expert installation included with every purchase for safety and peace of mind.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex mb-4">
|
||||
<div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-500 text-xl mr-4 flex-shrink-0">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-lg mb-1">Industry-Leading Warranty</h4>
|
||||
<p class="text-gray-600">Comprehensive coverage that protects your investment for years to come.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 p-6 rounded-lg">
|
||||
<h4 class="font-bold text-lg mb-4">Contact Information</h4>
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-500 text-lg mr-4 flex-shrink-0">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-600">Serving NY, NJ & CT Areas</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<div class="py-20 bg-yellow-500" id="contact">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-white">Ready to Create Endless Adventures?</h2>
|
||||
<p class="text-xl text-white mb-10">Get in touch with our playset experts and start designing your family's dream playset today.</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-3xl mx-auto">
|
||||
<!-- Phone -->
|
||||
<a href="tel:9097779911" class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all transform hover:-translate-y-1 flex items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-500 text-xl mr-4">
|
||||
<i class="fas fa-phone"></i>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<h3 class="font-bold text-lg">Call Us</h3>
|
||||
<p class="text-gray-600">909.777.9911</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Email -->
|
||||
<a href="mailto:info@demo.com" class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all transform hover:-translate-y-1 flex items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-500 text-xl mr-4">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<h3 class="font-bold text-lg">Email Us</h3>
|
||||
<p class="text-gray-600">info@demo.com</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-12">
|
||||
<a href="#quote" class="bg-gray-900 hover:bg-gray-800 text-white font-bold py-3 px-8 rounded-lg transition transform hover:-translate-y-1 inline-flex items-center justify-center">
|
||||
<span>Request a Free Quote</span>
|
||||
<i class="fas fa-arrow-right ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('footer')
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-white py-12">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
|
||||
<!-- Company Info -->
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-4">Demo</h3>
|
||||
<p class="text-gray-400 mb-4">Premium vinyl playsets designed for endless adventures, built to last for generations of fun.</p>
|
||||
<div class="flex space-x-4">
|
||||
<a href="#" class="text-gray-400 hover:text-white transition">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="#" class="text-gray-400 hover:text-white transition">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="#" class="text-gray-400 hover:text-white transition">
|
||||
<i class="fab fa-pinterest-p"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Products -->
|
||||
<div>
|
||||
<x-maximus::menu-footer />
|
||||
</div>
|
||||
|
||||
<!-- Resources -->
|
||||
<div>
|
||||
<x-maximus::menu-footer />
|
||||
</div>
|
||||
|
||||
<!-- Contact -->
|
||||
<div>
|
||||
<x-maximus::menu-footer />
|
||||
</div>
|
||||
|
||||
<!-- Contact -->
|
||||
<div>
|
||||
<h3 class="text-lg font-bold mb-4">Contact Us</h3>
|
||||
<ul class="space-y-2">
|
||||
<li class="text-gray-400 flex items-center">
|
||||
<i class="fas fa-phone mr-2 text-yellow-500"></i>
|
||||
<span>909.777.9911</span>
|
||||
</li>
|
||||
<li class="text-gray-400 flex items-center">
|
||||
<i class="fas fa-envelope mr-2 text-yellow-500"></i>
|
||||
<span>info@demo.com</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Copyright -->
|
||||
<div class="border-t border-gray-800 pt-8">
|
||||
<p class="text-gray-500 text-center">© 2025 Demo. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@endsection
|
||||
@ -0,0 +1,15 @@
|
||||
<span class="block uppercase text-blueGray-500 text-sm font-semibold mb-2"> Useful Links </span>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm" href="https://www.creative-tim.com/presentation?ref=njs-index"> About Us </a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm" href="https://blog.creative-tim.com?ref=njs-index"> Blog </a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm" href="https://www.github.com/creativetimofficial?ref=njs-index"> Github </a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm" href="https://www.creative-tim.com/bootstrap-themes/free?ref=njs-index"> Free Products </a>
|
||||
</li>
|
||||
</ul>
|
||||
@ -0,0 +1,42 @@
|
||||
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto items-center">
|
||||
<li class="inline-block relative">
|
||||
<a class="hover:text-blueGray-500 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="#pablo" onclick="openDropdown(event,'demo-pages-dropdown')"> Demo Pages </a>
|
||||
<div class="hidden bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 navbar-popper" id="demo-pages-dropdown">
|
||||
<span class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"> Admin Layout </span>
|
||||
<a href="./pages/admin/dashboard.html" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"> Dashboard </a>
|
||||
<a href="./pages/admin/settings.html" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"> Settings </a>
|
||||
<a href="./pages/admin/tables.html" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"> Tables </a>
|
||||
<a href="./pages/admin/maps.html" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"> Maps </a>
|
||||
<div class="h-0 mx-4 my-2 border border-solid border-blueGray-100"></div>
|
||||
<span class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"> Auth Layout </span>
|
||||
<a href="./pages/auth/login.html" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"> Login </a>
|
||||
<a href="./pages/auth/register.html" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"> Register </a>
|
||||
<div class="h-0 mx-4 my-2 border border-solid border-blueGray-100"></div>
|
||||
<span class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"> No Layout </span>
|
||||
<a href="./pages/landing.html" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"> Landing </a>
|
||||
<a href="./pages/profile.html" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"> Profile </a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<a class="hover:text-blueGray-500 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-js%2F" target="_blank">
|
||||
<i class="text-blueGray-400 fab fa-facebook text-lg leading-lg"></i>
|
||||
<span class="lg:hidden inline-block ml-2">Share</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<a class="hover:text-blueGray-500 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-js%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20JavaScript%20UI%20Kit%20and%20Admin.%20Let%20Notus%20JS%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level." target="_blank">
|
||||
<i class="text-blueGray-400 fab fa-twitter text-lg leading-lg"></i>
|
||||
<span class="lg:hidden inline-block ml-2">Tweet</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<a class="hover:text-blueGray-500 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="https://github.com/creativetimofficial/notus-js?ref=njs-index" target="_blank">
|
||||
<i class="text-blueGray-400 fab fa-github text-lg leading-lg"></i>
|
||||
<span class="lg:hidden inline-block ml-2">Star</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<button class="text-white bg-pink-500 active:bg-pink-600 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3 ease-linear transition-all duration-150" type="button">
|
||||
<i class="fas fa-arrow-alt-circle-down"></i> Download </button>
|
||||
</li>
|
||||
</ul>
|
||||
396
resources/views/templates/notus/page.blade.php
Normal file
396
resources/views/templates/notus/page.blade.php
Normal file
@ -0,0 +1,396 @@
|
||||
@extends('vuexy-website-layout-simple-koneko::layouts.notus.master')
|
||||
|
||||
@section('header')
|
||||
<nav class="top-0 fixed z-50 w-full flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-white shadow">
|
||||
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
|
||||
<div class="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start">
|
||||
<a class="text-blueGray-700 text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase" href="./index.html">Notus Tailwind JS</a>
|
||||
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('example-collapse-navbar')">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="lg:flex flex-grow items-center bg-white lg:bg-opacity-0 lg:shadow-none hidden" id="example-collapse-navbar">
|
||||
<ul class="flex flex-col lg:flex-row list-none mr-auto">
|
||||
<li class="flex items-center">
|
||||
<a class="hover:text-blueGray-500 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="https://www.creative-tim.com/learning-lab/tailwind/js/overview/notus?ref=njs-index">
|
||||
<i class="text-blueGray-400 far fa-file-alt text-lg leading-lg mr-2"></i> Docs </a>
|
||||
</li>
|
||||
</ul>
|
||||
<x-notus::menu-top />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<section class="header relative pt-16 items-center flex h-screen max-h-860-px">
|
||||
<div class="container mx-auto items-center flex flex-wrap">
|
||||
<div class="w-full md:w-8/12 lg:w-6/12 xl:w-6/12 px-4">
|
||||
<div class="pt-32 sm:pt-0">
|
||||
<h2 class="font-semibold text-4xl text-blueGray-600"> Notus Tailwind JS - A beautiful extension for Tailwind CSS. </h2>
|
||||
<p class="mt-4 text-lg leading-relaxed text-blueGray-500"> Notus Tailwind JS is Free and Open Source. It does not change any of the CSS from <a href="https://tailwindcss.com/?ref=creativetim" class="text-blueGray-600" target="_blank"> Tailwind CSS. </a> It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue and Angular. </p>
|
||||
<div class="mt-12">
|
||||
<a href="https://www.creative-tim.com/learning-lab/tailwind/js/overview/notus?ref=njs-index" target="_blank" class="get-started text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-pink-500 active:bg-pink-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"> Get started </a>
|
||||
<a href="https://github.com/creativetimofficial/notus-js?ref=njs-index" class="github-star ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150" target="_blank"> Github Star </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img class="absolute top-0 b-auto right-0 pt-16 sm:w-6/12 -mt-48 sm:mt-0 w-10/12 max-h-860-px" src="./assets/img/ill_header_3.png" alt="..." />
|
||||
</section>
|
||||
<section class="mt-48 md:mt-40 pb-40 relative bg-blueGray-100">
|
||||
<div class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20" style="transform: translateZ(0)">
|
||||
<svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0">
|
||||
<polygon class="text-blueGray-100 fill-current" points="2560 0 2560 100 0 100"></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="container mx-auto">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="w-10/12 md:w-6/12 lg:w-4/12 px-12 md:px-4 mr-auto ml-auto -mt-32">
|
||||
<div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-pink-500">
|
||||
<img alt="..." src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80" class="w-full align-middle rounded-t-lg" />
|
||||
<blockquote class="relative p-8 mb-4">
|
||||
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block h-95-px -top-94-px">
|
||||
<polygon points="-30,95 583,95 583,65" class="text-pink-500 fill-current"></polygon>
|
||||
</svg>
|
||||
<h4 class="text-xl font-bold text-white"> Great for your awesome project </h4>
|
||||
<p class="text-md font-light mt-2 text-white"> Putting together a page has never been easier than matching together pre-made components. From landing pages presentation to login areas, you can easily customise and built your pages. </p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-6/12 px-4">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full md:w-6/12 px-4">
|
||||
<div class="relative flex flex-col mt-4">
|
||||
<div class="px-4 py-5 flex-auto">
|
||||
<div class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white">
|
||||
<i class="fas fa-sitemap"></i>
|
||||
</div>
|
||||
<h6 class="text-xl mb-1 font-semibold">CSS Components</h6>
|
||||
<p class="mb-4 text-blueGray-500"> Notus Tailwind JS comes with a huge number of Fully Coded CSS components. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex flex-col min-w-0">
|
||||
<div class="px-4 py-5 flex-auto">
|
||||
<div class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white">
|
||||
<i class="fas fa-drafting-compass"></i>
|
||||
</div>
|
||||
<h6 class="text-xl mb-1 font-semibold"> JavaScript Components </h6>
|
||||
<p class="mb-4 text-blueGray-500"> We also feature many dynamic components for React, NextJS, Vue and Angular. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-6/12 px-4">
|
||||
<div class="relative flex flex-col min-w-0 mt-4">
|
||||
<div class="px-4 py-5 flex-auto">
|
||||
<div class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white">
|
||||
<i class="fas fa-newspaper"></i>
|
||||
</div>
|
||||
<h6 class="text-xl mb-1 font-semibold">Pages</h6>
|
||||
<p class="mb-4 text-blueGray-500"> This extension also comes with 3 sample pages. They are fully coded so you can start working instantly. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex flex-col min-w-0">
|
||||
<div class="px-4 py-5 flex-auto">
|
||||
<div class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white">
|
||||
<i class="fas fa-file-alt"></i>
|
||||
</div>
|
||||
<h6 class="text-xl mb-1 font-semibold">Documentation</h6>
|
||||
<p class="mb-4 text-blueGray-500"> Built by developers for developers. You will love how easy is to to work with Notus Tailwind JS. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container mx-auto overflow-hidden pb-20">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="w-full md:w-4/12 px-12 md:px-4 ml-auto mr-auto mt-48">
|
||||
<div class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white">
|
||||
<i class="fas fa-sitemap text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl mb-2 font-semibold leading-normal"> CSS Components </h3>
|
||||
<p class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600"> Every element that you need in a product comes built in as a component. All components fit perfectly with each other and can have different colours. </p>
|
||||
<div class="block pb-6">
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"> Buttons </span>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"> Inputs </span>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"> Labels </span>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"> Menus </span>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"> Navbars </span>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"> Pagination </span>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"> Progressbars </span>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"> Typography </span>
|
||||
</div>
|
||||
<a href="https://www.creative-tim.com/learning-lab/tailwind/js/alerts/notus?ref=njs-index" target="_blank" class="font-bold text-blueGray-700 hover:text-blueGray-500 ease-linear transition-all duration-150"> View All <i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="w-full md:w-5/12 px-4 mr-auto ml-auto mt-32">
|
||||
<div class="relative flex flex-col min-w-0 w-full mb-6 mt-48 md:mt-0">
|
||||
<img alt="..." src="./assets/img/component-btn.png" class="w-full align-middle rounded absolute shadow-lg max-w-100-px left-145-px -top-29-px z-3" />
|
||||
<img alt="..." src="./assets/img/component-profile-card.png" class="w-full align-middle rounded-lg absolute shadow-lg max-w-210-px left-260-px -top-160-px" />
|
||||
<img alt="..." src="./assets/img/component-info-card.png" class="w-full align-middle rounded-lg absolute shadow-lg max-w-180-px left-40-px -top-225-px z-2" />
|
||||
<img alt="..." src="./assets/img/component-info-2.png" class="w-full align-middle rounded-lg absolute shadow-2xl max-w-200-px -left-50-px top-25-px" />
|
||||
<img alt="..." src="./assets/img/component-menu.png" class="w-full align-middle rounded absolute shadow-lg max-w-580-px -left-20-px top-210-px" />
|
||||
<img alt="..." src="./assets/img/component-btn-pink.png" class="w-full align-middle rounded absolute shadow-xl max-w-120-px left-195-px top-95-px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center pt-32">
|
||||
<div class="w-full md:w-6/12 px-4 mr-auto ml-auto mt-32">
|
||||
<div class="justify-center flex flex-wrap relative">
|
||||
<div class="my-4 w-full lg:w-6/12 px-4">
|
||||
<a href="https://www.creative-tim.com/learning-lab/tailwind/svelte/alerts/notus?ref=vtw-index" target="_blank">
|
||||
<div class="bg-red-600 shadow-lg rounded-lg text-center p-8">
|
||||
<img alt="..." class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/svelte.jpg" />
|
||||
<p class="text-lg text-white mt-4 font-semibold">Svelte</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://www.creative-tim.com/learning-lab/tailwind/react/alerts/notus?ref=vtw-index" target="_blank">
|
||||
<div class="bg-lightBlue-500 shadow-lg rounded-lg text-center p-8 mt-8">
|
||||
<img alt="..." class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/react.jpg" />
|
||||
<p class="text-lg text-white mt-4 font-semibold">ReactJS</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://www.creative-tim.com/learning-lab/tailwind/nextjs/alerts/notus?ref=vtw-index" target="_blank">
|
||||
<div class="bg-blueGray-700 shadow-lg rounded-lg text-center p-8 mt-8">
|
||||
<img alt="..." class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/nextjs.jpg" />
|
||||
<p class="text-lg text-white mt-4 font-semibold">NextJS</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="my-4 w-full lg:w-6/12 px-4 lg:mt-16">
|
||||
<a href="https://www.creative-tim.com/learning-lab/tailwind/js/alerts/notus?ref=vtw-index" target="_blank">
|
||||
<div class="bg-yellow-500 shadow-lg rounded-lg text-center p-8">
|
||||
<img alt="..." class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/js.png" />
|
||||
<p class="text-lg text-white mt-4 font-semibold"> JavaScript </p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://www.creative-tim.com/learning-lab/tailwind/angular/alerts/notus?ref=vtw-index" target="_blank">
|
||||
<div class="bg-red-700 shadow-lg rounded-lg text-center p-8 mt-8">
|
||||
<img alt="..." class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/angular.jpg" />
|
||||
<p class="text-lg text-white mt-4 font-semibold">Angular</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://www.creative-tim.com/learning-lab/tailwind/vue/alerts/notus?ref=vtw-index" target="_blank">
|
||||
<div class="bg-emerald-500 shadow-lg rounded-lg text-center p-8 mt-8">
|
||||
<img alt="..." class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/vue.jpg" />
|
||||
<p class="text-lg text-white mt-4 font-semibold">Vue.js</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-4/12 px-12 md:px-4 ml-auto mr-auto mt-48">
|
||||
<div class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white">
|
||||
<i class="fas fa-drafting-compass text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl mb-2 font-semibold leading-normal"> Javascript Components </h3>
|
||||
<p class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600"> In order to create a great User Experience some components require JavaScript. In this way you can manipulate the elements on the page and give more options to your users. </p>
|
||||
<p class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600"> We created a set of Components that are dynamic and come to help you. </p>
|
||||
<div class="block pb-6">
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"> Alerts </span>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"> Dropdowns </span>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"> Menus </span>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"> Modals </span>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"> Navbars </span>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"> Popovers </span>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"> Tabs </span>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"> Tooltips </span>
|
||||
</div>
|
||||
<a href="https://www.creative-tim.com/learning-lab/tailwind/js/alerts/notus?ref=njs-index" target="_blank" class="font-bold text-blueGray-700 hover:text-blueGray-500 ease-linear transition-all duration-150"> View all <i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container mx-auto px-4 pb-32 pt-48">
|
||||
<div class="items-center flex flex-wrap">
|
||||
<div class="w-full md:w-5/12 ml-auto px-12 md:px-4">
|
||||
<div class="md:pr-12">
|
||||
<div class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white">
|
||||
<i class="fas fa-file-alt text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl font-semibold">Complex Documentation</h3>
|
||||
<p class="mt-4 text-lg leading-relaxed text-blueGray-500"> This extension comes a lot of fully coded examples that help you get started faster. You can adjust the colors and also the programming language. You can change the text and images and you're good to go. </p>
|
||||
<ul class="list-none mt-6">
|
||||
<li class="py-2">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-blueGray-50 mr-3">
|
||||
<i class="fas fa-fingerprint"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-blueGray-500"> Built by Developers for Developers </h4>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-blueGray-50 mr-3">
|
||||
<i class="fab fa-html5"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-blueGray-500"> Carefully crafted code for Components </h4>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-blueGray-50 mr-3">
|
||||
<i class="far fa-paper-plane"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-blueGray-500"> Dynamic Javascript Components </h4>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-6/12 mr-auto px-4 pt-24 md:pt-0">
|
||||
<img alt="..." class="max-w-full rounded-lg shadow-xl" style="
|
||||
transform: scale(1) perspective(1040px) rotateY(-11deg)
|
||||
rotateX(2deg) rotate(2deg);
|
||||
" src="./assets/img/documentation.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="justify-center text-center flex flex-wrap mt-24">
|
||||
<div class="w-full md:w-6/12 px-12 md:px-4">
|
||||
<h2 class="font-semibold text-4xl">Beautiful Example Pages</h2>
|
||||
<p class="text-lg leading-relaxed mt-4 mb-4 text-blueGray-500"> Notus Tailwind JS is a completly new product built using our past experience in web templates. Take the examples we made for you and start playing with them. </p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="block relative z-1 bg-blueGray-600">
|
||||
<div class="container mx-auto">
|
||||
<div class="justify-center flex flex-wrap">
|
||||
<div class="w-full lg:w-12/12 px-4 -mt-24">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<h5 class="text-xl font-semibold pb-4 text-center"> Login Page </h5>
|
||||
<a href="./pages/auth/login.html">
|
||||
<div class="hover:-mt-4 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg ease-linear transition-all duration-150">
|
||||
<img alt="..." class="align-middle border-none max-w-full h-auto rounded-lg" src="./assets/img/login.jpg" />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<h5 class="text-xl font-semibold pb-4 text-center"> Profile Page </h5>
|
||||
<a href="./pages/profile.html">
|
||||
<div class="hover:-mt-4 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg ease-linear transition-all duration-150">
|
||||
<img alt="..." class="align-middle border-none max-w-full h-auto rounded-lg" src="./assets/img/profile.jpg" />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<h5 class="text-xl font-semibold pb-4 text-center"> Landing Page </h5>
|
||||
<a href="./pages/landing.html">
|
||||
<div class="hover:-mt-4 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg ease-linear transition-all duration-150">
|
||||
<img alt="..." class="align-middle border-none max-w-full h-auto rounded-lg" src="./assets/img/landing.jpg" />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="py-20 bg-blueGray-600 overflow-hidden">
|
||||
<div class="container mx-auto pb-64">
|
||||
<div class="flex flex-wrap justify-center">
|
||||
<div class="w-full md:w-5/12 px-12 md:px-4 ml-auto mr-auto md:mt-64">
|
||||
<div class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white">
|
||||
<i class="fas fa-code-branch text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl mb-2 font-semibold leading-normal text-white"> Open Source </h3>
|
||||
<p class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-400"> Since <a href="https://tailwindcss.com/?ref=creativetim" class="text-blueGray-300" target="_blank"> Tailwind CSS </a> is an open source project we wanted to continue this movement too. You can give this version a try to feel the design and also test the quality of the code! </p>
|
||||
<p class="text-lg font-light leading-relaxed mt-0 mb-4 text-blueGray-400"> Get it free on Github and please help us spread the news with a Star! </p>
|
||||
<a href="https://github.com/creativetimofficial/notus-js?ref=njs-index" target="_blank" class="github-star mt-4 inline-block text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"> Github Star </a>
|
||||
</div>
|
||||
<div class="w-full md:w-4/12 px-4 mr-auto ml-auto mt-32 relative">
|
||||
<i class="fab fa-github text-blueGray-700 text-55 absolute -top-150-px -right-100 left-auto opacity-80"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pb-16 bg-blueGray-200 relative pt-32">
|
||||
<div class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20" style="transform: translateZ(0)">
|
||||
<svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0">
|
||||
<polygon class="text-blueGray-200 fill-current" points="2560 0 2560 100 0 100"></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="container mx-auto">
|
||||
<div class="flex flex-wrap justify-center bg-white shadow-xl rounded-lg -mt-64 py-16 px-12 relative z-10">
|
||||
<div class="w-full text-center lg:w-8/12">
|
||||
<p class="text-4xl text-center">
|
||||
<span role="img" aria-label="love"> 😍 </span>
|
||||
</p>
|
||||
<h3 class="font-semibold text-3xl"> Do you love this Starter Kit? </h3>
|
||||
<p class="text-blueGray-500 text-lg leading-relaxed mt-4 mb-4"> Cause if you do, it can be yours now. Hit the buttons below to navigate to get the Free version for your next project. Build a new web app or give an old project a new look! </p>
|
||||
<div class="sm:block flex flex-col mt-10">
|
||||
<a href="https://www.creative-tim.com/learning-lab/tailwind/js/overview/notus?ref=njs-index" target="_blank" class="get-started text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-2 bg-pink-500 active:bg-pink-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"> Get started </a>
|
||||
<a href="https://github.com/creativetimofficial/notus-js?ref=njs-index" target="_blank" class="github-star sm:ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150">
|
||||
<i class="fab fa-github text-lg mr-1"></i>
|
||||
<span>Help With a Star</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-center mt-16"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endsection
|
||||
|
||||
@section('footer')
|
||||
<footer class="relative bg-blueGray-200 pt-8 pb-6">
|
||||
<div class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20" style="transform: translateZ(0)">
|
||||
<svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0">
|
||||
<polygon class="text-blueGray-200 fill-current" points="2560 0 2560 100 0 100"></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-wrap text-center lg:text-left">
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<h4 class="text-3xl font-semibold">Let's keep in touch!</h4>
|
||||
<h5 class="text-lg mt-0 mb-2 text-blueGray-600"> Find us on any of these platforms, we respond 1-2 business days. </h5>
|
||||
<div class="mt-6 lg:mb-0 mb-6">
|
||||
<button class="bg-white text-lightBlue-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</button>
|
||||
<button class="bg-white text-lightBlue-600 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button">
|
||||
<i class="fab fa-facebook-square"></i>
|
||||
</button>
|
||||
<button class="bg-white text-pink-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button">
|
||||
<i class="fab fa-dribbble"></i>
|
||||
</button>
|
||||
<button class="bg-white text-blueGray-800 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button">
|
||||
<i class="fab fa-github"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div class="flex flex-wrap items-top mb-6">
|
||||
<div class="w-full lg:w-4/12 px-4 ml-auto">
|
||||
<x-notus::menu-footer />
|
||||
</div>
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<x-notus::menu-footer />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-6 border-blueGray-300" />
|
||||
<div class="flex flex-wrap items-center md:justify-between justify-center">
|
||||
<div class="w-full md:w-4/12 px-4 mx-auto text-center">
|
||||
<div class="text-sm text-blueGray-500 font-semibold py-1"> Copyright © <span id="get-current-year"></span> Notus Tailwind JS by <a href="https://www.creative-tim.com?ref=njs-index" class="text-blueGray-500 hover:text-blueGray-800"> Creative Tim </a> . </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@endsection
|
||||
93
resources/views/templates/samuel-coming-soon/page.blade.php
Normal file
93
resources/views/templates/samuel-coming-soon/page.blade.php
Normal file
@ -0,0 +1,93 @@
|
||||
@extends('vuexy-website-layout-simple-koneko::layouts.samuel-coming-soon.master')
|
||||
|
||||
@section('content')
|
||||
<div class="relative h-screen w-full flex items-center justify-center bg-cover bg-center text-center px-5"
|
||||
style="background-image:url(https://images.pexels.com/photos/260689/pexels-photo-260689.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);">
|
||||
<div class="absolute top-0 right-0 bottom-0 left-0 bg-gray-900 opacity-75"></div>
|
||||
|
||||
<div class="z-50 flex flex-col justify-center text-white w-full h-screen">
|
||||
<span class="text-bold">LOGO</span>
|
||||
<h1 class="text-5xl">We are <b>Almost</b> there!</h1>
|
||||
<p>Stay tuned for something amazing!!!</p>
|
||||
|
||||
<div class="sm:mt-40">
|
||||
<form class="w-full max-w-xl mx-auto">
|
||||
<div class="flex items-center border-b border-indigo-500 py-2">
|
||||
<input class="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none" type="text" placeholder="username@email.ext" aria-label="Full name">
|
||||
<button class="flex-shrink-0 bg-indigo-500 hover:bg-teal-700 border-indigo-500 hover:border-indigo-700 text-sm border-4 text-white py-1 px-2 rounded" type="button">Subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex text-white mx-auto">
|
||||
<a href="/#">
|
||||
<svg fill="currentColor" class="cursor-pointer h-10 mr-2" viewBox="0 0 24 24" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
|
||||
xmlns:serif="http://www.serif.com/"
|
||||
style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2;">
|
||||
<path id="Twitter" d="M24,12c0,6.627 -5.373,12 -12,12c-6.627,0 -12,-5.373 -12,-12c0,-6.627
|
||||
5.373,-12 12,-12c6.627,0 12,5.373 12,12Zm-6.465,-3.192c-0.379,0.168
|
||||
-0.786,0.281 -1.213,0.333c0.436,-0.262 0.771,-0.676
|
||||
0.929,-1.169c-0.408,0.242 -0.86,0.418 -1.341,0.513c-0.385,-0.411
|
||||
-0.934,-0.667 -1.541,-0.667c-1.167,0 -2.112,0.945 -2.112,2.111c0,0.166
|
||||
0.018,0.327 0.054,0.482c-1.754,-0.088 -3.31,-0.929
|
||||
-4.352,-2.206c-0.181,0.311 -0.286,0.674 -0.286,1.061c0,0.733 0.373,1.379
|
||||
0.94,1.757c-0.346,-0.01 -0.672,-0.106 -0.956,-0.264c-0.001,0.009
|
||||
-0.001,0.018 -0.001,0.027c0,1.023 0.728,1.877 1.694,2.07c-0.177,0.049
|
||||
-0.364,0.075 -0.556,0.075c-0.137,0 -0.269,-0.014 -0.397,-0.038c0.268,0.838
|
||||
1.048,1.449 1.972,1.466c-0.723,0.566 -1.633,0.904 -2.622,0.904c-0.171,0
|
||||
-0.339,-0.01 -0.504,-0.03c0.934,0.599 2.044,0.949 3.237,0.949c3.883,0
|
||||
6.007,-3.217 6.007,-6.008c0,-0.091 -0.002,-0.183 -0.006,-0.273c0.413,-0.298
|
||||
0.771,-0.67 1.054,-1.093Z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="/#">
|
||||
<svg fill="currentColor" class="cursor-pointer h-10 mr-2" viewBox="0 0 24 24" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
|
||||
xmlns:serif="http://www.serif.com/"
|
||||
style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2;">
|
||||
<path id="Facebook" d="M24,12c0,6.627 -5.373,12 -12,12c-6.627,0 -12,-5.373 -12,-12c0,-6.627
|
||||
5.373,-12 12,-12c6.627,0 12,5.373
|
||||
12,12Zm-11.278,0l1.294,0l0.172,-1.617l-1.466,0l0.002,-0.808c0,-0.422
|
||||
0.04,-0.648 0.646,-0.648l0.809,0l0,-1.616l-1.295,0c-1.555,0 -2.103,0.784
|
||||
-2.103,2.102l0,0.97l-0.969,0l0,1.617l0.969,0l0,4.689l1.941,0l0,-4.689Z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="/#">
|
||||
<svg fill="currentColor" class="cursor-pointer h-10 mr-2" viewBox="0 0 24 24" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
|
||||
xmlns:serif="http://www.serif.com/"
|
||||
style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2;">
|
||||
<path id="Shape" d="M7.3,0.9c1.5,-0.6 3.1,-0.9 4.7,-0.9c1.6,0 3.2,0.3 4.7,0.9c1.5,0.6 2.8,1.5
|
||||
3.8,2.6c1,1.1 1.9,2.3 2.6,3.8c0.7,1.5 0.9,3 0.9,4.7c0,1.7 -0.3,3.2
|
||||
-0.9,4.7c-0.6,1.5 -1.5,2.8 -2.6,3.8c-1.1,1 -2.3,1.9 -3.8,2.6c-1.5,0.7
|
||||
-3.1,0.9 -4.7,0.9c-1.6,0 -3.2,-0.3 -4.7,-0.9c-1.5,-0.6 -2.8,-1.5
|
||||
-3.8,-2.6c-1,-1.1 -1.9,-2.3 -2.6,-3.8c-0.7,-1.5 -0.9,-3.1 -0.9,-4.7c0,-1.6
|
||||
0.3,-3.2 0.9,-4.7c0.6,-1.5 1.5,-2.8 2.6,-3.8c1.1,-1 2.3,-1.9
|
||||
3.8,-2.6Zm-0.3,7.1c0.6,0 1.1,-0.2 1.5,-0.5c0.4,-0.3 0.5,-0.8 0.5,-1.3c0,-0.5
|
||||
-0.2,-0.9 -0.6,-1.2c-0.4,-0.3 -0.8,-0.5 -1.4,-0.5c-0.6,0 -1.1,0.2
|
||||
-1.4,0.5c-0.3,0.3 -0.6,0.7 -0.6,1.2c0,0.5 0.2,0.9 0.5,1.3c0.3,0.4 0.9,0.5
|
||||
1.5,0.5Zm1.5,10l0,-8.5l-3,0l0,8.5l3,0Zm11,0l0,-4.5c0,-1.4 -0.3,-2.5
|
||||
-0.9,-3.3c-0.6,-0.8 -1.5,-1.2 -2.6,-1.2c-0.6,0 -1.1,0.2 -1.5,0.5c-0.4,0.3
|
||||
-0.8,0.8 -0.9,1.3l-0.1,-1.3l-3,0l0.1,2l0,6.5l3,0l0,-4.5c0,-0.6 0.1,-1.1
|
||||
0.4,-1.5c0.3,-0.4 0.6,-0.5 1.1,-0.5c0.5,0 0.9,0.2 1.1,0.5c0.2,0.3 0.4,0.8
|
||||
0.4,1.5l0,4.5l2.9,0Z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="/#">
|
||||
<svg fill="currentColor" class="cursor-pointer h-10 mr-2" viewBox="0 0 24 24" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
|
||||
xmlns:serif="http://www.serif.com/"
|
||||
style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2;">
|
||||
<path id="Combined-Shape" d="M12,24c6.627,0 12,-5.373 12,-12c0,-6.627 -5.373,-12 -12,-12c-6.627,0
|
||||
-12,5.373 -12,12c0,6.627 5.373,12 12,12Zm6.591,-15.556l-0.722,0c-0.189,0
|
||||
-0.681,0.208 -0.681,0.385l0,6.422c0,0.178 0.492,0.323
|
||||
0.681,0.323l0.722,0l0,1.426l-4.675,0l0,-1.426l0.935,0l0,-6.655l-0.163,0l-2.251,8.081l-1.742,0l-2.222,-8.081l-0.168,0l0,6.655l0.935,0l0,1.426l-3.74,0l0,-1.426l0.519,0c0.203,0
|
||||
0.416,-0.145 0.416,-0.323l0,-6.422c0,-0.177 -0.213,-0.385
|
||||
-0.416,-0.385l-0.519,0l0,-1.426l4.847,0l1.583,5.704l0.042,0l1.598,-5.704l5.021,0l0,1.426Z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user