Intilize

.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_STRAPI_API_URL=http://localhost:1337

.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-img-element": "off",
+    "react/jsx-no-target-blank": "off",
+    "react/no-unescaped-entities": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/prefer-as-const": "off"
+  }
+}

README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

api.ts

@@ -0,0 +1,32 @@
+import { Post } from "./types/post";
+import { TeamMember } from "./types/team-member";
+
+const baseAPI = `http://localhost:1337/api`;
+
+export async function getTeam(): Promise<TeamMember[]> {
+  const response = await fetch(`${baseAPI}/members?populate=*`);
+  const data = await response.json();
+  return data.data;
+}
+
+export async function getTeamMember(username: string): Promise<TeamMember> {
+  const response = await fetch(
+    `${baseAPI}/members?filters[username]=${username}&[populate]=*`
+  );
+  const data = await response.json();
+  return data.data[0];
+}
+
+export async function getPostBySlug(slug: string): Promise<Post> {
+  const response = await fetch(
+    `${baseAPI}/posts?filters[slug]=${slug}&[populate]=*`
+  );
+  const data = await response.json();
+  return data.data[0];
+}
+
+export async function getPosts() {
+  const response = await fetch(`${baseAPI}/posts?populate=*`);
+  const data = await response.json();
+  return data.data;
+}

components/button-toggle.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable react/no-unknown-property */
+import DarkModeIcon from "@mui/icons-material/DarkMode";
+import LightModeIcon from "@mui/icons-material/LightMode";
+import { Button, css } from "@mui/material";
+import { useTheme } from "next-themes";
+import { FC, useEffect, useState } from "react";
+const ButtonToggle: FC<{}> = () => {
+  const { theme, resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  // When mounted on client, now we can show the UI
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted)
+    return (
+      <div
+        css={css`
+          min-height: 162.38px;
+        `}
+      ></div>
+    );
+
+  return (
+    <Button
+      size="large"
+      variant="contained"
+      sx={{ padding: "1rem" }}
+      endIcon={resolvedTheme === "light" ? <DarkModeIcon /> : <LightModeIcon />}
+      onClick={() => setTheme(resolvedTheme === "light" ? "dark" : "light")}
+    >
+      Switch to {resolvedTheme === "light" ? "Dark" : "Light"} Mode
+    </Button>
+  );
+};
+
+export default ButtonToggle;

components/custom-link.tsx

@@ -0,0 +1,33 @@
+import { ListItem, Typography } from "@mui/material";
+import Link from "next/link";
+
+interface CustomLinkProps {
+  children: any;
+  href: string;
+  variant?: any;
+  color?: string;
+  fontWeight?: string;
+}
+
+export const CustomLink: React.FC<CustomLinkProps> = ({
+  children,
+  href,
+  variant,
+  color,
+  fontWeight,
+}) => {
+  return (
+    <ListItem>
+      <Link href={href}>
+        <Typography
+          variant={variant ? variant : "body2"}
+          color={color ? color : "primary.A100"}
+          fontWeight={fontWeight ? fontWeight : "600"}
+          className="nav-link"
+        >
+          {children}
+        </Typography>
+      </Link>
+    </ListItem>
+  );
+};

components/footer.tsx

@@ -0,0 +1,85 @@
+import {
+  Container,
+  Divider,
+  Grid,
+  List,
+  ListItem,
+  Paper,
+  Typography,
+} from "@mui/material";
+import { Box } from "@mui/system";
+import { CustomLink } from "./custom-link";
+import { SocialContact } from "./social-contact";
+
+export const Footer = () => {
+  return (
+    <Container
+      sx={{
+        marginTop: "2rem",
+        marginBottom: "1rem",
+      }}
+    >
+      <Divider />
+      <Paper sx={{ paddingTop: "2rem" }}>
+        <Grid container spacing={2} flexWrap="wrap-reverse">
+          <Grid item md={6}>
+            <Box paddingY="1rem">
+              <Typography component="image">
+                <img src="/sos-logo.png" width="150px" alt="sos" />
+              </Typography>
+              <Typography
+                variant="h4"
+                color="primary.A100"
+                fontWeight="500"
+                paddingY="1rem"
+              >
+                We are a culture that we want to spread in regions that are not
+                interested in participating in open source software.
+              </Typography>
+            </Box>
+            <Box marginLeft="-0.4rem">
+              <SocialContact />
+            </Box>
+
+            <Box paddingTop="2rem">
+              <Typography variant="body2" color="primary.A100">
+                All rights reserved &copy; Syrian Open Source{" "}
+                {new Date().getFullYear()}
+              </Typography>
+            </Box>
+          </Grid>
+          <Grid item md={3} xs={12}>
+            <Box fontFamily="Nunito">
+              <List>
+                <ListItem>
+                  <Typography variant="h4" fontWeight="600">
+                    General
+                  </Typography>
+                </ListItem>
+                <CustomLink href="/transparency">Mission</CustomLink>
+                <CustomLink href="/transparency">Privacy policy</CustomLink>
+                <CustomLink href="/transparency">Terms of use</CustomLink>
+              </List>
+            </Box>
+          </Grid>
+          <Grid item md={3} xs={12}>
+            <Box fontFamily="Nunito">
+              <List>
+                <ListItem>
+                  <Typography variant="h4" fontWeight="600">
+                    Sitemap
+                  </Typography>
+                </ListItem>
+                <CustomLink href="/">Home</CustomLink>
+                <CustomLink href="/blog">Blog</CustomLink>
+                <CustomLink href="/about">About</CustomLink>
+                <CustomLink href="/team">Team</CustomLink>
+                <CustomLink href="/sitemap.xml">Sitemap.xml</CustomLink>
+              </List>
+            </Box>
+          </Grid>
+        </Grid>
+      </Paper>
+    </Container>
+  );
+};