Scribd
Upload
2 views

User interface using react

The document outlines the user interface design for two marketing and payment automation platforms, WebEngage and Stripe. WebEngage's design focuses on engaging customers with a simple navigation and sections highlighting services, customer testimonials, and contact information. Stripe's design emphasizes a mobile-friendly dashboard for tracking payments and subscriptions, featuring a card for total revenue and a table for recent transactions.

Uploaded by

yogalakshmi.26it
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

User interface using react

The document outlines the user interface design for two marketing and payment automation platforms, WebEngage and Stripe. WebEngage's design focuses on engaging customers with a simple navigation and sections highlighting services, customer testimonials, and contact information. Stripe's design emphasizes a mobile-friendly dashboard for tracking payments and subscriptions, featuring a card for total revenue and a table for recent transactions.

Uploaded by

yogalakshmi.26it
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Develop a User Interface design

1) WebEngage is a marketing automation platform that operates out of Mumbai and US. They
service over 38,000 happy customers engage 180+ million users monthly. Their growth demanded
they expand to markets in US and Europe. Develop the user interface design

import React from "react";


import "bootstrap/dist/css/bootstrap.min.css";

function App() {
return (
<div className="d-flex flex-column min-vh-100 min-vw-100">
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">WebEngage</a>
<button className="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNav">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav ml-auto">
<li className="nav-item"><a className="nav-link" href="#services">Services</a></li>
<li className="nav-item"><a className="nav-link" href="#customers">Customers</a></li>
<li className="nav-item"><a className="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</nav>

<header className="jumbotron text-center flex-grow-1 d-flex flex-column justify-content-center


align-items-center">
<h1>WebEngage</h1>
<p>Marketing Automation for 38,000+ Happy Customers</p>
<a href="#contact" className="btn btn-primary">Get Started</a>
</header>

<section id="services" className="text-center py-5 flex-grow-1 d-flex flex-column


justify-content-center">
<h2>Our Services</h2>
<p>Engage 180+ million users monthly with our cutting-edge solutions.</p>
</section>

<section id="customers" className="text-center py-5 bg-light flex-grow-1 d-flex flex-column


justify-content-center">
<h2>Our Happy Customers</h2>
<p>We are expanding to US and European markets to serve you better.</p>
</section>

<section id="contact" className="text-center py-5 flex-grow-1 d-flex flex-column


justify-content-center">
<h2>Contact Us</h2>
<p>Email: [email protected] | Phone: +1 800 123 456</p>
</section>

<footer className="text-center py-3 bg-dark text-white">


<p>&copy; 2025 WebEngage. All rights reserved.</p>
</footer>
</div>
);
}

export default App;

OUTPUT:
2)Stripe didn’t start as a mobile-first company, like many other startups these days. The core
business is the payments API, allowing companies to get setup to accept payments within minutes.
The web dashboard makes it easy for everyone on a team to track and manage subscriptions,
payments, customers, and transfers. However, it was designed for larger screens and as such, is
barely usable on mobile that focus on developing a mobile app starting with the iPhone. Develop the
user interface design

import React from "react";


import "bootstrap/dist/css/bootstrap.min.css";
import { Navbar, Nav, Container, Card, Button, Table } from "react-bootstrap";

function App() {
return (
<div className="d-flex flex-column min-vh-100 min-vw-100">
<Navbar bg="dark" variant="dark" expand="lg" className="px-3">
<Navbar.Brand href="#">Stripe Dashboard</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ms-auto">
<Nav.Link href="#payments">Payments</Nav.Link>
<Nav.Link href="#subscriptions">Subscriptions</Nav.Link>
<Nav.Link href="#customers">Customers</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>

<Container className="mt-4">
<Card className="text-center p-3">
<Card.Body>
<Card.Title>Total Revenue</Card.Title>
<h3>$25,430</h3>
<Button variant="primary">View Reports</Button>
</Card.Body>
</Card>

<h4 className="mt-4">Recent Transactions</h4>


<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>Customer</th>
<th>Amount</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tommy</td>
<td>$120</td>
<td>Completed</td>
</tr>
<tr>
<td>2</td>
<td>Yaazhini</td>
<td>$250</td>
<td>Pending</td>
</tr>
</tbody>
</Table>
</Container>
</div>
);
}

export default App;

OUTPUT:

You might also like