feat: update layouts and styles

- Update the footer layout to include copyright information and navigation links
- Improve the header layout with a responsive theme switcher
- Configure Tailwind CSS to use light and dark themes

This change enhances the project's user interface and user experience by providing a more visually appealing and responsive design. It includes updates to the footer and header layouts, making it easier for users to navigate the site. Additionally, it configures Tailwind CSS to use light and dark themes, allowing users to customize their experience to suit their preferences.

app/views/layouts/_footer.html.erb

@@ -36,4 +36,15 @@
       </nav>
     </div>
   </div>
+</footer>
+<footer class="footer bg-neutral text-neutral-content p-10">
+  <small>
+    The <a href="https://www.railstutorial.org">Ruby on Rails Tutorial</a>
+    by <a href="https://www.michaelhartl.com">Michael Hartl</a>
+  </small>
+  <nav>
+    <%= link_to "About", about_url, class: "link link-hover"%>
+    <%= link_to "Contact", contact_url, class: "link link-hover"%>
+    <a href="https://news.railstutorial.org" class="link link-hover" >News</a>
+  </nav>
 </footer>

app/views/layouts/_header.html.erb

@@ -67,5 +67,27 @@
         <% end %>
       </ul>
     </details>
+    <label class="swap swap-rotate">
+      <!-- this hidden checkbox controls the state -->
+      <input type="checkbox" class="theme-controller" value="synthwave" />
+
+      <!-- sun icon -->
+      <svg
+        class="swap-off h-10 w-10 fill-current"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24">
+        <path
+          d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+      </svg>
+
+      <!-- moon icon -->
+      <svg
+        class="swap-on h-10 w-10 fill-current"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24">
+        <path
+          d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+      </svg>
+    </label>
   </div>
 </div>

config/tailwind.config.js

@@ -24,8 +24,8 @@ module.exports = {
     // require('@tailwindcss/container-queries'),
   ],
   daisyui: {
-    themes: false, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
+    themes: ["light", "dark"], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
-    darkTheme: "light", // name of one of the included themes for dark mode
+    darkTheme: "dark", // name of one of the included themes for dark mode
     base: true, // applies background color and foreground color for root element by default
     styled: true, // include daisyUI colors and design decisions for all components
     utils: true, // adds responsive and modifier utility classes