Commit db8ddff3 authored by Muhammad Umair Khan's avatar Muhammad Umair Khan
Browse files

update(homepage): modernize homepage hero section and fix layout issues 

This commit introduces several UX/UI improvements to the sandbox homepage:
- Redesigned the hero section with a new, abstract network texture background.
- Fixed typography collisions by properly structuring the <h1> and <p> tags in the hero content.
- Wired the primary 'Sign In & Try It' call-to-action button to correctly trigger the login dialog.
- Added a missing material icon to the 'Live API Access' feature card.
- Improved overall element spacing and alignment.
parent c10c764c

js-apps/frontend/src/img/banner-mec-architecture.png

0 → 100644
+578 KiB
Loading image diff...

js-apps/frontend/src/img/banner-mec-texture.png

0 → 100644
+724 KiB
Loading image diff...

js-apps/frontend/src/js/containers/home/home-page-container.js

+218 −94
Original line number Diff line number Diff line
@@ -4,8 +4,10 @@ 


import { connect } from 'react-redux';

import React, { Component } from 'react';

import { Grid, GridCell, GridInner } from '@rmwc/grid';

// import { Elevation } from '@rmwc/elevation';

import { Grid, GridCell } from '@rmwc/grid';

import { Card } from '@rmwc/card';

import { Button } from '@rmwc/button';

import { Icon } from '@rmwc/icon';

import { Typography } from '@rmwc/typography';



import {
@@ -18,7 +20,8 @@ import { 
  ETSI_MEC_OVERVIEW_PDF_URL,

  ETSI_MEC_URL,

  ETSI_PORTAL_URL,

  PAGE_HOME

  PAGE_HOME,

  DIALOG_SIGN_IN

} from '../../app-constants';
@@ -33,112 +36,233 @@ class HomePageContainer extends Component { 
    }



    return (

      <Grid style={styles.headlineGrid}>

        <GridCell style={styles.banner} span={12}>

          <GridInner>

            <GridCell style={{height: 20}} span={12}/>

            <GridCell span={2}/>

            <GridCell span={10}>

              <Typography style={styles.bannerText} use="headline2">MEC Sandbox</Typography>

      <div style={styles.container}>

        {/* HERO SECTION - SINGLE COLUMN CENTERED */}

        <div style={styles.heroSection}>

          <Grid style={styles.heroGrid}>

            <GridCell span={12} style={styles.heroContent}>

              <Typography tag="h1" style={styles.heroHeadline}>

                Experience MEC APIs in Real-Time

              </Typography>

              <Typography tag="p" style={styles.heroSubHeadline}>

                An interactive sandbox environment for developers to build, test, and experiment with ETSI MEC Service APIs.

              </Typography>

              <Button

                raised

                theme="secondary-bg on-secondary"

                style={styles.ctaButton}

                onClick={() => {

                  this.props.changeCurrentDialog(DIALOG_SIGN_IN);

                }}

              >

                Sign In & Try It

              </Button>

            </GridCell>

            <GridCell span={2}/>

            <GridCell span={10}>

              <Typography style={styles.bannerText} use="headline4">Experience MEC APIs</Typography>

          </Grid>

        </div>



        <GridCell theme="primary-bg" style={{height: 8, marginTop: -8, width: '100%'}} span={12}/>



        {/* MAIN CONTENT GRID */}

        <Grid style={styles.mainGrid}>



          <GridCell span={12} style={{ marginTop: 40, marginBottom: 20, textAlign: 'center' }}>

            <Typography theme="primary" use="headline4" style={{ fontWeight: 'bold' }}>

              Welcome to the ETSI MEC Sandbox

            </Typography>

          </GridCell>

          </GridInner>



          {/* FEDERATION WARNING ALERT */}

          <GridCell span={12}>

            <div style={styles.alertBox}>

              <div style={styles.alertIcon}>

                <Icon icon="warning" style={{ color: '#b71c1c' }} />

              </div>

              <div style={styles.alertText}>

                <Typography use="body2" style={{ fontWeight: 'bold', color: '#b71c1c', marginBottom: 4 }}>

                  Important Note: MEC Federation Service API (MEC040)

                </Typography>

                <Typography use="body2" style={{ color: '#d32f2f' }}>

                  If MEC Federation Service API is used (e.g., by activating a 4G-5G-WiFi-Macro-V2X network scenario), your MEC services and applications will be visible from other MEC Platforms. By using this API, you accept to establish a MEC federation between partners as specified in ETSI GS MEC 040 V3.2.1 Clause 5.2.4.1.

                </Typography>

              </div>

            </div>

          </GridCell>



        <GridCell theme="primary-bg" style={{height: 32, marginTop: -10}} span={12}/>

          {/* FEATURE CARDS */}

          <GridCell span={4}>

            <Card style={styles.featureCard}>

              <Icon icon="network_cell" style={styles.cardIcon} />

              <Typography use="headline6" style={styles.cardTitle}>Network Simulation</Typography>

              <Typography use="body2" style={styles.cardBody}>

                Combine different network technologies (4G, 5G, Wi-Fi, MEC Federation) and terminal types in a geolocated environment to test real-world scenarios.

              </Typography>

            </Card>

          </GridCell>



        <GridCell span={2}/>

        <GridCell span={8}>

          <div style={styles.title}>

            <Typography theme="primary" use="headline4">Welcome to ETSI MEC Sandbox portal</Typography>

          </div>

          <div>

            <Typography className="text-color-main" use="body1">

              <p>

                MEC Sandbox is an interactive environment that enables users to learn & experiment with ETSI MEC Service

                APIs. These standardised RESTful APIs are targeted towards MEC application developers to expose the value

                added services offered by MEC, including real time access to network and context information, as well as

                location awareness. The design principles for developing the APIs have also been specified in ETSI GS MEC 009,

                along with http methods, templates, conventions and patterns. The MEC service APIs are available in YAML

                and JSON format at <a href={ETSI_FORGE_URL} target="_blank">{ETSI_FORGE_URL}</a>,

                presented via OpenAPI compliant descriptions.

              </p>

              <p>

                MEC Sandbox provides the user with a choice of scenarios combining different network technologies

                (4G, 5G, Wi-Fi, MEC Federation) and terminal types. Combining these assets in a geolocated environment, a user can gain

                hands-on experience on the behaviour and capabilities of the Location (MEC013), Radio Network

                Information (MEC012), Traffic Management APIs (MEC015), Device application interface (MEC016), Application Mobility (MEC021), WLAN Information (MEC028),

                V2X Information API (MEC030) service API, MEC IoT API (MEC 033), MEC Federation Service API (MEC040) service APIs and Sensors-Sharing Services (MEC046).

                MEC Sandbox provides also a support for Edge Native Connector (3GPP TS 29.222: 3rd Generation Partnership Project; Technical Specification Group Core

                Network and Terminals; Common API Framework for 3GPP Northbound APIs).

              </p>

              <p>

                Such contextual information can offer significant differential performance for edge based MEC applications.

                MEC Sandbox also provides the support of capabilities described by Edge Platform Application Enablement (MEC011) and Device Application Interface (MEC016).

              </p>

              <p>

                <b>Important Note: If MEC Federation Service API (MEC040) is used (e.g. by activation 4g-5g-wifi-macro-v2x-fed network scenarion), MEC services and

                  MEC applications will be visible from other MEC Platform using also MEC Federation Service API (MEC040).

                  If you choose to use MEC Federation Service API (MEC040), you accept to establish MEC federation between two partners as specified in ETSI GS MEC 040 V3.2.1 (2024-03) Clause 5.2.4.1 Introduction.

                </b>

              </p>

              <p>

                Users can use the MEC Sandbox API to develop their own MEC applications to access and use the live MEC APIs running an instance of the MEC Sandbox.

                The demo6 example illustrates how to use the MEC Sandbox API.

                The demo9 example illustrates how to use the MEC Sandbox API jointly with oneM2M platform.

              </p>

              <p>

                But wait - MEC Sandbox is not only a browser experience!<br/>

                Users with existing applications can configure them to access and use the live MEC APIs running in their own

                test environment.

              </p>

              <p>

                Interested to learn more?<br/>

                Follow the help menu links (Webinar, Wiki, Community, etc.) to get started or simply sign-in and try-it!

              </p>

              <p>

                The following resources provide more information on ETSI MEC:<br/>

                - <a href={ETSI_MEC_URL} target="_blank">Multi-access Edge Computing</a><br/>

                - <a href={ETSI_PORTAL_URL} target="_blank">ETSI MEC Portal</a><br/>

                - <a href={ETSI_FORGE_MEC_URL} target="_blank">ETSI Forge</a><br/>

                - <a href={ETSI_MEC_OVERVIEW_PDF_URL} target="_blank">ETSI MEC Slide Deck</a>

              </p>

          <GridCell span={4}>

            <Card style={styles.featureCard}>

              <Icon icon="settings_ethernet" style={styles.cardIcon} />

              <Typography use="headline6" style={styles.cardTitle}>Live API Access</Typography>

              <Typography use="body2" style={styles.cardBody}>

                Gain hands-on experience with standardised RESTful APIs including Location, Radio Network Info, Traffic Management, Application Mobility, and more.

              </Typography>

            </Card>

          </GridCell>



          <GridCell span={4}>

            <Card style={styles.featureCard}>

              <Icon icon="settings_input_component" style={styles.cardIcon} />

              <Typography use="headline6" style={styles.cardTitle}>Edge Native Connector</Typography>

              <Typography use="body2" style={styles.cardBody}>

                Supports Edge Platform Application Enablement (MEC011) and Common API Framework for 3GPP Northbound APIs to streamline your deployments.

              </Typography>

            </Card>

          </GridCell>



          {/* RESOURCES FOOTER */}

          <GridCell span={12} style={styles.resourcesSection}>

            <Typography use="headline6" style={{ marginBottom: 16 }}>Additional Resources</Typography>

            <div style={styles.resourcesGrid}>

              <a href={ETSI_MEC_URL} target="_blank" rel="noreferrer" style={styles.resourceLink}>Multi-access Edge Computing</a>

              <a href={ETSI_PORTAL_URL} target="_blank" rel="noreferrer" style={styles.resourceLink}>ETSI MEC Portal</a>

              <a href={ETSI_FORGE_MEC_URL} target="_blank" rel="noreferrer" style={styles.resourceLink}>ETSI Forge API Specs</a>

              <a href={ETSI_MEC_OVERVIEW_PDF_URL} target="_blank" rel="noreferrer" style={styles.resourceLink}>MEC Slide Deck</a>

            </div>

          </GridCell>



        </Grid>

      </div>

    );

  }

}



const styles = {

  headlineGrid: {

    marginBottom: 10

  container: {

    width: '100%',

    backgroundColor: '#f8f9fa'

  },

  banner: {

    backgroundSize: 'cover',

  heroSection: {

    backgroundSize: 'cover', /* Reverted from 100% 100% since this is a seamless texture */

    backgroundRepeat: 'no-repeat',

    backgroundPosition: 'center',

    backgroundImage: 'url(../../../img/banner-mec-sandbox.png)',

    backgroundImage: 'linear-gradient(rgba(10, 37, 64, 0.7), rgba(10, 37, 64, 0.8)), url(../../../img/banner-mec-texture.png)',

    width: '100%',

    height: 400,

    display: 'flex',

    alignItems: 'center',

    justifyContent: 'center'

  },

  heroGrid: {

    width: '100%',

    height: 500

    maxWidth: 1200,

    alignItems: 'center'

  },

  heroContent: {

    textAlign: 'center',

    padding: '0 20px',

    display: 'flex',

    flexDirection: 'column',

    alignItems: 'center'

  },

  heroHeadline: {

    color: '#ffffff',

    fontSize: '3rem',

    fontWeight: 600,

    fontFamily: '"Roboto", "Helvetica Neue", sans-serif',

    textShadow: '0 2px 4px rgba(0,0,0,0.5)',

    marginBottom: 20,

    lineHeight: 1.2

  },

  heroSubHeadline: {

    color: '#e0e0e0',

    fontSize: '1.25rem',

    fontFamily: '"Roboto", "Helvetica Neue", sans-serif',

    maxWidth: 800,

    margin: '0 auto 32px auto',

    lineHeight: 1.6

  },

  ctaButton: {

    padding: '0 32px',

    height: 48,

    fontSize: '1rem',

    fontWeight: 'bold',

    letterSpacing: '0.5px'

  },

  mainGrid: {

    maxWidth: 1200,

    margin: '0 auto',

    padding: '0 20px 60px 20px'

  },

  alertBox: {

    display: 'flex',

    backgroundColor: '#ffebee',

    borderLeft: '4px solid #d32f2f',

    padding: '16px 24px',

    borderRadius: '4px',

    marginBottom: 40,

    boxShadow: '0 1px 3px rgba(0,0,0,0.1)'

  },

  alertIcon: {

    marginRight: 16,

    display: 'flex',

    alignItems: 'center'

  },

  alertText: {

    display: 'flex',

    flexDirection: 'column',

    textAlign: 'left'

  },

  featureCard: {

    padding: 32,

    height: '100%',

    display: 'flex',

    flexDirection: 'column',

    alignItems: 'center',

    textAlign: 'center',

    backgroundColor: '#ffffff',

    boxShadow: '0 4px 6px rgba(0,0,0,0.05)',

    border: '1px solid #eaeaea',

    borderRadius: 8,

    transition: 'transform 0.2s ease, box-shadow 0.2s ease',

    cursor: 'default'

  },

  cardIcon: {

    fontSize: 48,

    color: '#1976d2',

    marginBottom: 16

  },

  cardTitle: {

    fontWeight: 600,

    marginBottom: 12,

    color: '#333'

  },

  bannerText: {

    color: '#fff',

    textShadow: '2px 2px 3px #000'

  cardBody: {

    color: '#666',

    lineHeight: 1.6

  },

  headline: {

    padding: 10

  resourcesSection: {

    marginTop: 60,

    paddingTop: 40,

    borderTop: '1px solid #e0e0e0',

    textAlign: 'center'

  },

  paragraph: {

    marginBottom: 10

  resourcesGrid: {

    display: 'flex',

    justifyContent: 'center',

    gap: '24px',

    flexWrap: 'wrap'

  },

  title: {

    marginTop: 10,

    marginBottom: 20

  resourceLink: {

    display: 'inline-block',

    padding: '10px 20px',

    backgroundColor: '#ffffff',

    border: '1px solid #1976d2',

    color: '#1976d2',

    borderRadius: '24px',

    textDecoration: 'none',

    fontWeight: 500,

    transition: 'all 0.2s ease'

  }

};