diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..34d51ce --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "cSpell.words": ["projectdetail"] +} diff --git a/app/components/footer.tsx b/app/components/footer.tsx index 8f5d4c4..40b7882 100644 --- a/app/components/footer.tsx +++ b/app/components/footer.tsx @@ -13,7 +13,7 @@ export function Footer() {

Thormøhlens gate 55, 5006 Bergen

-
+
Tjenester - {/* + Prosjekter - */} - - Om oss + {/* + Om oss + */}
); diff --git a/app/components/projectCard.tsx b/app/components/projectCard.tsx new file mode 100644 index 0000000..c5b446c --- /dev/null +++ b/app/components/projectCard.tsx @@ -0,0 +1,84 @@ +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) => { + const [isHovered, setIsHovered] = useState(false); + + return ( +
+
+
+ + + +
+
+ setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > +
{title}
+

+ {description} +

+ + + + Les mer her + + + + + + + + +
+ ); +}; + +export default ProjectCard; diff --git a/app/components/projectDetail.tsx b/app/components/projectDetail.tsx new file mode 100644 index 0000000..06e65f9 --- /dev/null +++ b/app/components/projectDetail.tsx @@ -0,0 +1,69 @@ +import { ArrowRight } from "lucide-react"; +import { useState } from "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) { + const [isHovered, setHoveredCard] = useState(false); + return ( +
+

{title}

+ {title} +

{desc}

+ {link != "" ? ( + setHoveredCard(true)} + onMouseLeave={() => setHoveredCard(false)} + > + + + Link til siden + + + + + + + + ) : ( + <> + )} +
+ ); +} diff --git a/app/components/projects.tsx b/app/components/projects.tsx deleted file mode 100644 index 32cc3fb..0000000 --- a/app/components/projects.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { Container, Title } from "@mantine/core"; -import { ArrowRight } from "lucide-react"; -import { useState } from "react"; - -// Dette skal hentes fra Sanity etterhvert -const projectData = [ - { - title: "Prosjekt1", - desc: "bla bla", - image: - "https://www.alvdalmiv.no/wp-content/uploads/2017/04/Bilder_2017_Uke13_fgp-1024x576.jpg", - }, - { - title: "Prosjekt2", - desc: "bla bla", - image: - "https://www.visitjotunheimen.no/dmsimgs/Flaklypa_Grand_Prix_16x9_1966284657.jpg", - }, - { - title: "Prosjekt3", - desc: "bla bla", - image: - "https://gfx.nrk.no/rdq_-xdNXpQ-2cX_AyAI9gfbgoATLuCiMeTbC5etcQaQ.jpg", - }, -]; - -export default function Projects() { - const [hoveredCard, setHoveredCard] = useState(null); - - return ( - - Prosjekter -
- {projectData.map((project, index) => ( -
setHoveredCard(index)} - onMouseLeave={() => setHoveredCard(null)} - > -
- {project.title} -
-

- {project.title} -

-

{project.desc}

-

- Les mer her - - - -

-
- ))} -
- - ); -} diff --git a/app/components/projectsSection.tsx b/app/components/projectsSection.tsx new file mode 100644 index 0000000..5ff559d --- /dev/null +++ b/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: "", + }, + { + 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: "", + }, +]; + +export default function ProjectsSection() { + return ( + <> +

+ Prosjekter +

+ + {/* Prosjekter */} +
+ {projectData.map((project) => ( +
+ +
+ ))} +
+ + ); +} diff --git a/app/routes.ts b/app/routes.ts index 9e49185..96697fe 100644 --- a/app/routes.ts +++ b/app/routes.ts @@ -1,7 +1,8 @@ -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"), ] satisfies RouteConfig; diff --git a/app/routes/home.tsx b/app/routes/home.tsx index 326eab5..1852cf6 100644 --- a/app/routes/home.tsx +++ b/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 ( - - - +
+ + + + + + +
); } diff --git a/app/routes/projectOverview.tsx b/app/routes/projectOverview.tsx new file mode 100644 index 0000000..cc02962 --- /dev/null +++ b/app/routes/projectOverview.tsx @@ -0,0 +1,113 @@ +import { Link } from "react-router"; +import { Container, Title, Stack } from "@mantine/core"; +import { projectData } from "../components/projectsSection"; +import { ArrowRight, Eye } from "lucide-react"; +import { useState } from "react"; + +export function meta() { + return [ + { title: "Prosjekter - echo Consulting" }, + { + name: "description", + content: "Eksempler på våre prosjekter.", + }, + ]; +} + +export default function ProjectOverview() { + const [hoveredCard, setHoveredCard] = useState(null); + + return ( +
+ + + Prosjekter +
+ {projectData.map((project, index) => { + return ( +
setHoveredCard(index)} + onMouseLeave={() => setHoveredCard(null)} + > +
+
+ + + +
+
+ +
+ {" "} +

+ {project.title} +

+

+ {project.desc} +

+
+ + + Les mer her + + + + + + + +
+
+ +
+ ); + })} +
+ + +
+ ); +} diff --git a/app/routes/projectPage.tsx b/app/routes/projectPage.tsx new file mode 100644 index 0000000..9e52383 --- /dev/null +++ b/app/routes/projectPage.tsx @@ -0,0 +1,55 @@ +import { ArrowLeft, ArrowRight } from "lucide-react"; +import { useParams, Link } from "react-router"; +import ProjectDetail from "../components/projectDetail"; +import { projectData } from "../components/projectsSection"; // TODO: Replace with real data +import { Container } from "@mantine/core"; + +export default function ProjectPage() { + const { slug } = useParams(); + const projectIndex = projectData.findIndex((p) => p.slug === slug); + const project = projectData[projectIndex]; + + if (!project) { + return
Project not found
; + } + + const prevProject = projectData[projectIndex - 1]; + const nextProject = projectData[projectIndex + 1]; + + return ( +
+ + + +
+ {prevProject ? ( + + + + + Forrige + + ) : ( +
+ )} + {nextProject ? ( + + Neste + + + + + ) : ( +
+ )} +
+ +
+ ); +} diff --git a/public/ProjectImages/integrerbar_logo_small.png b/public/ProjectImages/integrerbar_logo_small.png new file mode 100644 index 0000000..87bb3c7 Binary files /dev/null and b/public/ProjectImages/integrerbar_logo_small.png differ diff --git a/public/ProjectImages/integrerbar_rectangle.jpeg b/public/ProjectImages/integrerbar_rectangle.jpeg new file mode 100644 index 0000000..ba07125 Binary files /dev/null and b/public/ProjectImages/integrerbar_rectangle.jpeg differ diff --git a/public/ProjectImages/integrerbar_rectangle.svg b/public/ProjectImages/integrerbar_rectangle.svg new file mode 100644 index 0000000..103e299 --- /dev/null +++ b/public/ProjectImages/integrerbar_rectangle.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/ProjectImages/lffh_logo_small.png b/public/ProjectImages/lffh_logo_small.png new file mode 100644 index 0000000..42af622 Binary files /dev/null and b/public/ProjectImages/lffh_logo_small.png differ diff --git a/public/ProjectImages/lffh_rectangle.png b/public/ProjectImages/lffh_rectangle.png new file mode 100644 index 0000000..e052354 Binary files /dev/null and b/public/ProjectImages/lffh_rectangle.png differ diff --git a/public/ProjectImages/nti_logo_small.png b/public/ProjectImages/nti_logo_small.png new file mode 100644 index 0000000..83d4156 Binary files /dev/null and b/public/ProjectImages/nti_logo_small.png differ diff --git a/public/ProjectImages/nti_logo_white.jpeg b/public/ProjectImages/nti_logo_white.jpeg new file mode 100644 index 0000000..7c47cf8 Binary files /dev/null and b/public/ProjectImages/nti_logo_white.jpeg differ