aran/seepur
1
0
Fork 0
forked from sagi/seepur
Code Issues Pull requests Releases Wiki Activity

polished emails + new look for landing page

Browse source
This commit is contained in:
Sagi Dayan 2020-05-14 18:30:39 -04:00
parent eb59908605
commit 68ceb3d1c7
11 changed files with 204 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
config/mail.js
View file

@ -27,7 +27,7 @@ module.exports = {
pool: true, pool: true,
port: Env.get('SMTP_PORT', 2525), port: Env.get('SMTP_PORT', 2525),
host: Env.get('SMTP_HOST'), host: Env.get('SMTP_HOST'),
secure: true, secure: Env.get('SMTP_SECURE', 'true') === 'true',
auth: {user: Env.get('MAIL_USERNAME'), pass: Env.get('MAIL_PASSWORD')}, auth: {user: Env.get('MAIL_USERNAME'), pass: Env.get('MAIL_PASSWORD')},
maxConnections: 5, maxConnections: 5,
maxMessages: 100, maxMessages: 100,

0
public/images/שמש וקצת עננים.svg → public/images/sun+clouds.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

2
public/scripts/applications/admin/app.bundle.js
View file

File diff suppressed because one or more lines are too long

2
public/scripts/applications/home/app.bundle.js
View file

File diff suppressed because one or more lines are too long

2
public/scripts/components/navbar/app.bundle.js
View file

File diff suppressed because one or more lines are too long

2
public/scripts/views/register/app.bundle.js
View file

File diff suppressed because one or more lines are too long

24
public/style.css
View file

@ -7122,10 +7122,26 @@ html {
background-color: #fff; background-color: #fff;
position: relative; } position: relative; }
.mixed-background { .hero-bg-svg {
background-image: url("/images/flowers.svg"), url("/images/sun+cloud.svg"), url("/images/moon+stars.svg"); background-image: url("/images/cloudgroup.svg"), url("/images/sun+clouds.svg");
background-position: calc(100% - 20px) calc(100% - 10px), 10% calc(170vh + 150px), calc(100vw - 500px) calc(100vh - 100px); background-size: cover, contain;
background-repeat: no-repeat, no-repeat, no-repeat; } background-position: center, center;
background-repeat: no-repeat, no-repeat; }
.bg-moon-stars {
background-image: url("/images/moon+stars.svg");
background-repeat: no-repeat;
background-size: contain; }
.bg-sun-cloud {
background-image: url("/images/sun+cloud.svg");
background-position: center top;
background-repeat: no-repeat; }
.bg-flower {
background-image: url("/images/flowers.svg");
background-position: right bottom;
background-repeat: no-repeat; }
.scroll-down-indicator { .scroll-down-indicator {
position: absolute; position: absolute;

29
resources/sass/main.scss
View file

@ -26,10 +26,31 @@ html{
// background-repeat: no-repeat; // background-repeat: no-repeat;
} }
.mixed-background{ .hero-bg-svg{
background-image: url('/images/flowers.svg'), url('/images/sun+cloud.svg'), url('/images/moon+stars.svg'); background-image: url("/images/cloudgroup.svg"), url('/images/sun+clouds.svg');
background-position: calc(100% - 20px) calc(100% - 10px), 10% calc(170vh + 150px), calc(100vw - 500px) calc(100vh - 100px); background-size: cover, contain;
background-repeat: no-repeat, no-repeat, no-repeat; background-position: center, center;
background-repeat: no-repeat, no-repeat;
}
.bg-moon-stars{
background-image: url('/images/moon+stars.svg');
background-repeat: no-repeat;
background-size: contain;
}
.bg-sun-cloud{
background-image: url('/images/sun+cloud.svg');
background-position: center top;
background-repeat: no-repeat;
// background-size: ;
}
.bg-flower{
background-image: url('/images/flowers.svg');
background-position: right bottom;
background-repeat: no-repeat;
// background-size: contain;
} }
.scroll-down-indicator{ .scroll-down-indicator{

37
resources/views/emails/layouts/base.edge
View file

@ -1,24 +1,25 @@
<html> <html>
<div style="width:100%"> <div style="width:100%;background-color:#fff">
<div style="color: #4a4a4a; <div style="color: #4a4a4a;
max-width:800px; max-width:800px;
margin-left:auto; margin-left:auto;
margin-right:auto; margin-right:auto;
text-align: left;
direction: ltr;
"> ">
<div style="background-color: #fafafa; <div style="background-color: #fafafa;
padding: 2rem 1.5rem 2rem; padding: 2rem 1.5rem 2rem;
margin-bottom:2rem; margin-bottom:2rem;
background-image: url('{{baseUrl}}/images/emails/cloudgroup.png'); background-image: url('{{baseUrl}}/images/emails/cloudgroup.png');
background-size: cover; background-size: cover;
background-position: center center;"> background-position: center center;">
<h1>Seepur</h1> <h1>Seepur</h1>
<h4>A <b>safe</b> and <b>fun</b> way to spend time with far away loved ones</h4> <h4>A <b>safe</b> and <b>fun</b> way to spend time with far away loved ones</h4>
</div> </div>
@!section('content') @!section('content')
<footer style="background-color: #fafafa; <footer style="background-color: #fafafa;
padding: 3rem 1.5rem 6rem; padding: 3rem 1.5rem 6rem;
margin-top:2rem; margin-top:2rem;
background-image: url('{{baseUrl}}/images/emails/sun+cloud.png'); background-image: url('{{baseUrl}}/images/emails/sun+cloud.png');
@ -26,15 +27,17 @@
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
"> ">
<div style="text-align: center !important;"> <div style="text-align: center !important;">
<p> <p>
<strong>Seepur</strong> | The source code is licensed <strong>Seepur</strong> | The source code is licensed
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. Made with ♥️ by friends and family. For all the savtot out there <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. Made with ♥️ by friends and family. For all
</p> the savtot out there
</div> </p>
</footer> </div>
</footer>
</div> </div>
</div> </div>
</html> </html>

40
resources/views/emails/welcome.edge
View file

@ -11,20 +11,21 @@ background-position: right center;">
</h4> </h4>
<p> <p>
Welcome to your very own Seepur! Welcome to your very own Seepur!
<p> <p>
<p> <p>
Thank you for choosing us to help you connect with your far away loved ones! Thank you for choosing us to help you connect with your far away loved ones!
</p> </p>
<h4>Fun Stats on Bedtime Stories</h4> <h4>Fun Stats on Bedtime Stories</h4>
<ul> <ul>
<li>76% of dads read to their kids compared to 72% of mums</li> <li>76% of dads read to their kids compared to 72% of mums</li>
<li>1 In 10 parents read their kids a bedtime story every night</li> <li>1 In 10 parents read their kids a bedtime story every night</li>
<li>6% of parents NEVER read a bedtime story to their child</li> <li>6% of parents NEVER read a bedtime story to their child</li>
</ul> </ul>
<br><br>
<div style="width: 100%; display:flex;justify-content: center;"> <div style="width: 100%; display:flex;justify-content: center;">
<a style="margin-right:auto; margin-left:auto;background-color: white; <a style="margin-right:auto; margin-left:auto;background-color: white;
border:solid 1px #dbdbdb; border:solid 1px #dbdbdb;
color: #363636; color: #363636;
cursor: pointer; cursor: pointer;
@ -41,14 +42,13 @@ background-position: right center;">
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
" href="{{baseUrl}}" target="_blank">Take me to Seepur</a> " href="{{baseUrl}}" target="_blank">Take me to Seepur</a>
</div> </div>
<p> <p>
Have a great time, Have a great time,
</p> </p>
<br> <p>
<p> Team Seepur
Team Seepur </p>
</p>
</div> </div>
@endsection @endsection

211
resources/views/landing.edge
View file

@ -4,8 +4,8 @@
A safe and fun way to spend time with far away loved ones A safe and fun way to spend time with far away loved ones
@endsection @endsection
@section('hero') @section('hero')
<div class="mixed-background"> <div class="">
<section class="hero is-large hero-bg"> <section class="hero is-large hero-bg is-light hero-bg-svg">
@!component('components.nav.nav', isLanding = false, auth=auth) @!component('components.nav.nav', isLanding = false, auth=auth)
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
@ -15,7 +15,8 @@ A safe and fun way to spend time with far away loved ones
Seepur Seepur
</h1> </h1>
<h2 class="subtitle has-text-grey"> <h2 class="subtitle has-text-grey">
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 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> </h2>
<div class="buttons"> <div class="buttons">
<a class="button is-info is-rounded" href="/register">Sign Up</a> <a class="button is-info is-rounded" href="/register">Sign Up</a>
@ -39,107 +40,123 @@ A safe and fun way to spend time with far away loved ones
</section> </section>
@endsection @endsection
@section('content') @section('content')
<div class="bg-moon-stars">
<section class="section" id="info">
<div class="container has-text-centered">
<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 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>
<section class="section" id="info">
<div class="container has-text-centered"> {{-- 3 Important feature bloks --}}
<h1 class="title is-1">Being far, but never apart</h1> <section class="section">
<h3 class="subtitle is-3">Not just a video call</h3> <div class="columns">
<p class="has-diego-width-800 m-l-a m-r-a"> <div class="column is-flex">
Choose one of the fun activities Seepur offers and start making the most out of your time together! <div class="message has-text-centered p-lg is-info">
</p> <figure class="image m-l-a m-r-a m-t-sm m-b-sm">
<p class="has-diego-width-800 m-l-a m-r-a"> <img src="/images/shield.svg" class="landing-featue-image">
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. </figure>
</p> <div class="message-body-y m-t-lg">
{{-- <a href="#" class="button m-t-md">More...</a> --}} <div class="subtitle is-3">Secure</div>
</div> <p>
</section> Using the best practices and security messures to protect all.
{{-- 3 Important feature bloks --}} </p>
<section class="section"> <p>Only connections that the parent have created will be able to connect with a child</p>
<div class="columns"> </div>
<div class="column is-flex"> </div>
<div class="message has-text-centered p-lg is-info"> </div>
<figure class="image m-l-a m-r-a m-t-sm m-b-sm"> <div class="column is-flex">
<img src="/images/shield.svg" class="landing-featue-image"> <div class="message has-text-centered p-lg is-info">
</figure> <figure class="image m-l-a m-r-a m-t-sm m-b-sm">
<div class="message-body-y m-t-lg"> <img src="/images/coding.svg" class="landing-featue-image">
<div class="subtitle is-3">Secure</div> </figure>
<p> <div class="message-body-y m-t-lg">
Using the best practices and security messures to protect all. <div class="subtitle is-3">Open Source</div>
</p> <p>
<p>Only connections that the parent have created will be able to connect with a child</p> Seepur is an open source project
</p>
<p>You can view the code, modify the code and basically do whatever you want.</p>
<p>There is a cool article HERE on how you can run this yourself so you never need to trust anyone else,
not
even us!</p>
</div>
</div>
</div>
<div class="column is-flex">
<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-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>
</div>
</div>
</div> </div>
</div> </div>
</div> </section>
<div class="column is-flex"> </div>
<div class="message has-text-centered p-lg is-info"> <div class="bg-sun-cloud">
<figure class="image m-l-a m-r-a m-t-sm m-b-sm"> <section class="section">
<img src="/images/coding.svg" class="landing-featue-image"> <div class="columns">
<div class="column p-md">
<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.
With the great combination of video calling and your shared view of the book pages, you can make the story
come alive by using different voices for different characters, and even acting out parts of the story, as if
you’re right there by their side.
</p>
{{-- <a href="#" class="button m-t-md">More...</a> --}}
</div>
<div class="column is-half">
<figure class="image">
<img src="/images/be-there.svg" alt="" srcset="">
</figure> </figure>
<div class="message-body-y m-t-lg"> {{-- <small><a href="https://www.freepik.com/free-photos-vectors/health">Health vector created by freepik - www.freepik.com</a></small> --}}
<div class="subtitle is-3">Open Source</div> </div>
<p>
Seepur is an open source project
</p>
<p>You can view the code, modify the code and basically do whatever you want.</p>
<p>There is a cool article HERE on how you can run this yourself so you never need to trust anyone else, not even us!</p>
</div>
</div> </div>
</div> </section>
<div class="column is-flex"> </div>
<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"> <div class="bg-flower">
<img src="/images/easy.svg" class="landing-featue-image"> <section class="section">
<div class="columns">
<div class="column is-half">
<figure class="image">
<img src="/images/build.svg" alt="" srcset="">
</figure> </figure>
<div class="message-body-y m-t-lg"> {{-- <small><a href="https://www.freepik.com/free-photos-vectors/health">Health vector created by freepik - www.freepik.com</a></small> --}}
<div class="subtitle is-3">Easy to use</div> </div>
<p> <div class="column p-md">
Seepur wasn’t built for tech savvy users. Simply click your chosen activity and connect directly to your far away loved one. <div class="title">Yours</div>
</p> <p>
</div> 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>
<p>
Your creations are yours, only available for sessions where you are a part of. So yes, Make interesting
stuff,
upload better books because the child will be picky!
</p>
{{-- <a href="#" class="button m-t-md">More...</a> --}}
</div>
</div> </div>
</div> </section>
</div> </div>
</section>
<section class="section">
<div class="columns">
<div class="column p-md">
<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.
With the great combination of video calling and your shared view of the book pages, you can make the story come alive by using different voices for different characters, and even acting out parts of the story, as if you’re right there by their side.
</p>
{{-- <a href="#" class="button m-t-md">More...</a> --}}
</div>
<div class="column is-half">
<figure class="image">
<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 is-half">
<figure class="image">
<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 p-md">
<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>
<p>
Your creations is yours, only available for sessions where you are a part of. So yes, Make interesting stuff, upload better books becuse the child will be picky!
</p>
{{-- <a href="#" class="button m-t-md">More...</a> --}}
</div>
</div>
</section>