added resources

attachments/02-nextjs-essentials/05-onwards-foodies-starting-project/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
+}

attachments/02-nextjs-essentials/05-onwards-foodies-starting-project/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

attachments/02-nextjs-essentials/05-onwards-foodies-starting-project/app/community/page.js

@@ -0,0 +1,40 @@
+import Image from 'next/image';
+
+import mealIcon from '@/assets/icons/meal.png';
+import communityIcon from '@/assets/icons/community.png';
+import eventsIcon from '@/assets/icons/events.png';
+import classes from './page.module.css';
+
+export default function CommunityPage() {
+  return (
+    <>
+      <header className={classes.header}>
+        <h1>
+          One shared passion: <span className={classes.highlight}>Food</span>
+        </h1>
+        <p>Join our community and share your favorite recipes!</p>
+      </header>
+      <main className={classes.main}>
+        <h2>Community Perks</h2>
+
+        <ul className={classes.perks}>
+          <li>
+            <Image src={mealIcon} alt="A delicious meal" />
+            <p>Share & discover recipes</p>
+          </li>
+          <li>
+            <Image src={communityIcon} alt="A crowd of people, cooking" />
+            <p>Find new friends & like-minded people</p>
+          </li>
+          <li>
+            <Image
+              src={eventsIcon}
+              alt="A crowd of people at a cooking event"
+            />
+            <p>Participate in exclusive events</p>
+          </li>
+        </ul>
+      </main>
+    </>
+  );
+}

attachments/02-nextjs-essentials/05-onwards-foodies-starting-project/app/community/page.module.css

@@ -0,0 +1,61 @@
+.header {
+    gap: 3rem;
+    margin: 3rem auto 5rem auto;
+    width: 90%;
+    max-width: 75rem;
+    color: #ddd6cb;
+    font-size: 1.5rem;
+    text-align: center;
+  }
+
+  .header h1 {
+    font-family: 'Montserrat', sans-serif;
+  }
+
+  .highlight {
+    background: linear-gradient(90deg, #f9572a, #ff8a05);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .main {
+    width: 90%;
+    max-width: 40rem;
+    margin: 0 auto;
+    text-align: center;
+  }
+
+  .main h2 {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 2rem;
+    margin-bottom: 3rem;
+    color: #ddd6cb;
+  }
+
+  .perks {
+    list-style: none;
+    margin: 3rem 0;
+    padding: 0;
+  }
+
+  .perks li {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
+  }
+
+  .perks img {
+    width: 8rem;
+    height: 8rem;
+    object-fit: contain;
+  }
+
+  .perks p {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin: 0;
+    color: #ddd6cb;
+  }

attachments/02-nextjs-essentials/05-onwards-foodies-starting-project/app/components/main-header/images/image-slideshow.js

@@ -0,0 +1,49 @@
+'use client';
+
+import { useEffect, useState } from "react";
+import Image from "next/image";
+
+import burgerImg from "@/assets/burger.jpg";
+import curryImg from "@/assets/curry.jpg";
+import dumplingsImg from "@/assets/dumplings.jpg";
+import macncheeseImg from "@/assets/macncheese.jpg";
+import pizzaImg from "@/assets/pizza.jpg";
+import schnitzelImg from "@/assets/schnitzel.jpg";
+import tomatoSaladImg from "@/assets/tomato-salad.jpg";
+
+import classes from "./image-slideshow.module.css";
+
+const images = [
+  { image: burgerImg, alt: "A delicious, juicy burger" },
+  { image: curryImg, alt: "A delicious, spicy curry" },
+  { image: dumplingsImg, alt: "Steamed dumplings" },
+  { image: macncheeseImg, alt: "Mac and cheese" },
+  { image: pizzaImg, alt: "A delicious pizza" },
+  { image: schnitzelImg, alt: "A delicious schnitzel" },
+  { image: tomatoSaladImg, alt: "A delicious tomato salad" },
+];
+
+export default function ImageSlideShow() {
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentImageIndex((prevIndex) =>
+        prevIndex < images.length - 1 ? prevIndex + 1 : 0
+      );
+    }, 5000);
+    return () => clearInterval(interval);
+  }, []);
+  return (
+    <div className={classes.slideshow}>
+      {images.map((image, index) => (
+        <Image
+          key={index}
+          src={image.image}
+          className={index === currentImageIndex ? classes.active : ""}
+          alt={image.alt}
+        />
+      ))}
+    </div>
+  );
+}

attachments/02-nextjs-essentials/05-onwards-foodies-starting-project/app/components/main-header/images/image-slideshow.module.css

@@ -0,0 +1,26 @@
+.slideshow {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
+  }
+
+  .slideshow img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    transform: scale(1.1) translateX(-1rem) rotate(-5deg);
+    transition: all 0.5s ease-in-out;
+  }
+
+  .slideshow .active {
+    z-index: 1;
+    opacity: 1;
+    transform: scale(1) translateX(0) rotate(0);
+  }

attachments/02-nextjs-essentials/05-onwards-foodies-starting-project/app/components/main-header/main-header-background.js

@@ -0,0 +1,26 @@
+import classes from './main-header-background.module.css';
+
+export default function MainHeaderBackground() {
+  return (
+    <div className={classes['header-background']}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
+        <defs>
+          <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop
+              offset="0%"
+              style={{ stopColor: "#59453c", stopOpacity: "1" }}
+            />
+            <stop
+              offset="100%"
+              style={{ stopColor: "#8f3a09", stopOpacity: "1" }}
+            />
+          </linearGradient>
+        </defs>
+        <path
+          fill="url(#gradient)"
+          d="M0,256L48,240C96,224,192,192,288,181.3C384,171,480,181,576,186.7C672,192,768,192,864,181.3C960,171,1056,149,1152,133.3C1248,117,1344,107,1392,101.3L1440,96L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"
+        ></path>
+      </svg>
+    </div>
+  );
+}

attachments/02-nextjs-essentials/05-onwards-foodies-starting-project/app/components/main-header/main-header-background.module.css

@@ -0,0 +1,14 @@
+.header-background {
+    position: absolute;
+    width: 100%;
+    height: 320px;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+
+.header-background  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }

attachments/02-nextjs-essentials/05-onwards-foodies-starting-project/app/components/main-header/main-header.js

@@ -0,0 +1,34 @@
+'use client';
+import Link from "next/link";
+import Image from "next/image";
+import logoImg from "@/assets/logo.png";
+import classes from "./main-header.module.css";
+import MainHeaderBackground from "./main-header-background";
+import { usePathname } from "next/navigation";
+
+
+export default function MainHeader() {
+  const path = usePathname();
+  console.log(path);
+  return (
+    <>
+      <MainHeaderBackground />
+      <header className={classes.header}>
+        <Link className={classes.logo} href="/">
+          <Image src={logoImg} alt="A plate with food on it" priority />
+          NextLevel Food
+        </Link>
+        <nav className={classes.nav}>
+          <ul>
+            <li>
+              <Link href="/meals" className={path.startsWith('/meals') ? classes.active : undefined}>Browse Meals</Link>
+            </li>
+            <li>
+              <Link href="/community" className={path.startsWith('/community') ? classes.active: undefined}>Foodies Community</Link>
+            </li>
+          </ul>
+        </nav>
+      </header>
+    </>
+  );
+}

attachments/02-nextjs-essentials/05-onwards-foodies-starting-project/app/components/main-header/main-header.module.css

@@ -0,0 +1,67 @@
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2rem 1rem;
+}
+
+@media (min-width: 768px) {
+  .header {
+    padding: 2rem 10%;
+  }
+}
+
+.nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 1.5rem;
+  /* font-family: 'Montserrat', sans-serif; */
+  font-size: 1.25rem;
+}
+
+.nav a {
+  text-decoration: none;
+  color: #ddd6cb;
+  font-weight: bold;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+}
+
+.nav a:hover,
+.nav a:active {
+  background: linear-gradient(90deg, #ff8a05, #f9b331);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0 0 18px rgba(248, 190, 42, 0.8);
+}
+
+.active {
+  background: linear-gradient(90deg, #ff8a05, #f9b331);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
+  text-decoration: none;
+  color: #ddd6cb;
+  font-weight: bold;
+  font-family: 'Montserrat', sans-serif;
+  letter-spacing: 0.15rem;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+}
+
+.logo img {
+  width: 5rem;
+  height: 5rem;
+  object-fit: contain;
+  filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.5));
+}