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

Header text corrections #46

Merged
merged 6 commits into from
Oct 25, 2022
Merged

Header text corrections #46

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7cfab71
Header text corrections
daniellemaxwell Oct 24, 2022
dd79a63
Centered heading text
daniellemaxwell Oct 24, 2022
e99845c
Adjusted dev experience section
daniellemaxwell Oct 24, 2022
fec0a75
Minor updates to improve appearance on smaller screens
daniellemaxwell Oct 25, 2022
922b150
Merge branch 'main' into sc-10470/header-container
daniellemaxwell Oct 25, 2022
a33d4c4
Updated max width
daniellemaxwell Oct 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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="text-white text-left">
<div className="container pl-3 pt-5 sm:pl-20">
<h1 className="pb-1 text-xl sm:text-3xl md:text-6xl xl:text-7xl">Ensign</h1>
<h2 className="font-light text-base sm:text-base md:text-2xl lg:text-4xl">Powering Realtime Experiences</h2>
<h2 className="font-light text-base sm:text-base md:text-2xl lg:text-4xl">&amp; Data-driven Apps</h2>
<section className="text-white xl:max-w-7xl mx-auto">
Copy link
Contributor

Choose a reason for hiding this comment

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

what do you think if you use max-w-7xl on all screens?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks! I've made the change.

<div className="pl-3 pt-5 sm:pl-20">
<h1 className="text-3xl sm:text-3xl lg:text-5xl xl:text-7xl">Ensign</h1>
<h2 className="text-base md:text-2xl lg:text-3xl">Powering Realtime Experiences</h2>
<h2 className="text-base md:text-2xl lg:text-3xl lg:text-5xl">&amp; Data-driven Apps</h2>
</div>
</section>
)
Expand Down
4 changes: 2 additions & 2 deletions 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 @@ -2,8 +2,8 @@ import React from 'react';

export default function BuildApps() {
return (
<section className="pb-20">
<div className="container mx-auto">
<section>
<div className="container">
<h2 className="lg:leading-loose pb-2 text-left">Spend Your Time Writing Code, Not YAML</h2>
<div className="text-left leading-relaxed">
<p className="pb-7">
Expand Down
2 changes: 1 addition & 1 deletion web/ensign-landing-page/src/components/layout/DevExperience.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react'
export default function DevExperience() {
return (
<section className="bg-[#ECF6FF] min-w-min">
<div className="mx-auto container pb-20">
<div className="max-w-xl container pl-2 pb-20 mx-auto sm:max-w-2xl lg:max-w-3xl xl:max-w-6xl">
<h2 className="sm:leading-loose py-5 text-left">The Developer Experience</h2>
<p className="text-left pb-5">Ensign is an advanced event data store designed with application developers, data scientists, and product managers in mind. Ensign combines fast transactional services with decoupled processing and rich, insight-driven online analysis, without the need for additional infrastructure or a PhD. in Kafka. Ensign makes event-driven microservices accessible to everyday developers, data scientists, and product managers.</p>
<ul className="list-disc list-outside text-left pl-10">
Expand Down
2 changes: 1 addition & 1 deletion 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,7 +3,7 @@ import diagram from './img/ensign-diagram.png'

export default function Diagram() {
return (
<section className="mx-auto container pb-10">
<section className="container pb-10">
<h2>Data Engineering Simplified</h2>
<img
className="mx-auto"
Expand Down
10 changes: 5 additions & 5 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
Expand Up @@ -27,13 +27,13 @@ export default function Footer() {
</p>
</div>
<div className="ml-10 xl:ml-5 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-32 gap-y-4">
<ul className="sm:grid grid-cols-2 lg:flex flex-col gap-0 mr-5 xl:grid grid-cols-2 gap-x-28 gap-y-4">
<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"
className="p-4 bg-white rounded-lg mr-3"
/>
<span className="text-lg">info@rotational.io</span>
</a>
Expand All @@ -43,7 +43,7 @@ export default function Footer() {
<img
src={github}
alt="GitHub logo"
className="p-4 bg-white rounded-lg mr-4"
className="p-4 bg-white rounded-lg mr-3"
/>
<span className="text-lg">rotationalio</span>
</a>
Expand All @@ -53,7 +53,7 @@ export default function Footer() {
<img
src={twitter}
alt="Twitter logo"
className="p-4 bg-white rounded-lg mr-4"
className="p-4 bg-white rounded-lg mr-3"
/>
<span className="text-lg">rotationalio</span>
</a>
Expand All @@ -63,7 +63,7 @@ export default function Footer() {
<img
src={linkedin}
alt="LinkedIn logo"
className="p-4 bg-white rounded-lg mr-4"
className="p-4 bg-white rounded-lg mr-3"
/>
<span className="text-lg">Rotational</span>
</a>
Expand Down
27 changes: 5 additions & 22 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 @@ -2,30 +2,13 @@ import React from 'react';
import Navbar from './Navbar';
import PageTitle from '../content/PageTitle';

const style = {
backgroundImage: `url(${process.env.PUBLIC_URL + '/hero.png'})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'right',
backgroundSize: '882.5px 480px',
minHeight: '480px',
width: '100%',
}

const hwrap = {
backgroundImage: `url(${process.env.PUBLIC_URL + '/wave.png'})`,
backgroundRepeat: 'x',
backgroundPosition: 'right',
minHeight: '480px',
width: '100%',
}

export default function Header() {
return (
<div style={hwrap}>
<header style={style}>
<Navbar />
<PageTitle />
<div className="bg-wave-pattern bg-repeat-x bg-right min-h-[480px] w-screen">
<header className="bg-hero bg-no-repeat bg-right bg-[length:882.5px_480px] min-h-[480px] w-screen">
<Navbar />
<PageTitle />
</header>
</div>
</div>
)
}
2 changes: 1 addition & 1 deletion 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 @@ -3,7 +3,7 @@ import AccessForm from "../content/AccessForm";

export default function Main() {
return(
<main className="mx-auto container pt-8">
<main className="container pt-8">
<section className="xl:grid grid-cols-3 gap-8">
<section className="col-span-2">
<h2 className="leading-10 pb-5">Powering Real-time Apps & Analytics</h2>
Expand Down
14 changes: 7 additions & 7 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
Expand Up @@ -4,21 +4,21 @@ import logo from '../layout/img/logo.png'

export default function Navbar() {
return (
<nav className="relative max-w-7xl flex items-center justify-between text-white">
<nav className="mx-auto 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-3 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 className="font-normal"><a href="https://rotational.io/services/" target="_blank" rel="noreferrer">Services</a></li>
<li className="font-normal"><a href="https://rotational.io/opensource/" target="_blank" rel="noreferrer">Open Source</a></li>
<li className="font-normal"><a href="https://rotational.io/blog/" target="_blank" rel="noreferrer">Blog</a></li>
<li className="font-normal"><a href="https://rotational.io/about/" target="_blank" rel="noreferrer">About</a></li>
<li className="font-normal"><a href="https://rotational.io/contact/" target="_blank" rel="noreferrer">Contact</a></li>
<li><a href="https://rotational.io/services/" target="_blank" rel="noreferrer">Services</a></li>
<li><a href="https://rotational.io/opensource/" target="_blank" rel="noreferrer">Open Source</a></li>
<li><a href="https://rotational.io/blog/" target="_blank" rel="noreferrer">Blog</a></li>
<li><a href="https://rotational.io/about/" target="_blank" rel="noreferrer">About</a></li>
<li><a href="https://rotational.io/contact/" target="_blank" rel="noreferrer">Contact</a></li>
<li><a href="#" className="icon" onClick={toggleResponsiveClass}>
<i className="fa fa-bars"></i>
</a></li>
Expand Down
0 web/ensign-landing-page/public/wave.png → ...g-page/src/components/layout/img/wave.png
View file
Open in desktop
File renamed without changes
14 changes: 8 additions & 6 deletions web/ensign-landing-page/src/components/pages/Home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,15 @@ const Home = () => {
return (
<>
<Header />
<Main />
<Diagram />
<BuildApps />
<div className="max-w-xl pl-2 pb-20 mx-auto sm:max-w-2xl lg:max-w-3xl xl:max-w-6xl">
Copy link
Contributor

Choose a reason for hiding this comment

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

can you try max-w-7xl instead?

<Main />
<Diagram />
<BuildApps />
</div>
<DevExperience />
<div className="bg-[#ECF6FF]">
<Footer />
</div>
<div className="bg-[#ECF6FF]">
<Footer />
</div>
</>
);
}
Expand Down
7 changes: 4 additions & 3 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 @@ -9,7 +9,8 @@

@layer base {
h1 {
@apply text-6xl;
@apply font-bold;
@apply pb-1;
}
h2 {
@apply text-4xl;
Expand All @@ -20,7 +21,7 @@
@apply font-bold;
}
p, li {
@apply text-xl;
@apply font-normal;
}
}

Expand Down Expand Up @@ -70,7 +71,7 @@ body {
}


/* 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) */
/* When the screen is less than 881 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: 881px) {
.topnav a {display: none;}
.topnav a.icon {
Expand Down
1 change: 1 addition & 0 deletions web/ensign-landing-page/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ module.exports = {
theme: {
backgroundImage: {
'hero': "url('/src/components/layout/img/hero.png')",
'wave-pattern': "url('/src/components/layout/img/wave.png')",
'footer': "url('/src/components/layout/img/foot.png')",
},
extend: {}
Expand Down