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 {
|
||||
--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
|
||||
|
||||
use App\Http\Controllers\HomeController;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
Route::get('/', function () {
|
||||
return view('welcome');
|
||||
});
|
||||
Route::get('/', HomeController::class)->name('home');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user