public function boot()
{
// Blade Component Aliases
+ Blade::component('components.full-width', 'fullwidth'); // @fullwidth / @endfullwidth
+ Blade::component('components.content', 'content'); // @content / @endcontent
+ Blade::component('components.columns', 'cols'); // @cols / @endcols
+ Blade::component('components.text-block', 'textblock'); // @textblock / @endtextblock
Blade::component('components.button', 'button'); // @button / @endbutton
}
}
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="25.5" viewBox="0 0 30 25.5">
+ <g id="Groupe_108" data-name="Groupe 108" transform="translate(-38.4 -38.25)">
+ <line id="Ligne_135" data-name="Ligne 135" x2="15" transform="translate(38.401 63)" fill="none" stroke="#fff" stroke-width="1.5"/>
+ <line id="Ligne_136" data-name="Ligne 136" x2="30" transform="translate(38.401 51)" fill="none" stroke="#fff" stroke-width="1.5"/>
+ <line id="Ligne_137" data-name="Ligne 137" x2="30" transform="translate(38.401 39)" fill="none" stroke="#fff" stroke-width="1.5"/>
+ </g>
+</svg>
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="34.797" height="37.5" viewBox="0 0 34.797 37.5">
+ <g id="Groupe_54" data-name="Groupe 54" transform="translate(-1701.748 -39.25)">
+ <path id="Tracé_40" data-name="Tracé 40" d="M5340.723-877.773v-24.138L5337-904" transform="translate(-3632.018 944)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+ <path id="Tracé_41" data-name="Tracé 41" d="M5346.927-850h22.294l1.736,2.483" transform="translate(-3635.163 923.517)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+ <g id="Rectangle_378" data-name="Rectangle 378" transform="translate(1711.999 49)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+ <rect width="21.552" height="22.055" stroke="none"/>
+ <rect x="0.75" y="0.75" width="20.052" height="20.555" fill="none"/>
+ </g>
+ <circle id="Ellipse_16" data-name="Ellipse 16" cx="4.966" cy="4.966" r="4.966" transform="translate(1702.498 66.069)" stroke-width="1.5" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+ </g>
+</svg>
// Debugging styles
+// Quick helper to outline element and its children
+.debug, .debug *
+ outline: 1px dotted red !important
+
+
if ($debug.overlays)
//:root
// PMI Global Styles
+body
+ min-width: 320px
+
p:not(:last-child)
margin-bottom: 1.5em
position: relative
constrain(left, - $overlap-amount)
- width: calc(100% + $overlap-amount)
+ width: s('calc(100% + %s)', $overlap-amount)
max-width: 672px
+above($base-width)
a
@apply text-blue
+ transition: color 0.3s
- // Don't apply if 'no-animation' class is set
- &:not(.btn):not(.no-animation)
+ &.animated-underline
position: relative
padding-bottom: 2px
- // Only apply to <main> content
- main &
+
+
+ &:before
+ content: ''
+ display: block
+ position: absolute
+ bottom: 0
+ left: 0
+ width: 100%
+ height: 2px
+ background-color: currentColor
+ transform: scaleX(0)
+ transform-origin: left
+ transition: transform 0.2s ease-out
+
+ &:hover
+ &:before
+ transform: scaleX(1)
+
+
+ // Partial underline hover effect
+ &.partial-underline
+ overflow: hidden
&:before
- content: ''
- display: block
- position: absolute
- bottom: 0
- left: 0
- width: 100%
- height: 2px
- background-color: currentColor
- transform: scaleX(0)
- transform-origin: left
- transition: transform 0.2s ease-out
-
- &:hover
- &:before
- transform: scaleX(1)
-
-
- // Partial underline hover effect
- &.partial-underline
- overflow: hidden
-
- &:before
- constrain(width, 2.5vw)
-
- &:hover > *
- color: currentColor
+ constrain(width, 2.5vw)
+
+ &:hover > *
+ color: currentColor
+
+ > *
+ transition: color 0.2s
@apply z-10 relative
&:hover:before
- transform: scale(1.1) translateY(-50%)
+ transform: scaleX(1)
opacity: 1
&:before
content: ''
position: absolute
- top: 50%
+ top: 0
left: 0
+ width: 100%
+ height: 100%
z-index: 1
background-color: rgba(#fff, 0.2)
- width: 100%
- padding-bottom: 100%
- border-radius: 50%
- transform: scale(0) translateY(-50%)
- transform-origin: top center
- transition: all 0.2s ease-out
- opacity: 0
+ transform: scaleX(0)
+ transform-origin: left
+ transition: transform 0.2s ease-out
+
+ // Circle hover effect
+ // &:hover:before
+ // transform: scale(1.1) translateY(-50%)
+ // opacity: 1
+ //
+ // &:before
+ // content: ''
+ // position: absolute
+ // top: 50%
+ // left: 0
+ // z-index: 1
+ // background-color: rgba(#fff, 0.2)
+ // width: 100%
+ // padding-bottom: 100%
+ // border-radius: 50%
+ // transform: scale(0) translateY(-50%)
+ // transform-origin: top center
+ // transition: all 0.2s ease-out
+ // opacity: 0
--- /dev/null
+.cart
+
+ &-title
+ @apply mr-4
+
+ +below(1150px)
+ display: none
+
+ &-icon
+ display: inline-block
+ width: 34px
+ height: 36px
+ background: url(/images/cart.svg) no-repeat center
+ background-size: contain
+ text-align: center
+ line-height: 40px
+ font-size: 14px
+ padding-left: 11px
+ padding-right: 4px
.grid
@supports (display: grid) // Modern browsers get the native grid
display: grid
+ constrain(grid-gap, 1.25vw)
&-cols-2
+ // Todo: consider using Modernizr so we can clean this up and only apply the .no-grid for IE11 and friends
// For IE11 and older browsers, use lost grid...
> *
lost-column: 1/2 2 1.25vw
@supports (display: grid)
grid-template-columns: repeat(auto-fill, minmax(225px, 1fr))
- constrain(grid-gap, 1.25vw)
//Reset the lost-grid so it doesn't interfere
> *
//display: flex
//flex-direction: column
//justify-content: space-between
+
+
+ &-cols-3
+ @supports (display: grid)
+ grid-template-columns: repeat(3, 1fr)
--- /dev/null
+.site-header
+ @apply bg-navy text-white text-lg font-display font-medium antialiased
+
+ +below(1000px)
+ .mobile-menu-icon
+ display: block
+ cursor: pointer
+ flex-shrink: 0
+
+ .logo
+ @apply mx-auto px-8
+
+ .nav
+ display: none
--- /dev/null
+.nav-primary
+ @apply flex mx-auto px-10
+
+ &-item
+ &:not(:last-child)
+ @apply mr-10
+
+ &-link
+ @apply text-inherit
+
+ &:hover
+ color: theme('colors.blue')
--- /dev/null
+.solutions-link
+ @apply relative cursor-pointer
+ padding-bottom: 100%
+ overflow: hidden
+
+ &:hover
+ .solutions-link-bg
+ transform: scale(1.1)
+ .solutions-link-text:after
+ transform: scaleX(2)
+
+ &-bg, &-text:after
+ transition: all 0.3s ease-out
+
+ &-bg
+ @apply absolute bg-cover bg-center
+ top: 0
+ left: 0
+ width: 100%
+ height: 100%
+
+ // Vignette on bottom of image to help with text readability
+ &:before
+ content: ''
+ position: absolute
+ left: 0
+ bottom: 0
+ width: 110% // A bit wider to get rid of small gaps at some resolutions
+ height: 50%
+ background-image: linear-gradient(to top, rgba(#000, 0.6), transparent)
+
+
+ &-text
+ @apply absolute text-2xl text-white
+ constrain(left, 2.5vw)
+ constrain(bottom, 2.5vw)
+
+ +below(900px)
+ @apply text-xl
+
+ &:after
+ content: ''
+ display: block
+ width: 24px // Using px instead of vw since it's better not scaled
+ height: 4px
+ background-color: theme('colors.blue')
+ margin-top: 0.5em
+ transform: scaleX(1)
+ transform-origin: left
--- /dev/null
+@php
+ $count = $count ?? 2;
+ $column_class = 'w-1/' . $count; // Dynamic number of columns
+
+ // PurgeCSS can't see the dynamically generated class names above
+ // so we provide a quick whitelist in this comment for it to read:
+ // w-1/2 w-1/3 w-1/4 w-1/5 w-1/6 w-1/12
+@endphp
+
+<div class="flex">
+
+ @for ($i = 1; $i <= $count; $i++)
+ <div class="{{ $column_class }} {{ ${"column_{$i}_class"} ?? '' }}" {{ ${"column_{$i}_attributes"} ?? '' }}>
+ {{-- Create numbered slots for each column with the name 'column_x' --}}
+ {{ ${"column_$i"} ?? '' }}
+ </div>
+ @endfor
+
+</div>
--- /dev/null
+{{-- Content container - constrained width + centred --}}
+<div class="container {{ $class ?? '' }}">
+ {{ $slot }}
+</div>
--- /dev/null
+{{-- Full-width section --}}
+@php
+ $padding = $padding ?? 'pt-3v pb-4v'; // Default padding
+@endphp
+
+<section class="{{ $padding }} {{ $class ?? '' }}">
+ {{ $slot }}
+</section>
--- /dev/null
+{{-- Text Block Component --}}
+@php
+ // Default classes
+ $class = $class ?? '';
+ $padding = $padding ?? 'pl-2v';
+ $title_class = $title_class ?? 'h1';
+@endphp
+
+<div class="text-block {{ $class }} {{ $padding }}">
+
+ @isset($title)
+ <h2 class="{{ $title_class }}">{{ $title }}</h2>
+ @endisset
+
+ <div class="text-block-body max-w-text">
+ {{ $slot }}
+ </div>
+
+</div>
@section('content')
{{-- Slider --}}
- <div class="bg-navy pt-1v text-white antialiased">
- <div class="container flex -mb32">
- <div class="w-1/2 pt-2v pr-1v pb-2v pl-2v">
- <h1 class="h1 text-inherit">Wheel Force Transducer</h1>
- <p class="max-w-text">
- Wheel Force Transducers (WFT) are used for measuring all wheel forces and moments. Field and laboratory test of passenger cars, light duty trucks, heavy duty trucks, vans, SUVs, class 8 trucks, heavy duty construction and farm equipment.
- </p>
-
- <p>
- @button(['url' => '#'])
- Découvrir
- @endbutton
- </p>
-
- <div class="pb-2v"></div>
+ @fullwidth(['class' => 'bg-navy text-white antialiased', 'padding' => 'pt-1v'])
+ @content
+
+ @cols
+ @slot('column_1_class') pt-2v pr-1v pb-2v @endslot
+ @slot('column_1')
+
+ @textblock(['title_class' => 'h1 text-inherit'])
+
+ @slot('title')
+ Wheel Force Transducer
+ @endslot
+
+ <p>
+ Wheel Force Transducers (WFT) are used for measuring all wheel forces and moments. Field and laboratory test of passenger cars, light duty trucks, heavy duty trucks, vans, SUVs, class 8 trucks, heavy duty construction and farm equipment.
+ </p>
+
+ <p>
+ @button(['url' => '#'])
+ Découvrir
+ @endbutton
+ </p>
+
+ <div class="pb-2v"></div>
- </div>
- <div class="w-1/2 -mb-2v z-10 bg-cover" style="background-image:url({{ asset('images/home-car.jpg') }})"></div>
- </div>
- </div>
+
+ @endtextblock
+
+ @endslot
+
+ @slot('column_2_class') -mb-2v z-10 bg-cover @endslot
+ @slot('column_2_attributes')
+ style="background-image:url({{ asset('storage/uploads/images/home-car.jpg') }})"
+ @endslot
+ @slot('column_2')
+ {{-- No content --}}
+ @endslot
+
+ @endcols
+ @endcontent
+ @endfullwidth
{{-- Intro text --}}
- <div class="container flex pt-5v pb-4v">
- <div class="w-1/2">
- <img src="{{ asset('images/home-wing.jpg') }}" alt="">
- </div>
- <div class="w-1/2 pl-2v">
- <h2 class="h1 overlap-left pt-2v">
- Expert de la mesure
- depuis plus de 30 ans
- </h2>
+ @fullwidth(['padding' => 'pt-5v pb-4v'])
+ @content
+ @cols
+ @slot('column_1')
+ <img src="{{ asset('storage/uploads/images/home-wing.jpg') }}" alt="">
+ @endslot
+
+ @slot('column_2')
+ @textblock(['class' => 'pt-2v', 'title_class' => 'h1 overlap-left'])
+ @slot('title')
+ Expert de la mesure
+ depuis plus de 30 ans
+ @endslot
- <p>PM instrumentation distribue depuis 1986 des Capteurs et Systèmes de haute technicité. Issue de la société Schaevitz, PM Instrumentation a su développer une gamme de capteurs et systèmes d’excellente qualité provenant principalement des Etats-Unis.</p>
+
<p>PM instrumentation distribue depuis 1986 des Capteurs et Systèmes de haute technicité. Issue de la société Schaevitz, PM Instrumentation a su développer une gamme de capteurs et systèmes d’excellente qualité provenant principalement des Etats-Unis.</p>
- <p>Principalement dédiés aux mesures physiques, nous saurons vous conseiller dans le choix de produits adaptés à votre environnement.</p>
+
<p>Principalement dédiés aux mesures physiques, nous saurons vous conseiller dans le choix de produits adaptés à votre environnement.</p>
- <p><a href="#">En savoir plus</a></p>
+ <p><a class="animated-underline" href="#">En savoir plus</a></p>
+ @endtextblock
+ @endslot
+ @endcols
+ @endcontent
+ @endfullwidth
- </div>
- </div>
{{-- Our products --}}
- <div class="bg-grey-100">
- <div class="container pt-3v pb-4v">
- <h2 class="h1 pl-2v">Nos produits</h2>
+ @fullwidth(['class' => 'bg-grey-100'])
+ @content
+
+ @textblock(['class' => 'mb-2v'])
+ @slot('title')
+ Nos Produits
+ @endslot
+ @endtextblock
+
+ @cols
+ @slot('column_1')
- <div class="flex">
- <div class="w-1/2">
<h3 class="h2 simple pl-1v">Capteurs</h3>
<div class="grid grid-cols-2 pr-1v border-r border-grey-300">
@for ($i = 1; $i <= 6; $i++)
<div class="bg-white px-1v py-6 flex">
- <a class="partial-underline flex flex-col justify-between" href="#">
+ <a class="animated-underline partial-underline flex flex-col justify-between w-full" href="#">
<div class="flex items-center justify-center flex-grow">
- <img class="mb-4" src="{{ asset("images/products/$i.png") }}">
+ <img class="mb-4" src="{{ asset("storage/products/$i.png") }}">
</div>
<p class="text-lg text-navy font-display font-medium">Product title {{ $i }}</p>
</a>
@endfor
</div>
- </div>
- <div class="w-1/2 pl-1v">
- <h3 class="h2 simple pl-1v">Systèmes de mesure</h3>
+ @endslot
+
+
+ @slot('column_2')
+ <h3 class="h2 simple pl-2v">Systèmes de mesure</h3>
- <div class="grid grid-cols-2">
+ <div class="grid grid-cols-2 pl-1v">
@for ($i = 1; $i <= 6; $i++)
- <div class="bg-white px-1v py-6 flex flex-col justify-between">
- <div class="flex items-center justify-center flex-grow">
- <img class="mb-4" src="{{ asset("images/products/$i.png") }}">
- </div>
- <p class="text-lg text-navy font-display font-medium">Product title {{ $i }}</p>
+ <div class="bg-white px-1v py-6 flex">
+ <a class="animated-underline partial-underline flex flex-col justify-between w-full" href="#">
+ <div class="flex items-center justify-center flex-grow">
+ <img class="mb-4" src="{{ asset("storage/products/$i.png") }}">
+ </div>
+ <p class="text-lg text-navy font-display font-medium">Product title {{ $i }}</p>
+ </a>
</div>
@endfor
</div>
- </div>
- </div>
+ @endslot
- </div>
- </div>
+ @endcols
+
+ @endcontent
+ @endfullwidth
{{-- Solutions / Applications --}}
- <div class="bg-navy text-white antialiased">
- <div class="container pt-3v pb-4v">
- <h2 class="h1 text-inherit">Solutions / Applications</h2>
- </div>
- </div>
+ @fullwidth(['class' => 'bg-navy text-white antialiased'])
+ @content
+ @textblock(['title_class' => 'h1 text-inherit'])
+ @slot('title')
+ Solutions / Applications
+ @endslot
+ @endtextblock
+
+ @php
+ // TEMPORARY DATA
+ $solutions = [
+ 'Énergie',
+ 'Aéronautique',
+ 'Ferroviaire',
+ 'Automobile',
+ 'Génie civil',
+ 'Industrie',
+ ];
+ @endphp
+
+ <div class="grid grid-cols-3">
+ @foreach ($solutions as $i => $solution)
+ @php($i++)
+ <a class="solutions-link">
+ <span class="solutions-link-bg" style="background-image:url({{ asset("storage/uploads/images/solutions-{$i}.jpg") }})"></span>
+ <span class="solutions-link-text">{{ $solution }}</span>
+ </a>
+ @endforeach
+ </div>
+
+ @endcontent
+ @endfullwidth
{{-- Services & Support --}}
- <div class="bg-grey-100">
- <div class="container pt-3v pb-4v">
- <h2 class="h1">Services & Support</h2>
- </div>
- </div>
+ @fullwidth(['class' => 'bg-grey-100'])
+ @content
+ @cols
+ @slot('column_1')
+ <img src="{{ asset('storage/uploads/images/home-services.jpg') }}" alt="">
+ @endslot
+
+ @slot('column_2')
+ @textblock(['class' => 'pt-2v', 'title_class' => 'h1 overlap-left'])
+ @slot('title')
+ Services & Support
+ @endslot
+
+ <p>PM instrumentation distribue depuis 1986 des Capteurs et Systèmes de haute technicité. Issue de la société Schaevitz, PM Instrumentation a su développer une gamme de capteurs et systèmes d’excellente qualité provenant principalement des Etats-Unis.</p>
+
+ <p>Principalement dédiés aux mesures physiques, nous saurons vous conseiller dans le choix de produits adaptés à votre environnement.</p>
+
+ <p><a class="animated-underline" href="#">En savoir plus</a></p>
+ @endtextblock
+ @endslot
+ @endcols
+ @endcontent
+ @endfullwidth
{{-- News --}}
- <div class="container pt-3v pb-4v">
- <h2 class="h1">Actualités</h2>
- </div>
+ @fullwidth
+ @content
+ @textblock
+ @slot('title')
+ Actualités
+ @endslot
+ @endtextblock
+ @endcontent
+ @endfullwidth
{{-- Our Clients --}}
- <div class="bg-grey-100">
- <div class="container pt-3v pb-4v">
- <h2 class="h1">Nos clients</h2>
- </div>
- </div>
+ @fullwidth(['class' => 'bg-grey-100'])
+ @content
+ @textblock
+ @slot('title')
+ Nos clients
+ @endslot
+ @endtextblock
+ @endcontent
+ @endfullwidth
@endsection
-<div class="text-right">
- (Cart)
-</div>
+<span class="cart-title">My Selection</span>
+<span class="cart-icon">0</span>
-<header class="bg-navy text-white font-display font-medium antialiased">
+<header class="site-header">
<div class="container flex items-center py-8">
- @include('partials.logo')
- @include('partials.nav')
- @include('partials.cart')
+
+ <div class="mobile-menu-icon hidden">
+ <img src="{{ asset('images/burger-menu.svg') }}" alt="Menu">
+ </div>
+
+ <div class="logo">
+ @include('partials.logo')
+ </div>
+
+ <div class="nav mx-auto">
+ @include('partials.nav')
+ </div>
+
+ <div class="cart text-right flex items-center">
+ @include('partials.cart')
+ </div>
+
</div>
</header>
-<ul class="flex mx-auto px-10">
- <li class="mr-10"><a class="text-inherit" href="">Products</a></li>
- <li class="mr-10"><a class="text-inherit" href="">Solutions</a></li>
- <li class="mr-10"><a class="text-inherit" href="">Services</a></li>
- <li class="mr-10"><a class="text-inherit" href="">Support</a></li>
- <li class="mr-10"><a class="text-inherit" href="">Company</a></li>
- <li><a class="text-inherit" href="">Contact</a></li>
+<ul class="nav-primary">
+ <li class="nav-primary-item"><a class="nav-primary-link" href="">Products</a></li>
+ <li class="nav-primary-item"><a class="nav-primary-link" href="">Solutions</a></li>
+ <li class="nav-primary-item"><a class="nav-primary-link" href="">Services</a></li>
+ <li class="nav-primary-item"><a class="nav-primary-link" href="">Support</a></li>
+ <li class="nav-primary-item"><a class="nav-primary-link" href="">Company</a></li>
+ <li class="nav-primary-item"><a class="nav-primary-link" href="">Contact</a></li>
</ul>
projects / pmi.git / commitdiff
