Update heros to large screen
This commit is contained in:
khatabwedaa
parent
0bc9e6266d
commit
a5c7a54ed8
|
|
@ -2,13 +2,13 @@
|
|||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<header class="bg-white dark:bg-gray-800">
|
||||
<nav class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
|
||||
<nav class="container px-6 py-4 mx-auto lg:flex lg:justify-between lg:items-center">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<div class="flex md:hidden">
|
||||
<div class="flex lg:hidden">
|
||||
<button @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
|
|
@ -17,15 +17,15 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="isOpen ? '' : 'hidden'" class="items-center md:flex">
|
||||
<div class="flex flex-col md:flex-row md:mx-6">
|
||||
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Home</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Shop</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Contact</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">About</a>
|
||||
<div :class="isOpen ? '' : 'hidden'" class="items-center lg:flex">
|
||||
<div class="flex flex-col lg:flex-row lg:mx-6">
|
||||
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 lg:mx-4 lg:my-0" href="#">Home</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 lg:mx-4 lg:my-0" href="#">Shop</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 lg:mx-4 lg:my-0" href="#">Contact</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 lg:mx-4 lg:my-0" href="#">About</a>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center md:block">
|
||||
<div class="flex justify-center lg:block">
|
||||
<a class="relative text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
|
|
@ -38,17 +38,17 @@
|
|||
</nav>
|
||||
|
||||
<div class="container px-6 py-16 mx-auto">
|
||||
<div class="items-center md:flex">
|
||||
<div class="w-full md:w-1/2">
|
||||
<div class="max-w-lg">
|
||||
<h1 class="text-2xl font-semibold text-gray-800 uppercase dark:text-white md:text-3xl">Best Place To Choose Your Clothes</h1>
|
||||
<div class="items-center lg:flex">
|
||||
<div class="w-full lg:w-1/2">
|
||||
<div class="lg:max-w-lg">
|
||||
<h1 class="text-2xl font-semibold text-gray-800 uppercase dark:text-white lg:text-3xl">Best Place To Choose Your Clothes</h1>
|
||||
<p class="mt-2 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro beatae error laborum ab amet sunt recusandae? Reiciendis natus perspiciatis optio.</p>
|
||||
<button class="w-full px-3 py-2 mt-6 text-xs font-medium text-white uppercase transition-colors duration-200 transform bg-indigo-600 rounded-md md:w-auto hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button>
|
||||
<button class="w-full px-3 py-2 mt-6 text-xs font-medium text-white uppercase transition-colors duration-200 transform bg-indigo-600 rounded-md lg:w-auto hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center w-full mt-6 md:mt-0 md:w-1/2">
|
||||
<img class="w-full h-full max-w-2xl" src="~/assets/svg/Catalogue-pana.svg" alt="Catalogue-pana.svg">
|
||||
<div class="flex items-center justify-center w-full mt-6 lg:mt-0 lg:w-1/2">
|
||||
<img class="w-full h-full lg:max-w-2xl" src="~/assets/svg/Catalogue-pana.svg" alt="Catalogue-pana.svg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -66,14 +66,14 @@
|
|||
code: `
|
||||
<header class="bg-white dark:bg-gray-800">
|
||||
<nav>
|
||||
<div class="container px-6 py-3 mx-auto md:flex md:justify-between md:items-center">
|
||||
<div class="container px-6 py-3 mx-auto lg:flex lg:justify-between lg:items-center">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden">
|
||||
<div class="flex lg:hidden">
|
||||
<button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
|
|
@ -83,15 +83,15 @@
|
|||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="items-center md:flex">
|
||||
<div class="flex flex-col md:flex-row md:mx-6">
|
||||
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Home</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Shop</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Contact</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">About</a>
|
||||
<div class="items-center lg:flex">
|
||||
<div class="flex flex-col lg:flex-row lg:mx-6">
|
||||
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 lg:mx-4 lg:my-0" href="#">Home</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 lg:mx-4 lg:my-0" href="#">Shop</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 lg:mx-4 lg:my-0" href="#">Contact</a>
|
||||
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 lg:mx-4 lg:my-0" href="#">About</a>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center md:block">
|
||||
<div class="flex justify-center lg:block">
|
||||
<a class="relative text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
|
|
@ -105,17 +105,17 @@
|
|||
</nav>
|
||||
|
||||
<div class="container px-6 py-16 mx-auto">
|
||||
<div class="items-center md:flex">
|
||||
<div class="w-full md:w-1/2">
|
||||
<div class="max-w-lg">
|
||||
<h1 class="text-2xl font-semibold text-gray-800 uppercase dark:text-white md:text-3xl">Best Place To Choose Your Clothes</h1>
|
||||
<div class="items-center lg:flex">
|
||||
<div class="w-full lg:w-1/2">
|
||||
<div class="lg:max-w-lg">
|
||||
<h1 class="text-2xl font-semibold text-gray-800 uppercase dark:text-white lg:text-3xl">Best Place To Choose Your Clothes</h1>
|
||||
<p class="mt-2 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro beatae error laborum ab amet sunt recusandae? Reiciendis natus perspiciatis optio.</p>
|
||||
<button class="w-full px-3 py-2 mt-6 text-xs font-medium text-white uppercase transition-colors duration-200 transform bg-indigo-600 rounded-md md:w-auto hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button>
|
||||
<button class="w-full px-3 py-2 mt-6 text-xs font-medium text-white uppercase transition-colors duration-200 transform bg-indigo-600 rounded-md lg:w-auto hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center w-full mt-6 md:mt-0 md:w-1/2">
|
||||
<img class="w-full h-full max-w-2xl" src="../../../assets/svg/Catalogue-pana.svg" alt="Catalogue-pana.svg">
|
||||
<div class="flex items-center justify-center w-full mt-6 lg:mt-0 lg:w-1/2">
|
||||
<img class="w-full h-full lg:max-w-2xl" src="../../../assets/svg/Catalogue-pana.svg" alt="Catalogue-pana.svg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
<header>
|
||||
<nav class="bg-white shadow dark:bg-gray-800">
|
||||
<div class="container px-6 py-4 mx-auto">
|
||||
<div class="md:flex md:items-center md:justify-between">
|
||||
<div class="lg:flex lg:items-center lg:justify-between">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-xl font-semibold text-gray-700">
|
||||
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<div class="flex md:hidden">
|
||||
<div class="flex lg:hidden">
|
||||
<button @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
|
|
@ -19,11 +19,11 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="!isOpen ? 'hidden' : ''" class="-mx-4 md:flex md:items-center">
|
||||
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize md:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">Web developers</a>
|
||||
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize md:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">Web Designers</a>
|
||||
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize md:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">UI/UX Designers</a>
|
||||
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize md:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">Contact</a>
|
||||
<div :class="!isOpen ? 'hidden' : ''" class="-mx-4 lg:flex lg:items-center">
|
||||
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">Web developers</a>
|
||||
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">Web Designers</a>
|
||||
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">UI/UX Designers</a>
|
||||
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -32,8 +32,8 @@
|
|||
<div class="w-full bg-center bg-cover h-128" style="background-image: url(https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);">
|
||||
<div class="flex items-center justify-center w-full h-full bg-gray-900 bg-opacity-50">
|
||||
<div class="text-center">
|
||||
<h1 class="text-2xl font-semibold text-white uppercase md:text-3xl">Build Your new <span class="text-blue-400 underline">Saas</span></h1>
|
||||
<button class="w-full px-4 py-2 mt-4 text-sm font-medium text-white uppercase transition-colors duration-200 transform bg-blue-600 rounded-md md:w-auto hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Start project</button>
|
||||
<h1 class="text-2xl font-semibold text-white uppercase lg:text-3xl">Build Your new <span class="text-blue-400 underline">Saas</span></h1>
|
||||
<button class="w-full px-4 py-2 mt-4 text-sm font-medium text-white uppercase transition-colors duration-200 transform bg-blue-600 rounded-md lg:w-auto hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Start project</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -63,14 +63,14 @@
|
|||
<header>
|
||||
<nav class="bg-white shadow dark:bg-gray-800">
|
||||
<div class="container px-6 py-4 mx-auto">
|
||||
<div class="md:flex md:items-center md:justify-between">
|
||||
<div class="lg:flex lg:items-center lg:justify-between">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-xl font-semibold text-gray-700">
|
||||
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden">
|
||||
<div class="flex lg:hidden">
|
||||
<button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
|
|
@ -80,11 +80,11 @@
|
|||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="hidden -mx-4 md:flex md:items-center">
|
||||
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize md:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">Web developers</a>
|
||||
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize md:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">Web Designers</a>
|
||||
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize md:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">UI/UX Designers</a>
|
||||
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize md:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">Contact</a>
|
||||
<div class="hidden -mx-4 lg:flex lg:items-center">
|
||||
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">Web developers</a>
|
||||
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">Web Designers</a>
|
||||
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">UI/UX Designers</a>
|
||||
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -93,8 +93,8 @@
|
|||
<div class="w-full bg-center bg-cover h-128" style="background-image: url(https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);">
|
||||
<div class="flex items-center justify-center w-full h-full bg-gray-900 bg-opacity-50">
|
||||
<div class="text-center">
|
||||
<h1 class="text-2xl font-semibold text-white uppercase md:text-3xl">Build Your new <span class="text-blue-400 underline">Saas</span></h1>
|
||||
<button class="w-full px-4 py-2 mt-4 text-sm font-medium text-white uppercase transition-colors duration-200 transform bg-blue-600 rounded-md md:w-auto hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Start project</button>
|
||||
<h1 class="text-2xl font-semibold text-white uppercase lg:text-3xl">Build Your new <span class="text-blue-400 underline">Saas</span></h1>
|
||||
<button class="w-full px-4 py-2 mt-4 text-sm font-medium text-white uppercase transition-colors duration-200 transform bg-blue-600 rounded-md lg:w-auto hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Start project</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@
|
|||
<div class="py-6" slot="component">
|
||||
<header class="bg-white dark:bg-gray-800">
|
||||
<nav class="border-b dark:border-gray-700">
|
||||
<div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
|
||||
<div class="container px-6 py-4 mx-auto lg:flex lg:justify-between lg:items-center">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div @click="isOpen = !isOpen" class="flex md:hidden">
|
||||
<div @click="isOpen = !isOpen" class="flex lg:hidden">
|
||||
<button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
|
|
@ -20,14 +20,14 @@
|
|||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div :class="isOpen ? '' : 'hidden'" class="items-center md:flex">
|
||||
<div class="flex flex-col mt-4 space-y-8 md:flex-row md:items-center md:mt-0 md:space-y-0 md:space-x-16">
|
||||
<div :class="isOpen ? '' : 'hidden'" class="items-center lg:flex">
|
||||
<div class="flex flex-col mt-4 space-y-8 lg:flex-row lg:items-center lg:mt-0 lg:space-y-0 lg:space-x-16">
|
||||
<a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">glasses Search</a>
|
||||
<a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">How it works!</a>
|
||||
<a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Why us?</a>
|
||||
<a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Contact</a>
|
||||
|
||||
<button class="flex items-center px-5 py-2 text-sm font-medium tracking-wide text-center text-white capitalize transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
|
||||
<button class="flex items-center px-5 py-2 text-sm font-medium tracking-wide text-center text-white capitalize transition-colors duration-200 transform bg-gray-700 rounded-lg hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
|
||||
Get in touch
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -35,10 +35,10 @@
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container flex flex-col px-6 py-10 mx-auto space-y-6 md:h-128 md:py-16 md:flex-row md:items-center md:space-x-6">
|
||||
<div class="w-full md:w-1/2">
|
||||
<div class="max-w-lg">
|
||||
<h1 class="text-2xl font-medium tracking-wide text-gray-800 dark:text-white md:text-4xl">Find your premium new glasses exported from US</h1>
|
||||
<div class="container flex flex-col px-6 py-10 mx-auto space-y-6 lg:h-128 lg:py-16 lg:flex-row lg:items-center lg:space-x-6">
|
||||
<div class="w-full lg:w-1/2">
|
||||
<div class="lg:max-w-lg">
|
||||
<h1 class="text-2xl font-medium tracking-wide text-gray-800 dark:text-white lg:text-4xl">Find your premium new glasses exported from US</h1>
|
||||
<p class="mt-2 text-gray-600 dark:text-gray-300">We work with the best remunated glasses dealers in US to find your new glasses.</p>
|
||||
<div class="grid gap-6 mt-8 sm:grid-cols-2">
|
||||
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center w-full h-96 md:w-1/2">
|
||||
<div class="flex items-center justify-center w-full h-96 lg:w-1/2">
|
||||
<img class="object-cover w-full h-full max-w-2xl rounded-md" src="https://images.unsplash.com/photo-1555181126-cf46a03827c0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="glasses photo">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -121,14 +121,14 @@
|
|||
|
||||
<header class="bg-white dark:bg-gray-800">
|
||||
<nav class="border-b dark:border-gray-700">
|
||||
<div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
|
||||
<div class="container px-6 py-4 mx-auto lg:flex lg:justify-between lg:items-center">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="md:hidden">
|
||||
<div class="lg:hidden">
|
||||
<button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
|
|
@ -138,14 +138,14 @@
|
|||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="items-center md:flex">
|
||||
<div class="flex flex-col mt-4 space-y-8 md:flex-row md:items-center md:mt-0 md:space-y-0 md:space-x-16">
|
||||
<div class="items-center lg:flex">
|
||||
<div class="flex flex-col mt-4 space-y-8 lg:flex-row lg:items-center lg:mt-0 lg:space-y-0 lg:space-x-16">
|
||||
<a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">glasses Search</a>
|
||||
<a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">How it works!</a>
|
||||
<a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Why us?</a>
|
||||
<a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Contact</a>
|
||||
|
||||
<button class="flex items-center px-5 py-2 text-sm font-medium tracking-wide text-center text-white capitalize transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
|
||||
<button class="flex items-center px-5 py-2 text-sm font-medium tracking-wide text-center text-white capitalize transition-colors duration-200 transform bg-gray-700 rounded-lg hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
|
||||
Get in touch
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -153,10 +153,10 @@
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container flex flex-col px-6 py-10 mx-auto space-y-6 md:h-128 md:py-16 md:flex-row md:items-center md:space-x-6">
|
||||
<div class="w-full md:w-1/2">
|
||||
<div class="max-w-lg">
|
||||
<h1 class="text-2xl font-medium tracking-wide text-gray-800 dark:text-white md:text-4xl">Find your premium new glasses exported from US</h1>
|
||||
<div class="container flex flex-col px-6 py-10 mx-auto space-y-6 lg:h-128 lg:py-16 lg:flex-row lg:items-center lg:space-x-6">
|
||||
<div class="w-full lg:w-1/2">
|
||||
<div class="lg:max-w-lg">
|
||||
<h1 class="text-2xl font-medium tracking-wide text-gray-800 dark:text-white lg:text-4xl">Find your premium new glasses exported from US</h1>
|
||||
<p class="mt-2 text-gray-600 dark:text-gray-300">We work with the best remunated glasses dealers in US to find your new glasses.</p>
|
||||
<div class="grid gap-6 mt-8 sm:grid-cols-2">
|
||||
<div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
|
||||
|
|
@ -210,7 +210,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center w-full h-96 md:w-1/2">
|
||||
<div class="flex items-center justify-center w-full h-96 lg:w-1/2">
|
||||
<img class="object-cover w-full h-full max-w-2xl rounded-md" src="https://images.unsplash.com/photo-1555181126-cf46a03827c0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="glasses photo">
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@
|
|||
<nav class="border-t-4 border-indigo-500">
|
||||
<div class="container flex items-center justify-between px-6 py-3 mx-auto">
|
||||
<div>
|
||||
<a class="text-2xl font-bold text-gray-800 dark:text-white md:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">
|
||||
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 lg:mx-4 lg:my-0" href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
|
@ -17,24 +17,24 @@
|
|||
</nav>
|
||||
|
||||
<div class="container px-6 py-16 mx-auto">
|
||||
<div class="items-center md:flex">
|
||||
<div class="w-full md:w-1/2">
|
||||
<div class="md:max-w-lg">
|
||||
<h1 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Subscribe To The <span class="text-indigo-500">Newsletter</span></h1>
|
||||
<div class="items-center lg:flex">
|
||||
<div class="w-full lg:w-1/2">
|
||||
<div class="lg:max-w-lg">
|
||||
<h1 class="text-2xl font-semibold text-gray-800 dark:text-white lg:text-3xl">Subscribe To The <span class="text-indigo-500">Newsletter</span></h1>
|
||||
|
||||
<p class="mt-4 text-gray-600 dark:text-gray-400">be the first to knows when our <span class="font-medium text-indigo-500">Brand</span> is live</p>
|
||||
|
||||
<div class="flex flex-col mt-8 space-y-3 md:space-y-0 md:flex-row">
|
||||
<div class="flex flex-col mt-8 space-y-3 lg:space-y-0 lg:flex-row">
|
||||
<input id="email" type="text" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Email Address">
|
||||
|
||||
<button class="w-full px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-500 rounded-md md:w-auto md:mx-4 hover:bg-indigo-400 focus:outline-none focus:bg-indigo-400">
|
||||
<button class="w-full px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-500 rounded-lg lg:w-auto lg:mx-4 hover:bg-indigo-400 focus:outline-none focus:bg-indigo-400">
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center w-full mt-6 md:mt-0 md:w-1/2">
|
||||
<div class="flex items-center justify-center w-full mt-6 lg:mt-0 lg:w-1/2">
|
||||
<img class="w-full h-full max-w-md" src="~/assets/svg/Email-campaign-bro.svg" alt="#">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -54,10 +54,10 @@
|
|||
<nav class="border-t-4 border-indigo-500">
|
||||
<div class="container flex items-center justify-between px-6 py-3 mx-auto">
|
||||
<div>
|
||||
<a class="text-2xl font-bold text-gray-800 dark:text-white md:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">
|
||||
<a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 lg:mx-4 lg:my-0" href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
|
@ -66,24 +66,24 @@
|
|||
</nav>
|
||||
|
||||
<div class="container px-6 py-16 mx-auto">
|
||||
<div class="items-center md:flex">
|
||||
<div class="w-full md:w-1/2">
|
||||
<div class="md:max-w-lg">
|
||||
<h1 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Subscribe To The <span class="text-indigo-500">Newsletter</span></h1>
|
||||
<div class="items-center lg:flex">
|
||||
<div class="w-full lg:w-1/2">
|
||||
<div class="lg:max-w-lg">
|
||||
<h1 class="text-2xl font-semibold text-gray-800 dark:text-white lg:text-3xl">Subscribe To The <span class="text-indigo-500">Newsletter</span></h1>
|
||||
|
||||
<p class="mt-4 text-gray-600 dark:text-gray-400">be the first to knows when our <span class="font-medium text-indigo-500">Brand</span> is live</p>
|
||||
|
||||
<div class="flex flex-col mt-8 space-y-3 md:space-y-0 md:flex-row">
|
||||
<input id="email" type="text" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Email Address">
|
||||
<div class="flex flex-col mt-8 space-y-3 lg:space-y-0 lg:flex-row">
|
||||
<input id="email" type="text" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-lg dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Email Address">
|
||||
|
||||
<button class="w-full px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-500 rounded-md md:w-auto md:mx-4 hover:bg-indigo-400 focus:outline-none focus:bg-indigo-400">
|
||||
<button class="w-full px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-500 rounded-lg lg:w-auto lg:mx-4 hover:bg-indigo-400 focus:outline-none focus:bg-indigo-400">
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center w-full mt-6 md:mt-0 md:w-1/2">
|
||||
<div class="flex items-center justify-center w-full mt-6 lg:mt-0 lg:w-1/2">
|
||||
<img class="w-full h-full max-w-md" src="~/svg/assets/Email campaign-bro.svg" alt="#">
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="flex flex-col items-center py-6 md:h-128 md:flex-row">
|
||||
<div class="md:w-1/2">
|
||||
<div class="flex flex-col items-center py-6 lg:h-128 lg:flex-row">
|
||||
<div class="lg:w-1/2">
|
||||
<h2 class="text-4xl font-semibold text-gray-100">Brand</h2>
|
||||
|
||||
<h3 class="text-2xl font-semibold text-gray-100">
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
<p class="mt-3 text-gray-100">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex mt-8 md:w-1/2 md:justify-end md:mt-0">
|
||||
<div class="flex mt-8 lg:w-1/2 lg:justify-end lg:mt-0">
|
||||
<div class="max-w-sm bg-white rounded-lg dark:bg-gray-800">
|
||||
<div class="p-5 text-center">
|
||||
<h2 class="text-2xl font-semibold text-gray-700 dark:text-white fo">Sign In</h2>
|
||||
|
|
@ -89,8 +89,8 @@
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="flex flex-col items-center py-6 md:h-128 md:flex-row">
|
||||
<div class="md:w-1/2">
|
||||
<div class="flex flex-col items-center py-6 lg:h-128 lg:flex-row">
|
||||
<div class="lg:w-1/2">
|
||||
<h2 class="text-4xl font-semibold text-gray-100">Brand</h2>
|
||||
|
||||
<h3 class="text-2xl font-semibold text-gray-100">
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
<p class="mt-3 text-gray-100">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex mt-8 md:w-1/2 md:justify-end md:mt-0">
|
||||
<div class="flex mt-8 lg:w-1/2 lg:justify-end lg:mt-0">
|
||||
<div class="max-w-sm bg-white rounded-lg dark:bg-gray-800">
|
||||
<div class="p-5 text-center">
|
||||
<h2 class="text-2xl font-semibold text-gray-700 dark:text-white fo">Sign In</h2>
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@
|
|||
<div class="py-6" slot="component">
|
||||
<header class="bg-white dark:bg-gray-800">
|
||||
<nav class="px-6 py-4 shadow">
|
||||
<div class="items-center justify-between md:flex">
|
||||
<div class="lg:items-center lg:justify-between lg:flex">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="md:hidden">
|
||||
<div class="lg:hidden">
|
||||
<button type="button" @click="isOpen = !isOpen" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
|
|
@ -20,29 +20,29 @@
|
|||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div :class="!isOpen ? 'hidden' : ''" class="flex flex-col mt-2 -mx-2 md:mt-0 md:flex-row md:block">
|
||||
<a href="#" class="px-2 py-2 text-sm text-gray-800 rounded-md dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
|
||||
<a href="#" class="px-2 py-2 text-sm text-gray-800 rounded-md dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
|
||||
<a href="#" class="px-2 py-2 text-sm text-gray-800 rounded-md dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
|
||||
<div :class="!isOpen ? 'hidden' : ''" class="flex flex-col mt-2 -mx-2 lg:mt-0 lg:flex-row lg:block">
|
||||
<a href="#" class="px-2 py-2 text-sm text-gray-800 rounded-md dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 hover:font-medium lg:mx-2">Home</a>
|
||||
<a href="#" class="px-2 py-2 text-sm text-gray-800 rounded-md dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 hover:font-medium lg:mx-2">About</a>
|
||||
<a href="#" class="px-2 py-2 text-sm text-gray-800 rounded-md dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 hover:font-medium lg:mx-2">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="md:flex">
|
||||
<div class="flex items-center justify-center w-full px-6 py-8 md:h-128 md:w-1/2">
|
||||
<div class="lg:flex">
|
||||
<div class="flex items-center justify-center w-full px-6 py-8 lg:h-128 lg:w-1/2">
|
||||
<div class="max-w-xl">
|
||||
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
|
||||
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white lg:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400 lg:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
|
||||
|
||||
<div class="flex flex-col mt-6 space-y-3 md:space-y-0 md:flex-row">
|
||||
<div class="flex flex-col mt-6 space-y-3 lg:space-y-0 lg:flex-row">
|
||||
<a href="#" class="block px-3 py-2 text-sm font-semibold text-center text-white transition-colors duration-200 transform bg-gray-900 rounded-md hover:bg-gray-700">Get Started</a>
|
||||
<a href="#" class="block px-3 py-2 text-sm font-semibold text-center text-gray-700 transition-colors duration-200 transform bg-gray-200 rounded-md md:mx-4 hover:bg-gray-300">Learn More</a>
|
||||
<a href="#" class="block px-3 py-2 text-sm font-semibold text-center text-gray-700 transition-colors duration-200 transform bg-gray-200 rounded-md lg:mx-4 hover:bg-gray-300">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full h-64 md:w-1/2 md:h-auto">
|
||||
<div class="w-full h-64 lg:w-1/2 lg:h-auto">
|
||||
<div class="w-full h-full bg-cover" style="background-image: url(https://images.unsplash.com/photo-1508394522741-82ac9c15ba69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80)">
|
||||
<div class="w-full h-full bg-black opacity-25"></div>
|
||||
</div>
|
||||
|
|
@ -73,14 +73,14 @@
|
|||
|
||||
<header class="bg-white dark:bg-gray-800">
|
||||
<nav class="px-6 py-4 shadow">
|
||||
<div class="items-center justify-between md:flex">
|
||||
<div class="lg:items-center lg:justify-between lg:flex">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="md:hidden">
|
||||
<div class="lg:hidden">
|
||||
<button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
|
|
@ -90,29 +90,29 @@
|
|||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="flex flex-col mt-2 -mx-2 md:mt-0 md:flex-row md:block">
|
||||
<a href="#" class="px-2 py-2 text-sm text-gray-800 rounded-md dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
|
||||
<a href="#" class="px-2 py-2 text-sm text-gray-800 rounded-md dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
|
||||
<a href="#" class="px-2 py-2 text-sm text-gray-800 rounded-md dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
|
||||
<div class="flex flex-col mt-2 -mx-2 lg:mt-0 lg:flex-row lg:block">
|
||||
<a href="#" class="px-2 py-2 text-sm text-gray-800 rounded-md dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 hover:font-medium lg:mx-2">Home</a>
|
||||
<a href="#" class="px-2 py-2 text-sm text-gray-800 rounded-md dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 hover:font-medium lg:mx-2">About</a>
|
||||
<a href="#" class="px-2 py-2 text-sm text-gray-800 rounded-md dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 hover:font-medium lg:mx-2">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="md:flex">
|
||||
<div class="flex items-center justify-center w-full px-6 py-8 md:h-128 md:w-1/2">
|
||||
<div class="lg:flex">
|
||||
<div class="flex items-center justify-center w-full px-6 py-8 lg:h-128 lg:w-1/2">
|
||||
<div class="max-w-xl">
|
||||
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
|
||||
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white lg:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400 lg:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
|
||||
|
||||
<div class="flex flex-col mt-6 space-y-3 md:space-y-0 md:flex-row">
|
||||
<div class="flex flex-col mt-6 space-y-3 lg:space-y-0 lg:flex-row">
|
||||
<a href="#" class="block px-3 py-2 text-sm font-semibold text-center text-white transition-colors duration-200 transform bg-gray-900 rounded-md hover:bg-gray-700">Get Started</a>
|
||||
<a href="#" class="block px-3 py-2 text-sm font-semibold text-center text-gray-700 transition-colors duration-200 transform bg-gray-200 rounded-md md:mx-4 hover:bg-gray-300">Learn More</a>
|
||||
<a href="#" class="block px-3 py-2 text-sm font-semibold text-center text-gray-700 transition-colors duration-200 transform bg-gray-200 rounded-md lg:mx-4 hover:bg-gray-300">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full h-64 md:w-1/2 md:h-auto">
|
||||
<div class="w-full h-64 lg:w-1/2 lg:h-auto">
|
||||
<div class="w-full h-full bg-cover" style="background-image: url(https://images.unsplash.com/photo-1508394522741-82ac9c15ba69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80)">
|
||||
<div class="w-full h-full bg-black opacity-25"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -26,25 +26,25 @@
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container flex flex-col px-6 py-4 mx-auto space-y-6 md:h-128 md:py-16 md:flex-row md:items-center md:space-x-6">
|
||||
<div class="flex flex-col items-center w-full md:flex-row md:w-1/2">
|
||||
<div class="flex justify-center order-2 mt-6 md:mt-0 md:space-y-3 md:flex-col">
|
||||
<button class="w-3 h-3 mx-2 bg-blue-500 rounded-full md:mx-0 focus:outline-none"></button>
|
||||
<button class="w-3 h-3 mx-2 bg-gray-300 rounded-full md:mx-0 focus:outline-none hover:bg-blue-500"></button>
|
||||
<button class="w-3 h-3 mx-2 bg-gray-300 rounded-full md:mx-0 focus:outline-none hover:bg-blue-500"></button>
|
||||
<button class="w-3 h-3 mx-2 bg-gray-300 rounded-full md:mx-0 focus:outline-none hover:bg-blue-500"></button>
|
||||
<div class="container flex flex-col px-6 py-4 mx-auto space-y-6 lg:h-128 lg:py-16 lg:flex-row lg:items-center lg:space-x-6">
|
||||
<div class="flex flex-col items-center w-full lg:flex-row lg:w-1/2">
|
||||
<div class="flex justify-center order-2 mt-6 lg:mt-0 lg:space-y-3 lg:flex-col">
|
||||
<button class="w-3 h-3 mx-2 bg-blue-500 rounded-full lg:mx-0 focus:outline-none"></button>
|
||||
<button class="w-3 h-3 mx-2 bg-gray-300 rounded-full lg:mx-0 focus:outline-none hover:bg-blue-500"></button>
|
||||
<button class="w-3 h-3 mx-2 bg-gray-300 rounded-full lg:mx-0 focus:outline-none hover:bg-blue-500"></button>
|
||||
<button class="w-3 h-3 mx-2 bg-gray-300 rounded-full lg:mx-0 focus:outline-none hover:bg-blue-500"></button>
|
||||
</div>
|
||||
|
||||
<div class="max-w-lg md:mx-12 md:order-2">
|
||||
<h1 class="text-3xl font-medium tracking-wide text-gray-800 dark:text-white md:text-4xl">The best Apple Watch apps</h1>
|
||||
<div class="max-w-lg lg:mx-12 lg:order-2">
|
||||
<h1 class="text-3xl font-medium tracking-wide text-gray-800 dark:text-white lg:text-4xl">The best Apple Watch apps</h1>
|
||||
<p class="mt-4 text-gray-600 dark:text-gray-300">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut quia asperiores alias vero magnam recusandae adipisci ad vitae laudantium quod rem voluptatem eos accusantium cumque.</p>
|
||||
<div class="mt-6">
|
||||
<a href="#" class="block px-3 py-2 font-semibold text-center text-white transition-colors duration-200 transform bg-blue-500 rounded-md md:inline hover:bg-blue-400">Download from App Store</a>
|
||||
<a href="#" class="block px-3 py-2 font-semibold text-center text-white transition-colors duration-200 transform bg-blue-500 rounded-md lg:inline hover:bg-blue-400">Download from App Store</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center w-full h-96 md:w-1/2">
|
||||
<div class="flex items-center justify-center w-full h-96 lg:w-1/2">
|
||||
<img class="object-cover w-full h-full max-w-2xl rounded-md" src="https://images.unsplash.com/photo-1579586337278-3befd40fd17a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" alt="apple watch photo">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -84,25 +84,25 @@
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container flex flex-col px-6 py-4 mx-auto space-y-6 md:h-128 md:py-16 md:flex-row md:items-center md:space-x-6">
|
||||
<div class="flex flex-col items-center w-full md:flex-row md:w-1/2">
|
||||
<div class="flex justify-center order-2 mt-6 md:mt-0 md:space-y-3 md:flex-col">
|
||||
<button class="w-3 h-3 mx-2 bg-blue-500 rounded-full md:mx-0 focus:outline-none"></button>
|
||||
<button class="w-3 h-3 mx-2 bg-gray-300 rounded-full md:mx-0 focus:outline-none hover:bg-blue-500"></button>
|
||||
<button class="w-3 h-3 mx-2 bg-gray-300 rounded-full md:mx-0 focus:outline-none hover:bg-blue-500"></button>
|
||||
<button class="w-3 h-3 mx-2 bg-gray-300 rounded-full md:mx-0 focus:outline-none hover:bg-blue-500"></button>
|
||||
<div class="container flex flex-col px-6 py-4 mx-auto space-y-6 lg:h-128 lg:py-16 lg:flex-row lg:items-center lg:space-x-6">
|
||||
<div class="flex flex-col items-center w-full lg:flex-row lg:w-1/2">
|
||||
<div class="flex justify-center order-2 mt-6 lg:mt-0 lg:space-y-3 lg:flex-col">
|
||||
<button class="w-3 h-3 mx-2 bg-blue-500 rounded-full lg:mx-0 focus:outline-none"></button>
|
||||
<button class="w-3 h-3 mx-2 bg-gray-300 rounded-full lg:mx-0 focus:outline-none hover:bg-blue-500"></button>
|
||||
<button class="w-3 h-3 mx-2 bg-gray-300 rounded-full lg:mx-0 focus:outline-none hover:bg-blue-500"></button>
|
||||
<button class="w-3 h-3 mx-2 bg-gray-300 rounded-full lg:mx-0 focus:outline-none hover:bg-blue-500"></button>
|
||||
</div>
|
||||
|
||||
<div class="max-w-lg md:mx-12 md:order-2">
|
||||
<h1 class="text-3xl font-medium tracking-wide text-gray-800 dark:text-white md:text-4xl">The best Apple Watch apps</h1>
|
||||
<div class="max-w-lg lg:mx-12 lg:order-2">
|
||||
<h1 class="text-3xl font-medium tracking-wide text-gray-800 dark:text-white lg:text-4xl">The best Apple Watch apps</h1>
|
||||
<p class="mt-4 text-gray-600 dark:text-gray-300">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut quia asperiores alias vero magnam recusandae adipisci ad vitae laudantium quod rem voluptatem eos accusantium cumque.</p>
|
||||
<div class="mt-6">
|
||||
<a href="#" class="block px-3 py-2 font-semibold text-center text-white transition-colors duration-200 transform bg-blue-500 rounded-md md:inline hover:bg-blue-400">Download from App Store</a>
|
||||
<a href="#" class="block px-3 py-2 font-semibold text-center text-white transition-colors duration-200 transform bg-blue-500 rounded-md lg:inline hover:bg-blue-400">Download from App Store</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center w-full h-96 md:w-1/2">
|
||||
<div class="flex items-center justify-center w-full h-96 lg:w-1/2">
|
||||
<img class="object-cover w-full h-full max-w-2xl rounded-md" src="https://images.unsplash.com/photo-1579586337278-3befd40fd17a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" alt="apple watch photo">
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue