Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Responsive landing #31

Merged
merged 14 commits into from
Oct 12, 2022
Merged

Responsive landing #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
4dce4b1
Added responsive nav functionality
daniellemaxwell Oct 10, 2022
5f76012
Corrected form background color
daniellemaxwell Oct 10, 2022
e71427f
Replaced style for navbar and header
daniellemaxwell Oct 10, 2022
e95a727
Moved form to separate section for smaller screens
daniellemaxwell Oct 10, 2022
af8e91b
Added logo to nav
daniellemaxwell Oct 10, 2022
7765338
Responsive nav works properly
daniellemaxwell Oct 10, 2022
3497976
Minor organizational changes to files
daniellemaxwell Oct 10, 2022
a24055d
Added footer style to mirror homepage
daniellemaxwell Oct 11, 2022
1e63a4b
Updated gap in footer
daniellemaxwell Oct 11, 2022
3e4aa46
Adjusted footer style for smaller and bigger screens
daniellemaxwell Oct 11, 2022
d9062ca
Made header text more responsive
daniellemaxwell Oct 11, 2022
c16c2b2
Adjustments to header and nav
daniellemaxwell Oct 11, 2022
dfa91b9
Updated footer respsonsiveness at md & lg breakpoints
daniellemaxwell Oct 12, 2022
c5ceb11
Nav reverts to horizontal on screens over 600
daniellemaxwell Oct 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions web/ensign-landing-page/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
<meta name="theme-color" content="#ffffff">

<link rel="stylesheet" href="output.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
Binary file added web/ensign-landing-page/public/tile-able-bg-pattern.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 0 additions & 3 deletions web/ensign-landing-page/src/components/content/Access.css
View file
Open in desktop

This file was deleted.

9 changes: 4 additions & 5 deletions web/ensign-landing-page/src/components/content/Access.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import { useNavigate } from 'react-router-dom'
import * as Yup from 'yup';
import './Access.css';

export default function Access () {
const navigate = useNavigate()
Expand Down Expand Up @@ -41,7 +40,7 @@ export default function Access () {
});
}}
render={({ errors, status, touched }) => (
<Form className="w-96 p-7" method="post">
<Form className="w-96 p-7 bg-[#DED6C5] mx-auto">
<div>
<h3 className="pb-2 text-2xl text-center font-bold">Request Alpha Access Today</h3>
<p className="text-center pb-3">We're opening up Ensign on a limited basis. No credit card required.</p>
Expand All @@ -51,7 +50,7 @@ export default function Access () {
<Field
name="firstName"
type="text"
placeholder="First Name"
placeholder="*First Name"
className={
'w-full form-input' +
(errors.firstName && touched.firstName ? ' is-invalid' : '')
Expand All @@ -68,7 +67,7 @@ export default function Access () {
<Field
name="lastName"
type="text"
placeholder="Last Name"
placeholder="*Last Name"
className={
'w-full form-input' +
(errors.lastName && touched.lastName ? ' is-invalid' : '')
Expand All @@ -85,7 +84,7 @@ export default function Access () {
<Field
name="email"
type="email"
placeholder="Email address"
placeholder="*Email address"
className={
'w-full form-input' +
(errors.email && touched.email ? ' is-invalid' : '')
Expand Down
10 changes: 5 additions & 5 deletions web/ensign-landing-page/src/components/content/PageTitle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ import React from "react";

export default function PageTitle() {
return (
<section className="lg: text-white text-left">
<div className="container pl-20 pt-20">
<h1 className="text-6xl">Ensign</h1>
<h2 className="sm:2-xl pt-5 font-light">Powering Realtime Experiences</h2>
<h2 className="font-light">&amp; Data-driven Apps</h2>
<section className="text-white text-left">
<div className="container pl-10 pt-5 sm:pl-20">
<h1 className="text-xl sm:text-6xl xl:text-7xl">Ensign</h1>
<h2 className="font-light text-base sm:text-xl md:text-3xl">Powering Realtime Experiences</h2>
<h2 className="font-light text-base sm:text-xl md:text-3xl">&amp; Data-driven Apps</h2>
</div>
</section>
)
Expand Down
2 changes: 1 addition & 1 deletion web/ensign-landing-page/src/components/layout/BuildApps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export default function BuildApps() {
<section className="pb-20">
<div className="container mx-auto">
<h2 className="lg:leading-loose pb-2 text-left">Spend Your Time Writing Code, Not YAML</h2>
<div className="text-left leading-relaxed"> {/* Min & max */}
<div className="text-left leading-relaxed">
<p className="pb-7">Focus on delivering rich experiences and analytics, not building, configuring or maintaining infrastructure. As a developer-friendly <span className="font-bold">managed service</span>, Ensign makes it easy to implement and scale event-driven microservices for your application. Out-of the-box, Ensign gets you:</p>
<ul className="list-disc list-inside pb-10">
<li className="pb-2"><span className="font-bold">Persistence by Default.</span> Maximize the value of your data with no configuration required and minimal impact on real-time performance.</li>
Expand Down
4 changes: 2 additions & 2 deletions web/ensign-landing-page/src/components/layout/Diagram.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import diagram from './img/ensign-diagram.png'

export default function Diagram() {
return (
<section className="mx-auto container">
<section className="mx-auto container pb-10">
<h2 className="">How It Works</h2>
<img className="mx-auto" src={diagram} alt="" />
<img className="mx-auto" src={diagram} alt="Illustration of how Ensign works. Text in image reads: 1. Connect data sources. 2. Enrich, Combine, Move Data on Ensign. 3. Deliver real-time events and analytics seamlessly." />
bbengfort marked this conversation as resolved.
Show resolved Hide resolved
</section>
)
}
90 changes: 84 additions & 6 deletions web/ensign-landing-page/src/components/layout/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,91 @@
import React from 'react';
import footer from './img/footer.png'
import footer from './img/foot.png'
import whiteLogo from './img/logo-white.png'
import email from './img/email.png'
import github from './img/github.png'
import linkedin from './img/linkedin.png'
import twitter from './img/twitter-icon.png'

export default function Footer() {
return (
<footer>
<img
className="w-screen"
src={footer}
alt="" />
</footer>
<div className="relative pt-[90px] sm:pt-[300px] font-extralight">
<img
className="w-full absolute inset-y-0 left-0 lg:h-full lg:w-full lg:max-w-none"
src={footer}
alt="Illustration of a blue lighthouse on the left hand side."
/>
Comment on lines +13 to +17
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would prefer to make this a background image and then use the same wrapper effect with tileable blue waves as we did in the header. Can we create a story to do that here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was planning on creating a story for this. Edwin said that he'll create a tileable blue wave for the footer. Once that's ready, I'll update the footer.

<div className="relative max-w-7xl mx-auto px-4 sm:px-6 bg-[#192E5B]">
<div className="lg:flex text-white">
<div>
<a href="https://rotational.io/" target="_blank" rel="noreferrer">
<img
src={whiteLogo}
alt="Rotational Labs logo"
className="sm:h-auto h-16"
/>
</a>
</div>
<div className="sm:ml-24 mt-5 sm:mt-0 max-w-lg pb-8">
<h5 className="font-bold text-lg">Contact Details</h5>
<p className="mt-3 text-lg">
We love to talk through complex scaling and performance issues. What's slowing you down? Drop us a line for a friendly chat. We'll make it worth your while.
</p>
</div>
<div className="sm:ml-24 sm:mt-0 mt-8">
<ul className="sm:grid grid-cols-2 lg:flex flex-col gap-0 mr-5 xl:grid grid-cols-2 gap-x-20 gap-8">
<li className="pb-8">
<a href="mailto:info@rotational.io" className="flex items-center" target="_blank" rel="noreferrer">
<img
src={email}
alt="Envelope"
className="p-4 bg-white rounded-lg mr-4"
/>
<span className="text-lg">info@rotational.io</span>
</a>
</li>
<li className="pb-8">
<a href="https://github.com/rotationalio" className="flex items-center" target="_blank" rel="noreferrer">
<img
src={github}
alt="GitHub logo"
className="p-4 bg-white rounded-lg mr-4"
/>
<span className="text-lg">rotationalio</span>
</a>
</li>
<li className="pb-8">
<a href="https://twitter.com/rotationalio" className="flex items-center" target="_blank" rel="noreferrer">
<img
src={twitter}
alt="Twitter logo"
className="p-4 bg-white rounded-lg mr-4"
/>
<span className="text-lg">rotationalio</span>
</a>
</li>
<li>
<a href="https://www.linkedin.com/company/rotational" className="flex items-center" target="_blank" rel="noreferrer">
<img
src={linkedin}
alt="LinkedIn logo"
className="p-4 bg-white rounded-lg mr-4"
/>
<span className="text-lg">Rotational</span>
</a>
</li>
</ul>
</div>
</div>
<div className="sm:flex justify-between border-t py-6 text-white mt-12 sm:mt-32">
<p className="text-base lg:text-xl">Copyright © {new Date().getFullYear()} Rotational Labs, LLC, All Rights Reserved</p>
<ul className="sm:mt-0 mt-4 flex">
<li className="border-r pr-4 mr-4 text-base lg:text-xl"><a href="https://rotational.io/">Privacy Policy</a></li>
<li className="text-base lg:text-xl"><a href="https://rotational.io/">Terms of Use</a></li>
</ul>
</div>
</div>
</div>
</footer>
)
}
2 changes: 0 additions & 2 deletions web/ensign-landing-page/src/components/layout/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,8 @@ export default function Header() {
return (
<div style={hwrap}>
<header style={style}>
<div>
<Navbar />
<PageTitle />
</div>
</header>
</div>
)
Expand Down
4 changes: 2 additions & 2 deletions web/ensign-landing-page/src/components/layout/Main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Access from "../content/Access";
export default function Main() {
return(
<main className="mx-auto container pt-8">
<section className="grid grid-cols-3 gap-8">
<section className="lg:grid grid-cols-3 gap-8">
<section className="col-span-2">
<h2 className="leading-10">Data Engineering Simplified.</h2>
<h3 className="text-bold pb-5">Navigate Your Data to Where It's Valued Most.</h3>
Expand All @@ -18,7 +18,7 @@ export default function Main() {
</ul>
<p className="pb-5">Even better, Ensign grows with you with built-in geo-scaling, data compliance, and diasaster recovery controls.</p>
</section>
<section className="bg-[#DED6C5]">
<section className="pb-8">
bbengfort marked this conversation as resolved.
Show resolved Hide resolved
<Access />
</section>
</section>
Expand Down
34 changes: 19 additions & 15 deletions web/ensign-landing-page/src/components/layout/Navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,25 @@
import React from 'react';

const shift = {
marginTop: '-35px',
marginRight: '180px',
}
import toggleResponsiveClass from './ResponsiveNav'
import logo from '../layout/img/logo.png'

export default function Navbar() {
return (
<nav className="pt-10 text-white">
<div>
<h1 className="pl-20 flex font-bold text-white text-3xl">Rotational Labs</h1>
</div>
<div className="flex justify-end text-xl" style={shift}>
<a href="https://rotational.app" className="sm:pl-2 md:pl-5 font-bold">Ensign</a>
<a href="https://rotational.io/services" target="_blank" rel="noreferrer" className="sm:pl-2 md:pl-5">Services</a>
<a href="https://rotational.io/about" target="_blank" rel="noreferrer" className="sm:pl-2 md:pl-5">About</a>
</div>
</nav>
<nav className="relative max-w-7xl flex items-center justify-between text-white">
<a href="https://rotational.io" target="_blank" rel="noreferrer" className="pt-3">
<img
src={logo}
alt="Rotational Labs logo"
className="pl-10 h-14 w-auto sm:pl-20 h-14"
/>
</a>
<ul className="topnav" id="myTopnav">
<li><a href="https://rotational.app">Ensign</a></li>
<li><a href="https://rotational.io/services/" target="_blank" rel="noreferrer">Services</a></li>
<li><a href="https://rotational.io/about" target="_blank" rel="noreferrer">About</a></li>
daniellemaxwell marked this conversation as resolved.
Show resolved Hide resolved
<li><a href="javascript:void(0);" class="icon" onClick={toggleResponsiveClass}>
<i class="fa fa-bars"></i>
</a></li>
</ul>
</nav>
)
}
9 changes: 9 additions & 0 deletions web/ensign-landing-page/src/components/layout/ResponsiveNav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/* Toggles between adding and removing the "responsive" class to topnav when the user clicks on the hamburger icon */
export default function toggleResponsiveClass() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
Binary file added web/ensign-landing-page/src/components/layout/img/email.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added web/ensign-landing-page/src/components/layout/img/foot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added web/ensign-landing-page/src/components/layout/img/github.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added web/ensign-landing-page/src/components/layout/img/linkedin.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added web/ensign-landing-page/src/components/layout/img/logo-white.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added web/ensign-landing-page/src/components/layout/img/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added web/ensign-landing-page/src/components/layout/img/twitter-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
101 changes: 94 additions & 7 deletions web/ensign-landing-page/src/input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
@tailwind utilities;
@tailwindcss/forms;

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;900');

@tailwind base;

@layer base {
Expand All @@ -23,15 +25,100 @@
}

body {
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
font-family: 'Montserrat', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
/* Add a black background color to the top navigation */
.topnav {
/* background-color: #333; */
overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
/* background-color: #ddd; */
color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
/* background-color: #04AA6D; */
color: white;
font-weight: bold;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
background-color: #192E5B;
border-radius: 8px;
width: 100%;
text-align: right;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav.responsive {
position: fixed;
right: 0;
left: 0;
top: 50px;
background-color: white;
z-index: 9999;
overflow: visible;
}
.topnav.responsive .icon {
border-radius: 0 !important;

}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
font-size: 15px;
color: #192E5B;
border-bottom: 1px solid #eee;
}
.topnav.responsive a:hover {
font-weight: bold;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
margin-top: -50px;
text-align: right;
color: white;
}
}


@media screen and (min-width: 601px) {
.topnav {
display: flex;
font-weight: 600;
}
}