first front end prototype

app/Http/Livewire/Guest/Welcome.php

@@ -8,6 +8,8 @@ class Welcome extends Component
 {
     public function render()
     {
-        return view('livewire.guest.welcome')->layout('layouts.guest');
+        return view('livewire.guest.welcome', [
+            'cities' => \App\Models\City::all(),
+        ])->layout('layouts.guest');
     }
 }

app/Providers/AppServiceProvider.php

@@ -3,6 +3,8 @@
 namespace App\Providers;
 
 use Illuminate\Support\ServiceProvider;
+use Illuminate\Support\Str;
+use Illuminate\Support\Stringable;
 
 class AppServiceProvider extends ServiceProvider
 {
@@ -23,6 +25,18 @@ class AppServiceProvider extends ServiceProvider
      */
     public function boot()
     {
-        //
+        Stringable::macro('initials', function(){
+            $words = preg_split("/\s+/", $this);
+            $initials = "";
+
+            foreach ($words as $w) {
+                $initials .= $w[0];
+            }
+
+            return new static($initials);
+        });
+        Str::macro('initials', function(string $string){
+            return (string) (new Stringable($string))->initials();
+        });
     }
 }

public/img/einundzwanzig-horizontal.svg

@@ -0,0 +1,13 @@
+<svg viewBox="0 0 134 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <g>
+        <path
+            d="m133.83629 9.42089615c-.443181 1.77759655-2.24359 2.85941795-4.021394 2.41613355-1.777078-.4431808-2.858899-2.24369331-2.415511-4.02118615.442973-1.77780392 2.243382-2.85972904 4.020668-2.41654828 1.7777.44318074 2.859418 2.24390065 2.416237 4.02160088z"
+            fill="#f7931a"/>
+        <path
+            d="m132.080261 8.14548127c.066052-.44152167-.270118-.67887327-.729786-.83721136l.14911-.598097-.364064-.09073074-.145169.58233577c-.095708-.02384922-.194008-.04635044-.291687-.06864427l.146207-.58617239-.363857-.09073074-.149213.59788961c-.079221-.01804245-.15699-.03587751-.232478-.05464581l.000415-.00186647-.502078-.12536395-.096849.388846s.270119.06190429.264416.0657409c.14745.03681075.174099.13438518.16964.21173961-.408547 1.63844151 0 0-.408547 1.63844151-.018043.04479506-.063771.11198765-.166841.08647935.003629.0052883-.264623-.06605197-.264623-.06605197l-.180735.41673922.47377.11810549c.088138.02208645.174514.04520983.259541.06698521l-.150665.60494066.363649.0907308.149213-.59851181c.099338.02695999.195771.05184613.290131.07528059l-.148694.59571212.364063.0907307.150665-.6038001c.620806.1174834 1.087628.070096 1.284125-.49139764.158338-.45209828-.007881-.71288434-.334511-.88293965.23787-.05485322.41705-.21132484.464852-.53453364zm-.831819 1.16643431c-.112506.45209828-.873711.20769561-1.120499.14641348l.199919-.80143754c.246788.06159322 1.038167.18353532.92058.65502406zm.11261-1.17296693c-.102656.41124353-.736215.20230362-.941733.15107964l.181254-.72688279c.205518.05122398.867385.14682825.760479.57580315z"
+            fill="#fff"/>
+        <path
+            d="m7.63783784 11.9027027v-2.74054053h-4.8972973v-1.88108109h3.97297298v-2.74054054h-3.97297298v-1.8h4.8972973v-2.74054054l-7.63783784.01621621v11.88648649zm4.15135136.0162162v-11.9189189h-2.74054056v11.9189189zm4.3621621-.0162162v-6.94054054l3.8918919 6.94054054h2.9675677v-11.9027027h-2.7405407v6.95675676l-3.8756756-6.92432432h-2.9837838v11.87027026zm12.9405406.0162162c.6162162-.0108108 1.1972973-.1378378 1.7432432-.3810811.545946-.2432432 1.0216217-.5702702 1.4270271-.9810811.4054054-.4108107.7243243-.89189179.9567568-1.44324315.2324323-.55135136.3432431-1.13513518.3324324-1.75135139v-7.36216216h-2.7405406v7.37837838c0 .24864864-.0432432.48108108-.1297297.6972973s-.2108108.4054054-.372973.56756753c-.1621622.16216224-.3513513.29189191-.5675676.38918922-.2162162.0972973-.4432432.14594596-.681081.14594596-.4864866 0-.9081082-.16756761-1.2648649-.50270271-.3567568-.35675676-.5351352-.77297298-.5351352-1.24864865v-7.42702703h-2.7405405v7.44324325c.0108108.61621621.1324324 1.1945946.3648649 1.73513514.2324324.54054054.5648648 1.02702711.9972973 1.45945951.4216216.4108107.9027027.727027 1.4432433.9486486.5405405.2216216 1.1135134.3324324 1.7189189.3324324zm8.8378378-.0162162v-6.94054054l3.8918919 6.94054054h2.9675676v-11.9027027h-2.7405406v6.95675676l-3.8756756-6.92432432h-2.9837838v11.87027026zm10.7351352.0648649c.8108108-.0432433 1.5621621-.2243243 2.254054-.5432433.6918919-.3189189 1.2945946-.7432432 1.8081081-1.272973.5135135-.52972968.9162162-1.1432432 1.2081082-1.84054049.2918919-.69729729.4378377-1.44594595.4378377-2.24594594 0-.81081081-.1486486-1.57297297-.4459459-2.28648649-.2972973-.71351351-.7027027-1.34054054-1.2162162-1.88108108s-1.1189189-.97837838-1.8162162-1.31351351c-.6972973-.33513514-1.4405406-.52432432-2.2297297-.56756757v-.01621622h-2.7405406v11.9675676zm0-2.74978378v-6.4540541c.4216216.04324325.8108108.15945946 1.1675675.34864865.3567568.18918919.6702703.43243244.9405405.72972973.2702703.2972973.4810812.63783784.6324325 1.02162163.1513513.38378378.227027.78648648.227027 1.2081081 0 .41081082-.0756757.8-.227027 1.16756758-.1513513.36756756-.3594594.68918919-.6243243.96486486-.2648648.27567567-.5783784.5027027-.9405406.68108112-.3621621.17837833-.754054.28918914-1.1756756.33243243zm15.2918919 2.78221618v-2.74054053h-4.9135135l4.9783783-9.24324326-8.9189189-.01621621v2.75675676h4.3297297l-4.9783784 9.24324324zm7.0702702-.0162162 1.3621622-5.96756759 1.572973 5.96756759h2.708108l3.518919-11.9837838h-2.8702703l-1.9297297 6.60000001-1.7513513-6.60000001h-2.691892l-1.508108 6.63243243-2.2054055-6.63243243h-2.8864865l3.9567568 11.9837838zm10.5932433-.0810811.4864864-1.4432432h3.745946l.4702703 1.4432432h2.8864865l-3.8432433-11.9027027h-2.5945945l-4.0540541 11.9027027zm3.3567567-4.18970272h-1.9297297l.9891892-2.88648648zm7.7837838 4.18970272v-6.94054054l3.8918917 6.94054054h2.9675678v-11.9027027h-2.7405405v6.95675676l-3.8756757-6.92432432h-2.9837838v11.87027026zm17.3189192.0972973v-2.74054053h-4.913513l4.978377-9.24324326-8.918918-.01621621v2.75675676h4.32973l-4.978379 9.24324324zm3.81081-.0810811v-11.9189189h-2.74054v11.9189189zm7.281081.0324324c.313514 0 .62973-.0243243.948649-.072973.318919-.0486486.62973-.127027.932433-.2351351v.2918919h2.756756v-6.66486483h-5.14054v2.74054054h2.383784v.59999996c-.313514.22702708-.654054.38918923-1.021622.48648653-.367567.0972973-.737838.13243245-1.11081.10540544-.372974-.0270271-.735136-.11891895-1.086488-.27567573-.351351-.15675678-.667566-.37567566-.948648-.65675674-.313513-.31351351-.551351-.67027027-.713513-1.07027027-.162163-.4-.243243-.80540541-.243243-1.21621621 0-.41081082.08108-.81621623.243243-1.21621622.162162-.4.4-.75675676.713513-1.07027028.313513-.31351351.67027-.54864864 1.07027-.7054054.4-.15675675.805405-.23513513 1.216216-.23513513s.816217.07837838 1.216217.23513513c.4.15675676.756756.39189189 1.07027.7054054l1.945946-1.94594594c-.583784-.58378379-1.243243-1.02162162-1.978379-1.31351352-.735134-.29189188-1.486486-.43783783-2.254054-.43783783-.767567 0-1.518919.14594595-2.254054.43783783-.735134.2918919-1.394594.72972973-1.978377 1.31351352-.583784.58378379-1.01892 1.24324324-1.305407 1.97837838-.286486.73513513-.429729 1.48648649-.429729 2.25405406 0 .76756756.143243 1.51621621.429729 2.24594594.286487.72972975.721623 1.38648646 1.305407 1.97027027.583783.5837838 1.243243 1.0216216 1.978377 1.3135135.735135.2918919 1.486487.4378378 2.254054.4378378z"
+            fill="#000"/>
+    </g>
+</svg>

resources/views/layouts/app.blade.php

@@ -14,7 +14,7 @@
     </head>
     <body class="font-sans antialiased">
         <x-jet-banner />
-        <div class="min-h-screen bg-gray-100">
+        <div class="min-h-screen bg-white">
             @livewire('navigation-menu')
             <!-- Page Heading -->
             @if (isset($header))

resources/views/layouts/guest.blade.php

@@ -13,21 +13,7 @@
     @livewireStyles
 </head>
 <body class="font-sans antialiased">
-<x-jet-banner />
-<div class="min-h-screen bg-gray-100">
-    <!-- Page Heading -->
-    @if (isset($header))
-        <header class="bg-white shadow">
-            <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-                {{ $header }}
-            </div>
-        </header>
-    @endif
-    <!-- Page Content -->
-    <main>
 {{ $slot }}
-    </main>
-</div>
 @stack('modals')
 @livewireScripts
 </body>

resources/views/livewire/guest/welcome.blade.php

@@ -1,24 +1,80 @@
 <div>
-    <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
+    <section class="w-full bg-black overflow-hidden">
-        @if (Route::has('login'))
+        <div class="max-w-7xl mx-auto px-10">
-            <div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
+            <div class="flex flex-col flex-wrap items-center justify-between py-7 mx-auto md:flex-row max-w-7xl">
-                @auth
+                <div class="relative flex flex-col md:flex-row">
-                    <a href="{{ url('/dashboard') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Dashboard</a>
+                    <a href="#_"
-                @else
+                       class="flex items-center mb-5 font-medium text-gray-900 lg:w-auto lg:items-center lg:justify-center md:mb-0">
-                    <a href="{{ route('login') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Log in</a>
+                        <img src="{{ asset('img/einundzwanzig-horizontal-inverted.svg') }}">
-                    @if (Route::has('register'))
+                    </a>
-                        <a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 dark:text-gray-500 underline">Register</a>
+                    <nav
-                    @endif
+                        class="flex flex-wrap items-center mb-5 text-lg md:mb-0 md:pl-8 md:ml-8 md:border-l md:border-gray-800">
-                @endauth
+                        {{--<a href="#_" class="mr-5 font-medium leading-6 text-gray-400 hover:text-gray-300">Home</a>
+                        <a href="#_" class="mr-5 font-medium leading-6 text-gray-400 hover:text-gray-300">Features</a>
+                        <a href="#_" class="mr-5 font-medium leading-6 text-gray-400 hover:text-gray-300">Pricing</a>
+                        <a href="#_" class="mr-5 font-medium leading-6 text-gray-400 hover:text-gray-300">Blog</a>--}}
+                    </nav>
                 </div>
-        @endif
+                <div class="inline-flex items-center ml-5 text-lg space-x-6 lg:justify-end">
-        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
+                    <a href="#"
-            <div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
+                       class="text-base font-medium leading-6 text-gray-400 hover:text-gray-300 whitespace-no-wrap transition duration-150 ease-in-out">
-                <img width="500" src="https://einundzwanzig.space/img/media/einundzwanzig-square.svg" alt="">
+                        Login </a>
+                    <a href="#"
+                       class="inline-flex items-center justify-center px-4 py-2 font-medium leading-6 text-gray-200 hover:text-white whitespace-no-wrap bg-gray-800 border border-transparent rounded shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800">
+                        Registrieren </a>
                 </div>
+            </div>
+            <div class="flex lg:flex-row flex-col pt-20 md:pt-40 lg:pt-20">
+                <div
+                    class="w-full lg:w-1/2 flex lg:px-0 px-5 flex-col md:items-center lg:items-start justify-center -mt-12">
+                    <h1 class="text-white text-3xl sm:text-5xl lg:max-w-none max-w-4xl lg:text-left text-left md:text-center xl:text-7xl font-black">
+                        EINUNDZWANZIG <br class="lg:block sm:hidden">Bitcoin <span
+                            class="bg-clip-text text-transparent bg-gradient-to-br from-yellow-400 via-yellow-500 to-yellow-700 mt-1 lg:block">School</span>
+                    </h1>
+                    <p class="text-gray-500 sm:text-lg md:text-xl xl:text-2xl lg:max-w-none max-w-2xl md:text-center lg:text-left lg:pr-32 mt-6">
+                        Finde Bitcoin Kurse in deiner City</p>
+                    <a href="#_"
+                       class="bg-white px-12 lg:px-16 py-4 text-center lg:py-5 font-bold rounded text-lg md:text-xl lg:text-2xl mt-8 inline-block w-auto">
+                        Kurs finden </a>
+                    <p class="text-gray-400 font-normal mt-4">TEXT</p>
+                </div>
+                <div class="w-full lg:w-1/2 relative lg:mt-0 mt-20 flex items-center justify-center">
+                    <img src="https://cdn.devdojo.com/images/march2022/mesh-gradient1.png"
+                         class="absolute lg:max-w-none max-w-3xl mx-auto mt-32 w-full h-full inset-0">
+                    <img src="{{ asset('img/btc-logo-6219386_1280.png') }}"
+                         class="w-full md:w-auto w-72 max-w-md max-w-sm ml-4 md:ml-20 lg:ml-0 xl:max-w-lg relative">
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="w-full mt-12">
+        <div class="max-w-7xl mx-auto px-10">
             <div>
-                <h1 class="text-4xl my-6 font-bold">Bitcoin School</h1>
+                <h2 class="text-2xl font-medium text-gray-500">Städte</h2>
+                <ul role="list" class="mt-3 grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6 lg:grid-cols-4">
+                    @foreach($cities as $city)
+                        <li class="col-span-1 flex rounded-md shadow-sm">
+                            <div
+                                class="flex-shrink-0 flex items-center justify-center w-16 bg-amber-500 text-white text-sm font-medium rounded-l-md">
+                                {{ str($city->name)->initials() }}
+                            </div>
+                            <div
+                                class="flex flex-1 items-center justify-between truncate rounded-r-md border-t border-r border-b border-gray-200 bg-white">
+                                <div class="flex-1 truncate px-4 py-2 text-sm">
+                                    <a href="#"
+                                       class="font-medium text-gray-900 hover:text-gray-600">{{ $city->name }}</a>
+                                    <p class="text-gray-500">16 Kurse</p>
+                                </div>
+                                <div class="flex-shrink-0 pr-2">
+                                    {{-- BTN--}}
                                 </div>
                             </div>
+                        </li>
+                    @endforeach
+                </ul>
             </div>
         </div>
+    </section>
+
+</div>

tailwind.config.js

@@ -10,21 +10,6 @@ module.exports = {
     ],
     darkMode: 'class',
     theme:    {
-        colors:     {
-            'gray': {
-                DEFAULT: '#151515',
-                '50':    '#AEAEAE',
-                '100':   '#A4A4A4',
-                '200':   '#8F8F8F',
-                '300':   '#7B7B7B',
-                '400':   '#676767',
-                '500':   '#525252',
-                '600':   '#3E3E3E',
-                '700':   '#292929',
-                '800':   '#151515',
-                '900':   '#000000'
-            },
-        },
         extend: {
             fontFamily: {
                 sans: [