About (#46)

* feat(controllers): add AboutController and FAQController

- Added new controllers for the About page and FAQ page.
- The AboutController handles requests related to the About page.
- The FAQController handles requests related to the FAQ page.

feat(components): add Dropdown component

- Created a new Dropdown component for displaying questions and answers in the FAQ page.
- The Dropdown component takes in a question and answer as props.

feat(views): add blade templates for Heimerdinger and League of Legends FAQs

- Added blade templates for displaying frequently asked questions about Heimerdinger and League of Legends.
- The Heimerdinger template includes specific questions and answers about Heimerdinger, along with relevant meta tags for SEO purposes.
- The League of Legends template includes general questions and answers about League of Legends, along with relevant meta tags.

* feat(faq): add Heimerdinger's backstory and naming

- Added a new FAQ dropdown for Heimerdinger's backstory, providing information about his origins, role in Piltover, and association with Ekko.
- Included another FAQ dropdown that explains the inspiration behind Heimerdinger's name, combining J. Robert Oppenheimer and Erwin Schrödinger.
- These additions enhance the user's understanding of Heimerdinger's character and background.

* Apply fixes from StyleCI

* refactor(components): simplify constructor syntax

- Refactored the constructor syntax in the `Dropdown` component to use a simplified format.
- Removed unnecessary line breaks and indentation for improved readability.

* refactor(faq): update Heimerdinger page layout

- Change the heading tag from `<h2>` to `<h1>` for better semantic structure.
- Update the paragraph tag from `<p>` to `<h2>` for consistency with other sections.
- Improve the readability and maintainability of the code.

* feat(controllers): add AboutController and FAQController

- Added new controllers for the About page and FAQ page.
- The AboutController handles requests related to the About page.
- The FAQController handles requests related to the FAQ page.

feat(components): add Dropdown component

- Created a new Dropdown component for displaying questions and answers in the FAQ page.
- The Dropdown component takes in a question and answer as props.

feat(views): add blade templates for Heimerdinger and League of Legends FAQs

- Added blade templates for displaying frequently asked questions about Heimerdinger and League of Legends.
- The Heimerdinger template includes specific questions and answers about Heimerdinger, along with relevant meta tags for SEO purposes.
- The League of Legends template includes general questions and answers about League of Legends, along with relevant meta tags.

* feat(faq): add Heimerdinger's backstory and naming

- Added a new FAQ dropdown for Heimerdinger's backstory, providing information about his origins, role in Piltover, and association with Ekko.
- Included another FAQ dropdown that explains the inspiration behind Heimerdinger's name, combining J. Robert Oppenheimer and Erwin Schrödinger.
- These additions enhance the user's understanding of Heimerdinger's character and background.

* Apply fixes from StyleCI

* refactor(components): simplify constructor syntax

- Refactored the constructor syntax in the `Dropdown` component to use a simplified format.
- Removed unnecessary line breaks and indentation for improved readability.

* refactor(faq): update Heimerdinger page layout

- Change the heading tag from `<h2>` to `<h1>` for better semantic structure.
- Update the paragraph tag from `<p>` to `<h2>` for consistency with other sections.
- Improve the readability and maintainability of the code.

* feat(about): add about page and route

- Added a new AboutController class with an index method to handle the /about route.
- Created a new blade template file, index.blade.php, for the about page.
- Added HTML markup and content for the about page.
- Updated web.php routes file to include the /about route.

* feat(about): add information about League of Legends,  Heimerdinger

- Added a section with detailed information about League of Legends, including its gameplay, competitive scene, and spin-off game modes.
- Included a section introducing Heimerdinger.lol as a fan-made website dedicated to providing information about League of Legends.
- Added a section describing the character Heimerdinger, his role in the game, and his appearance in the animated series Arcane.

* feat(navbar): update About link and fix routing issue

- Updated the href attribute of the About link in the navbar component to point to the correct route.
- Fixed a routing issue where the active class was not being applied correctly when on the About page.

---------

Co-authored-by: Rico <rico-vz@users.noreply.github.com>

resources/views/components/about/faq/dropdown.blade.php

@@ -0,0 +1,14 @@
+<div class="py-5">
+    <details class="group">
+        <summary class="flex justify-between items-center font-medium cursor-pointer list-none">
+            <span class="text-orange-400">{{$question}}</span>
+            <span class="transition text-orange-400 group-open:rotate-180">
+                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path>
+                </svg>
+              </span>
+        </summary>
+        <p class="text-gray-100 mt-3">
+            {{$answer}}
+        </p>
+    </details>
+</div>

resources/views/components/home/features.blade.php

@@ -74,7 +74,7 @@
             </a>
 
             <a class="block p-8 transition bg-stone-800/40 border shadow-xl border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"
-               href="#">
+               href="/about">
                 <x-iconsax-bul-message-question class="h-10 text-orange-400"/>
 
                 <h2 class="mt-4 text-xl font-bold text-white">About The Game</h2>

resources/views/components/navbar.blade.php

@@ -70,11 +70,11 @@
                         Posts</a>
                 </li>
                 <li>
-                    <a href="#"
+                    <a href="{{route('about.index')}}"
                        class="flex py-2 pl-3 pr-2 rounded hover:bg-stone-100 md:hover:bg-transparent
                        md:border-0 md:hover:text-orange-500 md:p-0 md:dark:hover:text-orange-400
                         dark:hover:bg-stone-700 dark:hover:text-white md:dark:hover:bg-transparent
-                        {{ request()->routeIs('info.*') ? 'text-orange-400 font-medium' : 'text-white' }}">
+                        {{ request()->routeIs('about.*') ? 'text-orange-400 font-medium' : 'text-white' }}">
                         <x-iconsax-bul-info-circle class="w-6 h-6 mr-1"/>
                         About</a>
                 </li>