webmaster/crewsportswear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance navbar and privacy policy layout for improved user experience

Browse Source
This commit is contained in:
Frank John Begornia
2026-04-17 18:21:48 +08:00
parent a4456631fb
commit 4d051276b1
2 changed files with 526 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

409
resources/views/layout/navbar.blade.php
View File

@@ -21,24 +21,22 @@
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right navbar-nav-custom">
@if (Request::segment(2) == "hi-five-sports-club" || Request::segment(2) == "hi-five-sports-zone")
<li style="font-size: 14px;"></li>
<li class="nav-item-main"></li>
@else
<li style="font-size: 14px;">
<a href="{{ url('teamstore') }}"><span style="text-transform:uppercase;">Team Store</span></a>
<li class="nav-item-main">
<a href="{{ url('teamstore') }}" class="nav-link-main"><span>Team Store</span></a>
</li>
@endif
<li style="font-size: 14px;">
<a href="{{ url('cart') }}"><span style="text-transform:uppercase;">My Cart</span> <i class="fa fa-shopping-cart"></i>
<li class="nav-item-main">
<a href="{{ url('cart') }}" class="nav-link-main"><span>My Cart</span> <i class="fa fa-shopping-cart"></i>
<span class="badge" id="my-cart-count">{{ \App\Http\Controllers\MainController::getCountCart() }}</span>
</a>
</li>
<li>
<a href="#" class="dropdown-toggle user-profile" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-bars" style="font-size: 21px;"></i></a>
<ul class="dropdown-menu">
<a href="#" class="dropdown-toggle user-profile nav-menu-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-bars"></i></a>
<ul class="dropdown-menu navbar-menu-dropdown">
@if (Auth::guest())
@if(Request::segment(1) == "designer")
@@ -88,6 +86,155 @@
</nav>
<style>
.navbar-custom {
min-height: 78px;
background: #ffffff;
border: 0;
border-bottom: 1px solid #e5e7eb;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
margin-bottom: 18px;
}
.navbar-custom .container {
position: relative;
}
.navbar-brand {
height: 78px;
padding: 10px 0;
}
.navbar-brand>img {
height: 58px;
padding: 0;
width: auto;
}
.navbar-nav-custom > li > a.nav-link-main {
color: #1f2937 !important;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.45px;
border-radius: 8px;
padding: 8px 12px;
margin-top: 0;
transition: background-color 0.2s, color 0.2s;
}
.navbar-nav-custom > li > a.nav-link-main:hover,
.navbar-nav-custom > li > a.nav-link-main:focus {
color: #111827 !important;
background: #f3f4f6 !important;
}
.nav-menu-toggle {
margin-top: 0 !important;
border: 1px solid #d1d5db;
border-radius: 8px;
width: 42px;
height: 42px;
display: flex !important;
align-items: center;
justify-content: center;
color: #374151 !important;
transition: background-color 0.2s, border-color 0.2s;
}
.nav-menu-toggle:hover,
.nav-menu-toggle:focus {
background: #f3f4f6 !important;
border-color: #9ca3af;
}
.nav-menu-toggle i {
font-size: 18px;
}
.navbar-menu-dropdown {
margin-top: 8px;
border: 1px solid #e5e7eb;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}
.navbar-menu-dropdown > li > a {
padding: 10px 14px;
font-size: 13px;
}
.navbar-menu-dropdown > li > a:hover {
background: #f8fafc;
color: #111827;
}
.navbar-menu-dropdown .dropdown-header {
font-size: 12px;
font-weight: 700;
color: #334155;
padding: 10px 14px;
}
.badge {
font-size: 11px;
min-width: 24px;
height: 24px;
line-height: 24px;
border-radius: 999px;
background: #16a34a;
padding: 0 7px;
margin-left: 6px;
vertical-align: middle;
}
.navbar-toggle {
margin-top: 22px;
border: 1px solid #d1d5db;
}
.navbar-toggle .icon-bar {
background: #374151 !important;
}
@media (min-width: 768px) {
.navbar-nav-custom {
min-height: 78px;
display: flex;
align-items: center;
margin: 0;
}
.navbar-nav-custom > li {
float: none;
}
}
@media (max-width: 768px){
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
margin-top: 12px;
border-top: 1px solid #e5e7eb;
background: #ffffff;
border-radius: 10px;
padding: 8px;
}
.navbar-nav-custom > li > a.nav-link-main {
margin-top: 0;
}
.nav-menu-toggle {
margin-top: 0 !important;
}
}
@media (min-width: 768px){
.navbar-default .navbar-nav>li>a {
margin-top: 0;
}
}
#nav{
list-style:none;
margin-bottom:10px;
@@ -143,41 +290,8 @@
background:#3d4248;
}
.navbar-brand {
padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
height: 200%;
padding: 15px; /* firefox bug fix */
width: auto;
}
.navbar-custom{
min-height: 100px;
}
@media (max-width: 768px){
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
margin-top: 50px;
}
}
@media (min-width: 768px){
.navbar-default .navbar-nav>li>a{
margin-top: 23px;
}
}
.badge{
font-size: 14px;
width:35px;
border-radius: 0px;
}
.navbar-default .navbar-nav>li>a:hover {
background-color: #777;
background-color: #f3f4f6;
}
.modal {
@@ -198,6 +312,158 @@
text-align: left;
vertical-align: middle;
}
#about_us_modal .modal-content {
border: 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
#about_us_modal .modal-header {
background: #f8fafc;
border-bottom: 1px solid #e5e7eb;
padding: 16px 20px;
}
#about_us_modal .modal-title {
font-size: 20px;
font-weight: 700;
color: #111827;
}
.about-us-content {
color: #334155;
font-size: 14px;
line-height: 1.7;
}
.about-us-intro {
margin: 0 0 14px;
color: #475569;
}
.about-us-block {
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 14px;
margin-bottom: 12px;
background: #ffffff;
}
.about-us-block h5 {
margin: 0 0 8px;
font-size: 14px;
font-weight: 700;
color: #111827;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.about-us-block p {
margin: 0;
}
.about-us-list {
margin: 0;
padding-left: 18px;
}
.about-us-list li {
margin-bottom: 6px;
}
#about_us_modal .modal-footer {
border-top: 1px solid #e5e7eb;
background: #f8fafc;
padding: 12px 20px;
}
@media (max-width: 767px) {
.about-us-block {
padding: 12px;
}
}
#contact_us_modal .modal-content {
border: 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
#contact_us_modal .modal-header {
background: #f8fafc;
border-bottom: 1px solid #e5e7eb;
padding: 16px 20px;
}
#contact_us_modal .modal-title {
font-size: 20px;
font-weight: 700;
color: #111827;
}
#contact_us_modal .modal-body {
padding: 20px;
}
.contact-modal-subtitle {
margin: 0 0 16px;
font-size: 14px;
color: #6b7280;
}
.contact-card {
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 14px;
background: #fff;
min-height: 140px;
}
.contact-card-title {
margin: 0 0 10px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: #6b7280;
}
.contact-card-value {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: #111827;
word-break: break-word;
}
.contact-card-value a {
color: #1d4ed8;
text-decoration: none;
}
.contact-card-value a:hover {
text-decoration: underline;
}
#contact_us_modal .modal-footer {
border-top: 1px solid #e5e7eb;
background: #f8fafc;
padding: 12px 20px;
}
@media (max-width: 767px) {
#contact_us_modal .modal-body {
padding: 16px;
}
.contact-card {
min-height: 0;
margin-bottom: 12px;
}
}
</style>
<!-- Privacy Modal -->
@@ -248,7 +514,31 @@
<h4 class="modal-title">About Us</h4>
</div>
<div class="modal-body">
<p>Coming soon.</p>
<div class="about-us-content">
<p class="about-us-intro">Crew Sportswear helps teams, schools, and organizations bring their identity to life through high-quality custom apparel and team store experiences.</p>
<div class="about-us-block">
<h5>Who We Are</h5>
<p>We are a team focused on custom uniforms, spirit wear, and branded gear built for athletes, students, and supporters. Our goal is to make ordering team apparel simple, consistent, and reliable.</p>
</div>
<div class="about-us-block">
<h5>What We Do</h5>
<ul class="about-us-list">
<li>Custom team uniforms and apparel across multiple sports</li>
<li>Print-on-demand production for flexible ordering and fulfillment</li>
<li>Design-your-own apparel with our online designer tool</li>
<li>Private or public online team stores for easy ordering</li>
<li>Batch and individual order workflows depending on program needs</li>
<li>Support for team branding, sizing, and product selection</li>
</ul>
</div>
<div class="about-us-block">
<h5>Our Commitment</h5>
<p>We’re committed to clear communication, dependable production quality, and a smooth customer experience from store launch through fulfillment.</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
@@ -266,15 +556,28 @@
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Contact Us</h4>
</div>
<div class="modal-body text-center">
<h1>Contact Us</h1>
<hr>
<h3>Email Address: <small><a href="#">customer-service@crewsportswear.com</a></small></h3>
<h3>Address: <small><a href="#">1281 Humbracht Circle
Suite J
Bartlett, Illinois
60103</a></small>
</h3>
<div class="modal-body">
<p class="contact-modal-subtitle">We’re here to help. Reach out through any of the contact options below.</p>
<div class="row">
<div class="col-sm-6">
<div class="contact-card">
<h5 class="contact-card-title">Email Address</h5>
<p class="contact-card-value">
<a href="mailto:customer-service@crewsportswear.com">customer-service@crewsportswear.com</a>
</p>
</div>
</div>
<div class="col-sm-6">
<div class="contact-card">
<h5 class="contact-card-title">Address</h5>
<p class="contact-card-value">
1281 Humbracht Circle<br>
Suite J<br>
Bartlett, Illinois 60103
</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>