Some design optimisations / suggestions (#4)

* Some design optimisations * Buttons, colors, and whitespaces made more consistent --------- Co-authored-by: Rogier Schoenmaker <[email protected]>
protontypes · Dec 4, 2024 · b4f05fe · b4f05fe
1 parent 67718ce
commit b4f05fe
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 25 deletions.
diff --git a/components/About.tsx b/components/About.tsx
@@ -1,11 +1,11 @@
 export default function About() {
   return (
-    <section className="py-24 px-6 sm:px-8 lg:px-12 bg-silver-50">
+    <section className="pb-12 pt-12 px-6 sm:px-8 lg:px-12 bg-silver-50">
       <div className="max-w-7xl mx-auto animate-fade-in">
         <div className="grid md:grid-cols-2 gap-12">
           <div className="bg-glass shadow-glass rounded-2xl p-8 
             hover:shadow-elevated transition-all duration-300">
-            <h3 className="text-3xl font-semibold tracking-tight text-black-800">
+            <h3 className="text-3xl font-semibold tracking-tight text-primary-600">
               About OpenClimate.fund
             </h3>
             <p className="mt-6 text-lg text-silver-400 leading-relaxed">

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -6,7 +6,7 @@ export default function Footer() {
 
   return (
     <footer className="bg-black-500">
-      <div className="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12 py-16">
+      <div className="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12 py-4">
         {/* 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 */}
@@ -36,7 +36,7 @@ export default function Footer() {
               href="https://opensustain.tech/"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-silver-400 hover:text-primary-400 transition-colors text-sm"
+              className="text-silver-400 hover:text-primary-600 transition-colors text-sm"
             >
               Powered by OpenSustain.tech
             </Link>

diff --git a/components/GetStarted.tsx b/components/GetStarted.tsx
@@ -4,10 +4,10 @@ import Link from 'next/link';
 
 export default function GetStarted() {
   return (
-    <section className="py-24 px-6 sm:px-8 lg:px-12 bg-gradient-to-b from-silver-50 to-white">
+    <section className="pb-12 pt-12 px-6 sm:px-8 lg:px-12 bg-gradient-to-b from-silver-50 to-white">
       <div className="max-w-7xl mx-auto">
         <div className="bg-glass backdrop-blur-md shadow-elevated rounded-3xl p-12 text-center">
-          <h2 className="text-3xl md:text-4xl font-semibold tracking-tight text-black-800 mb-6">
+          <h2 className="text-3xl md:text-4xl font-semibold tracking-tight text-primary-600 mb-6">
             Ready to Make an Impact?
           </h2>
           <p className="text-xl text-silver-400 max-w-2xl mx-auto mb-12">
@@ -18,19 +18,18 @@ export default function GetStarted() {
               href="https://github.com/protontypes/open-sustainable-technology/blob/main/CONTRIBUTING.md#contributing-guide"
               target="_blank"
               className="rounded-xl bg-primary-600 px-8 py-4 text-lg text-white 
-                shadow-subtle hover:shadow-elevated hover:bg-primary-500 
+                shadow-subtle hover:bg-green-500 
                 transition-all duration-300 flex items-center gap-3"
             >
               <FaGithub className="w-6 h-6" />
               Submit Your Project
             </Link>
             <Link 
               href="#how-it-works"
-              className="rounded-xl bg-glass px-8 py-4 text-lg text-black-800 
-                shadow-subtle hover:shadow-elevated 
+              className="inline-block hover:text-primary-600 text-green-500 font-medium 
                 transition-all duration-300"
             >
-              Learn More
+              Learn more →
             </Link>
           </div>
         </div>

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 top-0 z-50">
+    <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 backdrop-blur-md shadow-glass rounded-2xl px-6 py-3">
+        <div className="bg-glass shadow-glass rounded-2xl px-6 py-3">
           <div className="flex justify-between items-center">
             <Link href="/" className="flex items-center">
               <Image
@@ -71,7 +71,7 @@ export default function Header() {
               </Link>
               <button
                 className="rounded-xl bg-primary-600 px-6 py-2.5 text-lg text-white 
-                shadow-subtle hover:shadow-elevated hover:bg-primary-500 
+                hover:bg-green-500 
                 transition-all duration-300"
               >
                 Get Started

diff --git a/components/Hero.tsx b/components/Hero.tsx
@@ -2,15 +2,15 @@ import Link from "next/link";
 
 export default function Hero() {
   return (
-    <section className="pt-32 pb-24 px-6 sm:px-8 lg:px-12">
+    <section className="pt-32 pb-12 px-6 sm:px-8 lg:px-12">
       <div className="max-w-7xl mx-auto animate-fade-in">
         <div
           className="bg-gradient-to-b from-azure-500/10 to-transparent 
-          rounded-4xl shadow-elevated p-12 backdrop-blur-xs"
+          rounded-3xl shadow-elevated p-12 backdrop-blur-xs"
         >
           <h1
             className="text-5xl md:text-6xl lg:text-7xl font-semibold 
-            tracking-tight text-black-500 leading-tight"
+            tracking-tight text-white-500 leading-tight"
           >
             Fund Open Source in<br className="hidden sm:inline" />
             <span className="text-green-500">Climate & Sustainability</span>
@@ -23,7 +23,7 @@ export default function Hero() {
             <Link href="https://github.com/protontypes/open-sustainable-technology/blob/main/CONTRIBUTING.md#contributing-guide">
               <button
                 className="rounded-xl bg-primary-600 px-6 py-3 text-lg text-white 
-              shadow-subtle hover:shadow-elevated hover:bg-primary-500 
+              shadow-subtle hover:shadow-elevated hover:bg-green-500 
               transition-all duration-300"
               >
                 Submit a Project

diff --git a/components/HowItWorks.tsx b/components/HowItWorks.tsx
@@ -29,9 +29,9 @@ export default function HowItWorks() {
   ];
 
   return (
-    <section className="py-24 px-6 sm:px-8 lg:px-12">
+    <section className="pb-12 pt-12 px-6 sm:px-8 lg:px-12">
       <div className="max-w-7xl mx-auto">
-        <h2 className="text-3xl md:text-4xl font-semibold tracking-tight text-black-800 mb-12 text-center">
+        <h2 className="text-3xl md:text-4xl font-semibold tracking-tight text-primary-600 mb-12 text-center">
           How It Works
         </h2>
         <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
@@ -43,7 +43,7 @@ export default function HowItWorks() {
               <div className="bg-primary-50 rounded-xl p-4 w-16 h-16 flex items-center justify-center mb-6">
                 {step.icon}
               </div>
-              <h3 className="text-2xl font-semibold tracking-tight text-black-800 mb-4">
+              <h3 className="text-2xl font-semibold tracking-tight text-green-500 mb-4">
                 {step.title}
               </h3>
               <p className="text-lg text-silver-400 leading-relaxed">
@@ -52,7 +52,7 @@ export default function HowItWorks() {
               {step.link && (
                 <a 
                   href={step.link}
-                  className="mt-4 inline-block text-primary-600 hover:text-primary-700 font-medium"
+                  className="mt-4 inline-block text-primary-600 hover:text-green-500 font-medium"
                   target="_blank"
                   rel="noopener noreferrer"
                 >

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -22,14 +22,14 @@ const config: Config = {
         background: "var(--background)",
         foreground: "var(--foreground)",
         primary: {
-          DEFAULT: "#2563eb",
+          DEFAULT: "#3b52ff",
           50: "#eff6ff",
           100: "#dbeafe",
           200: "#bfdbfe",
           300: "#93c5fd",
           400: "#60a5fa",
           500: "#3b82f6",
-          600: "#2563eb",
+          600: "#3b52ff",
           700: "#1d4ed8",
           800: "#1e40af",
           900: "#1e3a8a",
@@ -48,12 +48,12 @@ const config: Config = {
           900: "#dff6ff"
         },
         green: {
-          DEFAULT: "#47f6ad",
+          DEFAULT: "#00e6a7",
           100: "#033c24",
           200: "#067949",
           300: "#09b56d",
           400: "#0bf292",
-          500: "#47f6ad",
+          500: "#00e6a7",
           600: "#6bf8bd",
           700: "#90face",
           800: "#b5fcde",