Githan/projects

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["projectdetail"]
+}

app/components/footer.tsx

@@ -4,7 +4,7 @@ import echoLogo from "../assets/echo-logo.png";
 export function Footer() {
   return (
     <footer className="bg-black text-white py-6 px-4 mt-auto z-50">
-      <div className="container mx-auto flex flex-col md:flex-row justify-between items-center">
+      <div className="container mx-auto grid grid-cols-1 md:grid-cols-3 items-center gap-6">
         <div className="text-center md:text-left">
           <p className="font-semibold">echo Consulting</p>
           <a className="text-sm underline" href="mailto:consulting@echo.uib.no">
@@ -13,7 +13,7 @@ export function Footer() {
           <p className="text-sm">Thormøhlens gate 55, 5006 Bergen</p>
         </div>
 
-        <div className="mt-6 text-center flex flex-col items-center">
+        <div className="text-center flex flex-col items-center">
           <a
             href="https://echo.uib.no/"
             target="_blank"
@@ -27,9 +27,9 @@ export function Footer() {
           </p>
         </div>
 
-        <div className="mt-4 md:mt-0 text-center md:text-left">
+        <div className="mt-4 md:mt-0 text-center md:text-right">
           <p className="font-semibold mb-1">Følg oss</p>
-          <div className="flex justify-center md:justify-start space-x-4 mt-1">
+          <div className="flex justify-center md:justify-end space-x-4 mt-1 ">
             <a
               href="https://www.linkedin.com/company/echo-consulting-uib"
               target="_blank"

app/components/nav.tsx

@@ -13,12 +13,12 @@ export function Nav() {
         <Link to="/tjenester" className="nav-link">
           Tjenester
         </Link>
-        {/* <Link to="/prosjekter" className="nav-link">
+        <Link to="/prosjekter" className="nav-link">
           Prosjekter
-        </Link> */}
-        <Link to="/om-oss" className="nav-link">
-          Om oss
         </Link>
+        {/* <Link to="/om-oss" className="nav-link">
+          Om oss
+        </Link> */}
       </div>
     </nav>
   );

app/components/projectCard.tsx

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import { ArrowRight, Eye } from "lucide-react";
+
+type ProjectCardProps = {
+  imgUrl: string;
+  title: string;
+  description: string;
+  previewUrl: string;
+  prosjektSide: string;
+};
+
+const ProjectCard = ({
+  imgUrl,
+  title,
+  description,
+  previewUrl,
+  prosjektSide,
+}: ProjectCardProps) => {
+  return (
+    <div className="rounded-xl overflow-hidden shadow-lg flex flex-col h-full bg-[#010F1B]">
+      <div
+        className="h-52 md:h-60 rounded-t-xl relative group py-3"
+        style={{
+          background: `url(${imgUrl}) no-repeat center center `,
+          backgroundSize: "contain",
+          backgroundPosition: "center",
+          backgroundOrigin: "content-box",
+        }}
+      >
+        <div className="overlay flex items-center justify-center absolute inset-0 bg-[#011627] opacity-0 group-hover:opacity-80 transition-all duration-250 rounded-t-xl">
+          <a
+            href={previewUrl}
+            className="h-14 w-14 border-2 relative rounded-full border-[#ADB7BE] hover:border-white flex items-center justify-center"
+          >
+            <Eye className="h-10 w-10 text-[#ADB7BE] hover:text-white" />
+          </a>
+        </div>
+      </div>
+      <a
+        href={prosjektSide}
+        className="text-white rounded-b-xl bg-[#011627] py-6 px-4 flex flex-col justify-between flex-grow cursor-pointer group"
+        style={{ textDecoration: "none" }}
+      >
+        <h5 className="font-xl font-semibold mb-2">{title}</h5>
+        <p style={{ whiteSpace: "pre-line" }} className="text-[#ADB7BE] mb-4">
+          {description}
+        </p>
+        <span className="flex items-center gap-2 font-medium tracking-wider transition-colors duration-300 text-white group-hover:text-blue-400">
+          <span className="relative">
+            Les mer her
+            <span className="absolute left-0 -bottom-0.5 h-[2px] bg-blue-400 transition-all duration-300 w-+ group-hover:w-full" />
+          </span>
+          <span className="inline-flex transition-transform duration-300 translate-none group-hover:translate-x-(6px)">
+            <ArrowRight
+              size={20}
+              className="text-white group-hover:text-blue-400"
+            />
+          </span>
+        </span>
+      </a>
+    </div>
+  );
+};
+
+export default ProjectCard;

app/components/projectDetail.tsx

@@ -0,0 +1,54 @@
+import { ArrowRight } from "lucide-react";
+
+type ProjectDetailProps = {
+  slug: string;
+  title: string;
+  desc: string;
+  small_img: string;
+  large_img: string;
+  link: string;
+};
+
+export default function ProjectDetail({
+  title,
+  desc,
+  large_img,
+  link,
+}: ProjectDetailProps) {
+  return (
+    <div>
+      <h1 className="text-4xl font-bold mb-6 text-center">{title}</h1>
+
+      <img
+        src={large_img}
+        alt={title}
+        className="w-full max-w-2xl mx-auto mb-6 rounded shadow-lg"
+      />
+
+      <p className="text-lg leading-relaxed">{desc}</p>
+
+      {link && (
+        <a
+          href={link}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="group flex justify-center items-center gap-2 font-medium tracking-wider mt-5"
+        >
+          <span className="relative">
+            <span className="transition-colors duration-300 group-hover:text-blue-400">
+              Link til siden
+            </span>
+            <span className="absolute left-0 -bottom-0.5 h-[2px] bg-blue-400 transition-all duration-300 w-0 group-hover:w-full" />
+          </span>
+
+          <span className="inline-flex transition-transform duration-300 group-hover:translate-x-1">
+            <ArrowRight
+              className="transition-colors duration-300 group-hover:text-blue-400"
+              size={24}
+            />
+          </span>
+        </a>
+      )}
+    </div>
+  );
+}

app/components/projectsSection.tsx

@@ -0,0 +1,54 @@
+import ProjectCard from "./projectCard";
+
+// Dette skal hentes fra Sanity etterhvert
+export const projectData = [
+  {
+    slug: "lffh",
+    title: "LFFH-nettsiden",
+    desc: "Funksjonell nettside for Linjeforeningen for Fiskehelse og Havbruk, med mulighet for blant annet innlogging, arrangementopprettelse og påmelding til arrangementer",
+    small_img: "/ProjectImages/lffh_logo_small.png",
+    large_img: "/ProjectImages/lffh_rectangle.png",
+    link: "https://www.lffh.no/",
+  },
+  {
+    slug: "integrerbar",
+    title: "Integrerbar-nettsiden (under utvikling)",
+    desc: "En nettside utviklet for Integrerbar, studentbaren tilknyttet Fakultet for naturvitenskap og teknologi ved Universitetet, med base i Realfagbygget.",
+    small_img: "/ProjectImages/integrerbar_logo_small.png",
+    large_img: "/ProjectImages/integrerbar_rectangle.jpeg",
+    link: "https://integrerbar-web.fly.dev/",
+  },
+  {
+    slug: "nti",
+    title: "NTidrett-nettsiden (under utvikling)",
+    desc: "En nettside utviklet for NT Idrett, idrettsorganisasjonen tilknyttet Fakultet for naturvitenskap og teknologi ved universitetet.",
+    small_img: "/ProjectImages/nti_logo_small.png",
+    large_img: "/ProjectImages/nti_logo_white.jpeg",
+    link: "https://www.ntidrett.no/",
+  },
+];
+
+export default function ProjectsSection() {
+  return (
+    <>
+      <h2 className="text-center text-4xl font-bold text-white mt-4 mb-8 md:mb-12">
+        Prosjekter
+      </h2>
+
+      {/* Prosjekter */}
+      <div className="flex flex-wrap gap-8 items-stretch justify-center">
+        {projectData.map((project) => (
+          <div key={project.slug} className="w-full sm:w-[48%] lg:w-[31%] flex">
+            <ProjectCard
+              imgUrl={project.small_img}
+              title={project.title}
+              description={project.desc}
+              previewUrl={project.link}
+              prosjektSide={`prosjekter/${project.slug}`}
+            />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

app/routes.ts

@@ -1,7 +1,9 @@
-import { type RouteConfig, route, index } from "@react-router/dev/routes";
+import { type RouteConfig, index, route } from "@react-router/dev/routes";
 
 export default [
   index("routes/home.tsx"),
   route("/tjenester", "routes/tjenester.tsx"),
-  route("/om-oss", "routes/om-oss.tsx"),
+  route("/prosjekter", "routes/projectOverview.tsx"),
+  route("/prosjekter/:slug", "routes/projectPage.tsx"),
+  // route("/om-oss", "routes/om-oss.tsx"),
 ] satisfies RouteConfig;

app/routes/home.tsx

@@ -1,4 +1,5 @@
 import { Hero } from "~/components/hero";
+import ProjectsSection from "../components/projectsSection";
 import { Container } from "@mantine/core";
 
 export function meta() {
@@ -13,8 +14,13 @@ export function meta() {
 
 export default function Home() {
   return (
-    <Container className="relative z-10 pt-48">
-      <Hero />
-    </Container>
+    <div className="relative min-h-screen">
+      <Container className="relative z-10 pt-48">
+        <Hero />
+      </Container>
+      <Container className="mt-25 mb-25">
+        <ProjectsSection />
+      </Container>
+    </div>
   );
 }