orchetera/template/src/pages/LandingPage.jsx

Welcome to **Orchetera** — your orchestration tool to kickstart Firebase-ready projects with ease!

import {
  Box,
  Button,
  Collapse,
  Container,
  CssBaseline,
  Typography,
  useTheme,
} from "@mui/material";
import Navbar from "./Components/Navbar";
import { useState } from "react";
import OverlayShade from "./Artefacts/OverlayShade";
import { KeyboardDoubleArrowDownOutlined } from "@mui/icons-material";
import GradientContainer from "./Components/GradientContainer";

const LandingPage = () => {
  const theme = useTheme();
  const [showMore, setShowMore] = useState(false);

  const handleShowMore = () => {
    setShowMore(true);
  };

  return (
    <>
      <CssBaseline />
      <GradientContainer>
        <Navbar />
        <OverlayShade
          borderRadius={8}
          rotation={60}
          opacity={0.2}
          top={-40}
          left={-135}
          width={400}
          height={400}
          transformOrigin="center"
        />
        <OverlayShade
          borderRadius={8}
          rotation={60}
          opacity={0.2}
          bottom={-40}
          right={-135}
          width={400}
          height={400}
          transformOrigin="right"
        />
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "left",
            padding: theme.spacing(10, 0),
            height: "calc(100vh - 64px)",
          }}
        >
          <Container
            maxWidth="md"
            sx={{
              textAlign: "start",
            }}
          >
            <Typography
              variant="h1"
              component="h1"
              style={{
                fontFamily: "'Roboto Flex', sans-serif",
                fontWeight: 200,
              }}
            >
              Built for Speed,
            </Typography>
            <Typography
              variant="h1"
              component="h1"
              gutterBottom
              sx={{ fontFamily: "'Roboto Flex', sans-serif", fontWeight: 700 }}
            >
              Designed for You.
            </Typography>
            <Typography
              variant="body1"
              component="p"
              gutterBottom
              sx={{ mb: 4 }}
            >
              <strong>Orchetera</strong> Template is a comprehensive and
              customizable starter template for ReactJS projects integrated with
              Firebase, designed to accelerate your development process. It
              comes packed with essential features like authentication (login,
              register, session), CRUD operations, a responsive landing page,
              and an admin dashboard—all pre-configured and ready to use. The
              template also includes best practices such as semantic versioning,
              CI/CD pipelines for automatic deployment to Firebase Hosting, and
              a well-organized folder structure for easy customization. Whether
              you're building a SaaS platform, an e-commerce site, or a content
              management system, this template saves you countless hours by
              eliminating repetitive setup tasks.
            </Typography>

            <Collapse in={showMore}>
              <Typography
                variant="body1"
                component="p"
                gutterBottom
                sx={{ mb: 4 }}
              >
                With <strong>Orchetera</strong>, you can jump straight into
                building your unique features instead of worrying about
                boilerplate code. The template is designed for scalability, with
                modular components, Firebase Firestore for real-time data, and
                Firebase Authentication for secure user management. It also
                supports environment variables for configuration, ensuring
                seamless transitions between development and production. Perfect
                for solo developers or teams, this template provides a solid
                foundation for any Firebase-backed React project, allowing you
                to focus on customization and innovation while maintaining a
                professional and maintainable codebase.
              </Typography>
            </Collapse>

            {!showMore && (
              <Box
                sx={{
                  textAlign: "center",
                }}
              >
                <Button
                  className="animate__animated animate__fadeIn animate__slower animate__delay-1s animate__infinite"
                  onClick={handleShowMore}
                  variant="contained"
                  disableElevation
                  sx={{
                    fontWeight: 600,
                    backgroundColor: "transparent",
                    color: "white",
                    marginTop: 2,
                  }}
                >
                  <KeyboardDoubleArrowDownOutlined
                    sx={{
                      fontSize: 50,
                      opacity: 0.5,
                    }}
                  />
                </Button>
              </Box>
            )}
          </Container>
        </Box>
      </GradientContainer>
    </>
  );
};

export default LandingPage;