GH-121 Add skeleton for team and projects page. (#121)

* Add skeleton.

Signed-off-by: Martin Sulikowski <[email protected]>

* Update components/projects/Projects.tsx

Co-authored-by: Michał Wojtas <[email protected]>

---------

Signed-off-by: Martin Sulikowski <[email protected]>
Co-authored-by: Michał Wojtas <[email protected]>

Author: vLuckyyy

components/projects/Projects.tsx

@@ -3,6 +3,7 @@
 import React, { useEffect, useState } from "react";
 import SectionTitle from "@/components/SectionTitle";
 import ProjectItem from "@/components/projects/ProjectItem";
+import { motion } from "framer-motion";
 
 interface Project {
   id: string;
@@ -22,6 +23,7 @@ export default function Projects() {
   const [projects, setProjects] = useState<Project[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
+  const [imageError, setImageError] = useState<boolean>(false);
 
   useEffect(() => {
     const fetchProjects = async () => {
@@ -61,8 +63,24 @@ export default function Projects() {
     return (
       <section id="projects">
         <div className="mx-auto max-w-screen-xl px-4 py-16">
-          <div className="flex h-64 items-center justify-center">
-            <div className="text-xl">Loading projects...</div>
+          <SectionTitle
+            title="Our project"
+            description="Below you will find a list of our projects."
+          />
+          <div className="lg:alternate mt-8 space-y-8 lg:mt-12">
+            {[...Array(3)].map((_, index) => (
+              <div key={index} className="animate-pulse">
+                <div className="flex flex-col lg:flex-row lg:items-center lg:space-x-8">
+                  <div className="h-64 w-full rounded-lg bg-gray-200 dark:bg-gray-700 lg:w-1/2"></div>
+                  <div className="mt-4 w-full lg:mt-0 lg:w-1/2">
+                    <div className="mb-4 h-8 w-3/4 rounded bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="mb-6 h-4 w-full rounded bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-4 w-full rounded bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="mt-8 h-10 w-40 rounded bg-gray-200 dark:bg-gray-700"></div>
+                  </div>
+                </div>
+              </div>
+            ))}
           </div>
         </div>
       </section>

components/team/Team.tsx

@@ -89,8 +89,22 @@ export default function Team() {
     return (
       <section id="team">
         <div className="mx-auto max-w-screen-xl px-4 py-16">
-          <div className="flex h-64 items-center justify-center">
-            <div className="text-xl">Loading team data...</div>
+          <SectionTitle
+            title="Our Team"
+            description="EternalCodeTeam is a dedicated group of creative programmers who work on unique open source projects."
+          />
+          <div className="mt-8 grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+            {[...Array(8)].map((_, index) => (
+              <div key={index} className="animate-pulse">
+                <div className="mx-auto mb-4 h-36 w-36 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                <div className="mb-2 h-6 w-3/4 rounded bg-gray-200 dark:bg-gray-700 mx-auto"></div>
+                <div className="mb-4 h-4 w-1/2 rounded bg-gray-200 dark:bg-gray-700 mx-auto"></div>
+                <div className="mt-4 flex justify-center space-x-4">
+                  <div className="h-6 w-6 rounded bg-gray-200 dark:bg-gray-700"></div>
+                  <div className="h-6 w-6 rounded bg-gray-200 dark:bg-gray-700"></div>
+                </div>
+              </div>
+            ))}
           </div>
         </div>
       </section>