sagi/seepur
sagi/seepur
Archived
1
0
Fork 1
Code Issues 1 Pull requests Releases Wiki Activity

changes that diego wanted to landing page

Browse source
This commit is contained in:
Sagi Dayan 2020-05-06 20:02:18 -04:00
parent 30e48960d0
commit 9a6e6226b8
8 changed files with 899 additions and 290 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1025
public/style.css
View file

File diff suppressed because it is too large Load diff

15
resources/sass/main.scss
View file

@ -5,8 +5,9 @@
@import './mixins.scss';
@import "../../node_modules/bulma/bulma.sass";
// @import '../../node_modules/animate.css/source/_base.css';
.navbar {
background:#fafafa;
nav.navbar {
padding-left: 5rem;
padding-right: 5rem;
}
.hero-bg{
// @include pattern(#c0ebfa, #7FD7F5);
@ -21,7 +22,7 @@
// background-repeat: no-repeat;
}
.landing-featue-image{
max-height: 128px !important;
max-height: 180px !important;
width: auto;
object-fit: contain;
z-index: 0;
@ -75,6 +76,7 @@ $sizes: (
('lg', 2),
('xl', 4),
('xxl', 8),
('diego', 6.25),
);
$positions: (
('t', 'top'),
@ -307,3 +309,10 @@ video{
opacity: 0;
transform: translate(-2em, 0);
}
.has-diego-width-800{
max-width: 50rem;
}
.is-boarderless{
border: none;
}

14
resources/sass/variables.scss
View file

@ -1,9 +1,11 @@
// Update Bulma's global variables
// $family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
// $grey-dark: $brown;
// $grey-light: $beige-light;
// $primary: $purple;
// $primary: #7FD7F5;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;
// $link: $pink;
// $widescreen-enabled: false;
// $fullhd-enabled: false;
$navbar-height: 5rem;

4
resources/views/components/nav/nav.edge
View file

@ -49,10 +49,10 @@
@else
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary" href='/register'>
<a class="button is-info is-rounded" href='/register'>
<strong>Sign up</strong>
</a>
<a class="button is-light" href='/login'>
<a class="button is-rounded is-transparent is-outlined" href='/login'>
Log in
</a>
</div>

65
resources/views/landing.edge
View file

@ -4,7 +4,7 @@
Seepur | Our Time together
@endsection
@section('hero')
<section class="hero is-medium hero-bg has-inner-shadow-bottom">
<section class="hero is-large hero-bg">
@!component('components.nav.nav', isLanding = false, auth=auth)
<div class="hero-body">
<div class="container">
@ -17,8 +17,8 @@ Seepur | Our Time together
A <span class="has-text-weight-bold">safe</span> and <span class="has-text-weight-bold">fun</span> way to spend time with far away loved ones
</h2>
<div class="buttons">
<a class="button is-primary" href="/register">Sign Up</a>
<a class="button is-link" href='/login'>Log In</a>
<a class="button is-info is-rounded" href="/register">Sign Up</a>
<a class="button is-rounded is-transparent is-outlined" href='/login'>Log In</a>
</div>
</div>
<div class="column is-half ">
@ -35,28 +35,29 @@ Seepur | Our Time together
@endsection
@section('content')
<section class="section">
<section class="section m-b-diego">
<div class="container has-text-centered">
<h1 class="title">Being far, but never apart</h1>
<p>
Not just a video call. Choose one of the fun activities Seepur offers and start making the most out of your time together!
<h1 class="title is-1">Being far, but never apart</h1>
<h3 class="subtitle is-3">Not just a video call</h3>
<p class="has-diego-width-800 m-l-a m-r-a">
Choose one of the fun activities Seepur offers and start making the most out of your time together!
</p>
<p>
<p class="has-diego-width-800 m-l-a m-r-a">
With Seepur you can simply choose your grandchild/niece/nephew you wish to connect with, click on your chosen activity for the day, and share a fun experience together.
</p>
{{-- <a href="#" class="button m-t-md">More...</a> --}}
</div>
</section>
{{-- 3 Important feature bloks --}}
<section>
<section class="section m-b-diego">
<div class="columns">
<div class="column is-flex">
<div class="message has-text-centered p-sm is-info">
<div class="message has-text-centered p-lg is-info">
<figure class="image m-l-a m-r-a m-t-sm m-b-sm">
<img src="/images/shield.svg" class="landing-featue-image">
</figure>
<div class="message-body-y m-t-sm">
<div class="subtitle">Secure</div>
<div class="message-body-y m-t-lg">
<div class="subtitle is-3">Secure</div>
<p>
Using the best practices and security messures to protect all.
</p>
@ -65,12 +66,12 @@ Seepur | Our Time together
</div>
</div>
<div class="column is-flex">
<div class="message has-text-centered p-sm is-info">
<div class="message has-text-centered p-lg is-info">
<figure class="image m-l-a m-r-a m-t-sm m-b-sm">
<img src="/images/coding.svg" class="landing-featue-image">
</figure>
<div class="message-body-y m-t-sm">
<div class="subtitle">Open Source</div>
<div class="message-body-y m-t-lg">
<div class="subtitle is-3">Open Source</div>
<p>
Seepur is an open source project
</p>
@ -80,12 +81,12 @@ Seepur | Our Time together
</div>
</div>
<div class="column is-flex">
<div class="message has-text-centered p-sm is-info">
<div class="message has-text-centered p-lg is-info">
<figure class="image m-l-a m-r-a m-t-sm m-b-sm">
<img src="/images/easy.svg" class="landing-featue-image">
</figure>
<div class="message-body-y m-t-sm">
<div class="subtitle">Easy to use</div>
<div class="message-body-y m-t-lg">
<div class="subtitle is-3">Easy to use</div>
<p>
Seepur wasn’t built for tech savvy users. Simply click your chosen activity and connect directly to your far away loved one.
</p>
@ -95,15 +96,9 @@ Seepur | Our Time together
</div>
</section>
<section class="section">
<section class="section m-b-diego">
<div class="columns">
<div class="column">
<figure class="image is-5by4">
<img src="/images/be-there.svg" alt="" srcset="">
</figure>
{{-- <small><a href="https://www.freepik.com/free-photos-vectors/health">Health vector created by freepik - www.freepik.com</a></small> --}}
</div>
<div class="column has-text-centered">
<div class="title">Be There</div>
<p>
Make an actual impact on the child by creating shared memories. You will be surprised how engaged and comunicative a little child could be during active sessions.
@ -111,24 +106,30 @@ Seepur | Our Time together
</p>
{{-- <a href="#" class="button m-t-md">More...</a> --}}
</div>
<div class="column is-two-thirds">
<figure class="image m-l-diego m-r-diego p-l-diego p-r-diego">
<img src="/images/be-there.svg" alt="" srcset="">
</figure>
{{-- <small><a href="https://www.freepik.com/free-photos-vectors/health">Health vector created by freepik - www.freepik.com</a></small> --}}
</div>
</div>
</section>
<section class="section">
<div class="columns">
<div class="column has-text-centered">
<div class="column is-two-thirds">
<figure class="image m-l-diego m-r-diego p-l-diego p-r-diego">
<img src="/images/build.svg" alt="" srcset="">
</figure>
{{-- <small><a href="https://www.freepik.com/free-photos-vectors/health">Health vector created by freepik - www.freepik.com</a></small> --}}
</div>
<div class="column">
<div class="title">Yours</div>
<p>
Seepur is all about you and the child. You can upload your own books and read together, create puzzles with your own photos and more!
</p>
{{-- <a href="#" class="button m-t-md">More...</a> --}}
</div>
<div class="column">
<figure class="image is-5by4">
<img src="/images/build.svg" alt="" srcset="">
</figure>
{{-- <small><a href="https://www.freepik.com/free-photos-vectors/health">Health vector created by freepik - www.freepik.com</a></small> --}}
</div>
</div>
</section>

46
resources/views/layouts/landing.edge
View file

@ -24,17 +24,18 @@
</div>
</section>
<div class="hero hero-bg has-inner-shadow-top">
<section class="section has-text-centered">
<h1 class="title">Join Now</h1>
<h2 class="subtitle">It takes less then a minute. You could have been done by now, but you are still reading...</h2>
<div class="hero is-light">
<section class="section has-text-centered p-diego">
<div class="title">Join Now</div>
<div></div>
<div class="subtitle">It takes less then a minute. You could have been done by now, but you are still reading...</div>
<form class="form register" method="POST" action="{{ route('register') }}" id="form-register">
{{ csrfField() }}
<nav class="level">
<div class="field">
<label class="label ">Name</label>
{{-- <label class="label ">Name</label> --}}
<div class="control has-icons-left">
<input class="input {{ getErrorFor('name') ? 'is-danger' : ''}}" required="true" name="name" type="text" placeholder="John Snow" value="{{ old('name', '') }}">
<input class="input {{ getErrorFor('name') ? 'is-danger' : ''}} is-boarderless" required="true" name="name" type="text" placeholder="John Snow" value="{{ old('name', '') }}">
<span class="icon is-small is-left">
<i class="fa fa-id-card"></i>
</span>
@ -44,9 +45,9 @@
<div class="field">
<label class="label ">Email</label>
{{-- <label class="label ">Email</label> --}}
<div class="control has-icons-left">
<input class="input {{ getErrorFor('email') ? 'is-danger' : ''}}" name="email" required="true" type="email" placeholder="j.snow@thewall.com" value="{{ old('email', '') }}">
<input class="input {{ getErrorFor('email') ? 'is-danger' : ''}} is-boarderless" name="email" required="true" type="email" placeholder="j.snow@thewall.com" value="{{ old('email', '') }}">
<span class="icon is-small is-left">
<i class="fa fa-envelope"></i>
</span>
@ -56,9 +57,9 @@
</div>
<div class="field">
<label class="label ">Password</label>
{{-- <label class="label ">Password</label> --}}
<div class="control has-icons-left">
<input class="input {{ getErrorFor('password') ? 'is-danger' : ''}}" id="txt-register-password" name="password" required="true" type="password" placeholder="password">
<input class="input {{ getErrorFor('password') ? 'is-danger' : ''}} is-boarderless" id="txt-register-password" name="password" required="true" type="password" placeholder="password">
<span class="icon is-small is-left">
<i class="fa fa-lock"></i>
</span>
@ -66,9 +67,9 @@
<p class="help is-danger">{{ getErrorFor('password') ? getErrorFor('password') : '' }}</p>
</div>
<div class="field m-b-xxs">
<label class="label ">Confirm Password</label>
{{-- <label class="label ">Confirm Password</label> --}}
<div class="control has-icons-left">
<input class="input" type="password" id="txt-register-confirm-password" placeholder="confirm password" required="true">
<input class="input is-boarderless" type="password" id="txt-register-confirm-password" placeholder="confirm password" required="true">
<span class="icon is-small is-left">
<i class="fa fa-lock"></i>
</span>
@ -76,20 +77,19 @@
<p class="help is-danger">{{ '' }}</p>
</div>
</nav>
<nav class="level">
<div class="field is-grouped">
<div class="control">
<label class="checkbox">
<input type="checkbox" id="chk-register-terms" name="terms">
I agree to the <a href="#">terms and conditions</a>
</label>
<div class="is-inline-block">
<div class="control m-b-sm">
<label class="checkbox">
<input type="checkbox" id="chk-register-terms" name="terms">
I agree to the <a href="#">terms and conditions</a>
<p class="help is-danger">{{ getErrorFor('terms') ? getErrorFor('terms') : '' }}</p>
<div class="control">
<button id="btn-register-submit" class="button is-link" disabled="true">Submit</button>
</div>
</label>
</div>
<div class="control is-inline-block">
<button id="btn-register-submit" class="button is-info is-rounded" disabled="true">Submit</button>
</div>
</div>
</nav>
</form>
</section>

4
resources/views/login.edge
View file

@ -48,10 +48,10 @@ Seepur| Login
<div class="field is-grouped">
<div class="control">
<button class="button is-link">Submit</button>
<button class="button is-rounded is-info">Submit</button>
</div>
<div class="control">
<a class="button is-link is-light" href='/'>Cancel</a>
<a class="button is-rounded is-outlined is-rounded" href='/'>Cancel</a>
</div>
</div>
</form>

4
resources/views/register.edge
View file

@ -75,10 +75,10 @@ Seepur| Register
<div class="field is-grouped">
<div class="control">
<button id="btn-register-submit" class="button is-link" disabled="true">Submit</button>
<button id="btn-register-submit" class="button is-info is-rounded" disabled="true">Submit</button>
</div>
<div class="control">
<a class="button is-link is-light" href='/'>Cancel</a>
<a class="button is-outlined is-rounded" href='/'>Cancel</a>
</div>
</div>
</form>