Skip to content

2
2023-029
Commit ca4046fa authored by supundileepa00's avatar supundileepa00
Browse files
Options

feat : Implement skeleton for translate page

parent d08eb3ff
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1232 additions and 501 deletions
Project/Frontend/Web_App/package-lock.json
View file @ ca4046fa
This diff is collapsed.
Project/Frontend/Web_App/package.json
View file @ ca4046fa
...@@ -20,9 +20,9 @@ ...@@ -20,9 +20,9 @@
"dependencies": { "dependencies": {
"@auth0/auth0-spa-js": "^1.22.5", "@auth0/auth0-spa-js": "^1.22.5",
"@emotion/cache": "^11.10.3", "@emotion/cache": "^11.10.3",
"@emotion/react": "^11.10.4", "@emotion/react": "^11.11.0",
"@emotion/server": "^11.10.0", "@emotion/server": "^11.10.0",
"@emotion/styled": "^11.10.4", "@emotion/styled": "^11.11.0",
"@fullcalendar/common": "^5.11.3", "@fullcalendar/common": "^5.11.3",
"@fullcalendar/daygrid": "^5.11.3", "@fullcalendar/daygrid": "^5.11.3",
"@fullcalendar/interaction": "^5.11.3", "@fullcalendar/interaction": "^5.11.3",
...@@ -32,8 +32,9 @@ ...@@ -32,8 +32,9 @@
"@fullcalendar/timeline": "^5.11.3", "@fullcalendar/timeline": "^5.11.3",
"@hookform/resolvers": "^2.9.8", "@hookform/resolvers": "^2.9.8",
"@iconify/react": "^4.0.0", "@iconify/react": "^4.0.0",
"@mui/icons-material": "^5.11.16",
"@mui/lab": "^5.0.0-alpha.103", "@mui/lab": "^5.0.0-alpha.103",
"@mui/material": "^5.10.9", "@mui/material": "^5.13.0",
"@mui/x-data-grid": "^5.17.7", "@mui/x-data-grid": "^5.17.7",
"@mui/x-date-pickers": "^5.0.4", "@mui/x-date-pickers": "^5.0.4",
"@react-pdf/renderer": "^3.0.0", "@react-pdf/renderer": "^3.0.0",
......
Project/Frontend/Web_App/src/pages/translate-ssl.tsx 0 → 100644
View file @ ca4046fa
// next
import Head from 'next/head';
// @mui
import { Divider } from '@mui/material';
// layouts
import MainLayout from '../layouts/main';
// sections
import {
AboutTranslate,
AboutWhat,
AboutTeam,
AboutVision,
AboutTestimonials,
} from '../sections/slToText';
// ----------------------------------------------------------------------
AboutPage.getLayout = (page: React.ReactElement) => <MainLayout>{page}</MainLayout>;
// ----------------------------------------------------------------------
export default function AboutPage() {
return (
<>
<Head>
<title>Translate Sinhala Sign Language</title>
</Head>
<AboutTranslate />
</>
);
}
Project/Frontend/Web_App/src/routes/paths.ts
View file @ ca4046fa
...@@ -32,6 +32,8 @@ export const PATH_PAGE = { ...@@ -32,6 +32,8 @@ export const PATH_PAGE = {
page404: '/404', page404: '/404',
page500: '/500', page500: '/500',
components: '/components', components: '/components',
sslTranslate: '/translate-ssl',
translatePage: '/translate-page',
}; };
export const PATH_DASHBOARD = { export const PATH_DASHBOARD = {
......
Project/Frontend/Web_App/src/sections/slToText/AboutTeam.tsx 0 → 100644
View file @ ca4046fa
import { m } from 'framer-motion';
import { useRef } from 'react';
// @mui
import { useTheme, alpha } from '@mui/material/styles';
import { Box, Stack, Card, Button, Container, Typography, IconButton } from '@mui/material';
// _mock_
import { _carouselsMembers, _socials } from '../../_mock/arrays';
// components
import Image from '../../components/image';
import Iconify from '../../components/iconify';
import Carousel, { CarouselArrows } from '../../components/carousel';
import { MotionViewport, varFade } from '../../components/animate';
// ----------------------------------------------------------------------
export default function AboutTeam() {
const carouselRef = useRef<Carousel>(null);
const theme = useTheme();
const carouselSettings = {
infinite: false,
arrows: false,
slidesToShow: 4,
rtl: Boolean(theme.direction === 'rtl'),
responsive: [
{
breakpoint: 1279,
settings: { slidesToShow: 3 },
},
{
breakpoint: 959,
settings: { slidesToShow: 2 },
},
{
breakpoint: 600,
settings: { slidesToShow: 1 },
},
],
};
const handlePrev = () => {
carouselRef.current?.slickPrev();
};
const handleNext = () => {
carouselRef.current?.slickNext();
};
return (
<Container component={MotionViewport} sx={{ pb: 10, textAlign: 'center' }}>
<m.div variants={varFade().inDown}>
<Typography component="p" variant="overline" sx={{ color: 'text.disabled' }}>
Dream team
</Typography>
</m.div>
<m.div variants={varFade().inUp}>
<Typography variant="h2" sx={{ my: 3 }}>
Great team is the key
</Typography>
</m.div>
<m.div variants={varFade().inUp}>
<Typography
sx={{
mx: 'auto',
maxWidth: 640,
color: 'text.secondary',
}}
>
Minimal will provide you support if you have any problems, our support team will reply
within a day and we also have detailed documentation.
</Typography>
</m.div>
<Box sx={{ position: 'relative' }}>
<CarouselArrows
filled
shape="rounded"
onNext={handleNext}
onPrevious={handlePrev}
leftButtonProps={{
sx: {
left: 24,
...(_carouselsMembers.length < 5 && { display: 'none' }),
},
}}
rightButtonProps={{
sx: {
right: 24,
...(_carouselsMembers.length < 5 && { display: 'none' }),
},
}}
>
<Carousel ref={carouselRef} {...carouselSettings}>
{_carouselsMembers.map((member) => (
<Box
key={member.id}
component={m.div}
variants={varFade().in}
sx={{ px: 1.5, py: 10 }}
>
<MemberCard member={member} />
</Box>
))}
</Carousel>
</CarouselArrows>
</Box>
<Button
variant="outlined"
color="inherit"
size="large"
endIcon={<Iconify icon="ic:round-arrow-right-alt" width={24} />}
sx={{ mx: 'auto' }}
>
View all team members
</Button>
</Container>
);
}
// ----------------------------------------------------------------------
type MemberCardProps = {
member: {
name: string;
role: string | undefined;
avatar: string;
};
};
function MemberCard({ member }: MemberCardProps) {
const { name, role, avatar } = member;
return (
<Card key={name}>
<Typography variant="subtitle1" sx={{ mt: 2, mb: 0.5 }}>
{name}
</Typography>
<Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
{role}
</Typography>
<Box sx={{ px: 1 }}>
<Image alt={name} src={avatar} ratio="1/1" sx={{ borderRadius: 2 }} />
</Box>
<Stack direction="row" alignItems="center" justifyContent="center" sx={{ p: 2 }}>
{_socials.map((social) => (
<IconButton
key={social.name}
sx={{
color: social.color,
'&:hover': {
bgcolor: alpha(social.color, 0.08),
},
}}
>
<Iconify icon={social.icon} />
</IconButton>
))}
</Stack>
</Card>
);
}
Project/Frontend/Web_App/src/sections/slToText/AboutTestimonials.tsx 0 → 100644
View file @ ca4046fa
import { m } from 'framer-motion';
// @mui
import { alpha, styled, useTheme } from '@mui/material/styles';
import { Box, Grid, Link, Paper, Rating, Container, Typography } from '@mui/material';
// hooks
import useResponsive from '../../hooks/useResponsive';
// utils
import { bgBlur, bgGradient } from '../../utils/cssStyles';
import { fDate } from '../../utils/formatTime';
// components
import Iconify from '../../components/iconify';
import { MotionViewport, varFade } from '../../components/animate';
// ----------------------------------------------------------------------
const TESTIMONIALS = [
{
name: 'Jenny Wilson',
rating: 5,
dateCreate: new Date(),
content: `Excellent Work! Thanks a lot!`,
},
{
name: 'Cody Fisher',
rating: 5,
dateCreate: new Date(),
content: `It's a very good dashboard and we are really liking the product . We've done some things, like migrate to TS and implementing a react useContext api, to fit our job methodology but the product is one of the best in terms of design and application architecture. The team did a really good job.`,
},
{
name: 'Marvin McKinney',
rating: 5,
dateCreate: new Date(),
content: `Customer support is realy fast and helpful the desgin of this theme is looks amazing also the code is very clean and readble realy good job !`,
},
{
name: 'Darrell Steward',
rating: 5,
dateCreate: new Date(),
content: `Amazing, really good code quality and gives you a lot of examples for implementations.`,
},
{
name: 'Jacob Jones',
rating: 5,
dateCreate: new Date(),
content: `Got a few questions after purchasing the product. The owner responded very fast and very helpfull. Overall the code is excellent and works very good. 5/5 stars!`,
},
{
name: 'Bessie Cooper',
rating: 5,
dateCreate: new Date(),
content: `CEO of Codealy.io here. We’ve built a developer assessment platform that makes sense - tasks are based on git repositories and run in virtual machines. We automate the pain points - storing candidates code, running it and sharing test results with the whole team, remotely. Bought this template as we need to provide an awesome dashboard for our early customers. I am super happy with purchase. The code is just as good as the design. Thanks!`,
},
];
const StyledRoot = styled('div')(({ theme }) => ({
...bgGradient({
color: alpha(theme.palette.grey[900], 0.8),
imgUrl: '/assets/images/about/testimonials.jpg',
}),
textAlign: 'center',
padding: theme.spacing(10, 0),
[theme.breakpoints.up('md')]: {
padding: 0,
height: 840,
textAlign: 'left',
overflow: 'hidden',
},
}));
// ----------------------------------------------------------------------
export default function AboutTestimonials() {
const isDesktop = useResponsive('up', 'md');
return (
<StyledRoot>
<Container component={MotionViewport} sx={{ position: 'relative', height: 1 }}>
<Grid
container
spacing={3}
alignItems="center"
justifyContent={{ xs: 'center', md: 'space-between' }}
sx={{ height: 1 }}
>
<Grid item xs={10} md={4}>
<Box sx={{ maxWidth: { md: 360 } }}>
<m.div variants={varFade().inUp}>
<Typography
component="p"
variant="overline"
sx={{ mb: 2, color: 'text.secondary' }}
>
Testimonials
</Typography>
</m.div>
<m.div variants={varFade().inUp}>
<Typography variant="h2" sx={{ mb: 3, color: 'common.white' }}>
Who love <br />
my work
</Typography>
</m.div>
<m.div variants={varFade().inUp}>
<Typography sx={{ color: 'common.white' }}>
Our goal is to create a product and service that you’re satisfied with and use it
every day. This is why we’re constantly working on our services to make it better
every day and really listen to what our users has to say.
</Typography>
</m.div>
{!isDesktop && (
<Box sx={{ mt: 3, display: 'flex', justifyContent: 'center' }}>
<m.div variants={varFade().inUp}>
<TestimonialLink />
</m.div>
</Box>
)}
</Box>
</Grid>
<Grid
item
xs={12}
md={7}
lg={6}
sx={{
right: { md: 24 },
position: { md: 'absolute' },
}}
>
<Grid container spacing={isDesktop ? 3 : 0} alignItems="center">
<Grid item xs={12} md={6}>
{TESTIMONIALS.slice(0, 3).map((testimonial) => (
<m.div key={testimonial.name} variants={varFade().inUp}>
<TestimonialCard testimonial={testimonial} />
</m.div>
))}
</Grid>
<Grid item xs={12} md={6}>
{TESTIMONIALS.slice(3, 6).map((testimonial) => (
<m.div key={testimonial.name} variants={varFade().inUp}>
<TestimonialCard testimonial={testimonial} />
</m.div>
))}
</Grid>
</Grid>
</Grid>
</Grid>
{isDesktop && (
<Box sx={{ bottom: 60, position: 'absolute' }}>
<m.div variants={varFade().inLeft}>
<TestimonialLink />
</m.div>
</Box>
)}
</Container>
</StyledRoot>
);
}
// ----------------------------------------------------------------------
type TestimonialCardProps = {
testimonial: {
name: string;
rating: number;
content: string;
dateCreate: Date;
};
};
function TestimonialCard({ testimonial }: TestimonialCardProps) {
const theme = useTheme();
const { name, rating, dateCreate, content } = testimonial;
return (
<Paper
sx={{
mt: 3,
p: 3,
color: 'common.white',
...bgBlur({
color: theme.palette.common.white,
opacity: 0.04,
}),
}}
>
<Typography variant="subtitle1" gutterBottom>
{name}
</Typography>
<Typography gutterBottom component="div" variant="caption" sx={{ color: 'grey.500' }}>
{fDate(dateCreate)}
</Typography>
<Rating value={rating} readOnly size="small" />
<Typography variant="body2" sx={{ mt: 1.5 }}>
{content}
</Typography>
</Paper>
);
}
// ----------------------------------------------------------------------
function TestimonialLink() {
return (
<Link href="#" variant="subtitle2" sx={{ display: 'flex', alignItems: 'center' }}>
Read more testimonials
<Iconify icon="ic:round-arrow-right-alt" sx={{ ml: 1 }} />
</Link>
);
}
Project/Frontend/Web_App/src/sections/slToText/AboutTranslate.tsx 0 → 100644
View file @ ca4046fa
import { m } from 'framer-motion';
import NextLink from 'next/link';
// @mui
import { styled } from '@mui/material/styles';
import { Stack, Container, Typography, Button } from '@mui/material';
// components
import { MotionContainer, TextAnimate, varFade } from '../../components/animate';
import { PATH_AUTH, PATH_PAGE } from 'src/routes/paths';
// ----------------------------------------------------------------------
const StyledRoot = styled('div')(({ theme }) => ({
position: 'relative',
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundImage: 'url(/assets/background/overlay_1.svg), url(/assets/images/about/hero.jpg)',
padding: theme.spacing(10, 0),
[theme.breakpoints.up('md')]: {
height: 560,
padding: 0,
},
}));
const StyledContent = styled('div')(({ theme }) => ({
textAlign: 'center',
[theme.breakpoints.up('md')]: {
bottom: 80,
textAlign: 'left',
position: 'absolute',
},
}));
// ----------------------------------------------------------------------
export default function AboutHero() {
return (
<StyledRoot>
<Container component={MotionContainer}>
<StyledContent>
<TextAnimate
text="Translate"
sx={{
color: 'primary.main',
}}
variants={varFade().inRight}
/>
<br />
<Stack spacing={2} display="inline-flex" direction="row" sx={{ color: 'common.white' }}>
<TextAnimate text="Sign" />
<TextAnimate text="Language" />
</Stack>
<m.div variants={varFade().inRight}>
<Typography
variant="h4"
sx={{
mt: 5,
color: 'common.white',
fontWeight: 'fontWeightMedium',
}}
>
You can upload a video containing Sinhala Sign Language &
<br />
convert into text.
</Typography>
</m.div>
<m.div variants={varFade().inRight}>
<NextLink href={PATH_PAGE.translatePage} passHref>
<Button
variant="contained"
sx={{
mt: 5,
}}
>
Start Translation
</Button>
</NextLink>
</m.div>
</StyledContent>
</Container>
</StyledRoot>
);
}
Project/Frontend/Web_App/src/sections/slToText/AboutVision.tsx 0 → 100644
View file @ ca4046fa
import { m } from 'framer-motion';
// @mui
import { Box, Container, Typography, Stack } from '@mui/material';
// components
import Image from '../../components/image';
import { MotionViewport, varFade } from '../../components/animate';
// ----------------------------------------------------------------------
export default function AboutVision() {
return (
<Container component={MotionViewport} sx={{ mt: 10 }}>
<Box
sx={{
mb: 10,
borderRadius: 2,
overflow: 'hidden',
position: 'relative',
}}
>
<Image src="/assets/images/about/vision.jpg" alt="about-vision" />
<Stack
direction="row"
flexWrap="wrap"
alignItems="center"
justifyContent="center"
sx={{
bottom: { xs: 24, md: 40 },
width: 1,
opacity: 0.48,
position: 'absolute',
}}
>
{['ibm', 'lya', 'spotify', 'netflix', 'hbo', 'amazon'].map((logo) => (
<m.div key={logo} variants={varFade().in}>
<Image
alt={logo}
src={`/assets/icons/brands/ic_brand_${logo}.svg`}
sx={{
m: { xs: 1.5, md: 2.5 },
height: { xs: 24, md: 40 },
}}
/>
</m.div>
))}
</Stack>
</Box>
<m.div variants={varFade().inUp}>
<Typography variant="h3" sx={{ textAlign: 'center', maxWidth: 800, mx: 'auto' }}>
Our vision offering the best product nulla vehicula tortor scelerisque ultrices malesuada.
</Typography>
</m.div>
</Container>
);
}
Project/Frontend/Web_App/src/sections/slToText/AboutWhat.tsx 0 → 100644
View file @ ca4046fa
import { m } from 'framer-motion';
// @mui
import { alpha, useTheme, styled } from '@mui/material/styles';
import { Box, Grid, Button, Container, Typography, LinearProgress } from '@mui/material';
// hooks
import useResponsive from '../../hooks/useResponsive';
// utils
import { fPercent } from '../../utils/formatNumber';
// _mock_
import { _skills } from '../../_mock/arrays';
// components
import Image from '../../components/image';
import Iconify from '../../components/iconify';
import { MotionViewport, varFade } from '../../components/animate';
// ----------------------------------------------------------------------
const StyledRoot = styled('div')(({ theme }) => ({
textAlign: 'center',
paddingTop: theme.spacing(20),
paddingBottom: theme.spacing(10),
[theme.breakpoints.up('md')]: {
textAlign: 'left',
},
}));
// ----------------------------------------------------------------------
export default function AboutWhat() {
const theme = useTheme();
const isDesktop = useResponsive('up', 'md');
const isLight = theme.palette.mode === 'light';
const shadow = `-40px 40px 80px ${alpha(
isLight ? theme.palette.grey[500] : theme.palette.common.black,
0.48
)}`;
return (
<StyledRoot>
<Container component={MotionViewport}>
<Grid container spacing={3}>
{isDesktop && (
<Grid item xs={12} md={6} lg={7} sx={{ pr: { md: 7 } }}>
<Grid container spacing={3} alignItems="flex-end">
<Grid item xs={6}>
<m.div variants={varFade().inUp}>
<Image
alt="our office 1"
src="/assets/images/about/what_1.jpg"
ratio="3/4"
sx={{
borderRadius: 2,
boxShadow: shadow,
}}
/>
</m.div>
</Grid>
<Grid item xs={6}>
<m.div variants={varFade().inUp}>
<Image
alt="our office 2"
src="/assets/images/about/what_2.jpg"
ratio="1/1"
sx={{ borderRadius: 2 }}
/>
</m.div>
</Grid>
</Grid>
</Grid>
)}
<Grid item xs={12} md={6} lg={5}>
<m.div variants={varFade().inRight}>
<Typography variant="h2" sx={{ mb: 3 }}>
What is minimal?
</Typography>
</m.div>
<m.div variants={varFade().inRight}>
<Typography
sx={{
color: (theme) =>
theme.palette.mode === 'light' ? 'text.secondary' : 'common.white',
}}
>
Our theme is the most advanced and user-friendly theme you will find on the market,
we have documentation and video to help set your site really easily, pre-installed
demos you can import in one click and everything from the theme options to page
content can be edited from the front-end. This is the theme you are looking for.
</Typography>
</m.div>
<Box sx={{ my: 5 }}>
{_skills.map((progress) => (
<m.div key={progress.label} variants={varFade().inRight}>
<ProgressItem progress={progress} />
</m.div>
))}
</Box>
<m.div variants={varFade().inRight}>
<Button
variant="outlined"
color="inherit"
size="large"
endIcon={<Iconify icon="ic:round-arrow-right-alt" width={24} />}
>
Check out our work
</Button>
</m.div>
</Grid>
</Grid>
</Container>
</StyledRoot>
);
}
// ----------------------------------------------------------------------
type ProgressItemProps = {
progress: {
label: string;
value: number;
};
};
function ProgressItem({ progress }: ProgressItemProps) {
const { label, value } = progress;
return (
<Box sx={{ mt: 3 }}>
<Box sx={{ mb: 1.5, display: 'flex', alignItems: 'center' }}>
<Typography variant="subtitle2">{label}&nbsp;-&nbsp;</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{fPercent(value)}
</Typography>
</Box>
<LinearProgress
variant="determinate"
value={value}
sx={{
'& .MuiLinearProgress-bar': { bgcolor: 'grey.700' },
'&.MuiLinearProgress-determinate': { bgcolor: 'divider' },
}}
/>
</Box>
);
}
Project/Frontend/Web_App/src/sections/slToText/index.ts 0 → 100644
View file @ ca4046fa
export { default as AboutTranslate } from './AboutTranslate';
export { default as AboutWhat } from './AboutWhat';
export { default as AboutTeam } from './AboutTeam';
export { default as AboutVision } from './AboutVision';
export { default as AboutTestimonials } from './AboutTestimonials';
Project/Frontend/Web_App/yarn.lock
View file @ ca4046fa
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment