logo
  • Home
  • Modern
    New
  • eCommerce
    • Frontend pages
  • Homepage
  • About Us
  • Blog
  • Blog Details
  • Contact
  • Portfolio
  • Pricing
  • Apps
    • AI
  • Chat
  • Image
  • Contacts
    2
    • Blog
  • Posts
  • Detail
  • Create
  • Edit
  • Manage Blog
    • Ecommerce
  • Shop
  • Detail
  • List
  • Checkout
  • Add Product
  • Edit Product
  • Chats
    • Users
  • Profile
  • Followers
  • Friends
  • Gallery
  • Notes
  • Calendar
  • Email
  • Tickets
  • Kanban
    • Invoice
  • List
  • Details
  • Create
  • Edit
  • Orders
  • Customers
  • Pages
  • Integrations
  • API Keys
  • Roll Base Access
  • Pricing
  • Account Setting
  • FAQ
  • Tabler Icon
  • Sample Page
  • Landingpage
    • Widgets
  • Cards
  • Banners
  • Charts
  • Forms
    • Form Elements
  • Autocomplete
  • Button
  • Checkbox
  • Radio
  • Date Time
  • Slider
  • Switch
  • Form Layout
  • Form Horizontal
  • Form Vertical
  • Form Custom
  • Form Wizard
  • Form Validation
  • Tiptap Editor
  • Tables
  • Basic
  • Collapsible
  • Enhanced
  • Fixed Header
  • Pagination
  • Search
    • Tanstack / React Table
  • Basic
  • Dense
  • Filter
  • Row Selection
  • Pagination
  • Sorting
  • Column Visibility
  • Drag n Drop
  • Editable
  • Empty
  • Expand
  • Sticky
  • UI
  • Ui Components
  • Charts
  • Line
  • Gradient
  • Area
  • Candlestick
  • Column
  • Doughtnut & Pie
  • RadialBar & Radar
  • Mui Charts
  • BarCharts
    • LineCharts
  • Lines
  • Area
  • PieCharts
  • ScatterCharts
  • SparklineCharts
  • GaugeCharts
  • Mui Trees
    • SimpleTreeView
  • Items
  • Selection
  • Expansion
  • Customization
  • Focus
  • Auth
    • Login
  • Side Login
  • Boxed Login
    • Register
  • Side Register
  • Boxed Register
    • Forgot Password
  • Side Forgot Password
  • Boxed Forgot Password
    • Two Steps
  • Side Two Steps
  • Boxed Two Steps
  • Error
  • Maintenance
  • Other
    • Menu Level
  • Level 1
    • Level 1.1
  • Level 2
    • Level 2.1
  • Level 3
  • Level 3.1
  • Disabled
  • SubCaption
    This is the sutitle
  • Chip
    9
  • Outlined
    outline
  • External Link
Remy Sharp
Mathew
Designer

Banner

  1. Home

  3. Banner

breadcrumbImg
img
Welcome back Mathew Anderson!

$2,340

Today’s Sales

35%

Performance
img
Transction
Track your every Transaction Easily
Track and record your every income and expence easily to control your balance
trackBg
Sample Code

import { Card, CardContent, Typography, Button, Box, Grid } from '@mui/material';
import Image from 'next/image';

const Banner1 = () => {
  return (
    <Card
      elevation={0}
      sx={{
        backgroundColor: (theme) => theme.palette.secondary.light,
        py: 0,
        overflow: 'hidden',
        position: 'relative',
      }}
    >
      <CardContent sx={{ p: '30px' }}>
        <Grid container spacing={3} justifyContent="space-between">
          <Grid item sm={6} display="flex" alignItems="center">
            <Box
              sx={{
                textAlign: {
                  xs: 'center',
                  sm: 'left',
                },
              }}
            >
              <Typography variant="h5">Track your every Transaction Easily</Typography>
              <Typography variant="subtitle1" color="textSecondary" my={2}>
                Track and record your every income and expence easily to control your balance
              </Typography>
              <Button variant="contained" color="secondary">
                Download
              </Button>
            </Box>
          </Grid>
          <Grid item sm={4}>
            <Box mb="-150px">
              <Image src={"/images/backgrounds/track-bg.png"} alt={"trackBg"} height={195} width={168} />
            </Box>
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
};

export default Banner1;
Error
star
Oops something went wrong!
Trying again to bypasses these
temporary error.
Sample Code

import { CardContent, Typography, Button, Card } from '@mui/material';
import { Box } from '@mui/system';
import Image from 'next/image';

const Banner4 = () => {
  return (
    <Card>
      <CardContent sx={{ p: '30px' }}>
        <Box textAlign="center">
          <Image src={"/images/backgrounds/maintenance2.svg"} width={200} height={200} alt="star" style={{ width: '200px' }} />

          <Typography variant="h5" mt={3}>Oops something went wrong!</Typography>
          <Typography variant="subtitle1" color="textSecondary" mt={1} mb={2}>
            Trying again to bypasses these<br /> temporary error.
          </Typography>

          <Button color="error" variant="contained" size="large">
            Retry
          </Button>
        </Box>
      </CardContent>
    </Card>
  );
};

export default Banner4;
Empty Cart
star
Oop, Your cart is empty!
Get back to shopping and get
rewards from it.
Sample Code

import { CardContent, Typography, Button, Card } from '@mui/material';
import { Box } from '@mui/system';
import React from 'react';
import Image from 'next/image';

const Banner5 = () => {
  return (
    <Card>
      <CardContent sx={{ p: '30px' }}>
        <Box textAlign="center">
          <Image src={"/images/products/empty-shopping-cart.svg"} width={200} height={200} alt="star" style={{ width: '200px' }} />

          <Typography variant="h5" mt={3}>Oop, Your cart is empty!</Typography>
          <Typography variant="subtitle1" color="textSecondary" mt={1} mb={2}>
            Get back to shopping and get<br /> rewards from it.
          </Typography>

          <Button color="primary" variant="contained" size="large">
            Go for shopping!
          </Button>
        </Box>
      </CardContent>
    </Card>
  );
};

export default Banner5;
Notification
Level Up
star
You reach all Notifications
Congratulations,
Tap to continue next task.
Sample Code

import { CardContent, Typography, Button, Card } from '@mui/material';
import { Box } from '@mui/system';
import Image from 'next/image';

const Banner2 = () => {
  return (
    <Card>
      <CardContent sx={{ p: '30px' }}>
        <Typography variant="subtitle1" textAlign="center" mb={2} textTransform="uppercase" color="textSecondary">
          Level Up
        </Typography>
        <Box textAlign="center">
          <Image src={"/images/backgrounds/gold.png"} width={150} height={150} alt="star" style={{ width: '150px'}} />

          <Typography variant="h5">You reach all Notifications</Typography>
          <Typography variant="subtitle1" color="textSecondary" mt={1} mb={2}>Congratulations,<br/> Tap to continue next task.</Typography>

          <Button color="primary" variant="contained" size="large">
            Yes, Got it!
          </Button>
        </Box>
      </CardContent>
    </Card>
  );
};

export default Banner2;
Friend Card
Mutual Friend Revealed
userBg
1
Tommoie Henderson
Accept the request and
type a message
Sample Code

import { CardContent, Typography, Button, Avatar, Badge, Card } from '@mui/material';
import { Box, Stack } from '@mui/system';

const Banner3 = () => {
  return (
    <Card>
      <CardContent sx={{ p: '30px' }}>
        <Typography variant="h5" textAlign="center" mb={3}>
          Mutual Friend Revealed
        </Typography>
        <Box textAlign="center">
          <Badge badgeContent={1} color="error" overlap="circular">
            <Avatar src={"/images/profile/user-3.jpg"} alt="userBg" sx={{ width: 140, height: 140 }} />
          </Badge>

          <Typography variant="h5" mt={3}>
            Tommoie Henderson
          </Typography>
          <Typography variant="subtitle1" color="textSecondary" mt={1} mb={2}>
            Accept the request and <br/> type a message
          </Typography>

          <Stack direction="row" spacing={2} justifyContent="center">
            <Button color="primary" variant="contained" size="large">
              Accept
            </Button>
            <Button color="error" variant="outlined" size="large">
              Remove
            </Button>
          </Stack>
        </Box>
      </CardContent>
    </Card>
  );
};

export default Banner3;