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

Improved UI #131

Merged
merged 6 commits into from
May 1, 2021
Merged

Improved UI #131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c1f8d9f
home, footer, nav
anandbaburajan Apr 25, 2021
6aa1fdc
everything except dashboard
anandbaburajan Apr 25, 2021
de91e7f
improvements
anandbaburajan Apr 25, 2021
b7646ef
everything except home
anandbaburajan Apr 29, 2021
e80254e
more improvements
anandbaburajan Apr 29, 2021
77b4f7c
improved home
anandbaburajan May 1, 2021
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
16,828 changes: 16,803 additions & 25 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@
"react-bootstrap-icons": "^1.2.3",
"react-dom": "16.13.1",
"react-firebaseui": "^4.1.0",
"react-github-corner": "^2.5.0",
"react-icons": "^4.2.0",
"react-joyride": "^2.3.0",
"react-redux": "^7.2.2",
Expand Down
30 changes: 17 additions & 13 deletions pages/404.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
import Link from "next/link";
import { Container, Row, Col } from "react-bootstrap";
import Layout from "../src/components/Layout";

const NotFound = (): JSX.Element => {
return (
<Layout>
<Container className="outer-container" fluid>
<Row className="inner-container">
<Col>
<h1>404</h1>
<h3>We can't seem to find the page you're looking for.</h3>
<h3>
But here's the link to our
<Link href="/">
<a> homepage!</a>
</Link>{" "}
:D
</h3>
<Container className="rm-container">
<Row>
<Col className="four-o-four">
<span>404</span>
<p>
We can't seem to find the page you're looking for.
<br />
But{" "}
<a
href="https://www.youtube.com/watch?v=sYmQQn_ZSys"
target="_blank"
rel="noreferrer"
>
here
</a>
's a rocket landing.
</p>
</Col>
</Row>
</Container>
Expand Down
285 changes: 255 additions & 30 deletions pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,13 @@
import { Container, Row, Col, Button } from "react-bootstrap";
import {
Container,
Row,
Col,
Jumbotron,
Button,
CardDeck,
Card,
} from "react-bootstrap";
import { FaGithub } from "react-icons/fa";
import { useSelector } from "react-redux";
import Login from "../src/components/Login";
import Layout from "../src/components/Layout";
Expand All @@ -11,38 +20,254 @@ const Home = (): JSX.Element => {

return (
<Layout>
<Container className="outer-container" fluid>
<Row className="inner-container">
<Col className="hero-col">
<h1 className="hero-title">
<span className="hero-line">
Scheduling meetings{" "}
<span className="hero-strikethrough">is boring</span>{" "}
</span>
<span className="hero-line">has never been faster</span>
</h1>
<h3 className="hero-desc">
<span className="hero-line">
Quickly find the best time for team meetings and one-on-ones
with{" "}
</span>
<span className="hero-line">
RocketMeet — a free and open source meeting scheduling app
</span>
</h3>
{isLoggedIn ? (
<Button
className="rm-primary-button index-create-button"
href="/poll/create"
>
Create a Poll
</Button>
) : (
<Login />
)}
<Container className="rm-container">
<Row className="home-hero-row">
<Col className="home-hero-first-col" sm>
<span className="hero-title">
Scheduling meetings{" "}
<span className="hero-strikethrough">is boring</span> has never
been faster
</span>
<span className="hero-desc">
Quickly find the best time for team meetings and one-on-ones with{" "}
RocketMeet — a free and open source meeting scheduling tool
</span>
<div className="hero-buttons">
<div className="hero-first-button">
{isLoggedIn ? (
<Button className="rm-primary-button" href="/poll/create">
Create a poll
</Button>
) : (
<Login btnStyle="rm-primary-button" />
)}
</div>
<div className="hero-second-button">
<Button
className="rm-secondary-button"
href="https://github.com/RocketMeet"
target="_blank"
>
<FaGithub /> Use self-hosted version
</Button>
</div>
</div>
</Col>
<Col sm>
<img
src="/undraw_hang_out_h9ud.svg"
className="illustration-home"
alt="illustration-home"
/>
</Col>
</Row>
</Container>
<Jumbotron className="home-first-jumbo" fluid>
<Container>
<img
src="/screenshot.png"
className="illustration-home-two"
alt="illustration-home"
/>
</Container>
</Jumbotron>
<Container className="hero-secondary-container">
<span className="hero-secondary-title">
No more back-and-forth emails. Just four simple steps.
</span>
<span className="hero-secondary-desc">
Create a poll. Share the poll. Wait for invitees. Decide the time.
</span>
</Container>
<Jumbotron className="home-second-jumbo" fluid id="features">
<Container>
<span className="hero-secondary-title">
Different types of polls for different kinds of needs.
</span>
<CardDeck>
<Card className="features-card">
<Card.Body>
<Card.Title>Public</Card.Title>
<Card.Text>
Anyone with the poll link can mark their availability. No
login required. Best for public meetings.
</Card.Text>
</Card.Body>
<Card.Footer className="features-card-footer">
<small>(Coming soon)</small>
</Card.Footer>
</Card>
<Card className="features-card">
<Card.Body>
<Card.Title>Protected</Card.Title>
<Card.Text>
Only logged-in users can mark their availability, leaving no
space for impersonation.
</Card.Text>
</Card.Body>
<Card.Footer className="features-card-footer">
<small>(Coming soon)</small>
</Card.Footer>
</Card>
<Card className="features-card">
<Card.Body>
<Card.Title>Private</Card.Title>
<Card.Text>
Choose who can see your poll and mark their availability.
Hidden for everyone else.
</Card.Text>
</Card.Body>
<Card.Footer className="features-card-footer">
<small>(Coming soon)</small>
</Card.Footer>
</Card>
</CardDeck>
</Container>
</Jumbotron>
<Jumbotron className="home-third-jumbo" fluid>
<Container>
<Row>
<Col sm>
<span className="hero-secondary-title">
No more worrying about time zones.
</span>
<span className="hero-secondary-desc">
RocketMeet fluently handles time zones, leaving no space for
confusion. Optionally, check availability across time zones, so
invitees don’t get left out.
</span>
</Col>
<Col sm>
<img
src="/undraw_world_9iqb.svg"
className="illustration-home-features"
alt="illustration-home"
/>
</Col>
</Row>
</Container>
</Jumbotron>
<Jumbotron className="home-fourth-jumbo" fluid>
<Container>
<Row className="home-fourth-jumbo-row">
<Col sm>
<img
src="/undraw_Experts_re_i40h.svg"
className="illustration-home-features"
alt="illustration-home"
/>
</Col>
<Col sm>
<span className="hero-secondary-title">
Make scheduling collaborative.
</span>
<span className="hero-secondary-desc">
Share your availability. Let invitees narrow it down. See who’s
free - or who can be - with “if need be” votes. Date and time
set.
</span>
</Col>
</Row>
</Container>
</Jumbotron>
<Jumbotron className="home-second-jumbo" fluid>
<Container>
<span className="hero-secondary-title">
Integrate with your favorite service.
</span>
<CardDeck>
<Card className="features-card">
<Card.Body>
<img
src="/gcal.png"
className="icon-features"
alt="icon-features"
/>
<Card.Title>Google Calendar</Card.Title>
<Card.Text>
Create new Google Calendar events automatically and check for
busy times.
</Card.Text>
</Card.Body>
<Card.Footer className="features-card-footer">
<small>(Coming soon)</small>
</Card.Footer>
</Card>
<Card className="features-card">
<Card.Body>
<img
src="/outlook-cal.png"
className="icon-features"
alt="icon-features"
/>
<Card.Title>Outlook Calendar</Card.Title>
<Card.Text>
Automatically create new events in Outlook and check for your
busy times.
</Card.Text>
</Card.Body>
<Card.Footer className="features-card-footer">
<small>(Coming soon)</small>
</Card.Footer>
</Card>
<Card className="features-card">
<Card.Body>
<img
src="/zoom.png"
className="icon-features"
alt="icon-features"
/>
<Card.Title>Zoom</Card.Title>
<Card.Text>
Automatically create Zoom meetings for your invitees after
scheduling.
</Card.Text>
</Card.Body>
<Card.Footer className="features-card-footer">
<small>(Coming soon)</small>
</Card.Footer>
</Card>
</CardDeck>
</Container>
</Jumbotron>
<Jumbotron className="home-fifth-jumbo" fluid>
<Container>
<Row>
<Col sm>
<span className="hero-secondary-title">
Ready to start scheduling smart?
</span>
<div className="hero-buttons">
<div className="hero-first-button">
{isLoggedIn ? (
<Button className="rm-primary-button" href="/poll/create">
Create a poll
</Button>
) : (
<Login btnStyle="rm-primary-button" />
)}
</div>
<div className="hero-second-button">
<Button
className="rm-secondary-button"
href="https://github.com/RocketMeet"
target="_blank"
>
<FaGithub /> Use self-hosted version
</Button>
</div>
</div>
</Col>
<Col sm>
<img
src="/undraw_Booked_re_vtod.svg"
className="illustration-cta"
alt="illustration-cta"
/>
</Col>
</Row>
</Container>
</Jumbotron>
</Layout>
);
};
Expand Down
Loading