refactor landing page

Hexlet · Jan 25, 2023 · b5fb0cd · b5fb0cd
1 parent a6b7261
commit b5fb0cd
Show file tree

Hide file tree

Showing 8 changed files with 264 additions and 263 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -17,6 +17,9 @@ indent_size = 2
 [*.{js,jsx,scss}]
 indent_size = 2
 
+[*.{blade.php}]
+indent_size = 2
+
 [package.json]
 indent_size = 2
 

diff --git a/Dockerfile.render b/Dockerfile.render
@@ -13,4 +13,4 @@ RUN npm run prod
 
 RUN php artisan migrate:fresh --force --seed
 
-CMD [ "php artisan serve --host 0.0.0.0 --port 8000" ]
+CMD [ "php artisan serve --host 0.0.0.0 --port 80" ]
diff --git a/Makefile b/Makefile
@@ -21,7 +21,7 @@ start:
 	heroku local -f Procfile.dev
 
 start-app:
-	php artisan serve --host 0.0.0.0 --port 8000
+	php artisan serve --host 0.0.0.0
 
 start-frontend:
 	npm run watch

diff --git a/resources/views/exercise/show.blade.php b/resources/views/exercise/show.blade.php
@@ -96,14 +96,13 @@ class="btn btn-primary"
             <div id="codemirrorContainer"></div>
         </div>
     </div>
+@endsection
+@push('scripts')
     <script>
-      const userId = "{{ $authUser->id }}";
-      const exerciseId = "{{ $exercise->id }}";
-      const locale = "{{ LaravelLocalization::getCurrentLocale() }}";
-      window.sicpEditorData = { userId, exerciseId, locale };
+        const userId = "{{ $authUser->id }}";
+        const exerciseId = "{{ $exercise->id }}";
+        const locale = "{{ LaravelLocalization::getCurrentLocale() }}";
+        window.sicpEditorData = { userId, exerciseId, locale };
     </script>
-
-    @push('scripts')
     <script src="{{ mix('js/editor.js') }}" defer></script>
-    @endpush
-@endsection
+@endpush
diff --git a/resources/views/home/landing.blade.php b/resources/views/home/landing.blade.php
@@ -1,90 +1,105 @@
 @extends('layouts.app')
-@section('content_landing')
-<section class="container my-5">
-    <div class="row align-items-center">
-        <div class="col col-md-6">
-            <h1 class="fw-bold mb-5 text-uppercase">{{ __('landing.title.1') }}<br> <span class="text-primary">{{ __('landing.title.2') }}</span></h1>
-            <figure>
-                <blockquote class="blockquote">
-                    <p class="small">{{ __('landing.epigraph.0') }}</p>
-                </blockquote>
-                <figcaption class="blockquote-footer">
-                    {{ __('landing.author_of_epigraph.0') }}</cite>
-                </figcaption>
-            </figure>
-            <figure>
-                <blockquote class="blockquote">
-                    <p class="small">{{ __('landing.epigraph.1') }}</p>
-                </blockquote>
-                <figcaption class="blockquote-footer">
-                    {{ __('landing.author_of_epigraph.1') }}</cite>
-                </figcaption>
-            </figure>
+@section('landing_content')
+<section class="my-5">
+  <div class="container">
+    <div class="row">
+      <div class="col col-lg-7">
+        <h2 class="fw-bold text-uppercase">{{ __('landing.what_for') }}</h2>
+        <p class="lead">{{ __('landing.what_do') }}</p>
+        <h3 class="mt-5">{{ __('landing.this_is') }}</h3>
+        <div class="row row-cols-2 row-cols-lg-4 mb-5 mb-lg-0">
+          <div class="col">
+            <span class="h3 text-primary">{{ $countChapters }}</span>
+            <div>{{ __('landing.content.1') }}</div>
+          </div>
+          <div class="col">
+            <span class="h3 text-primary">{{ $countExercises }}</span>
+            <div>{{ __('landing.content.2') }}</div>
+          </div>
+          <div class="col">
+            <span class="h3 text-primary">{{ $countUsers }}</span>
+            <div>{{ trans_choice('landing.content.3', $countUsers) }}</div>
+          </div>
+          <div class="col">
+            <span class="h3 text-primary">{{ $countComments }}</span>
+            <div>{{ trans_choice('landing.content.4', $countComments) }}</div>
+          </div>
         </div>
-        <div class="d-none d-md-block col-md-6 text-center">
-            <img src="{{ mix('img/Patchouli_Gives_SICP.png') }}" alt="{{ __('landing.start_learning') }}" class="img-fluid">
+      </div>
+      <div class="col col-lg-5">
+        <div class="border-0 card d-flex h-100 ps-3">
+          <div class="card-body d-flex flex-column justify-content-center">
+            <h2 class="card-title">{{ __('landing.features') }}</h2>
+            <ul class="card-text">
+              <li>{{ __('landing.features_list.1') }}</li>
+              <li>{{ __('landing.features_list.2') }}</li>
+              <li>{{ __('landing.features_list.3') }}</li>
+              <li>{{ __('landing.features_list.4') }}</li>
+            </ul>
+            <a href="{{ route('register') }}" class="btn btn-primary btn-lg py-3">
+              {{ __('landing.start_learning')}}
+            </a>
+          </div>
         </div>
+      </div>
     </div>
-    <div class="row my-5">
-        <div class="col-6 col-lg-3 text-center">
-            <i class="bi bi-book fs-1 text-primary"></i>
-            <p class="h2">{{ __('landing.actions_list.1') }}</p>
-        </div>
-        <div class="col-6 col-lg-3 text-center">
-            <i class="bi bi-code-square fs-1 text-primary"></i>
-            <p class="h2">{{ __('landing.actions_list.2') }}</p>
-        </div>
-        <div class="col-6 col-lg-3 text-center">
-            <i class="bi bi-pen fs-1 text-primary"></i>
-            <p class="h2">{{ __('landing.actions_list.3') }}</p>
-        </div>
-        <div class="col-6 col-lg-3 text-center">
-            <i class="bi bi-award fs-1 text-primary"></i>
-            <p class="h2">{{ __('landing.actions_list.4') }}</p>
-        </div>
+  </div>
+</section>
+
+<section class="mb-5 bg-dark text-light">
+  <div class="container">
+    <div class="row align-items-center">
+      <div class="col col-md-6">
+        <h1 class="fw-bold mb-5 text-uppercase">{{ __('landing.title.1') }}
+          <span class="text-primary">{{ __('landing.title.2') }}</span>
+        </h1>
+        <figure>
+          <blockquote class="blockquote">
+            <p class="small">{{ __('landing.epigraph.0') }}</p>
+          </blockquote>
+          <figcaption class="blockquote-footer">
+            {{ __('landing.author_of_epigraph.0') }}</cite>
+          </figcaption>
+        </figure>
+        <figure>
+          <blockquote class="blockquote">
+            <p class="small">{{ __('landing.epigraph.1') }}</p>
+          </blockquote>
+          <figcaption class="blockquote-footer">
+            {{ __('landing.author_of_epigraph.1') }}</cite>
+          </figcaption>
+        </figure>
+      </div>
+      <div class="d-none d-md-block col-md-6 text-center">
+        <img src="{{ mix('img/Patchouli_Gives_SICP.png') }}" alt="{{ __('landing.start_learning') }}" class="img-fluid">
+      </div>
     </div>
+  </div>
 </section>
-<div class="bg-light py-3 py-md-5">
-    <section class="container my-3 my-md-5">
-        <div class="row">
-            <div class="col col-lg-7">
-                <h2 class="fw-bold text-uppercase">{{ __('landing.what_for') }}</h2>
-                <p class="lead">{{ __('landing.what_do') }}</p>
-                <h3 class="mt-5">{{ __('landing.this_is') }}</h3>
-                <div class="row row-cols-2 row-cols-lg-4 mb-5 mb-lg-0">
-                    <div class="col">
-                        <span class="h3 text-primary">{{ $countChapters }}</span>
-                        <div>{{ __('landing.content.1') }}</div>
-                    </div>
-                    <div class="col">
-                        <span class="h3 text-primary">{{ $countExercises }}</span>
-                        <div>{{ __('landing.content.2') }}</div>
-                    </div>
-                    <div class="col">
-                        <span class="h3 text-primary">{{ $countUsers }}</span>
-                        <div>{{ trans_choice('landing.content.3', $countUsers) }}</div>
-                    </div>
-                    <div class="col">
-                        <span class="h3 text-primary">{{ $countComments }}</span>
-                        <div>{{ trans_choice('landing.content.4', $countComments) }}</div>
-                    </div>
-                </div>
-            </div>
-            <div class="col col-lg-5">
-                <div class="border-0 card d-flex h-100 ps-3 shadow-sm">
-                    <div class="card-body d-flex flex-column justify-content-center">
-                        <h2 class="card-title">{{ __('landing.features') }}</h2>
-                        <ul class="card-text">
-                            <li>{{ __('landing.features_list.1') }}</li>
-                            <li>{{ __('landing.features_list.2') }}</li>
-                            <li>{{ __('landing.features_list.3') }}</li>
-                            <li>{{ __('landing.features_list.4') }}</li>
-                        </ul>
-                        <a href="{{ route('register') }}" class="btn btn-primary py-3">{{ __('landing.start_learning') }}</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-</div>
-@endsection
+
+<section class="mb-5">
+  <div class="container">
+    <div class="row d-flex justify-content-center">
+      <div class="col-3 text-center">
+        <i class="bi bi-book fs-1 text-primary"></i>
+        <p class="h2">{{ __('landing.actions_list.1') }}</p>
+      </div>
+      <div class="col-2 text-center">
+        <i class="bi bi-code-square fs-1 text-primary"></i>
+        <p class="h2">{{ __('landing.actions_list.2') }}</p>
+      </div>
+
+      <div class="col-2 text-center">
+        <i class="bi bi-pen fs-1 text-primary"></i>
+        <p class="h2">{{ __('landing.actions_list.3') }}</p>
+      </div>
+      <div class="col-3 text-center">
+        <i class="bi bi-award fs-1 text-primary"></i>
+        <p class="h2">{{ __('landing.actions_list.4') }}</p>
+      </div>
+    </div>
+
+  </div>
+
+</section>
+@endsection
diff --git a/resources/views/layouts/_footer.blade.php b/resources/views/layouts/_footer.blade.php
@@ -1,37 +1,48 @@
 <footer>
-    <div class="container">
-        <div class="row gap-4 gap-lg-0 row-cols-1 row-cols-lg-4 py-5">
-            <div class="col">
-                <ul class="nav flex-column align-items-start">
-                    <li><a href="{{ route('pages.show', ['page' => 'about']) }}" class="nav-link px-0">{{ __('layout.footer.about') }}</a></li>
-                    <li><a href="https://github.com/Hexlet/hexlet-sicp" class="nav-link px-0">{{ __('layout.footer.source_code') }}</a></li>
-                    <li><a href="https://slack-ru.hexlet.io/" class="nav-link px-0">Slack #hexlet-volunteers</a></li>
-                </ul>
-            </div>
-            <div class="col">
-                <div class="fw-bold">{{ __('layout.footer.help') }}</div>
-                <ul class="nav flex-column align-items-start">
-                    <li><a href="https://ru.hexlet.io/blog" class="nav-link px-0">{{ __('layout.footer.blog') }}</a></li>
-                    <li><a href="https://ru.hexlet.io/knowledge" class="nav-link px-0">{{ __('layout.footer.knowledge') }}</a></li>
-                    <li><a href="https://ru.hexlet.io/pages/recommended-books" class="nav-link px-0">{{ __('layout.footer.recommended_books') }}</a></li>
-                </ul>
-            </div>
-            <div class="col">
-                <div class="fw-bold">{{ __('layout.footer.other_os_projects') }}</div>
-                <ul class="nav flex-column align-items-start">
-                    <li><a class="nav-link px-0" href="https://github.com/Hexlet/hexlet-cv">{{ __('layout.footer.os_projects.cv') }}</a></li>
-                    <li><a class="nav-link px-0" href="https://github.com/Hexlet/hexlet-editor">{{ __('layout.footer.os_projects.editor') }}</a></li>
-                    <li><a class="nav-link px-0" href="https://github.com/Hexlet/hexlet-friends">{{ __('layout.footer.os_projects.friends') }}</a></li>
-                </ul>
-            </div>
-            <div class="col">
-                <div class="fw-bold">{{ __('layout.footer.additionally') }}</div>
-                <ul class="nav flex-column align-items-start">
-                    <li><a class="nav-link px-0"="https://ru.code-basics.com/">{{ __('layout.footer.os_projects.code_basics') }}</a></li>
-                    <li><a class="nav-link px-0" href="https://codebattle.hexlet.io/">{{ __('layout.footer.os_projects.codebattle') }}</a></li>
-                    <li><a class="nav-link px-0" href="https://guides.hexlet.io/">{{ __('layout.footer.os_projects.guides') }}</a></li>
-                </ul>
-            </div>
-        </div>
+  <div class="container">
+    <div class="row gap-4 gap-lg-0 row-cols-1 row-cols-lg-4 py-5">
+      <div class="col">
+        <ul class="nav flex-column align-items-start">
+          <li><a href="{{ route('pages.show', ['page' => 'about']) }}" class="nav-link px-0">{{
+              __('layout.footer.about') }}</a></li>
+          <li><a href="https://github.com/Hexlet/hexlet-sicp" class="nav-link px-0">{{
+              __('layout.footer.source_code') }}</a></li>
+          <li><a href="https://slack-ru.hexlet.io/" class="nav-link px-0">Slack #hexlet-volunteers</a></li>
+        </ul>
+      </div>
+      <div class="col">
+        <div class="fw-bold">{{ __('layout.footer.help') }}</div>
+        <ul class="nav flex-column align-items-start">
+          <li><a href="https://ru.hexlet.io/blog" class="nav-link px-0">{{ __('layout.footer.blog') }}</a>
+          </li>
+          <li><a href="https://ru.hexlet.io/knowledge" class="nav-link px-0">{{ __('layout.footer.knowledge')
+              }}</a></li>
+          <li><a href="https://ru.hexlet.io/pages/recommended-books" class="nav-link px-0">{{
+              __('layout.footer.recommended_books') }}</a></li>
+        </ul>
+      </div>
+      <div class="col">
+        <div class="fw-bold">{{ __('layout.footer.other_os_projects') }}</div>
+        <ul class="nav flex-column align-items-start">
+          <li><a class="nav-link px-0" href="https://github.com/Hexlet/hexlet-cv">{{
+              __('layout.footer.os_projects.cv') }}</a></li>
+          <li><a class="nav-link px-0" href="https://github.com/Hexlet/hexlet-editor">{{
+              __('layout.footer.os_projects.editor') }}</a></li>
+          <li><a class="nav-link px-0" href="https://github.com/Hexlet/hexlet-friends">{{
+              __('layout.footer.os_projects.friends') }}</a></li>
+        </ul>
+      </div>
+      <div class="col">
+        <div class="fw-bold">{{ __('layout.footer.additionally') }}</div>
+        <ul class="nav flex-column align-items-start">
+          <li><a class="nav-link px-0"="https://ru.code-basics.com/">{{
+              __('layout.footer.os_projects.code_basics') }}</a></li>
+          <li><a class="nav-link px-0" href="https://codebattle.hexlet.io/">{{
+              __('layout.footer.os_projects.codebattle') }}</a></li>
+          <li><a class="nav-link px-0" href="https://guides.hexlet.io/">{{
+              __('layout.footer.os_projects.guides') }}</a></li>
+        </ul>
+      </div>
     </div>
-</footer>
+  </div>
+</footer>