Initial commit: Tool Website with Password Generator, Image Converter and Bookmarks

app/page.tsx

@@ -0,0 +1,100 @@
+'use client'
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { PinnedWebsite } from './types/types'
+import AddWebsite from './components/AddWebsite'
+
+export default function Home() {
+  const [pinnedWebsites, setPinnedWebsites] = useState<PinnedWebsite[]>([])
+  
+  useEffect(() => {
+    const saved = localStorage.getItem('pinnedWebsites')
+    if (saved) {
+      setPinnedWebsites(JSON.parse(saved))
+    }
+  }, [])
+
+  const handleDelete = (id: string) => {
+    const newWebsites = pinnedWebsites.filter(site => site.id !== id)
+    localStorage.setItem('pinnedWebsites', JSON.stringify(newWebsites))
+    setPinnedWebsites(newWebsites)
+  }
+
+  const tools = [
+    {
+      name: 'Password Generator',
+      file: '/passwortgenerator',
+      description: 'Create secure passwords with custom options',
+    },
+    {
+      name: 'Image Converter',
+      file: '/bildconverter',
+      description: 'Convert images between different formats',
+    },
+    {
+      name: 'More Coming Soon',
+      file: '/about',
+      description: 'Stay tuned for new tools!',
+      isComingSoon: true
+    }
+  ]
+
+  return (
+    <main className="min-h-screen p-8 text-white">
+      <div className="max-w-7xl mx-auto space-y-12">
+        {/* Tools Section */}
+        <section>
+          <h2 className="text-2xl font-bold mb-6">Tools</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {tools.map((tool, index) => (
+              <Link 
+                key={index}
+                href={tool.file}
+                className={`p-6 rounded-lg border border-gray-700 bg-zinc-800 transition-colors duration-200 cursor-pointer
+                  ${tool.isComingSoon 
+                    ? 'opacity-50 hover:opacity-75' 
+                    : 'hover:border-blue-500'}`}
+              >   
+                <h2 className="text-xl font-semibold mb-2">{tool.name}</h2>
+                <p className="text-gray-400">{tool.description}</p>
+              </Link>
+            ))}
+          </div>
+        </section>
+
+        {/* Pinned Websites Section */}
+        <section>
+          <h2 className="text-2xl font-bold mb-6">Bookmarked Websites</h2>
+          <AddWebsite />
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {pinnedWebsites.map((website) => (
+              <div
+                key={website.id}
+                className="group relative p-6 rounded-lg border border-gray-700 bg-zinc-800 hover:border-blue-500 transition-colors"
+              >
+                <a
+                  href={website.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block"
+                >
+                  <h3 className="text-xl font-semibold mb-2">{website.title}</h3>
+                  <p className="text-gray-400 truncate">{website.url}</p>
+                </a>
+                <button
+                  onClick={(e) => {
+                    e.preventDefault()
+                    handleDelete(website.id)
+                  }}
+                  className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 text-gray-400 hover:text-red-500 transition-opacity"
+                >
+                  ✕
+                </button>
+              </div>
+            ))}
+          </div>
+        </section>
+      </div>
+    </main>
+  )
+}