Skip to content

Commit

Permalink
Merge pull request #131 from AnandBaburajan/style
Browse files Browse the repository at this point in the history
Improved UI
  • Loading branch information
anandbaburajan authored May 1, 2021
2 parents 5c5e0a5 + 77b4f7c commit eee3572
Show file tree
Hide file tree
Showing 33 changed files with 18,091 additions and 727 deletions.
16,828 changes: 16,803 additions & 25 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion package.json
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
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
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

0 comments on commit eee3572

Please sign in to comment.