complete story @12.1

This commit is contained in:
Naser Mansour
2026-01-03 23:52:26 +02:00
parent 8201ec163e
commit b92fc29e3c
25 changed files with 248 additions and 393 deletions
@@ -1,47 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" {{ $attributes }}>
<!-- LIBRA for Rights - Botanical Icon -->
<g fill="currentColor">
<!-- Outer frame -->
<rect x="1" y="1" width="48" height="48" fill="none" stroke="currentColor" stroke-width="2"/>
<!-- Inner decorative frame -->
<rect x="4" y="4" width="42" height="42" fill="none" stroke="currentColor" stroke-width="1"/>
@props(['size' => 'md'])
<!-- Central plant stem -->
<line x1="25" y1="44" x2="25" y2="18" stroke="currentColor" stroke-width="2.5"/>
@php
$sizes = [
'sm' => 'h-7 w-7', // 28px
'md' => 'h-9 w-9', // 36px
'lg' => 'h-12 w-12', // 48px
];
$sizeClass = $sizes[$size] ?? $sizes['md'];
@endphp
<!-- Central leaves (symmetrical) -->
<path d="M25 28 Q19 23 16 28 Q19 33 25 28"/>
<path d="M25 28 Q31 23 34 28 Q31 33 25 28"/>
<path d="M25 21 Q17 16 14 23 Q19 28 25 21"/>
<path d="M25 21 Q33 16 36 23 Q31 28 25 21"/>
<!-- Top leaf/bud -->
<ellipse cx="25" cy="13" rx="5" ry="7"/>
<!-- Left wheat stalk -->
<line x1="11" y1="43" x2="11" y2="16" stroke="currentColor" stroke-width="1.5"/>
<ellipse cx="11" cy="13" rx="2.5" ry="5"/>
<ellipse cx="8" cy="18" rx="2.5" ry="4"/>
<ellipse cx="14" cy="18" rx="2.5" ry="4"/>
<ellipse cx="8" cy="26" rx="2.5" ry="4"/>
<ellipse cx="14" cy="26" rx="2.5" ry="4"/>
<!-- Right wheat stalk -->
<line x1="39" y1="43" x2="39" y2="16" stroke="currentColor" stroke-width="1.5"/>
<ellipse cx="39" cy="13" rx="2.5" ry="5"/>
<ellipse cx="36" cy="18" rx="2.5" ry="4"/>
<ellipse cx="42" cy="18" rx="2.5" ry="4"/>
<ellipse cx="36" cy="26" rx="2.5" ry="4"/>
<ellipse cx="42" cy="26" rx="2.5" ry="4"/>
<!-- Water droplets -->
<path d="M7 38 Q7 34 10 38 Q7 42 7 38"/>
<path d="M43 38 Q43 34 46 38 Q43 42 43 38"/>
<!-- Corner decorations -->
<circle cx="7" cy="7" r="2"/>
<circle cx="43" cy="7" r="2"/>
<circle cx="7" cy="43" r="2"/>
<circle cx="43" cy="43" r="2"/>
</g>
</svg>
<img
src="{{ asset('images/logo.png') }}"
alt="{{ __('LIBRA for Rights') }}"
{{ $attributes->merge(['class' => $sizeClass . ' object-contain']) }}
/>

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 368 B

+8 -18
View File
@@ -1,32 +1,22 @@
@props([
'size' => 'default',
'variant' => 'full',
'size' => 'md',
'showText' => true
])
@php
$sizes = [
'small' => 'h-8 min-w-[80px]', // Mobile minimum
'default' => 'h-12 min-w-[120px]', // Desktop default
'large' => 'h-16 min-w-[160px]', // Large displays
'sm' => 'h-8 w-8', // 32px - Small
'md' => 'h-10 w-10', // 40px - Default
'lg' => 'h-12 w-12', // 48px - Large
];
$variants = [
'full' => 'logo.svg',
'reversed' => 'logo-reversed.svg',
'mono' => 'logo-mono.svg',
];
$sizeClass = $sizes[$size] ?? $sizes['default'];
$logoFile = $variants[$variant] ?? $variants['full'];
$sizeClass = $sizes[$size] ?? $sizes['md'];
@endphp
<div {{ $attributes->merge(['class' => 'flex items-center gap-2 p-5']) }}>
<div {{ $attributes->merge(['class' => 'flex items-center gap-2']) }}>
<img
src="{{ asset('images/' . $logoFile) }}"
src="{{ asset('images/logo.png') }}"
alt="{{ __('LIBRA for Rights') }}"
class="{{ $sizeClass }} w-auto object-contain"
onerror="this.onerror=null; this.src='{{ asset('images/logo.png') }}';"
class="{{ $sizeClass }} object-contain"
/>
@if($showText)
<span class="font-semibold text-sm truncate">{{ __('LIBRA for Rights') }}</span>
+1 -1
View File
@@ -3,7 +3,7 @@
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Logo & Description -->
<div class="text-center sm:text-start">
<x-logo size="small" />
<x-logo size="lg" />
<p class="mt-3 text-warm-gray text-sm">
{{ __('footer.description') }}
</p>
@@ -17,10 +17,7 @@
<main id="main-content" role="main" tabindex="-1" class="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
<div class="flex w-full max-w-md flex-col gap-6">
<a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
<span class="flex h-9 w-9 items-center justify-center rounded-md">
<x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
</span>
<x-logo size="xl" />
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
</a>
@@ -17,9 +17,7 @@
<main id="main-content" role="main" tabindex="-1" class="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
<div class="flex w-full max-w-sm flex-col gap-2">
<a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
<span class="flex h-9 w-9 mb-1 items-center justify-center rounded-md">
<x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
</span>
<x-logo size="xl" />
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
</a>
<div class="flex flex-col gap-6">
@@ -17,11 +17,9 @@
<main id="main-content" role="main" tabindex="-1" class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
<div class="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-e dark:border-neutral-800">
<div class="absolute inset-0 bg-neutral-900"></div>
<a href="{{ route('home') }}" class="relative z-20 flex items-center text-lg font-medium" wire:navigate>
<span class="flex h-10 w-10 items-center justify-center rounded-md">
<x-app-logo-icon class="me-2 h-7 fill-current text-white" />
</span>
{{ config('app.name', 'Laravel') }}
<a href="{{ route('home') }}" class="relative z-20 flex items-center gap-3 text-lg font-medium" wire:navigate>
<x-logo size="md" />
<span class="text-white">{{ config('app.name', 'Laravel') }}</span>
</a>
@php
@@ -38,10 +36,7 @@
<div class="w-full lg:p-8">
<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
<a href="{{ route('home') }}" class="z-20 flex flex-col items-center gap-2 font-medium lg:hidden" wire:navigate>
<span class="flex h-9 w-9 items-center justify-center rounded-md">
<x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
</span>
<x-logo size="xl" />
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
</a>
{{ $slot }}
+12 -24
View File
@@ -1,29 +1,17 @@
@props(['size' => 'default', 'variant' => 'full'])
@props(['size' => 'md'])
@php
$variants = [
'full' => 'logo.svg',
'reversed' => 'logo-reversed.svg',
'mono' => 'logo-mono.svg',
$sizes = [
'sm' => 'h-10 w-10', // 40px - Mobile nav
'md' => 'h-12 w-12', // 48px - Desktop nav
'lg' => 'h-16 w-16', // 64px - Footer
'xl' => 'h-20 w-20', // 80px - Auth pages
];
$logoFile = $variants[$variant] ?? $variants['full'];
$sizeClass = $sizes[$size] ?? $sizes['md'];
@endphp
@if(file_exists(public_path('images/' . $logoFile)))
<img
src="{{ asset('images/' . $logoFile) }}"
alt="{{ __('LIBRA for Rights') }}"
@class([
'h-8' => $size === 'small',
'h-12' => $size === 'default',
'h-16' => $size === 'large',
])
/>
@else
<span @class([
'font-bold text-off-white',
'text-lg' => $size === 'small',
'text-2xl' => $size === 'default',
'text-3xl' => $size === 'large',
])>LIBRA</span>
@endif
<img
src="{{ asset('images/logo.png') }}"
alt="{{ __('LIBRA for Rights') }}"
{{ $attributes->merge(['class' => $sizeClass . ' object-contain']) }}
/>
@@ -8,7 +8,7 @@
<!-- Logo - Left on desktop -->
<div class="shrink-0 hidden md:block">
<a href="{{ route('home') }}" class="flex items-center" wire:navigate>
<x-logo />
<x-logo size="md" />
</a>
</div>
@@ -32,7 +32,7 @@
<!-- Centered Logo on Mobile -->
<a href="{{ route('home') }}" class="flex items-center" wire:navigate>
<x-logo />
<x-logo size="sm" />
</a>
<!-- Language Toggle on Mobile -->
+8 -3
View File
@@ -3,9 +3,14 @@
<title>{{ $title ?? config('app.name') }}</title>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
{{-- Favicons --}}
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#4A4A42">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>