Skip to content

Commit

Permalink
initiate homescreen flow
Browse files Browse the repository at this point in the history
  • Loading branch information
prasunanand committed Dec 10, 2024
1 parent 39c7de5 commit e8e1de6
Show file tree
Hide file tree
Showing 2 changed files with 200 additions and 0 deletions.
94 changes: 94 additions & 0 deletions ui/src/Home.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
.dashboard-content-wraper {
padding: 50px 25px;
padding-bottom: 30px;

}

.dashboard-top-menu-wraper {
background: #fff;
padding: 15px 10px;
box-shadow: 0px 3px 16px #00000012;
height: 80px;
/* position: relative; */
padding-left: 85px;
}

#content {
min-height: 100vh;
transition: all 0.3s;
width: calc(100% - 320px);
right: 0;
position: absolute;
}

.content-full {
width: calc(100% - 80px) !important;
}

.dashboard-title {
border-bottom: 1px solid #f3f2f6;
padding: 0px 40px;
padding-bottom: 30px;
}

.dashboard-content-features-wraper {
display: flex;
justify-content: space-between;
margin-top: 45px;
padding: 0px 40px;
}

@media (max-width: 1199.98px) {
.dashboard-content-features {
width: 32%;
padding: 25px 25px 25px;
}
}

@media (max-width: 1700px) {
.dashboard-content-features {
width: 32%;
padding: 35px 40px 26px;
}
}
.dashboard-content-features {
width: 32%;
border-radius: 10px;
box-shadow: 0px 3px 26px #00000017;
background: #fff;
text-align: center;
padding: 35px 70px 26px;
}

.dashboard-task-wraper {
display: flex;
justify-content: space-between;
padding: 0px 40px;
margin-top: 40px;
}

@media (max-width: 1199.98px) {
.dashboard-task-items {
width: 33%;
padding-left: 15px;
}
}

.dashboard-task-items {
width: 30%;
padding-left: 15px;
}

.dashboard-task-items h6 {
font-size: 18px;
font-weight: 600;
color: #000000;
margin-bottom: 35px;
}

.dashboard-task-items a {
display: block;
width: max-content;
margin-top: 10px;
margin-bottom: 10px;
}
106 changes: 106 additions & 0 deletions ui/src/Home.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import React from 'react';
import { Link } from "react-router-dom";
import 'react-toastify/dist/ReactToastify.css';

import "./Home.scss"

function Home() {
return (
<div className="dashboard-content content-full" id="content">
<div className="dashboard-content-wraper">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<div className="dashboard-title">
<h2 className="font-h2 fontw-300">Welcome to <span className="fontw-500">zasper</span></h2>
</div>
</div>
</div>
</div>

<div className="container-fluid">
<div className="row">
<div className="col-12">
<div className="dashboard-content-features-wraper">
<div className="dashboard-content-features">
<div className="dashboard-content-features-icon">
<img src="./images/help.svg" alt="#" />
</div>
<div className="dashboard-content-features-info">
<h5>Explore the Quickstart Tutorial</h5>
<p>Spin up a cluster, run queries on preloaded data, and display results in 5 minutes.</p>
<a href="https://docs.zasper.io/documentation.html" target="_blank" rel="noopener noreferrer" className="btn-bg">Explore More</a>
</div>
</div>
<div className="dashboard-content-features">
<div className="dashboard-content-features-icon">
<img src="./images/upload.svg" alt="#" />
</div>
<div className="dashboard-content-features-info">
<h5>Import and Export Data</h5>
<p>Quickly import data, preview its schema, create a table, and query it in a notebook.</p>
<a href="https://docs.zasper.io/documentation.html" target="_blank" rel="noopener noreferrer" className="btn-bg">Explore More</a>
</div>
</div>
<div className="dashboard-content-features">
<div className="dashboard-content-features-icon">
<img src="./images/file2.svg" alt="#" />
</div>
<div className="dashboard-content-features-info">
<h5>Create a New Project</h5>
<p>Create a notebook to start querying, visualizing, and modeling your data.</p>
<a href="/workspace" className="btn-bg">Explore More</a>
</div>
</div>
</div>
</div>
</div>
</div>

<div className="container-fluid">
<div className="row">
<div className="col-12">
<div className="dashboard-task-wraper">
<div className="dashboard-task-items">
<h6>COMMON TASKS</h6>
<Link to="/workspace/">
<span>New Notebook</span>
</Link>
<Link to="https://docs.zasper.io" target="_blank" rel="noopener noreferrer">
<span>Read Documentation</span>
</Link>
</div>

<div className="dashboard-task-items">
<h6>RECENTS</h6>
<Link to="#">
<span>Quickstart Notebook (1)</span>
</Link>
<Link to="#">
<span>Quickstart Notebook</span>
</Link>
<div>
<button className='btn-bg'>Notify!</button>

</div>
</div>

<div className="dashboard-task-items">
<h6>RECENTS</h6>
<Link to="https://docs.zasper.io" target="_blank" rel="noopener noreferrer">
<span>Zasper Status</span>
</Link>
<Link to="https://docs.zasper.io" target="_blank" rel="noopener noreferrer">
<span>View latest release notes</span>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>);
}


export default Home;

0 comments on commit e8e1de6

Please sign in to comment.