Visual edit in Lovable

Edited UI in Lovable

Author: lovable-dev[bot]

src/components/CTASection.tsx

@@ -2,14 +2,13 @@ import { Button } from "@/components/ui/button";
 import { Play, Star } from "lucide-react";
 import { Translations } from "@/i18n/translations";
 import logo from "@/assets/logo.png";
-
 interface CTASectionProps {
   t: Translations;
 }
-
-const CTASection = ({ t }: CTASectionProps) => {
-  return (
-    <section className="py-24 relative overflow-hidden">
+const CTASection = ({
+  t
+}: CTASectionProps) => {
+  return <section className="py-24 relative overflow-hidden">
       {/* Background */}
       <div className="absolute inset-0 bg-gradient-to-b from-background via-primary/5 to-background" />
       <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary/10 rounded-full blur-3xl" />
@@ -18,11 +17,7 @@ const CTASection = ({ t }: CTASectionProps) => {
         <div className="max-w-3xl mx-auto text-center">
           {/* Logo */}
           <div className="mb-8">
-            <img 
-              src={logo} 
-              alt="WorkoutLogs" 
-              className="w-20 h-20 mx-auto animate-float" 
-            />
+            <img src={logo} alt="WorkoutLogs" className="h-20 mx-auto animate-float aspect-ratio-[2/1]" />
           </div>
 
           <h2 className="text-3xl md:text-5xl font-bold mb-6">
@@ -37,23 +32,13 @@ const CTASection = ({ t }: CTASectionProps) => {
 
           {/* Rating */}
           <div className="flex items-center justify-center gap-1 mb-8">
-            {[1, 2, 3, 4, 5].map((star) => (
-              <Star 
-                key={star} 
-                className={`w-5 h-5 ${star <= 4 ? 'text-yellow-400 fill-yellow-400' : 'text-yellow-400 fill-yellow-400/50'}`} 
-              />
-            ))}
+            {[1, 2, 3, 4, 5].map(star => <Star key={star} className={`w-5 h-5 ${star <= 4 ? 'text-yellow-400 fill-yellow-400' : 'text-yellow-400 fill-yellow-400/50'}`} />)}
             <span className="text-muted-foreground ml-2">4.8 {t.cta.ratingText}</span>
           </div>
 
           {/* CTA Button */}
           <Button variant="hero" size="xl" asChild>
-            <a 
-              href="https://play.google.com/store/apps/details?id=com.workoutlogs" 
-              target="_blank" 
-              rel="noopener noreferrer"
-              className="flex items-center gap-3"
-            >
+            <a href="https://play.google.com/store/apps/details?id=com.workoutlogs" target="_blank" rel="noopener noreferrer" className="flex items-center gap-3">
               <Play className="w-5 h-5" />
               {t.cta.downloadButton}
             </a>
@@ -64,8 +49,6 @@ const CTASection = ({ t }: CTASectionProps) => {
           </p>
         </div>
       </div>
-    </section>
-  );
+    </section>;
 };
-
-export default CTASection;
+export default CTASection;