From f109e79c0b6b73fa3de00674c855bd61e661010b Mon Sep 17 00:00:00 2001 From: Gemini AI Date: Sun, 28 Dec 2025 02:34:05 +0400 Subject: [PATCH] style(google-ads): Fix results card opacity and revamp UI with premium styling - Fixed bug where results card stayed dimmed at opacity-50 when magic wand results were shown - Added glassmorphism, depth, and vibrant gradients to market analysis cards - Implemented realistic Google Search preview for ad copies - Enhanced competitor insights with better hierarchy and spy-themed data blocks - Modernized campaign structure with a high-contrast dark theme --- components/GoogleAdsGenerator.tsx | 244 ++++++++++++++++++++---------- 1 file changed, 163 insertions(+), 81 deletions(-) diff --git a/components/GoogleAdsGenerator.tsx b/components/GoogleAdsGenerator.tsx index 2a16aab..21b34a4 100644 --- a/components/GoogleAdsGenerator.tsx +++ b/components/GoogleAdsGenerator.tsx @@ -343,25 +343,34 @@ export default function GoogleAdsGenerator() { switch (sectionId) { case "keywords": return ( -
+
{googleAdsResult.keywords?.primary?.length > 0 && ( -
-

Primary Keywords

-
+
+

+ Primary High-Intent Keywords +

+
{googleAdsResult.keywords.primary.map((k, i) => ( - - {k.keyword} {k.cpc && ({k.cpc})} - +
+ {k.keyword} + {k.cpc && ( + + {k.cpc} + + )} +
))}
)} {googleAdsResult.keywords?.longTail?.length > 0 && ( -
-

Long-Tail Keywords

-
+
+

+ Long-Tail Opportunities +

+
{googleAdsResult.keywords.longTail.map((k, i) => ( - + {k.keyword} ))} @@ -369,11 +378,13 @@ export default function GoogleAdsGenerator() {
)} {googleAdsResult.keywords?.negative?.length > 0 && ( -
-

Negative Keywords

+
+

+ Negative Keywords (Exclude) +

{googleAdsResult.keywords.negative.map((k, i) => ( - + {k.keyword} ))} @@ -384,18 +395,30 @@ export default function GoogleAdsGenerator() { ); case "adcopies": return ( -
+
{googleAdsResult.adCopies?.map((ad, i) => ( -
-
Ad Variation {i + 1}
-
+
+
+
+
Google Search Preview • Ad Variation {i + 1}
+
+ + + +
+
+
{ad.headlines?.map((h, j) => ( -
{h}
+
+ {h} +
))}
-
+
{ad.descriptions?.map((d, j) => ( -

{d}

+

+ "{d}" +

))}
@@ -404,27 +427,34 @@ export default function GoogleAdsGenerator() { ); case "campaigns": return ( -
+
{googleAdsResult.campaigns?.map((camp, i) => ( -
-
+
+
+ +
+
-
{camp.name}
-
{camp.type}
+
{camp.type} Strategy
+

{camp.name}

{camp.budget && ( -
-
${camp.budget.monthly}/mo
-
${camp.budget.daily}/day
+
+
${camp.budget.monthly}
+
Budget / Month
)}
{camp.adGroups?.length > 0 && ( -
-
Ad Groups
-
+
+
+
Target Ad Groups
+
+
{camp.adGroups.map((g, j) => ( - {g.name} +
+ {g.name} +
))}
@@ -435,23 +465,37 @@ export default function GoogleAdsGenerator() { ); case "implementation": return ( -
+
{googleAdsResult.implementation?.setupSteps?.length > 0 && ( -
-

Setup Steps

-
    +
    +

    +
    1
    + Step-by-Step Configuration +

    +
      {googleAdsResult.implementation.setupSteps.map((step, i) => ( -
    1. {step}
      2. +
    2. + + {String(i + 1).padStart(2, '0')} + +

      {step}

      +
      3. ))}
    )} {googleAdsResult.implementation?.qualityScoreTips?.length > 0 && ( -
    -

    Quality Score Tips

    -
      +
      +

      +
      2
      + Quality Score Optimization +

      +
        {googleAdsResult.implementation.qualityScoreTips.map((tip, i) => ( -
      • {tip}
        • +
      • +
        +

        {tip}

        +
        • ))}
      @@ -459,7 +503,7 @@ export default function GoogleAdsGenerator() {
    ); default: - return 
    {googleAdsResult.rawContent}
    ; + return 
    {googleAdsResult.rawContent}
    ; } }; @@ -469,40 +513,50 @@ export default function GoogleAdsGenerator() { switch (sectionId) { case "market": return ( -
    +
    -
    -
    +
    +
    + +
    +
    Industry Size
    -
    {magicWandResult.marketAnalysis.industrySize}
    +
    {magicWandResult.marketAnalysis.industrySize}
    -
    -
    +
    +
    + +
    +
    Growth Rate
    -
    {magicWandResult.marketAnalysis.growthRate}
    +
    {magicWandResult.marketAnalysis.growthRate}
    -
    -
    -

    - Market Leaders +
    +
    +

    + Market Leaders

    {magicWandResult.marketAnalysis.topCompetitors.map((c, i) => ( - {c} + + {c} + ))}
    -
    -

    - Emerging Trends +
    +

    + Emerging Trends

    -
      +
        {magicWandResult.marketAnalysis.marketTrends.map((t, i) => ( -
      • - +
      • + + {i + 1} + {t}
        • ))} @@ -513,37 +567,61 @@ export default function GoogleAdsGenerator() { ); case "competitors": return ( -
        +
        {magicWandResult.competitorInsights.map((comp, i) => ( -
        -
        -

        {comp.competitor}

        - +
        +
        +
        +
        + {comp.competitor.charAt(0)} +
        +
        +

        {comp.competitor}

        + Competitor Intel +
        +
        +
        -
        -
        -
        Strengths
        -
          +
          +
          +
          + Strengths +
          +
            {comp.strengths.map((s, j) => ( -
          • - ✓ {s} +
          • +
            + ✓ +
            + {s}
            • ))}
          -
          -
          Weaknesses
          -
            +
            +
            + Weaknesses +
            +
              {comp.weaknesses.map((w, j) => ( -
            • - ✗ {w} +
            • +
              + ! +
              + {w}
              • ))}
          -
          - Spy Report: {comp.adStrategy} +
          +
          +
          SPY
          +

          + Intelligence: + "{comp.adStrategy}" +

          +
          ))} @@ -828,8 +906,12 @@ export default function GoogleAdsGenerator() { - - + + {magicWandResult ? (