Style and Hero (#13)

* consistent style across website * change and to + * improve the add part with more details * improve the add part with more details * refactor: update bold html tags to tailwindclasses * refactor: remove hackernews * refactor: update header to non-transparent * refactor: reset hero --------- Co-authored-by: Michael Scheiwiller <[email protected]>
protontypes · Dec 16, 2024 · f6ee6ff · f6ee6ff
1 parent 40addb6
commit f6ee6ff
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 33 deletions.
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -5,8 +5,8 @@ export default function Footer() {
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="bg-black-500">
-      <div className="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12 py-4">
+    <footer className="bg-background border-t border-black-400">
+      <div className="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12 py-8">
         {/* Main Footer Content */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-12 pb-12 border-b border-black-400">
           {/* Logo and Description */}

diff --git a/components/GetStarted.tsx b/components/GetStarted.tsx
@@ -12,7 +12,7 @@ export default function GetStarted() {
       <div className="max-w-7xl mx-auto">
         <div className="relative bg-glass backdrop-blur-md shadow-elevated rounded-3xl p-12 text-center overflow-hidden">
           <Image
-            src="vibrant-aerial-view-of-tropical-island-with-turquoise-water-and-reefs_croped.jpg"
+            src="image_183.png"
             alt="Caspian Sea Satellite View"
             fill
             className="object-cover opacity-75"
@@ -23,7 +23,7 @@ export default function GetStarted() {
             <h2 className="text-3xl md:text-4xl text-green-500 font-semibold tracking-tight mb-6">
               Ready to Make an Impact?
             </h2>
-            <p className="text-xl text-white/90 max-w-2xl mx-auto mb-12">
+            <p className="text-xl text-white/90 text-bold max-w-2xl mx-auto mb-12">
               Join our community of contributors and help drive sustainable
               technology forward through open source collaboration.
             </p>
@@ -32,7 +32,7 @@ export default function GetStarted() {
                 href="https://opensustain.tech/contributing/"
                 target="_blank"
                 className="rounded-xl bg-primary-600 px-8 py-4 text-lg text-white 
-                  shadow-subtle hover:bg-green-500 
+                  text-bold shadow-subtle hover:bg-green-500 
                   transition-all duration-300 flex items-center gap-3"
               >
                 Submit A Project

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -6,9 +6,9 @@ export default function Header() {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
 
   return (
-    <header className="fixed w-full backdrop-blur-md top-0 z-50">
-      <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-        <div className="bg-glass shadow-glass rounded-2xl px-6 py-3">
+    <header className="fixed w-full top-0 z-50 bg-background shadow-sm border-b border-black-400">
+      <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="py-3">
           <div className="flex justify-between items-center">
             <Link href="/" className="flex items-center">
               <Image
@@ -59,20 +59,20 @@ export default function Header() {
             <div className="hidden sm:flex items-center space-x-6">
               <Link
                 href="#about"
-                className="py-2 text-lg text-silver-400 hover:text-primary-600 transition-colors"
+                className="py-2 text-lg text-silver-400 text-bold hover:text-primary-600 transition-colors"
               >
                 About
               </Link>
               <Link
                 href="#how-it-works"
-                className="py-2 text-lg text-silver-400 hover:text-primary-600 transition-colors"
+                className="py-2 text-lg text-silver-400 text-bold hover:text-primary-600 transition-colors"
               >
                 How It Works
               </Link>
               <Link href="https://opensustain.tech/contributing">
                 <button
                   className="rounded-xl bg-primary-600 px-6 py-2.5 text-lg text-white 
-                  hover:bg-green-500 
+                  text-bold hover:bg-green-500 
                   transition-all duration-300"
                 >
                   Get Started

diff --git a/components/Hero.tsx b/components/Hero.tsx
@@ -18,15 +18,16 @@ export default function Hero() {
               className="text-5xl md:text-6xl lg:text-7xl font-semibold 
               tracking-tight text-white-500 leading-tight"
             >
-              Fund Open Source in{" "}<br className="hidden sm:inline" />
+              Fund Open Source in <br className="hidden sm:inline" />
               <span className="text-green-500">Climate & Sustainability</span>
             </h1>
             <p className="mt-6 text-xl text-silver-400 max-w-3xl">
-              Add projects to OpenSustain.tech to support open source making a difference in our world.
+              Add projects to OpenSustain.tech to support open source making a
+              difference in our world.
             </p>
           </div>
         </div>
       </div>
     </section>
   );
-}
+}
diff --git a/components/HowItWorks.tsx b/components/HowItWorks.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { FaSearch, FaRegHandPointRight, FaLinkedin, FaReddit, FaYCombinator } from "react-icons/fa";
+import { FaSearch, FaRegHandPointRight, FaLinkedin, FaReddit } from "react-icons/fa";
 import { FaCodePullRequest, FaMastodon, FaBluesky, FaXTwitter } from "react-icons/fa6";
 
 export default function HowItWorks() {
@@ -9,7 +9,7 @@ export default function HowItWorks() {
       title: "1. Add a Project",
       description:
         "Find an missing impactful open source project in climate and sustainability and add it to OpenSustain.tech. We'll guide you through the process!",
-      details: "It's easy - just open a pull request with the project details",
+      details: "It is easy - just open a pull request and provide the repository, title and a sentence.",
       link: "https://github.com/protontypes/open-sustainable-technology/blob/main/CONTRIBUTING.md#contributing-guide",
       icon: <FaCodePullRequest className="w-8 h-8 text-primary-600" />,
     },
@@ -18,14 +18,14 @@ export default function HowItWorks() {
       description:
         "Choose any project from OpenSustain.tech to receive 100€ (except your own - spread the love!)",
       details:
-        "Browse all projects which provide a funding possibility with the link below.",
+        "Browse all projects which provide a funding possibility.",
       link: "https://opensustain.tech/spreadsheet/",
       icon: <FaSearch className="w-8 h-8 text-primary-600" />,
     },
     {
       title: "3. We Send the Money",
       description:
-        "Once your pull request is merged, we'll donate €100 to your chosen project via Open Source Collective or GitHub Sponsors",
+        "Once your pull request is merged, we'll donate 100€ to your chosen project via Open Source Collective or GitHub Sponsors",
       details:
         "Share your contribution with <strong>#OpenClimateFund</strong> and help us grow the community! Your voice matters in supporting open source in sustainability.",
       socialShare: {
@@ -113,21 +113,6 @@ export default function HowItWorks() {
                       >
                         <FaBluesky className="w-5 h-5" />
                       </a>
-                      <a
-                        href={`https://news.ycombinator.com/submitlink?u=${encodeURIComponent(
-                          step.socialShare.link
-                        )}&t=${encodeURIComponent(
-                          step.socialShare.text.substring(
-                            0,
-                            52
-                          ) + "! #OpenClimateFund"
-                        )}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline-flex items-center gap-2 text-primary-600 hover:text-green-500 font-medium group"
-                      >
-                        <FaYCombinator className="w-5 h-5" />
-                      </a>
                       <a
                         href={`https://reddit.com/submit?url=${encodeURIComponent(
                           step.socialShare.link

diff --git a/public/image_183.png b/public/image_183.png