Merge pull request #526 from HZ-HBO-ICT/rework/speaker-page

Rework - Companies and Speakers front facing pages

app/Http/Controllers/CompanyController.php

@@ -2,22 +2,82 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Company;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\View\View;
 use App\Models\Edition;
 
 class CompanyController extends Controller
 {
     /**
      * Returns the public facing company index page
      */
-    public function index()
+    public function index(): View
     {
+        $companies = Company::where('is_approved', 1)->get()->sortBy(function ($company) {
+            if ($company->is_approved && $company->is_sponsorship_approved) {
+                return $company->sponsorship_id;
+            }
+            return 999; // Assign a high value to non-sponsored speakers
+        });
+
         $edition = Edition::current();
+        if (!$edition) {
+            $companies = collect();
+        }
 
+        return view('teams.public.index', compact('companies'));
+    }
+
+    /**
+     * Returns the public facing company show page
+     * @param Company $company
+     * @return View | RedirectResponse
+     */
+    public function show(Company $company): View | RedirectResponse
+    {
+        $edition = Edition::current();
         if (!$edition) {
-            return redirect(route('welcome'))
-                ->dangerBanner("Companies are not available yet.");
+            return redirect(route('companies.index'));
+        }
+
+        $styles = [
+            1 => [
+                'borderColor' => 'bg-gradient-to-r from-yellow-300 to-yellow-600', // Gold
+                'linkColor' => 'text-yellow-400 hover:text-yellow-500',
+                'textColor' => 'text-yellow-400',
+                'iconColor' => 'stroke-yellow-400 hover:stroke-yellow-500',
+            ],
+            2 => [
+                'borderColor' => 'bg-gradient-to-r from-gray-300 to-gray-600', // Silver
+                'linkColor' => 'text-gray-600 hover:text-gray-700',
+                'textColor' => 'text-gray-600',
+                'iconColor' => 'stroke-gray-600 hover:stroke-gray-700',
+            ],
+            3 => [
+                'borderColor' => 'bg-gradient-to-r from-orange-300 to-orange-600', // Bronze
+                'linkColor' => 'text-orange-400 hover:text-orange-500',
+                'textColor' => 'text-orange-400',
+                'iconColor' => 'stroke-orange-400 hover:stroke-orange-500',
+            ],
+        ];
+
+        if ($company->is_sponsorship_approved && isset($styles[$company->sponsorship_id])) {
+            $borderColor = $styles[$company->sponsorship_id]['borderColor'];
+            $linkColor = $styles[$company->sponsorship_id]['linkColor'];
+            $iconColor = $styles[$company->sponsorship_id]['iconColor'];
+            $textColor = $styles[$company->sponsorship_id]['textColor'];
+        } else {
+            $borderColor = 'bg-gradient-to-r from-blue-300 via-blue-400 to-blue-500'; // Default
+            $linkColor = 'text-blue-400 hover:text-blue-600';
+            $textColor = 'text-blue-400';
+            $iconColor = 'stroke-blue-400 dark:stroke-blue-400';
         }
 
-        return view('teams.public.index', ['teams' => collect()]);
+        return view(
+            'teams.public.show',
+            compact('company', 'borderColor', 'textColor', 'linkColor', 'iconColor')
+        );
     }
 }

app/Http/Controllers/ProgrammeController.php

@@ -47,7 +47,44 @@ public function index(): View
      */
     public function show(Presentation $presentation): View
     {
-        return view('programme.show', compact('presentation'));
+        $styles = [
+            1 => [
+                'borderColor' => 'bg-gradient-to-r from-yellow-300 to-yellow-600', // Gold
+                'linkColor' => 'text-yellow-400 hover:text-yellow-500',
+                'textColor' => 'text-yellow-400',
+                'iconColor' => 'stroke-yellow-400 hover:stroke-yellow-500',
+            ],
+            2 => [
+                'borderColor' => 'bg-gradient-to-r from-gray-300 to-gray-600', // Silver
+                'linkColor' => 'text-gray-600 hover:text-gray-700',
+                'textColor' => 'text-gray-600',
+                'iconColor' => 'stroke-gray-600 hover:stroke-gray-700',
+            ],
+            3 => [
+                'borderColor' => 'bg-gradient-to-r from-orange-300 to-orange-600', // Bronze
+                'linkColor' => 'text-orange-400 hover:text-orange-500',
+                'textColor' => 'text-orange-400',
+                'iconColor' => 'stroke-orange-400 hover:stroke-orange-500',
+            ],
+        ];
+
+        $company = $presentation->company;
+        if ($company && $company->is_sponsorship_approved && isset($styles[$company->sponsorship_id])) {
+            $borderColor = $styles[$company->sponsorship_id]['borderColor'];
+            $linkColor = $styles[$company->sponsorship_id]['linkColor'];
+            $iconColor = $styles[$company->sponsorship_id]['iconColor'];
+            $textColor = $styles[$company->sponsorship_id]['textColor'];
+        } else {
+            $borderColor = 'bg-gradient-to-r from-blue-300 via-blue-400 to-blue-500'; // Default
+            $linkColor = 'text-blue-400 hover:text-blue-600';
+            $textColor = 'text-blue-400';
+            $iconColor = 'stroke-blue-400 dark:stroke-blue-400';
+        }
+
+        return view(
+            'programme.show',
+            compact('presentation', 'borderColor', 'linkColor', 'textColor', 'iconColor')
+        );
     }
 
     /**

app/Livewire/Company/ManageLogo.php

@@ -16,16 +16,31 @@ class ManageLogo extends Component
     use FileValidation;
 
     public $photo;
+    public $currentLogo;
     public $company;
+    public $theme;
 
     /**
      * Triggered when initializing the component
      * @param $company
      * @return void
      */
-    public function mount($company)
+    public function mount($company, $theme = 'light')
     {
         $this->company = $company;
+        $this->theme = $theme;
+        $this->updateLogoInComponent();
+    }
+
+    /**
+     * Fetches the path of the saved logo from the database
+     * @return void
+     */
+    public function updateLogoInComponent()
+    {
+        $this->currentLogo =  $this->theme == 'light' ?
+            $this->company->logo_path :
+            $this->company->dark_logo_path;
     }
 
     /**
@@ -63,8 +78,10 @@ public function save()
         ]);
 
         $path = $this->photo->store('logos', 'public');
+        $path_to_be_updated = $this->theme == 'light' ? 'logo_path' : 'dark_logo_path';
 
-        $this->company->update(['logo_path' => $path]);
+        $this->company->update([$path_to_be_updated => $path]);
+        $this->updateLogoInComponent();
 
         //ImageOptimizer::optimize('storage/' . $path);
 

app/Models/Company.php

@@ -15,7 +15,8 @@ class Company extends Model
     use HasFactory;
 
     protected $fillable = ['name', 'description', 'website', 'postcode', 'is_approved', 'motivation',
-        'house_number', 'street', 'city', 'logo_path', 'phone_number', 'sponsorship_id', 'is_sponsorship_approved'];
+        'house_number', 'street', 'city', 'logo_path', 'phone_number', 'sponsorship_id', 'is_sponsorship_approved',
+        'dark_logo_path'];
 
     /**
      * Establishes a relationship between the company and

app/Models/Edition.php

@@ -321,4 +321,28 @@ public function getEvent(string $name): EditionEvent
             ->where('event_id', Event::where('name', $name)->first()->id)
             ->first();
     }
+
+    /**
+     * Function that makes sure that the keynote has a picture even if it is
+     * just the default avatar
+     * @return Attribute
+     */
+    public function keynotePictureSource(): Attribute
+    {
+        return Attribute::make(
+            get: function () {
+                if ($this->keynote_photo_path) {
+                    return url('storage/' . $this->keynote_photo_path);
+                } else {
+                    $name = trim(collect(explode(' ', $this->keynote_name))->map(function ($segment) {
+                        return mb_substr($segment, 0, 1);
+                    })->join(' '));
+
+                    return 'https://ui-avatars.com/api/?name=' .
+                        urlencode($name) .
+                        '&color=7F9CF5&background=EBF4FF&size=128';
+                }
+            }
+        );
+    }
 }

app/View/Components/Company/CompanyLogosManager.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\View\Components\Company;
+
+use App\Models\Company;
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class CompanyLogosManager extends Component
+{
+    public Company $company;
+
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(Company $company)
+    {
+        $this->company = $company;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.company.company-logos-manager');
+    }
+}

config/routesWithFooter.php

@@ -0,0 +1,13 @@
+<?php
+
+return [
+    'routes' => [
+        'welcome',
+        'speakers.index',
+        'companies.index',
+        'companies.show',
+        'presentations.show',
+        'faq',
+        'contact',
+    ],
+];

database/factories/CompanyFactory.php

@@ -21,7 +21,7 @@ public function definition(): array
     {
         return [
             'name' => $this->faker->unique()->company(),
-            'website' => $this->faker->url,
+            'website' => 'www.example.com',
             'description' => $this->faker->paragraph(),
             'motivation' => $this->faker->paragraph(),
             'phone_number' => $this->faker->phoneNumber,

database/migrations/2024_03_25_161038_create_companies_table.php

@@ -23,6 +23,7 @@ public function up(): void
             $table->unsignedBigInteger('sponsorship_id')->nullable();
             $table->boolean('is_sponsorship_approved')->nullable();
             $table->string('logo_path')->nullable();
+            $table->string('dark_logo_path')->nullable();
             $table->string('postcode');
             $table->string('street');
             $table->string('house_number');

resources/views/components/company/company-logos-manager.blade.php

@@ -0,0 +1,18 @@
+<x-action-section>
+    <x-slot name="title">
+        {{ __('Company logo') }}
+    </x-slot>
+
+    <x-slot name="description">
+        {{ __("Add the logo of your company. Due to the fact that we utilize dark mode as well,
+        we suggest that you upload a dark theme of your logo as well. We also suggest that you upload a
+        transparent background image for the logo. If you don't upload one a placeholder will be used") }}
+    </x-slot>
+
+    <x-slot name="content">
+        <div class="grid grid-cols-2 gap-2">
+            @livewire('company.manage-logo', ['company' => $company ], key('light'))
+            @livewire('company.manage-logo', ['company' => $company, 'theme' => 'dark' ], key('dark'))
+        </div>
+    </x-slot>
+</x-action-section>

resources/views/crew/companies/show.blade.php

@@ -37,11 +37,15 @@
                             </p>
                         </div>
                     </div>
-                    <div class="text-gray-800 dark:text-gray-200">
-                        {{ $company->description }}
+                    <div class="text-gray-800 pt-3 dark:text-gray-200">
+                        <span class="font-semibold">Website:</span> <a class="underline text-apricot-peach-400 hover:text-apricot-peach-500"
+                            href="http://{{$company->website}}">{{ $company->website }}</a>
                     </div>
-                    <div class="text-gray-800 dark:text-gray-200">
-                        {{ $company->motivation }}
+                    <div class="text-gray-800 pt-3 dark:text-gray-200">
+                        <span class="font-semibold">Description:</span> {{ $company->description }}
+                    </div>
+                    <div class="text-gray-800 pt-3 dark:text-gray-200">
+                        <span class="font-semibold">Motivation:</span> {{ $company->motivation }}
                     </div>
                 </x-slot>
 
@@ -67,30 +71,30 @@
                 </x-slot>
 
                 <x-slot name="content">
-                    @if($company->internshipAttributes)
+                    @if(!$company->internshipAttributes->isEmpty())
                         <div class="space-y-4">
                             @if($company->internshipAttributes()->years()->exists())
-                                <div class="bg-gray-50 p-3 rounded-lg">
+                                <div class="bg-gray-50 dark:bg-gray-900 p-3 rounded-lg">
                                     <h3 class="font-semibold">Internship for years:</h3>
-                                    <p class="text-sm text-gray-700">{{ implode(', ', $company->internshipAttributes()->years()->pluck('value')->toArray()) }}</p>
+                                    <p class="text-sm text-gray-700 dark:text-gray-200">{{ implode(', ', $company->internshipAttributes()->years()->pluck('value')->toArray()) }}</p>
                                 </div>
                             @endif
                             @if($company->internshipAttributes()->tracks()->exists())
-                                <div class="bg-gray-50 p-3 rounded-lg">
+                                <div class="bg-gray-50 dark:bg-gray-900 p-3 rounded-lg">
                                     <h3 class="font-semibold">Internship for tracks:</h3>
-                                    <p class="text-sm text-gray-700">{{ implode(', ', $company->internshipAttributes()->tracks()->pluck('value')->toArray()) }}</p>
+                                    <p class="text-sm text-gray-700 dark:text-gray-200">{{ implode(', ', $company->internshipAttributes()->tracks()->pluck('value')->toArray()) }}</p>
                                 </div>
                             @endif
                             @if($company->internshipAttributes()->languages()->exists())
-                                <div class="bg-gray-50 p-3 rounded-lg">
+                                <div class="bg-gray-50 dark:bg-gray-900 p-3 rounded-lg">
                                     <h3 class="font-semibold">Internship in the following languages:</h3>
-                                    <p class="text-sm text-gray-700">{{ implode(', ', $company->internshipAttributes()->languages()->pluck('value')->toArray()) }}</p>
+                                    <p class="text-sm text-gray-700 dark:text-gray-200">{{ implode(', ', $company->internshipAttributes()->languages()->pluck('value')->toArray()) }}</p>
                                 </div>
                             @endif
                         </div>
                     @else
-                        <div class="bg-gray-100 p-4 rounded-lg shadow-md">
-                            <p class="text-gray-700">No internship details were specified.</p>
+                        <div>
+                            <p class="text-gray-700 dark:text-gray-100">No internship details were specified.</p>
                         </div>
                     @endif
                 </x-slot>
@@ -220,12 +224,12 @@ class="underline" href="{{route('moderator.booths.show', $company->booth)}}">See
                     @elseif(!$company->is_sponsorship_approved)
                         <p class="text-yellow-500 dark:text-yellow-400">Not approved/Waiting approval. <a
                                 class="underline" href="{{route('moderator.sponsorships.show', $company)}}">See more
-                                                                                                        here</a></p>
+                                                                                                            here</a></p>
                     @else
                         <p class="text-green-500 dark:text-green-400">Approved. <a class="underline"
                                                                                    href="{{route('moderator.sponsorships.show', $company)}}">See
-                                                                                                                                         more
-                                                                                                                                         here</a>
+                                                                                                                                             more
+                                                                                                                                             here</a>
                         </p>
                     @endif
                 </x-slot>

resources/views/faq.blade.php

@@ -3,16 +3,18 @@
 {{--        <div--}}
 {{--            class="before:absolute before:bg-gradient-to-br before:from-gradient-yellow before:via-gradient-pink before:via-gradient-purple before:to-gradient-blue before:opacity-70 before:w-full before:h-full"></div>--}}
 
+        <h2 class="text-center dark:text-gray-50 text-gray-900 text-5xl font-extrabold py-12">
+            Frequently Asked Questions
+        </h2>
         <div class="isolate px-6 py-6 max-w-7xl mx-auto my-5 border border-gray-100 rounded bg-white dark:bg-gray-800 dark:border-gray-700">
             <div class="text-center max-w-2xl mx-auto">
-                <h2 class="tracking-tight leading-10 font-bold text-2xl dark:text-white">Frequently Asked Questions</h2>
                 <p class="leading-7 text-base dark:text-gray-200">
                     Have a different question and can’t find the answer you’re looking for? Reach out to our support team by emailing
                     <a class="text-blue-600 hover:text-blue-400 visited:text-purple-600" href="mailto: [email protected]">[email protected]</a>
                     and we’ll get back to you as soon as we can.
                 </p>
             </div>
-            <div class="m-5 md:m-20">
+            <div class="m-5 md:mt-10 md:mb-20">
                 <dl class="grid-cols-1 gap-y-5 md:gap-x-10 md:gap-y-16 md:grid-cols-2 grid">
                     <div class="border rounded border-gray-300 shadow p-4 dark:bg-gray-800 dark:border-gray-700">
                         <dt class="leading-7 font-semibold text-base dark:text-white">What is the “We are in IT together Conference”?</dt>