Add files via upload

app/_components/about/appbar.jsx

@@ -0,0 +1,99 @@
+"use client"
+import * as React from 'react';
+import Appbar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import Menu from '@mui/material/Menu';
+import MenuIcon from '@mui/icons-material/Menu';
+import Container from '@mui/material/Container';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
+import MenuItem from '@mui/material/MenuItem';
+import AdbIcon from '@mui/icons-material/Adb';
+
+const pages = [ 'How Code Press Works','Creators','Products', 'Blog'];
+const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
+
+function ResponsiveAppBar() {
+  const [anchorElNav, setAnchorElNav] = React.useState(null);
+  const [anchorElUser, setAnchorElUser] = React.useState(null);
+
+  const handleOpenNavMenu = (event) => {
+    setAnchorElNav(event.currentTarget);
+  };
+  const handleOpenUserMenu = (event) => {
+    setAnchorElUser(event.currentTarget);
+  };
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null);
+  };
+
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
+
+  return (
+    <Appbar position="fixed">
+      <Container maxWidth="xl">
+        <Toolbar disableGutters>
+
+          <Typography
+            variant="h6"
+            noWrap
+            component="a"
+            href="/"
+            sx={{
+              mr: 2,
+              display: { xs: 'none', md: 'flex' },
+              fontFamily: 'monospace',
+              fontWeight: 700,
+              letterSpacing: '.3rem',
+              color: 'inherit',
+              textDecoration: 'none',
+            }}
+          >
+   <img src="/codnapwhite.svg" alt="" height={50} width={50} />
+          </Typography>
+
+
+          <Typography
+            variant="h5"
+            noWrap
+            component="a"
+            href=""
+            sx={{
+              mr: 2,
+              display: { xs: 'flex', md: 'none' },
+              flexGrow: 1,
+              fontFamily: 'monospace',
+              fontWeight: 700,
+              letterSpacing: '.3rem',
+              color: 'inherit',
+              textDecoration: 'none',
+            }}
+          >
+            LOGO
+          </Typography>
+          <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
+            {pages.map((page) => (
+              <Button
+                key={page}
+                onClick={handleCloseNavMenu}
+                sx={{ my: 2, color: 'white', display: 'block' }}
+              >
+                {page}
+              </Button>
+            ))}
+          </Box>
+
+
+        </Toolbar>
+      </Container>
+    </Appbar>
+  );
+}
+export default ResponsiveAppBar;

app/_components/about/card.jsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Unstable_Grid2';
+
+export default function ImgMediaCard(props) {
+  return (
+    <span >
+
+    <Card sx={{ maxWidth: 345 }}>
+      <CardMedia
+        component="img"
+        alt="green iguana"
+        height="140"
+        width="345"
+        image={props.i}
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h6" component="div">
+          {props.t}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+        {props.tt}
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <Button size="small">Share</Button>
+        <Button size="small">Learn More</Button>
+      </CardActions>
+    </Card>
+
+
+    </span>
+  );
+}

app/_components/about/cardgrid.jsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import Card from './card'
+function CardGrid() {
+    return(
+        <>
+        {
+          messages.map(({ i,t,tt}) => (
+
+          <> 
+
+          <div className='aboutgrid'>
+
+              <Card i={i} t={t} tt={tt}
+              />
+</div>
+
+          </>
+
+        ))
+      }
+
+    </>
+    )
+
+}
+export default CardGrid
+
+const messages = [
+    {
+
+
+      i: 'https://abnresource.com/wp-content/uploads/2021/05/We-are-carbon-positive-LinkedIn.png',
+      t: 'We are carbon neutral',
+      tt: 'We are the worlds 1st e-company to achive the title of 100% carbon neutral.',
+
+    },
+
+
+    {
+        i: 'https://assets.codepen.io/14089/internal/screenshots/pens/ZEBYEOm.default.png?fit=cover&format=auto&ha=true&height=540&quality=75&v=2&version=1613843076&width=960',
+        t: 'Right to Code',
+        tt: 'Through our Nap Learning program we are helping millions to Learn to code.',
+
+    },
+
+    {
+        i: 'https://media.istockphoto.com/photos/variety-of-raw-black-angus-prime-meat-steaks-picture-id923692030?k=20&m=923692030&s=612x612&w=0&h=k-b2wtmHwBbpmSM74dN0gZzRD9oEwBUYiXdlWYD6mHY=',
+        t: 'No Meat',
+        tt: 'Since meat contribute in 15% in Global carbon footprint we are no longer providing meat to our employees.',
+
+    },
+    {
+        i: 'https://c1.wallpaperflare.com/preview/41/972/836/people-work-hands-business.jpg',
+        t: 'We hire without degree',
+        tt: 'We belive degree or any kind of certificate is not necessary to get a job.',
+
+    },
+    {
+        i: 'https://ocdn.eu/images/pulscms/YmI7MDA_/dae186791f35a41f702b11fe648b79b4.jpg',
+        t: 'Unemployment',
+        tt: 'Today a large quator of worlds population suffers from Unemployment and we are commeted to solve it.',
+
+    },
+    {
+        i: 'https://static-cse.canva.com/blob/558554/studyingtips1.4762374a.jpg',
+        t: 'Get scholarship (NSAT)',
+        tt: 'NSAT (NAP SCHOLARSHIP ADMISSION TEST)',
+
+    },
+
+
+
+   ];

app/_components/about/images.jsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import ImageList from '@mui/material/ImageList';
+import ImageListItem from '@mui/material/ImageListItem';
+
+function srcset(image, size, rows = 1, cols = 1) {
+  return {
+    src: `${image}?w=${size * cols}&h=${size * rows}&fit=crop&auto=format`,
+    srcSet: `${image}?w=${size * cols}&h=${
+      size * rows
+    }&fit=crop&auto=format&dpr=2 2x`,
+  };
+}
+
+export default function QuiltedImageList() {
+  return (
+    <ImageList style={{margin:"1rem"}}
+      // sx={{ width: 500, height: 450 }}
+      variant="quilted"
+      cols={4}
+      rowHeight={121}
+    >
+      {itemData.map((item) => (
+        <ImageListItem key={item.img} cols={item.cols || 1} rows={item.rows || 1}>
+          <img
+            {...srcset(item.img, 121, item.rows, item.cols)}
+            alt={item.title}
+            loading="lazy"
+          />
+        </ImageListItem>
+      ))}
+    </ImageList>
+  );
+}
+
+const itemData = [
+  {
+    img: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80',
+    title: 'Earth',
+    rows: 2,
+    cols: 2,
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80',
+    title: 'Electronics',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1557853197-aefb550b6fdc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80',
+    title: 'Code',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1517420704952-d9f39e95b43e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80',
+    title: 'Electronicswire',
+    cols: 2,
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1576141546153-3e04370b5ff7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=924&q=80',
+    title: 'Chip',
+    cols: 2,
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1593349480506-8433634cdcbe?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80',
+    title: 'sata',
+    author: '@arwinneil',
+    rows: 2,
+    cols: 2,
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1633957897986-70e83293f3ff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=393&q=80',
+    title: 'aired',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1543967708-2418d2e7748c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80',
+    title: 'Fern',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1667487935540-f59515f6c7fd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=981&q=80',
+    title: 'Mushrooms',
+    rows: 2,
+    cols: 2,
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1642229407991-e28d009cb968?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=773&q=80',
+    title: 'Tomato basil',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1651340765216-ba02df201308?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80',
+    title: 'Sea star',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1563207153-f403bf289096?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80',
+    title: 'Bike',
+    cols: 2,
+  },
+];

app/_components/about/text.jsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Unstable_Grid2';
+export default function Types() {
+  return (
+
+          <Grid container rowSpacing={0} columnSpacing={20}   alignItems="center"  style={{margin:'1rem'}}
+  justifyContent="center">
+        <Grid xs={12}>
+      <Typography variant="h1" gutterBottom>
+      About FossTube
+      </Typography>
+      </Grid>
+      <Grid xs={12}>
+      <Typography variant="h2" gutterBottom>
+      Our mission is to give everyone a Power to Code The World.
+      </Typography>
+      </Grid>
+      <Grid xs={12}>
+      <Typography variant="h2" gutterBottom>
+      We believe that everyone deserves to have a Open Source,
+       and that the world is a better place when we contribute to it and make it accessible for Everyone.
+      </Typography>
+      </Grid>
+
+      </Grid>
+
+  );
+}