unify background color

Author: StackOverflowIsBetterThanAnyAI

src/components/feed/Feed.tsx

@@ -70,7 +70,7 @@ const Feed = () => {
             className="w-full flex flex-col items-center gap-8 lg:gap-12 max-w-7xl relative isolate bg-stone-300 text-stone-950 lg:rounded-lg p-3 sm:p-4 lg:p-6
             drop-shadow-stone-900 drop-shadow-sm"
         >
-            <div className="w-full flex flex-col items-center px-14 sm:px-16 py-6 bg-stone-400 rounded-lg shadow-md shadow-stone-600">
+            <div className="w-full flex flex-col items-center px-14 sm:px-16 py-6 bg-stone-400/60 rounded-lg shadow-md shadow-stone-500">
                 <div className="w-full flex flex-col gap-4 max-w-3xl">
                     <h2 className="self-start text-very-large font-semibold underline">
                         Top 10 Posts of the Week

src/components/hero/Hero.tsx

@@ -56,7 +56,7 @@ const Hero = () => {
                         routes from JSON Placeholder to fetch and display
                         comments along with user information in a card format.
                     </p>
-                    <p className="text-center p-4 mt-4 bg-stone-300 rounded-lg">
+                    <p className="text-center p-4 mt-4 bg-stone-400/60  rounded-lg">
                         Check out the top 10 posts of the week right now!
                         <Button
                             asChild
@@ -74,7 +74,7 @@ const Hero = () => {
                         </Button>
                     </p>
                 </div>
-                <div className="hidden min-[864px]:flex flex-col gap-2 self-center justify-center items-center p-4 h-fit bg-stone-300 outline-4 outline-stone-600 rounded-lg">
+                <div className="hidden min-[864px]:flex flex-col gap-2 self-center justify-center items-center p-4 h-fit bg-stone-400/60  outline-4 outline-stone-600 rounded-lg">
                     <Image
                         src={heroLogo}
                         alt="Infinite Scroll Feed Logo"