naturvardarna/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

First simple verison of the site.

Browse Source
This commit is contained in:
WilliamSoderberg
2026-03-20 03:09:10 +01:00 Verified
parent f0a903d073
commit 4a5726dead
8 changed files with 342 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2 -72
View File
@@ -1,73 +1,3 @@
# React + TypeScript + Vite
# Naturvärdarna
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
## React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
```js
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```
Källkod för [naturvardarna.com](https://naturvardarna.com/)
package-lock.json
Generated
+10
View File
@@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"@tailwindcss/vite": "^4.2.2",
"lucide-react": "^0.577.0",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"tailwindcss": "^4.2.2"
@@ -2571,6 +2572,15 @@
"yallist": "^3.0.2"
}
},
"node_modules/lucide-react": {
"version": "0.577.0",
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.577.0.tgz",
"integrity": "sha512-4LjoFv2eEPwYDPg/CUdBJQSDfPyzXCRrVW1X7jrx/trgxnxkHFjnVZINbzvzxjN70dxychOfg+FTYwBiS3pQ5A==",
"license": "ISC",
"peerDependencies": {
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/magic-string": {
"version": "0.30.21",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
package.json
+2 -1
View File
@@ -4,13 +4,14 @@
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"dev": "vite --host",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@tailwindcss/vite": "^4.2.2",
"lucide-react": "^0.577.0",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"tailwindcss": "^4.2.2"
public/Kullaberg © Johan Hammar.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 593 KiB

public/about_us.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 379 KiB

public/favicon.svg
+51
View File
@@ -0,0 +1,51 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
<defs>
<style>
.cls-1 {
fill: #fff;
}
</style>
</defs>
<polygon class="cls-1" points="100.54 88.73 117.62 78.86 117.62 67.01 117.62 67.01 107.35 61.08 90.27 70.94 90.27 51.21 80 45.29 69.73 51.21 69.73 70.94 52.65 61.08 42.38 67.01 42.38 67.01 42.38 78.86 59.46 88.73 42.38 98.59 42.38 110.45 52.65 116.38 69.73 106.51 69.73 126.24 80 132.17 90.27 126.24 90.27 106.51 107.35 116.38 117.62 110.45 117.62 98.59 100.54 88.73"/>
<g>
<path class="cls-1" d="M35,21.54h-3.59l-3.67-5.48c-.07-.11-.18-.34-.33-.69h-.04v6.17h-2.84v-12.6h2.84v5.96h.04c.07-.16.19-.4.35-.7l3.48-5.26h3.38l-4.39,6.01,4.77,6.59Z"/>
<path class="cls-1" d="M46.6,16.08c0,3.79-1.76,5.68-5.29,5.68s-5.13-1.85-5.13-5.55v-7.28h2.85v7.31c0,2.04.8,3.06,2.39,3.06s2.35-.98,2.35-2.95v-7.42h2.84v7.15Z"/>
<path class="cls-1" d="M56.98,21.54h-7.51v-12.6h2.84v10.3h4.67v2.3Z"/>
<path class="cls-1" d="M66.31,21.54h-7.51v-12.6h2.84v10.3h4.67v2.3Z"/>
<path class="cls-1" d="M79.21,21.54h-3.09l-.9-2.8h-4.48l-.89,2.8h-3.08l4.59-12.6h3.37l4.48,12.6ZM74.57,16.56l-1.35-4.24c-.1-.32-.17-.69-.21-1.13h-.07c-.03.37-.1.74-.22,1.1l-1.37,4.27h3.23Z"/>
<path class="cls-1" d="M80.91,21.54v-12.6h4.59c1.41,0,2.49.26,3.24.77s1.13,1.24,1.13,2.18c0,.68-.23,1.27-.69,1.78-.46.51-1.05.86-1.76,1.06v.04c.9.11,1.61.44,2.15.99.54.55.8,1.22.8,2.01,0,1.15-.41,2.07-1.24,2.75s-1.95,1.02-3.38,1.02h-4.84ZM83.75,11.03v2.99h1.25c.59,0,1.05-.14,1.38-.43.34-.28.51-.68.51-1.17,0-.93-.69-1.39-2.07-1.39h-1.06ZM83.75,16.13v3.32h1.54c.66,0,1.17-.15,1.54-.46.37-.3.56-.72.56-1.25s-.18-.9-.55-1.19c-.37-.29-.88-.43-1.53-.43h-1.55Z"/>
<path class="cls-1" d="M100.14,21.54h-7.56v-12.6h7.27v2.31h-4.43v2.8h4.12v2.3h-4.12v2.88h4.72v2.3Z"/>
<path class="cls-1" d="M112.86,21.54h-3.26l-1.96-3.24c-.15-.25-.29-.47-.42-.66s-.27-.36-.41-.5-.28-.24-.43-.32c-.15-.07-.31-.11-.49-.11h-.76v4.83h-2.84v-12.6h4.5c3.06,0,4.59,1.14,4.59,3.43,0,.44-.07.85-.2,1.22s-.33.71-.57,1.01-.54.56-.89.77-.74.39-1.16.51v.04c.19.06.37.15.54.29s.35.29.51.46.32.36.47.57c.15.2.29.4.41.59l2.38,3.73ZM105.12,11.07v3.51h1.23c.61,0,1.1-.18,1.47-.53.38-.36.56-.8.56-1.33,0-1.1-.66-1.65-1.98-1.65h-1.28Z"/>
<path class="cls-1" d="M124.5,20.7c-1.23.71-2.76,1.06-4.59,1.06-2.03,0-3.63-.56-4.79-1.68-1.17-1.12-1.75-2.67-1.75-4.64s.64-3.59,1.92-4.84,2.98-1.87,5.1-1.87c1.34,0,2.51.18,3.53.55v2.66c-.97-.56-2.16-.84-3.57-.84-1.18,0-2.14.38-2.88,1.15s-1.11,1.79-1.11,3.06.33,2.3,1,3.01c.66.71,1.56,1.06,2.69,1.06.68,0,1.22-.1,1.62-.29v-2.46h-2.52v-2.27h5.36v6.34Z"/>
<path class="cls-1" d="M126.5,21.06v-2.81c.51.43,1.06.75,1.66.96s1.2.32,1.81.32c.36,0,.67-.03.94-.1.27-.06.49-.15.67-.27.18-.11.31-.25.4-.4s.13-.32.13-.51c0-.25-.07-.47-.21-.66s-.33-.37-.58-.54-.53-.32-.87-.47-.69-.31-1.08-.47c-.98-.41-1.72-.91-2.2-1.5-.48-.59-.72-1.31-.72-2.14,0-.66.13-1.22.4-1.69s.62-.86,1.08-1.16c.45-.3.98-.53,1.58-.67s1.23-.22,1.9-.22,1.24.04,1.75.12c.51.08.97.2,1.4.36v2.63c-.21-.15-.44-.28-.69-.39s-.5-.2-.77-.28-.53-.13-.79-.16c-.26-.04-.51-.05-.74-.05-.32,0-.62.03-.88.09s-.49.15-.67.26-.32.24-.42.4-.15.33-.15.52c0,.21.06.4.17.57s.27.33.47.47.45.3.75.44.62.29.99.44c.5.21.96.44,1.36.67.4.24.75.51,1.03.8s.51.64.66,1.02.23.83.23,1.34c0,.7-.13,1.29-.4,1.77s-.63.86-1.08,1.16-.99.51-1.59.64c-.61.13-1.25.19-1.92.19s-1.35-.06-1.97-.18c-.62-.12-1.16-.29-1.62-.53Z"/>
<path class="cls-1" d="M16.35,40.54h-2.87l-5.19-7.92c-.3-.46-.52-.81-.63-1.05h-.04c.05.45.07,1.12.07,2.04v6.93h-2.68v-12.6h3.06l5,7.67c.23.35.44.69.63,1.03h.04c-.05-.29-.07-.87-.07-1.73v-6.97h2.68v12.6Z"/>
<path class="cls-1" d="M30.45,40.54h-3.09l-.9-2.8h-4.48l-.89,2.8h-3.08l4.59-12.6h3.37l4.48,12.6ZM25.81,35.56l-1.35-4.24c-.1-.32-.17-.69-.21-1.13h-.07c-.03.37-.1.74-.22,1.1l-1.37,4.27h3.23Z"/>
<path class="cls-1" d="M41,30.25h-3.59v10.29h-2.85v-10.29h-3.58v-2.31h10.02v2.31Z"/>
<path class="cls-1" d="M53.09,35.08c0,3.79-1.76,5.68-5.29,5.68s-5.13-1.85-5.13-5.55v-7.28h2.85v7.31c0,2.04.8,3.06,2.39,3.06s2.35-.98,2.35-2.95v-7.42h2.84v7.15Z"/>
<path class="cls-1" d="M66.53,40.54h-3.26l-1.96-3.24c-.15-.25-.29-.47-.42-.66s-.27-.36-.41-.5-.28-.24-.43-.32-.31-.11-.49-.11h-.76v4.83h-2.84v-12.6h4.5c3.06,0,4.59,1.14,4.59,3.43,0,.44-.07.85-.2,1.22s-.33.71-.57,1.01-.54.56-.89.77-.74.39-1.16.51v.04c.19.06.37.15.54.29s.35.29.51.46.32.36.47.57.29.4.41.59l2.38,3.73ZM58.8,30.07v3.51h1.23c.61,0,1.1-.18,1.47-.53.38-.36.56-.8.56-1.33,0-1.1-.66-1.65-1.98-1.65h-1.28Z"/>
<path class="cls-1" d="M78.41,40.54h-3.26l-1.96-3.24c-.15-.25-.29-.47-.42-.66s-.27-.36-.41-.5-.28-.24-.43-.32-.31-.11-.49-.11h-.76v4.83h-2.84v-12.6h4.5c3.06,0,4.59,1.14,4.59,3.43,0,.44-.07.85-.2,1.22s-.33.71-.57,1.01-.54.56-.89.77-.74.39-1.16.51v.04c.19.06.37.15.54.29s.35.29.51.46.32.36.47.57.29.4.41.59l2.38,3.73ZM70.68,30.07v3.51h1.23c.61,0,1.1-.18,1.47-.53.38-.36.56-.8.56-1.33,0-1.1-.66-1.65-1.98-1.65h-1.28Z"/>
<path class="cls-1" d="M87.27,40.54h-7.56v-12.6h7.27v2.31h-4.43v2.8h4.12v2.3h-4.12v2.88h4.72v2.3Z"/>
<path class="cls-1" d="M88.84,40.06v-2.81c.51.43,1.06.75,1.66.96s1.2.32,1.81.32c.36,0,.67-.03.94-.1.27-.06.49-.15.67-.27.18-.11.31-.25.4-.4s.13-.32.13-.51c0-.25-.07-.47-.21-.66s-.33-.37-.58-.54-.53-.32-.87-.47-.69-.31-1.08-.47c-.98-.41-1.72-.91-2.2-1.5-.48-.59-.72-1.31-.72-2.14,0-.66.13-1.22.4-1.69s.62-.86,1.08-1.16c.45-.3.98-.53,1.58-.67s1.23-.22,1.9-.22,1.24.04,1.75.12c.51.08.97.2,1.4.36v2.63c-.21-.15-.44-.28-.69-.39s-.5-.2-.77-.28-.53-.13-.79-.16c-.26-.04-.51-.05-.74-.05-.32,0-.62.03-.88.09s-.49.15-.67.26-.32.24-.42.4-.15.33-.15.52c0,.21.06.4.17.57s.27.33.47.47.45.3.75.44.62.29.99.44c.5.21.96.44,1.36.67.4.24.75.51,1.03.8s.51.64.66,1.02.23.83.23,1.34c0,.7-.13,1.29-.4,1.77s-.63.86-1.08,1.16-.99.51-1.59.64c-.61.13-1.25.19-1.92.19s-1.35-.06-1.97-.18c-.62-.12-1.16-.29-1.62-.53Z"/>
<path class="cls-1" d="M107.19,40.54h-7.56v-12.6h7.27v2.31h-4.43v2.8h4.12v2.3h-4.12v2.88h4.72v2.3Z"/>
<path class="cls-1" d="M119.92,40.54h-3.26l-1.96-3.24c-.15-.25-.29-.47-.42-.66s-.27-.36-.41-.5-.28-.24-.43-.32c-.15-.07-.31-.11-.49-.11h-.76v4.83h-2.84v-12.6h4.5c3.06,0,4.59,1.14,4.59,3.43,0,.44-.07.85-.2,1.22s-.33.71-.57,1.01-.54.56-.89.77-.74.39-1.16.51v.04c.19.06.37.15.54.29s.35.29.51.46.32.36.47.57c.15.2.29.4.41.59l2.38,3.73ZM112.18,30.07v3.51h1.23c.61,0,1.1-.18,1.47-.53.38-.36.56-.8.56-1.33,0-1.1-.66-1.65-1.98-1.65h-1.28Z"/>
<path class="cls-1" d="M131.71,27.94l-4.34,12.6h-3.22l-4.29-12.6h3.06l2.63,8.77c.14.47.23.89.25,1.26h.05c.04-.39.13-.82.27-1.29l2.61-8.74h2.97Z"/>
<path class="cls-1" d="M144.43,40.54h-3.09l-.9-2.8h-4.48l-.89,2.8h-3.08l4.59-12.6h3.37l4.48,12.6ZM139.79,35.56l-1.35-4.24c-.1-.32-.17-.69-.21-1.13h-.07c-.03.37-.1.74-.22,1.1l-1.37,4.27h3.23Z"/>
<path class="cls-1" d="M154.98,30.25h-3.59v10.29h-2.85v-10.29h-3.58v-2.31h10.02v2.31Z"/>
</g>
<g>
<path class="cls-1" d="M18.5,151.08h-2.55l-4.62-7.04c-.27-.41-.46-.72-.56-.93h-.03c.04.4.06,1,.06,1.81v6.16h-2.38v-11.2h2.72l4.45,6.82c.2.31.39.61.56.91h.03c-.04-.26-.06-.77-.06-1.54v-6.2h2.38v11.2Z"/>
<path class="cls-1" d="M31.03,151.08h-2.75l-.8-2.49h-3.98l-.79,2.49h-2.73l4.08-11.2h2.99l3.98,11.2ZM26.9,146.65l-1.2-3.77c-.09-.28-.15-.62-.19-1.01h-.06c-.03.33-.09.65-.2.98l-1.22,3.8h2.87Z"/>
<path class="cls-1" d="M40.4,141.93h-3.2v9.15h-2.53v-9.15h-3.18v-2.05h8.91v2.05Z"/>
<path class="cls-1" d="M51.16,146.23c0,3.37-1.57,5.05-4.7,5.05s-4.56-1.64-4.56-4.93v-6.47h2.53v6.5c0,1.81.71,2.72,2.12,2.72s2.09-.88,2.09-2.62v-6.59h2.52v6.35Z"/>
<path class="cls-1" d="M63.1,151.08h-2.9l-1.74-2.88c-.13-.22-.26-.41-.38-.59-.12-.17-.24-.32-.36-.44-.12-.12-.25-.22-.38-.28-.13-.06-.28-.1-.43-.1h-.68v4.29h-2.52v-11.2h4c2.72,0,4.08,1.02,4.08,3.05,0,.39-.06.75-.18,1.08-.12.33-.29.63-.51.89s-.48.5-.79.69c-.31.19-.66.34-1.04.45v.03c.17.05.33.14.48.25s.31.25.45.41c.15.16.29.32.42.5s.25.36.36.53l2.12,3.31ZM56.23,141.76v3.12h1.09c.54,0,.98-.16,1.3-.47.33-.32.5-.71.5-1.18,0-.98-.59-1.47-1.76-1.47h-1.14Z"/>
<path class="cls-1" d="M73.59,139.87l-3.86,11.2h-2.86l-3.81-11.2h2.72l2.34,7.8c.12.42.2.79.23,1.12h.05c.04-.35.12-.73.24-1.15l2.32-7.77h2.64Z"/>
<path class="cls-1" d="M84.9,151.08h-2.75l-.8-2.49h-3.98l-.79,2.49h-2.73l4.08-11.2h2.99l3.98,11.2ZM77.57,138.83c-.35,0-.64-.1-.87-.31-.22-.21-.34-.46-.34-.76s.11-.57.34-.77c.23-.2.52-.3.86-.3s.64.1.86.3c.22.2.33.46.33.77s-.11.58-.33.77c-.22.2-.51.3-.86.3ZM80.77,146.65l-1.2-3.77c-.09-.28-.15-.62-.19-1.01h-.06c-.03.33-.09.65-.2.98l-1.22,3.8h2.87ZM81.15,138.83c-.35,0-.64-.1-.86-.3-.22-.2-.34-.46-.34-.77s.11-.58.34-.77c.22-.2.51-.3.86-.3s.64.1.86.3c.23.2.34.46.34.77s-.11.57-.34.77c-.22.2-.51.3-.87.3Z"/>
<path class="cls-1" d="M95.81,151.08h-2.9l-1.74-2.88c-.13-.22-.25-.41-.38-.59s-.24-.32-.36-.44c-.12-.12-.25-.22-.38-.28-.13-.06-.28-.1-.43-.1h-.68v4.29h-2.52v-11.2h4c2.72,0,4.08,1.02,4.08,3.05,0,.39-.06.75-.18,1.08-.12.33-.29.63-.51.89s-.48.5-.79.69c-.31.19-.66.34-1.04.45v.03c.17.05.33.14.48.25s.31.25.45.41.29.32.42.5.25.36.36.53l2.12,3.31ZM88.93,141.76v3.12h1.09c.54,0,.98-.16,1.3-.47.33-.32.5-.71.5-1.18,0-.98-.59-1.47-1.76-1.47h-1.14Z"/>
<path class="cls-1" d="M96.97,151.08v-11.2h3.97c3.98,0,5.97,1.82,5.97,5.46,0,1.75-.54,3.14-1.63,4.18-1.09,1.04-2.53,1.56-4.34,1.56h-3.97ZM99.49,141.93v7.1h1.25c1.09,0,1.95-.33,2.57-.98s.93-1.55.93-2.68c0-1.07-.31-1.91-.93-2.52-.62-.61-1.48-.92-2.6-.92h-1.23Z"/>
<path class="cls-1" d="M118.73,151.08h-2.75l-.8-2.49h-3.98l-.79,2.49h-2.73l4.08-11.2h2.99l3.98,11.2ZM114.6,146.65l-1.2-3.77c-.09-.28-.15-.62-.19-1.01h-.06c-.03.33-.09.65-.2.98l-1.22,3.8h2.87Z"/>
<path class="cls-1" d="M129.64,151.08h-2.9l-1.74-2.88c-.13-.22-.25-.41-.38-.59s-.24-.32-.36-.44c-.12-.12-.25-.22-.38-.28-.13-.06-.28-.1-.43-.1h-.68v4.29h-2.52v-11.2h4c2.72,0,4.08,1.02,4.08,3.05,0,.39-.06.75-.18,1.08-.12.33-.29.63-.51.89s-.48.5-.79.69c-.31.19-.66.34-1.04.45v.03c.17.05.33.14.48.25s.31.25.45.41.29.32.42.5.25.36.36.53l2.12,3.31ZM122.76,141.76v3.12h1.09c.54,0,.98-.16,1.3-.47.33-.32.5-.71.5-1.18,0-.98-.59-1.47-1.76-1.47h-1.14Z"/>
<path class="cls-1" d="M140.87,151.08h-2.55l-4.62-7.04c-.27-.41-.46-.72-.56-.93h-.03c.04.4.06,1,.06,1.81v6.16h-2.38v-11.2h2.72l4.45,6.82c.2.31.39.61.56.91h.03c-.04-.26-.06-.77-.06-1.54v-6.2h2.38v11.2Z"/>
<path class="cls-1" d="M153.4,151.08h-2.75l-.8-2.49h-3.98l-.79,2.49h-2.73l4.08-11.2h2.99l3.98,11.2ZM149.27,146.65l-1.2-3.77c-.09-.28-.15-.62-.19-1.01h-.06c-.03.33-.09.65-.2.98l-1.22,3.8h2.87Z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

src/App.tsx
+243 -104
View File
@@ -1,167 +1,306 @@
// src/App.tsx
import { useState } from 'react';
import { Menu, X, Globe, Trash2, Map, Leaf, AlertTriangle, Info, Tent, Car } from 'lucide-react';
// --- TYPER ---
// Detta säkerställer att vi bara kan skicka in dessa exakta strängar
type Tab = 'home' | 'about' | 'contact';
// --- TYPES & DATA ---
type Tab = 'home' | 'about';
type Language = 'sv' | 'en';
interface NavbarProps {
activeTab: Tab;
setActiveTab: (tab: Tab) => void;
}
const translations = {
sv: {
nav: { home: 'Hem', about: 'Om oss' },
hero: {
title: 'Vi värnar om Kullaberg',
subtitle: 'Vi är sommarjobbarna som håller naturreservatet rent, säkert och vackert under årets mest hektiska veckor.'
},
whatWeDo: {
title: 'Vårt uppdrag',
cleaningTitle: 'Håller rent',
cleaningDesc: 'Vi städar toaletter, parkeringsplatser, rastplatser och stränder dagligen för att skydda djurlivet och naturen från slitage.',
guidingTitle: 'Guidar besökare',
guidingDesc: 'Vi hjälper turister att hitta rätt, informerar om reservatets unika regler och ser till att allemansrätten respekteras.',
natureTitle: 'Naturvård',
natureDesc: 'Vi underhåller vandringsleder, bekämpar invasiva arter och fyller på ved för att skydda skogen.'
},
importantInfo: {
title: 'Viktig information för besökare',
campingTitle: 'Tältning',
campingDesc: 'Tältning är endast tillåten på angivna platser, exempelvis vid Stora parkeringen. Läs skyltarna noga.',
parkingTitle: 'Parkering',
parkingDesc: 'Parkering är gratis så länge du står inom markerade områden. Blockera aldrig räddningsvägar.',
fireTitle: 'Eldning',
fireDesc: 'Använd endast vår utlagda ved vid de fasta grillplatserna. Bryt aldrig grenar från levande eller döda träd.'
},
about: {
title: 'Om Naturvärdarna',
p1: 'Vi är ett gäng engagerade ungdomar som fått det ärofyllda uppdraget att arbeta som Naturvärdar på vackra Kullaberg under sommarmånaderna, ledda av våra projektledare.',
p2: 'Vårt mål är att göra Kullaberg till en bättre plats för besökare och minska det negativa slitaget på naturen. När trycket från turister och besökare är som allra störst, är det vi som rycker ut.',
p3: 'Våra arbetsuppgifter är väldigt varierande. En vanlig dag börjar med en ordentlig städrunda av faciliteter och parkeringsplatser. Därefter arbetar vi med förvaltning som att röja stigar, bygga räcken, olja in träskyltar och bekämpa invasiva växter. Vi plockar skräp längs kusterna och står även som Naturvärdar ute i fält för att svara på era frågor.'
},
footer: 'Naturvärdarna Kullaberg. Ta hand om naturen.'
},
en: {
nav: { home: 'Home', about: 'About Us' },
hero: {
title: 'Preserving Kullaberg',
subtitle: 'We are the summer workers keeping the nature reserve clean, safe, and beautiful during the busiest weeks of the year.'
},
whatWeDo: {
title: 'Our Mission',
cleaningTitle: 'Keeping it Clean',
cleaningDesc: 'We clean toilets, parking lots, rest areas, and beaches daily to protect wildlife and nature from wear and tear.',
guidingTitle: 'Guiding Visitors',
guidingDesc: 'We help tourists navigate, inform them about the reserve\'s unique rules, and ensure the Right of Public Access is respected.',
natureTitle: 'Nature Conservation',
natureDesc: 'We maintain hiking trails, combat invasive species, and restock firewood to protect the forest.'
},
importantInfo: {
title: 'Important Visitor Information',
campingTitle: 'Camping',
campingDesc: 'Tents are only allowed in designated areas, such as the Main Parking lot. Please read the signs carefully.',
parkingTitle: 'Parking',
parkingDesc: 'Parking is free as long as you park within marked areas. Never block emergency routes.',
fireTitle: 'Fires',
fireDesc: 'Only use the provided firewood at designated barbecue areas. Never break branches from living or dead trees.'
},
about: {
title: 'About the Nature Wardens',
p1: 'We are a group of dedicated youth who have been given the honorable task of working as Nature Wardens at the beautiful Kullaberg during the summer months, led by our project managers.',
p2: 'Our goal is to make Kullaberg a better place for visitors and to reduce negative impact on nature. When the pressure from tourists is at its highest, we are the ones who step in.',
p3: 'Our daily tasks are highly varied. A normal day begins with a thorough cleaning of facilities and parking areas. After that, we do maintenance work such as clearing trails, building fences, oiling wooden signs, and combating invasive species. We pick up trash along the coasts and act as Nature Wardens in the field to answer your questions.'
},
footer: 'Kullaberg Nature Wardens. Take care of nature.'
}
};
// --- KOMPONENTER ---
// --- COMPONENTS ---
const Navbar = ({ activeTab, setActiveTab }: NavbarProps) => (
<nav className="bg-nature-dark text-white shadow-lg sticky top-0 z-50">
<div className="max-w-6xl mx-auto px-4">
<div className="flex justify-between items-center py-4">
const Navbar = ({ activeTab, setActiveTab, lang, setLang }: any) => {
const [isOpen, setIsOpen] = useState(false);
const t = translations[lang as Language].nav;
const handleNav = (tab: Tab) => {
setActiveTab(tab);
setIsOpen(false);
};
return (
<nav className="bg-ebony text-eggshell shadow-lg sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-20">
{/* Logo & Brand */}
<div
className="text-2xl font-bold cursor-pointer"
onClick={() => setActiveTab('home')}
className="flex items-center gap-3 cursor-pointer"
onClick={() => handleNav('home')}
>
🌲 Naturvärdarna
<img src="/favicon.svg" alt="Naturvärdarna Logo" className="h-12 w-12" />
<span className="text-2xl font-bold tracking-wide hidden sm:block">Naturvärdarna</span>
</div>
<div className="space-x-6 hidden md:flex">
{/* Desktop Nav */}
<div className="hidden md:flex items-center space-x-8 font-medium">
<button
onClick={() => setActiveTab('home')}
className={`hover:text-nature-light cursor-pointer ${activeTab === 'home' ? 'border-b-2 border-white' : ''}`}
onClick={() => handleNav('home')}
className={`hover:text-gold transition-colors cursor-pointer pb-1 ${activeTab === 'home' ? 'border-b-2 border-gold text-gold' : ''}`}
>
Hem
{t.home}
</button>
<button
onClick={() => setActiveTab('about')}
className={`hover:text-nature-light cursor-pointer ${activeTab === 'about' ? 'border-b-2 border-white' : ''}`}
onClick={() => handleNav('about')}
className={`hover:text-gold transition-colors cursor-pointer pb-1 ${activeTab === 'about' ? 'border-b-2 border-gold text-gold' : ''}`}
>
Om oss
{t.about}
</button>
<button
onClick={() => setActiveTab('contact')}
className={`hover:text-nature-light cursor-pointer ${activeTab === 'contact' ? 'border-b-2 border-white' : ''}`}
onClick={() => setLang(lang === 'sv' ? 'en' : 'sv')}
className="flex items-center gap-2 bg-slate-teal hover:bg-seafoam px-4 py-2 rounded-full transition-colors cursor-pointer"
>
Kontakt
<Globe size={18} />
<span>{lang === 'sv' ? 'EN' : 'SV'}</span>
</button>
</div>
{/* Mobile Menu Button */}
<div className="md:hidden flex items-center">
<button
onClick={() => setLang(lang === 'sv' ? 'en' : 'sv')}
className="flex items-center gap-1 bg-slate-teal hover:bg-seafoam px-3 py-1.5 rounded-full transition-colors cursor-pointer mr-4 text-sm"
>
<Globe size={16} />
<span>{lang === 'sv' ? 'EN' : 'SV'}</span>
</button>
<button onClick={() => setIsOpen(!isOpen)} className="text-eggshell hover:text-gold cursor-pointer">
{isOpen ? <X size={28} /> : <Menu size={28} />}
</button>
</div>
</div>
</div>
{/* Mobile Nav Dropdown */}
{isOpen && (
<div className="md:hidden bg-moss border-t border-ebony">
<div className="px-2 pt-2 pb-4 space-y-1 sm:px-3">
<button
onClick={() => handleNav('home')}
className="block w-full text-left px-3 py-4 text-eggshell font-medium border-b border-ebony/30"
>
{t.home}
</button>
<button
onClick={() => handleNav('about')}
className="block w-full text-left px-3 py-4 text-eggshell font-medium"
>
{t.about}
</button>
</div>
</div>
)}
</nav>
);
);
};
const Home = () => (
<div className="animate-fade-in">
{/* Hero-sektion */}
const Home = ({ lang }: { lang: Language }) => {
const t = translations[lang];
return (
<div className="animate-fade-in pb-12">
{/* Hero Section */}
<div
className="h-96 bg-cover bg-center flex items-center justify-center relative"
style={{ backgroundImage: "url('https://images.unsplash.com/photo-1473448912268-2022ce9509d8?auto=format&fit=crop&q=80&w=2000')" }}
className="h-[60vh] min-h-100 bg-cover bg-center flex items-center justify-center relative"
style={{ backgroundImage: "url('/Kullaberg © Johan Hammar.jpg')" }}
>
<div className="absolute inset-0 bg-black/40"></div>
<div className="relative z-10 text-center text-white px-4">
<h1 className="text-5xl font-bold mb-4 drop-shadow-md">Vi värnar om Kullaberg</h1>
<p className="text-xl max-w-2xl mx-auto drop-shadow-md">
Vi är sommarjobbarna som håller naturreservatet rent, säkert och vackert under årets mest hektiska veckor.
<div className="absolute inset-0 bg-ebony/30"></div>
<div className="relative z-10 text-center text-eggshell px-4 max-w-4xl mx-auto">
<h1 className="text-4xl md:text-6xl font-bold mb-6 drop-shadow-lg leading-tight">{t.hero.title}</h1>
<p className="text-lg md:text-2xl drop-shadow-md text-eggshell/90">
{t.hero.subtitle}
</p>
</div>
</div>
{/* Info-sektion */}
<div className="max-w-6xl mx-auto py-16 px-4 text-center">
<h2 className="text-3xl font-bold text-nature-dark mb-8">Vad gör vi?</h2>
{/* What We Do Section */}
<div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
<h2 className="text-3xl font-bold text-ebony mb-12 text-center flex items-center justify-center gap-3">
<Info className="text-goldenrod" size={32} />
{t.whatWeDo.title}
</h2>
<div className="grid md:grid-cols-3 gap-8">
<div className="bg-white p-6 rounded-lg shadow-md border-t-4 border-nature">
<h3 className="text-xl font-bold text-nature-dark mb-2">Håller rent</h3>
<p className="text-gray-600">Vi städar rastplatser, vandringsleder och stränder för att skydda djurlivet och naturen.</p>
<div className="bg-white p-8 rounded-2xl shadow-sm border-t-4 border-seafoam hover:shadow-md transition-shadow">
<Trash2 className="text-seafoam mb-4" size={40} />
<h3 className="text-2xl font-bold text-slate-teal mb-3">{t.whatWeDo.cleaningTitle}</h3>
<p className="text-gray-700 leading-relaxed">{t.whatWeDo.cleaningDesc}</p>
</div>
<div className="bg-white p-6 rounded-lg shadow-md border-t-4 border-nature">
<h3 className="text-xl font-bold text-nature-dark mb-2">Guidar besökare</h3>
<p className="text-gray-600">Vi hjälper turister att hitta rätt och informerar om reservatets unika regler och miljö.</p>
<div className="bg-white p-8 rounded-2xl shadow-sm border-t-4 border-seafoam hover:shadow-md transition-shadow">
<Map className="text-seafoam mb-4" size={40} />
<h3 className="text-2xl font-bold text-slate-teal mb-3">{t.whatWeDo.guidingTitle}</h3>
<p className="text-gray-700 leading-relaxed">{t.whatWeDo.guidingDesc}</p>
</div>
<div className="bg-white p-6 rounded-lg shadow-md border-t-4 border-nature">
<h3 className="text-xl font-bold text-nature-dark mb-2">Skyddar miljön</h3>
<p className="text-gray-600">Genom vår närvaro ser vi till att naturen på Kullaberg bevaras för framtida generationer.</p>
<div className="bg-white p-8 rounded-2xl shadow-sm border-t-4 border-seafoam hover:shadow-md transition-shadow">
<Leaf className="text-seafoam mb-4" size={40} />
<h3 className="text-2xl font-bold text-slate-teal mb-3">{t.whatWeDo.natureTitle}</h3>
<p className="text-gray-700 leading-relaxed">{t.whatWeDo.natureDesc}</p>
</div>
</div>
</div>
</div>
);
const About = () => (
<div className="max-w-4xl mx-auto py-16 px-4 animate-fade-in">
<h1 className="text-4xl font-bold text-nature-dark mb-6 border-b-2 border-nature pb-2">Om Naturvärdarna</h1>
{/* Important Info Section */}
<div className="bg-moss/20 py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 className="text-3xl font-bold text-ebony mb-12 text-center flex items-center justify-center gap-3">
<AlertTriangle className="text-emergency" size={32} />
{t.importantInfo.title}
</h2>
<div className="grid md:grid-cols-3 gap-6">
<div className="bg-eggshell p-6 rounded-xl border border-moss/30 flex items-start gap-4">
<Tent className="text-goldenrod shrink-0 mt-1" size={28} />
<div>
<h4 className="font-bold text-ebony text-lg mb-1">{t.importantInfo.campingTitle}</h4>
<p className="text-gray-800 text-sm leading-relaxed">{t.importantInfo.campingDesc}</p>
</div>
</div>
<div className="bg-eggshell p-6 rounded-xl border border-moss/30 flex items-start gap-4">
<Car className="text-goldenrod shrink-0 mt-1" size={28} />
<div>
<h4 className="font-bold text-ebony text-lg mb-1">{t.importantInfo.parkingTitle}</h4>
<p className="text-gray-800 text-sm leading-relaxed">{t.importantInfo.parkingDesc}</p>
</div>
</div>
<div className="bg-eggshell p-6 rounded-xl border border-moss/30 flex items-start gap-4">
<AlertTriangle className="text-goldenrod shrink-0 mt-1" size={28} />
<div>
<h4 className="font-bold text-ebony text-lg mb-1">{t.importantInfo.fireTitle}</h4>
<p className="text-gray-800 text-sm leading-relaxed">{t.importantInfo.fireDesc}</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
const About = ({ lang }: { lang: Language }) => {
const t = translations[lang].about;
return (
<div className="max-w-5xl mx-auto py-16 px-4 sm:px-6 lg:px-8 animate-fade-in">
<div className="flex flex-col md:flex-row gap-12 items-center">
<div className="w-full md:w-1/2">
<h1 className="text-4xl md:text-5xl font-bold text-ebony mb-6 border-b-4 border-gold pb-4 inline-block">{t.title}</h1>
<div className="prose prose-lg text-gray-800 max-w-none space-y-6">
<p className="text-lg leading-relaxed">{t.p1}</p>
<p className="text-lg leading-relaxed">{t.p2}</p>
<p className="text-lg leading-relaxed">{t.p3}</p>
</div>
</div>
<div className="w-full md:w-1/2">
<img
src="https://images.unsplash.com/photo-1551632811-561732d1e306?auto=format&fit=crop&q=80&w=1000"
alt="Ungdomar som arbetar i naturen"
className="w-full h-80 object-cover rounded-xl shadow-lg mb-8"
src="/about_us.jpg"
alt="Nature Wardens working"
className="w-full h-auto rounded-2xl shadow-xl border-4 border-eggshell rotate-1 hover:rotate-0 transition-transform duration-300"
/>
<div className="prose prose-lg text-gray-700 max-w-none">
<p className="mb-4">
Vi är ett gäng engagerade ungdomar som fått det ärofyllda uppdraget att arbeta som Naturvärdar på vackra Kullaberg under sommarmånaderna.
</p>
<p className="mb-4">
När trycket från turister och besökare är som allra störst, är det vi som rycker ut. Våra dagar består av allt från att plocka skräp och underhålla eldstäder, till att svara på frågor från nyfikna vandrare och se till att allemansrätten respekteras.
</p>
<p>
Kullaberg är en fantastisk plats, och vi är otroligt stolta över att få hjälpa till att hålla reservatet i toppskick!
</p>
</div>
</div>
);
</div>
);
};
const Contact = () => (
<div className="max-w-4xl mx-auto py-16 px-4 animate-fade-in">
<h1 className="text-4xl font-bold text-nature-dark mb-6 border-b-2 border-nature pb-2">Kontakta oss</h1>
<div className="bg-white rounded-xl shadow-lg p-8">
<p className="text-gray-600 mb-6 text-lg">
Har du sett något i reservatet som behöver åtgärdas, eller vill du bara säga hej? Tveka inte att höra av dig!
</p>
<form className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Namn</label>
<input type="text" className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-nature focus:border-nature outline-none transition-all" placeholder="Ditt namn" />
const Footer = ({ lang }: { lang: Language }) => (
<footer className="bg-ebony text-eggshell py-8 text-center mt-auto border-t-4 border-goldenrod">
<div className="max-w-7xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-4">
<div className="flex items-center gap-2">
<img src="/favicon.svg" alt="Logo" className="h-8 w-8 opacity-80" />
<p className="font-medium tracking-wide">© {new Date().getFullYear()} {translations[lang].footer}</p>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">E-post</label>
<input type="email" className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-nature focus:border-nature outline-none transition-all" placeholder="din@epost.se" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Meddelande</label>
<textarea rows={4} className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-nature focus:border-nature outline-none transition-all" placeholder="Vad har du på hjärtat?"></textarea>
</div>
<button type="button" className="bg-nature-dark hover:bg-nature text-white font-bold py-2 px-6 rounded transition-colors duration-300 cursor-pointer">
Skicka meddelande
</button>
</form>
<div className="text-sm text-eggshell/70">
Kullabergs Naturreservat
</div>
</div>
);
const Footer = () => (
<footer className="bg-stone-800 text-stone-300 py-8 text-center mt-auto">
<p>© {new Date().getFullYear()} Naturvärdarna Kullaberg. Ta hand om naturen!</p>
</footer>
);
// --- HUVUDKOMPONENT ---
// --- MAIN COMPONENT ---
export default function App() {
const [activeTab, setActiveTab] = useState<Tab>('home');
const [lang, setLang] = useState<Language>('sv');
const renderContent = () => {
switch (activeTab) {
case 'home': return <Home />;
case 'about': return <About />;
case 'contact': return <Contact />;
default: return <Home />;
case 'home': return <Home lang={lang} />;
case 'about': return <About lang={lang} />;
default: return <Home lang={lang} />;
}
};
return (
<div className="min-h-screen flex flex-col font-sans">
<Navbar activeTab={activeTab} setActiveTab={setActiveTab} />
<main className="flex-grow">
<div className="min-h-screen flex flex-col font-sans bg-eggshell selection:bg-gold selection:text-ebony">
<Navbar activeTab={activeTab} setActiveTab={setActiveTab} lang={lang} setLang={setLang} />
<main className="grow">
{renderContent()}
</main>
<Footer />
<Footer lang={lang} />
</div>
);
}
src/index.css
+8 -4
View File
@@ -3,11 +3,15 @@
@import "tailwindcss";
@theme {
--color-nature-light: #ecfdf5;
--color-nature: #10b981;
--color-nature-dark: #064e3b;
--color-ebony: #5e6545;
--color-moss: #878b5a;
--color-eggshell: #e7e4cf;
--color-gold: #d6b456;
--color-goldenrod: #c48d2e;
--color-slate-teal: #456466;
--color-seafoam: #5B8C8A;
}
body {
background-color: #f5f5f4; /* Mjuk jordnära stenfärg */
background-color: var(--color-eggshell);
}