Skip to content
Snippets Groups Projects
Verified Commit 1b4ea2bf authored by Sofiane Lasri's avatar Sofiane Lasri
Browse files

feat: add svg logo and button components, update layout and styles 

- Added `rann-logo.blade.php` component with SVG logo.
- Introduced `button.blade.php` component with customizable properties.
- Updated `admin.blade.php` and `auth.blade.php` layouts to use `admin.scss`.
- Renamed `app.scss` to `admin.scss` for better context.
- Adjusted `vite.config.js` to reflect the changes in stylesheets.
- Modified `web.php` to return the new `index` view.
- Added a new `index.blade.php` view for the homepage layout.
- Extended `tailwind.config.js` to include new color definitions.
parent a43179ec
No related branches found
No related tags found
1 merge request!13Resolve "Créer la page d'accueil"
Pipeline #674 passed
Stage: test
Stage: external
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 176 additions and 7 deletions
resources/images/public/hero-grid.png 0 → 100644
+ 0
− 0
View file @ 1b4ea2bf
resources/images/public/hero-grid.png

21 KiB

resources/scss/app.scss → resources/scss/admin.scss
+ 0
− 0
View file @ 1b4ea2bf
File moved
resources/views/components/public/arrow.blade.php 0 → 100644
+ 3
− 0
View file @ 1b4ea2bf
<svg viewBox="0 0 108 36" fill="none" xmlns="http://www.w3.org/2000/svg" {{ $attributes }}>
<path d="M107.233 18.7728C91 21 75.5 21.5 67.5 34.5M107.233 18.7728C91 16.5 76 17 67.5 2.5M107.233 18.7728H0" stroke="black" stroke-width="1.32386" stroke-linejoin="round"/>
</svg>
resources/views/components/public/button.blade.php 0 → 100644
+ 44
− 0
View file @ 1b4ea2bf
@props([
'type' => 'button',
'variant' => 'gradient',
'size' => 'small',
'disabled' => false,
'tag' => 'button',
'href' => '#'
])
@php
$classes = match ($variant) {
'blue' => 'bg-blue/30 border-blue',
'yellow' => 'bg-yellow/30 border-yellow',
'pink' => 'bg-pink/30 border-pink',
'black' => 'bg-neutral-700 border-black text-white',
'green' => 'bg-green/30 border-green',
'light' => 'bg-light border-border',
default => 'bg-gradient-to-r from-pink/40 to-yellow/40 border-pink',
};
$classes .= ' border-2 text-base font-bold leading-4';
if ($size === 'small') {
$classes .= ' px-4 py-1 rounded-2xl';
} elseif ($size === 'medium') {
$classes .= ' px-6 py-2 rounded-3xl';
} elseif ($size === 'large') {
$classes .= ' px-8 py-3 rounded-4xl';
}
@endphp
@if($tag === 'a')
<a href="{{ $disabled ? '#' : $href }}"
{{ $attributes->merge(['class' => $classes, 'role' => 'button']) }}
@if($disabled) aria-disabled="true" tabindex="-1" @endif>
{{ $slot }}
</a>
@else
<button type="{{ $type }}"
{{ $attributes->merge(['class' => $classes]) }}
@if($disabled) disabled @endif>
{{ $slot }}
</button>
@endif
resources/views/components/public/rann-logo.blade.php 0 → 100644
+ 6
− 0
View file @ 1b4ea2bf
This diff is collapsed.
resources/views/index.blade.php 0 → 100644
+ 107
− 0
View file @ 1b4ea2bf
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'Rann Graphic Design')</title>
<link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div class="HeroSection h-96 w-100 position-relative">
<div class="container mx-auto">
<!-- Navbar -->
<div class="Navbar h-32 flex items-center">
<div class="flex justify-between items-center w-full">
<div class="flex justify-start items-center gap-32 ">
<x-public.rann-logo height="4rem" role="image"/>
<div class="flex items-center gap-12">
<div class="text-xl font-bold">Accueil</div>
<div class="text-xl font-bold">Prestations</div>
<div class="text-xl font-bold">Portfolio</div>
<div class="text-xl font-bold">Évènements</div>
<div class="text-xl font-bold">Me contacter</div>
<x-public.button href="#">Boutique</x-public.button>
</div>
</div>
<div class="MDiasSociaux items-center gap-4 flex">
@foreach(\App\Models\SocialMediaLink::all() as $socialMediaLink)
<a href="{{ $socialMediaLink->url }}" target="_blank" rel="noopener noreferrer">
<x-font-awesome :icon="$socialMediaLink->icon_name" type="brands" class="w-5 h-5"/>
</a>
@endforeach
</div>
</div>
</div>
<!-- Hero Content -->
<div class="Content self-stretch py-24 justify-center items-center gap-24 inline-flex">
<div class="MetaContainer h-96 flex-col justify-start items-start inline-flex">
<div class="Frame grow shrink basis-0 flex-col justify-center items-start gap-2.5 flex">
<div class="Frame7 flex-col justify-start items-start gap-24 flex">
<div class="Star w-12 h-12 left-[-120.23px] top-[-95.50px] absolute origin-top-left rotate-[6.66deg]"></div>
<div class="Star w-16 h-16 left-[-82px] top-[-26.29px] absolute origin-top-left rotate-[-21.43deg]"></div>
<div class="Frame6 flex-col justify-start items-start flex">
<div class="Frame8 self-stretch justify-start items-center gap-4 inline-flex">
<div class="HelloJeSuisRoxannaValtre text-3xl font-normal">
Hello ! Je suis Roxanna Valtre,
</div>
<x-public.arrow class="w-28 h-9"/>
</div>
<div class="DesignerGraphique self-stretch text-6xl font-bold">
Designer Graphique.
</div>
</div>
<div class="Frame5 w-96 px-8 py-4 bg-gradient-to-r from-Pink to-Yellow rounded-3xl border-2 border-Pink justify-start items-center gap-8 inline-flex">
<img class="Image1 w-10 h-10" src="https://via.placeholder.com/40x40"/>
<div class="Frame1 flex-col justify-center items-start inline-flex">
<div class="UnProjetEnTTe text-base font-bold">Un projet en
tête ?
</div>
<div class="NHSitezPasMeContacter text-base font-normal">
N’hésitez pas à me contacter !
</div>
</div>
</div>
</div>
</div>
<div class="Frame14 self-stretch h-32 flex-col justify-start items-start gap-4 flex">
<div class="Star w-20 h-20 left-[552px] top-[49.80px] absolute origin-top-left rotate-[-1.90deg]"></div>
<div class="Frame13 self-stretch h-12 flex-col justify-start items-start flex">
<div class="MesSpCialisations self-stretch text-2xl font-bold">Mes
spécialisations
</div>
<div class="CliquezSurUneSpCialitPourLaMasquer self-stretch text-Muted text-sm font-normal">
Cliquez sur une spécialité pour la masquer ;)
</div>
</div>
<div class="Frame12 self-stretch justify-start items-center gap-2 inline-flex">
<x-public.button variant="blue">Chartes graphique</x-public.button>
<x-public.button variant="green">Design réseaux sociaux</x-public.button>
<x-public.button variant="yellow">Mises en page</x-public.button>
<x-public.button variant="pink">Albums musicaux</x-public.button>
</div>
</div>
</div>
<div class="Creations w-96 h-96 relative">
<img class="Image3 w-80 h-36 left-[56.21px] top-[487.98px] absolute rounded-2xl"
src="https://via.placeholder.com/319x137"/>
<img class="Image2 w-72 h-96 left-0 top-[50.13px] absolute rounded-2xl"
src="https://via.placeholder.com/275x374"/>
<img class="Image5 w-72 h-72 left-[602.94px] top-[342.71px] absolute rounded-2xl"
src="https://via.placeholder.com/282x282"/>
<img class="Image4 w-96 h-96 left-[292.27px] top-[22.51px] absolute rounded-2xl"
src="https://via.placeholder.com/360x489"/>
<img class="Image6 w-48 h-72 left-[661.20px] top-0 absolute rounded-2xl"
src="https://via.placeholder.com/193x291"/>
</div>
</div>
</div>
<img class="HeroGrid w-100 left-0 top-0 absolute -z-10" alt="Image de fond"
src="{{Vite::asset("resources/images/public/hero-grid.png")}}"/>
</div>
</body>
</html>
resources/views/layouts/admin.blade.php
+ 1
− 1
View file @ 1b4ea2bf
......@@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $title }}</title>
<link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}"/>
@vite(['resources/scss/app.scss', 'resources/js/app.js'])
@vite(['resources/scss/admin.scss', 'resources/js/app.js'])
</head>
<body>
<div class="admin-container">
......
resources/views/layouts/auth.blade.php
+ 1
− 1
View file @ 1b4ea2bf
......@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'Authentification')</title>
<link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}"/>
@vite(['resources/scss/app.scss', 'resources/js/app.js'])
@vite(['resources/scss/admin.scss', 'resources/js/app.js'])
</head>
<body>
<div class="auth-container">
......
routes/web.php
+ 1
− 1
View file @ 1b4ea2bf
......@@ -14,7 +14,7 @@
use Laravel\Fortify\Http\Controllers\RegisteredUserController;
Route::get('/', function () {
return view('welcome');
return view('index');
})->name('index');
if (Features::enabled(Features::registration())) {
......
tailwind.config.js
+ 9
− 2
View file @ 1b4ea2bf
......@@ -13,15 +13,22 @@ export default {
theme: {
extend: {
fontFamily: {
sans: ['Figtree', ...defaultTheme.fontFamily.sans],
sans: ['PT Sans', ...defaultTheme.fontFamily.sans],
},
colors: {
'primary': colors.blue,
'secondary': colors.slate,
'dark': colors.gray,
'green': colors.emerald,
}
},
colors: {
'pink': '#ff6699',
'blue': '#36c5f0',
'green': '#bbca9d',
'yellow': '#FFCC00',
'light': '#F7F7F7',
'border': '#E5E5E5',
}
},
plugins: [],
};
tests/Feature/ExampleTest.php
+ 3
− 1
View file @ 1b4ea2bf
......@@ -2,11 +2,13 @@
namespace Tests\Feature;
// use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;
class ExampleTest extends TestCase
{
use RefreshDatabase;
/**
* A basic test example.
*/
......
vite.config.js
+ 1
− 1
View file @ 1b4ea2bf
......@@ -12,7 +12,7 @@ export default defineConfig({
laravel({
input: [
`${resourcePath}/css/app.css`,
`${resourcePath}/scss/app.scss`,
`${resourcePath}/scss/admin.scss`,
`${jsPath}/app.js`,
...glob.sync(`${jsPath}/pages/*/*.js`),
...glob.sync(`${jsPath}/components/*/*.js`),
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment