askcomets/Header.js at main · kushb007/askcomets · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import React, { useEffect, useState} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { AppBar, Collapse, IconButton, Toolbar, Button} from '@material-ui/core';
import SortIcon from '@material-ui/icons/Sort';
import { Link } from 'react-router-dom';
//import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
    fontFamily: 'Nunito',
  },
  appbar: {
    background: '#0E6655BF',
  },
  appbarWrapper: {
    width: '80%',
    margin: '0 auto',
  },
  appbarTitle:{
    flexGrow: '1',
  },
  icon: {
    color: `#fff`,
    fontSize: '2rem',
  },
  colorText: {
    color: '#FF5733',
  },
  container:{
    textAlign: 'center',
  },
  title: {
    color: '#FFF',
    fontSize: '4.5rem',
  },
  title2: {
    color: '#FFF',
    fontSize: '4rem',
  },
  container2:{
    textAlign: 'center',
  },
  goDown:{
    textAlign: 'center',
    color: '#FF5733',
    fontSize: "4rem",
  },
}));
export default function Header() {
  const classes = useStyles();
  const [checked,setChecked] = useState(false);
  useEffect(() => {
    setChecked(true);
  },[])
  return (
  <div className={classes.root}>
    <AppBar className={classes.appbar} elevation={0}>
      <Toolbar className={classes.appbarWrapper}>
      <h1 className={classes.appbarTitle}><span className={classes.colorText}>Ask</span>Comets.</h1>
      <IconButton>
        <SortIcon className={classes.icon} />
      </IconButton>
      </Toolbar>
    </AppBar>
    <Collapse in={checked}
    {...(checked ? { timeout: 1000 } : {})}
    collapsedHeight={50}>
    <div className={classes.container}>
      <h1 className={classes.title}>
        Welcome to <br /> <span className={classes.colorText}>Ask</span>Comets.
        <h1 className={classes.title2}>
        Your One Pit Stop <br /> For <span className={classes.colorText}>Comet</span> Help.
      </h1>
      </h1>
      </div>
      <div className={classes.container2}>
      <Button size ="large" variant="contained" href="/Forum">
  Click here to begin
</Button>
    </div>
    </Collapse>
  </div>)
  ;
}