Skip to content

Commit

Permalink
feat: added new home page scene 👨‍🚀 👽 🚀 🌎
Browse files Browse the repository at this point in the history
  • Loading branch information
titanism committed Aug 3, 2023
1 parent b4978ee commit 2274580
Show file tree
Hide file tree
Showing 45 changed files with 366 additions and 66 deletions.
4 changes: 0 additions & 4 deletions app/views/_feature-list.pug
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,6 @@ ul.list-unstyled.text-left.mb-3
i.fa.fa-fw.fa-check-circle.text-success
= " "
= t("Send outbound SMTP email")
= " "
a.badge.badge-pill.badge-primary.text-uppercase.d-inline.align-middle(
href=l("/guides/send-email-with-custom-domain-smtp")
)= t("New")
//-.
li
i.fa.fa-fw.fa-check-circle.text-success
Expand Down
13 changes: 7 additions & 6 deletions app/views/_nav.pug
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,8 @@ if !user && !registerOrLogin
span(aria-hidden="true") ×
.modal-body
+registerOrLogin(verb, true)
nav.navbar.navbar-expand-lg.fixed-top.border-bottom(
class=user ? "navbar-dark bg-dark" : "bg-white navbar-themed bg-themed"
nav.navbar.navbar-expand-lg.fixed-top(
class=user ? "navbar-dark bg-dark border-bottom" : ctx.pathWithoutLocale === "/" ? "text-white" : "bg-white navbar-themed bg-themed border-bottom"
)
div(
class=ctx.pathWithoutLocale.startsWith("/admin/") || ctx.pathWithoutLocale.startsWith("/my-account/logs") || ctx.pathWithoutLocale.startsWith("/my-account/emails") || (typeof isContainerFluid === "boolean" && isContainerFluid === true) ? "container-fluid" : "container"
Expand All @@ -75,8 +75,8 @@ nav.navbar.navbar-expand-lg.fixed-top.border-bottom(
)
span.sr-only.sr-only-focusable Forward Email
include ../../assets/img/logo-square-30-30.svg
span.h4.m-0.align-middle.no-js.font-weight-bold.text-themed.ml-2(
class=isBot(ctx.get("User-Agent")) ? "d-none d-md-inline-block" : "d-inline-block"
span.h4.m-0.align-middle.no-js.font-weight-bold.ml-2(
class=isBot(ctx.get("User-Agent")) ? "d-none d-md-inline-block" : "d-inline-block text-themed"
)= "Forward Email"
- const isDomainSpecificUpgrade = domain && domain.name ? ctx.pathWithoutLocale === `/my-account/domains/${domain.name}/billing` : false;
if user && user.plan === 'free' && !domain && Array.isArray(domains)
Expand Down Expand Up @@ -125,13 +125,14 @@ nav.navbar.navbar-expand-lg.fixed-top.border-bottom(
= t("Try for free")
.no-js.is-bot.d-inline-block.mr-3
if !isBot(ctx.get('User-Agent'))
button.navbar-toggler.text-themed.d-lg-none.no-js(
button.navbar-toggler.d-lg-none.no-js.text-themed(
type="button",
data-toggle="collapse",
data-target="#navbar-header",
aria-controls="navbar-header",
aria-expanded="false",
aria-label=t("Toggle navigation")
aria-label=t("Toggle navigation"),
class=ctx.pathWithoutLocale === "/" ? "text-white" : ""
)
i.fas.fa-bars
//- once we have responsive border utilities added to bootstrap
Expand Down
20 changes: 10 additions & 10 deletions app/views/home.pug
Original file line number Diff line number Diff line change
Expand Up @@ -71,15 +71,14 @@ block body
data-vendor="youtube_nocookie",
data-src="https://www.youtube-nocookie.com/embed/--p9LdmVSAw?autoplay=0"
)
.min-vh-80.d-flex.flex-column
.min-vh-80.d-flex.flex-column(
class=isBot(ctx.get("User-Agent")) ? "" : "text-white"
)
.container.my-auto.pt-5
.row
.col-12.col-lg-6
h1.mb-3
if isBot(ctx.get('User-Agent'))
= t("Free, private, and secure email for custom domains.")
else
!= t("<mark>Free, private, and secure</mark> email for custom domains.")
= t("Free, private, and secure email for custom domains.")
p
!= t('For <span class="notranslate">%d</span> years and counting, we are the go-to email service for hundreds of thousands of creators, developers, and businesses.', dayjs().endOf("year").diff(dayjs("1/1/17", "M-D/YY"), "year"))
= " "
Expand All @@ -96,7 +95,8 @@ block body
include _feature-list
ul.list-inline
li.list-inline-item
a.btn.btn-outline-dark.font-weight-bold(
a.btn(
class=isBot(ctx.get("User-Agent")) ? "btn-dark" : "btn-outline-light",
href=isBot(ctx.get("User-Agent")) ? l("/private-business-email") : l("/private-business-email?pricing=true")
)
if isBot(ctx.get('User-Agent'))
Expand All @@ -105,7 +105,7 @@ block body
= t("See all features")
li.list-inline-item
if isBot(ctx.get('User-Agent'))
a.btn.btn-outline-dark(
a.btn.btn-dark(
href="https://www.youtube.com/watch?v=N6zjv40zuIY",
target="_blank",
rel="noopener noreferrer"
Expand All @@ -114,7 +114,7 @@ block body
= " "
= t("Watch Video")
else
a.btn.btn-outline-dark.d-inline-block(
a.btn.btn-outline-light.d-inline-block(
role="button",
data-toggle="modal",
data-target="#modal-watch-video",
Expand All @@ -125,7 +125,7 @@ block body
i.fab.fa-youtube.text-danger
= " "
= t("Watch Video")
a.text-decoration-none.pt-1.pb-4.pt-lg-4.text-uppercase.text-themed.mx-auto.d-none.d-md-block(
a.text-decoration-none.pt-1.pb-4.pt-lg-4.text-uppercase.text-themed.mx-auto(
href="#testimonials"
)
i.fa.fa-angle-double-down
Expand All @@ -139,7 +139,7 @@ block body
.text-center.d-block.d-md-none.mt-3
.h2.display-3.mb-1.text-danger
i.fa.fa-heart
.h1!= t("Happy users")
.h1.text-white!= t("Happy users")
.container.py-3.py-md-4.py-lg-5.d-block
.row.row-cols-1.row-cols-md-2
//- DHH
Expand Down
3 changes: 2 additions & 1 deletion app/views/layout.pug
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,8 @@ html.h-100.no-js(

body.d-flex.flex-column.min-h-100.app(
role="document",
onload=isBot(ctx.get("User-Agent")) ? "if (typeof lazyload === 'function') { lazyload(); }" : false
onload=isBot(ctx.get("User-Agent")) ? "if (typeof lazyload === 'function') { lazyload(); }" : false,
id=ctx.pathWithoutLocale === "/" ? "freddy" : ""
)
- const isHelp = ctx.pathWithoutLocale && ctx.pathWithoutLocale === "/help";
- const isRegisterOrLogin = ctx.pathWithoutLocale && ["/register", config.loginRoute].includes(ctx.pathWithoutLocale);
Expand Down
7 changes: 6 additions & 1 deletion app/views/otp/enable.pug
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,12 @@ block body
.form-group
label(for="otp-step-two")
!= t("<strong>Step 2:</strong> Scan this QR code and enter its generated token:")
img.d-block.my-3.p-3.bg-white.border.border-dark(src=qrcode, width=250, height=250, alt="")
img.d-block.my-3.p-3.bg-white.border.border-dark(
src=qrcode,
width=250,
height=250,
alt=""
)
.form-group.floating-label
input#input-token.form-control.form-control-lg.verification-form(
type="text",
Expand Down
10 changes: 10 additions & 0 deletions assets/css/_custom.scss
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,14 @@ body.app {
}
}

@media (prefers-color-scheme: dark) {
@include media-breakpoint-up(md) {
.bg-fixed {
background-color: #191d21;
}
}
}

@include media-breakpoint-up(md) {
.bg-fixed {
min-height: 100%;
Expand Down Expand Up @@ -183,3 +191,5 @@ pre {
height: 0;
}
}


116 changes: 116 additions & 0 deletions assets/css/_freddy.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
@import 'node_modules/bootstrap/scss/functions';
@import 'node_modules/bootstrap/scss/variables';
@import 'node_modules/bootstrap/scss/mixins';
@import 'variables';

#freddy {
position: relative;
background-repeat: no-repeat, repeat, no-repeat;
background-attachment: fixed;
background-position: 115% 115%, 50% 50%, 100% 100%;
background-color: #333366;
background-image: url('../img/art/planet.svg'),
url('../img/art/purple-stars.svg'), url('../img/art/glow.svg');
background-size: 40vmin, 25%, cover;
&:before {
// <https://css-tricks.com/pseudo-elements-in-the-web-animations-api/>
display: inline-block;
content: '';
background-repeat: no-repeat;
background-attachment: fixed;
background-position: -10% -10%;
background-image: url('../img/art/rocket.gif');
background-size: 83.5px 65.5px;
position: fixed;
transition: all 1.5s linear;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
animation-name: rocket-sm;
animation-delay: 5s;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
&:after {
// <https://css-tricks.com/pseudo-elements-in-the-web-animations-api/>
display: inline-block;
content: '';
background-repeat: no-repeat;
background-attachment: fixed;
background-image: url('../img/art/freddy.gif');
background-size: cover;
position: fixed;
transition: all 1.5s linear;
right: 15%;
bottom: 30%;
width: 83px;
height: 97.25px;
z-index: -1;
animation-name: floating;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
@include media-breakpoint-up(sm) {
background-size: 45vmin, 25%, cover;
}
@include media-breakpoint-up(md) {
background-size: 50vmin, 25%, cover;
&:before {
animation-name: rocket-lg;
}
&:after {
width: 166px;
height: 194.5px;
}
}
@include media-breakpoint-up(lg) {
background-size: 70vmin, 25%, cover;
}
}

@media (prefers-reduced-motion: reduce) {
#freddy {
background: #333366 !important;
&:before {
content: none !important;
}
&:after {
content: none !important;
}
}
}

@keyframes floating {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, 10%);
}
100% {
transform: translate(0, 0);
}
}

@keyframes rocket-sm {
from {
background-position: -10% -10%;
}
to {
background-position: 120% 35%;
}
}

@keyframes rocket-lg {
from {
background-position: -10% -10%;
}
to {
background-position: 120% 120%;
}
}
2 changes: 2 additions & 0 deletions assets/css/app-dark.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ $green: #269C32;
@import 'node_modules/bootstrap/scss/mixins';
@import 'node_modules/@forevolve/bootstrap-dark/scss/bootstrap-prefers-dark';

@import 'freddy';

$input-bg: $black;
$input-disabled-bg: $dark;

Expand Down
2 changes: 2 additions & 0 deletions assets/css/app-light.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,6 @@ $blue: #20C1ED;
$cyan: #9DE5F9;
$green: #269C32;

@import 'freddy';

@import "app-bot";
Binary file added assets/img/art/freddy.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/img/art/glow.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/img/art/planet.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 2274580

Please sign in to comment.