animate review section

razorhollow · Sep 18, 2024 · deff06d · deff06d
1 parent c34e023
commit deff06d
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 20 deletions.
diff --git a/app/components/Avatar.tsx b/app/components/Avatar.tsx
@@ -1,14 +1,17 @@
-import { getPastelColorFromName } from 'utils/colorUtils';
+import { getBrandColorFromName } from 'utils/colorUtils';
 
 export default function Avatar({ name }: { name: string }) {
-    const backgroundColor = getPastelColorFromName(name);
+    const backgroundColor = getBrandColorFromName(name).split(" ").join("");
     const firstLetter = name.charAt(0).toUpperCase();
 
+    console.log("Avatar: ", name, firstLetter, backgroundColor);
+
     return (
         <div
-            className={`flex items-center justify-center w-12 h-12 rounded-full bg-${backgroundColor} text-white`}
+            className="text-3xl flex items-center justify-center w-12 h-12 rounded-full text-white"
+            style={{ backgroundColor: backgroundColor }}
         >
             {firstLetter}
         </div>
-    )
-}
+    );
+}
diff --git a/app/components/ReviewCard.tsx b/app/components/ReviewCard.tsx
@@ -26,7 +26,7 @@ export default function ReviewCard({review }: ReviewCardProps) {
                 <Avatar name={firstName} />
                 <h3 className="text-lg font-semibold leading-7 text-gray-900">{firstName} {lastNameLetter}.</h3>
             </div>
-            <p className="text-sm leading-5 text-gray-600" >&quot;I had a great experience with Angry Loraxe. They were professional, efficient, and left my property spotless. Highly recommend!&quot;
+            <p className="text-sm leading-5 text-gray-600" >&quot;{review.reviewContent}&quot;
             </p>
             <div className="mt-3">
                 <div className="flex justify-between">

diff --git a/app/components/ReviewSection.tsx b/app/components/ReviewSection.tsx
@@ -5,11 +5,25 @@ import ReviewCard from "./ReviewCard";
 
 
 export default function ReviewSection() {
+    const duplicatedReviews = [...reviews, ...reviews];
+
     return (
-        <div className="flex justify-center mb-12 bg-accent-100">
-            {reviews.map((review, index) => (
-                <ReviewCard key={index} review={review} />
-            ))}
+        <div className=" py-12 bg-accent-100">
+            <div className="text-center">
+                <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+                Your Community&apos;s Top-Rated Tree Experts
+                </h2>
+                <p className="mt-4 text-lg leading-8 text-gray-600">
+                    With the most 5-star reviews locally, we&apos;re proud to be the preferred partner for homeowners and businesses alike.
+                </p>
+        </div>
+            <div className="flex justify-center overflow-hidden">
+                <div className="animate-scroll-right flex justify-center hover:animation-paused">
+                    {duplicatedReviews.map((review, index) => (
+                        <ReviewCard key={index} review={review} />
+                    ))}
+                </div>
+            </div>
         </div>
     );
 } 
diff --git a/app/tailwind.css b/app/tailwind.css
@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Custom utility for animation-play-state */
+@layer utilities {
+    .animation-paused {
+        animation-play-state: paused;
+}
+    .hover\:animation-paused:hover {
+        animation-play-state: paused;
+  }
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -31,7 +31,17 @@ export default {
         sans: ['Open Sans', 'sans-serif'],   // Regular
         serif: ['Playfair Display', 'serif'], // Bold
       },
+    keyframes: {
+      //scroll from right to left
+      'scroll-right': {
+        '0%': { transform: 'translateX(0)' },
+        '100%': { transform: 'translateX(-50%)' },
+      },
     },
-    },
-  plugins: [],
+    animation: {
+      'scroll-right': 'scroll-right 200s linear infinite',
+    }
+  },
+},
+plugins: [],
 } satisfies Config;
diff --git a/utils/colorUtils.js b/utils/colorUtils.js
@@ -1,16 +1,35 @@
+// Utility function that returns an array of your brand colors
+const brandColors = [
+    'hsl(24,96%,90%)',  // primary 100
+    'hsl(24,96%,70%)',  // primary 300
+    'hsl(24,96%,50%)',  // primary 500 (Base: #F36301)
+    'hsl(24,96%,40%)',  // primary 700
+    'hsl(24,96%,25%)',  // primary 900
+    'hsl(74,25%,85%)',  // accent 100
+    'hsl(74,25%,50%)',  // accent 300
+    'hsl(74,25%,35%)',  // accent 500 (Base: #525938)
+    'hsl(74,25%,30%)',  // accent 700
+    'hsl(74,25%,15%)',  // accent 900
+    'hsl(0,0%,95%)',    // neutral 100
+    'hsl(0,0%,80%)',    // neutral 300
+    'hsl(0,0%,50%)',    // neutral 500
+    'hsl(0,0%,30%)',    // neutral 700
+    'hsl(0, 0%, 10%)',    // neutral 900
+];
+
+// Updated stringToHue function
 export function stringToHue(str) {
     let hash = 0;
     for (let i = 0; i < str.length; i++) {
         // Generate a hash code from the string
         hash = str.charCodeAt(i) + ((hash << 5) - hash);
     }
-    // Convert hash code to a hue value between 0 and 359
-    return Math.abs(hash % 360);
+    // Convert hash code to an index of the brand color array
+    return Math.abs(hash % brandColors.length);
 }
 
-export function getPastelColorFromName(name) {
-    const hue = stringToHue(name);
-    const saturation = 70; // Pastel saturation
-    const lightness = 85;  // Pastel lightness
-    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
-}
+// Updated getBrandColorFromName function
+export function getBrandColorFromName(name) {
+    const colorIndex = stringToHue(name);
+    return brandColors[colorIndex]; // Return a color from the brand color array
+}