feat(landing page): add navbar and hero section
- change root route '/' to HomeController - add main layout - add navbar and hero blade component - add custom tailwind classes - separate css files for button component
This commit is contained in:
kusowl
parent
f6e7d10bcb
commit
33cbdea12b
11
app/Http/Controllers/HomeController.php
Normal file
11
app/Http/Controllers/HomeController.php
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Http\Controllers;
|
||||||
|
|
||||||
|
class HomeController extends Controller
|
||||||
|
{
|
||||||
|
public function __invoke()
|
||||||
|
{
|
||||||
|
return view('home');
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -7,5 +7,21 @@
|
|||||||
|
|
||||||
@theme {
|
@theme {
|
||||||
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||||
|
|
||||||
|
--color-primary-700: oklch(0.13 0.03 244);
|
||||||
|
--color-primary-600: oklch(0.22 0.03 257);
|
||||||
|
--color-accent-600: oklch(0.45 0.01 232);
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer components{
|
||||||
|
@import "./button.css";
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
@apply px-4 md:px-12
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
@apply bg-white rounded-lg p-4
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
6
resources/css/button.css
Normal file
6
resources/css/button.css
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
.ui-btn {
|
||||||
|
@apply px-4 py-2 rounded-lg font-medium
|
||||||
|
}
|
||||||
|
.ui-btn-neutral {
|
||||||
|
@apply bg-primary-600 text-white
|
||||||
|
}
|
||||||
48
resources/views/components/hero.blade.php
Normal file
48
resources/views/components/hero.blade.php
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<section class="hero py-30 bg-[#f5f5ff] wrapper">
|
||||||
|
<div class="grid xl:grid-cols-2 gap-y-10">
|
||||||
|
|
||||||
|
<!-- Left section -->
|
||||||
|
<div class="md:pr-23 flex flex-col justify-center space-y-4">
|
||||||
|
<h1 class="text-4xl sm:text-[4rem] font-black">
|
||||||
|
<p class="">
|
||||||
|
Discover Trusted
|
||||||
|
<br/>
|
||||||
|
Deals &
|
||||||
|
<br/>
|
||||||
|
Recommendation
|
||||||
|
</p>
|
||||||
|
</h1>
|
||||||
|
<p class=" text-accent-600">
|
||||||
|
Find the best deals, services and places recommended by verified experts.
|
||||||
|
Connect with trusted brokers and discover opportunities you can count on.
|
||||||
|
</p>
|
||||||
|
<div class="mt-6 flex flex-col gap-4 md:flex-row">
|
||||||
|
<a href="" class="ui-btn ui-btn-neutral">Explore Deals</a>
|
||||||
|
<a href="" class="ui-btn ui-btn bg-white/80 border border-gray-300">Become a Broker</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Left section end -->
|
||||||
|
|
||||||
|
<!-- Right section -->
|
||||||
|
<div class="relative">
|
||||||
|
<div class="hero-image">
|
||||||
|
<img class="rounded-2xl shadow-lg " src="{{asset('storage/images/hero-image.webp')}}" alt="" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stats card, top right of the image -->
|
||||||
|
<div class="card shadow-xl absolute -top-5 -right-5">
|
||||||
|
<p class="text-3xl font-black text-[#8669ED]">10K+</p>
|
||||||
|
<p class="text-accent-600 text-xs">Active Deals</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stats card, bottom left of the image -->
|
||||||
|
<div class="card shadow-xl absolute -bottom-5 -left-5">
|
||||||
|
<p class="text-3xl font-black text-[#0070EB]">500+</p>
|
||||||
|
<p class="text-accent-600 text-xs">Verified Brokers</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Right section end -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
20
resources/views/components/layout.blade.php
Normal file
20
resources/views/components/layout.blade.php
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<title>{{ config('app.name', 'Laravel') }}</title>
|
||||||
|
|
||||||
|
<!-- Fonts -->
|
||||||
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||||
|
<link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
|
||||||
|
|
||||||
|
<!-- Styles / Scripts -->
|
||||||
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[#FFFFFF text-[#1b1b18] flex min-h-screen flex-col">
|
||||||
|
{{$slot}}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
4
resources/views/components/nav-links.blade.php
Normal file
4
resources/views/components/nav-links.blade.php
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
@props(['link' => '', 'name' => ''])
|
||||||
|
<li>
|
||||||
|
<a class="hover:underline" href="{{$link}}">{{$name}}</a>
|
||||||
|
</li>
|
||||||
19
resources/views/components/navbar.blade.php
Normal file
19
resources/views/components/navbar.blade.php
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<nav class="grid grid-cols-3 items-center wrapper py-6 shadow-xl">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="" class="font-bold text-2xl">{{config('app.name')}}</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-links place-self-center">
|
||||||
|
<ul class="flex space-x-8 text-accent-600">
|
||||||
|
<x-nav-links :link="route('home')" name="Home" />
|
||||||
|
<x-nav-links :link="route('home')" name="Explore deals" />
|
||||||
|
<x-nav-links :link="route('home')" name="About" />
|
||||||
|
<x-nav-links :link="route('home')" name="Contact" />
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-buttons space-x-4 place-self-end font-medium">
|
||||||
|
<a href="">Login</a>
|
||||||
|
<a href="" class="ui-btn ui-btn-neutral">Register</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
4
resources/views/home.blade.php
Normal file
4
resources/views/home.blade.php
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<x-layout>
|
||||||
|
<x-navbar />
|
||||||
|
<x-hero />
|
||||||
|
</x-layout>
|
||||||
@ -1,7 +1,6 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
|
use App\Http\Controllers\HomeController;
|
||||||
use Illuminate\Support\Facades\Route;
|
use Illuminate\Support\Facades\Route;
|
||||||
|
|
||||||
Route::get('/', function () {
|
Route::get('/', HomeController::class)->name('home');
|
||||||
return view('welcome');
|
|
||||||
});
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user