diff --git a/src/components/Analysis/StrategyHero.tsx b/src/components/Analysis/StrategyHero.tsx index 7cdc4c0..ee981a7 100644 --- a/src/components/Analysis/StrategyHero.tsx +++ b/src/components/Analysis/StrategyHero.tsx @@ -75,7 +75,7 @@ function StrategyHero() { {/* Dotted Line 2 */} -
+
diff --git a/src/components/KeywordRow.tsx b/src/components/KeywordRow.tsx index 30bc036..950fe06 100644 --- a/src/components/KeywordRow.tsx +++ b/src/components/KeywordRow.tsx @@ -10,9 +10,9 @@ interface KeywordRowProps { export function KeywordRow({ keyword }: KeywordRowProps) { return ( -
+
-
+
diff --git a/src/components/KeywordSection.tsx b/src/components/KeywordSection.tsx index 0b3b18e..342c137 100644 --- a/src/components/KeywordSection.tsx +++ b/src/components/KeywordSection.tsx @@ -1,6 +1,8 @@ import { useState } from "react"; import { type KeywordSection as KeywordSectionType } from "../assets/keyword-data"; import { KeywordRow } from "./KeywordRow"; +import MetricCard from "./shared/MetricCard"; +import MetricTooltip from "./shared/MetricTooltip"; interface KeywordSectionProps { section: KeywordSectionType; @@ -17,12 +19,12 @@ export function KeywordSection({ section }: KeywordSectionProps) { >
{isExpanded ? ( - - + + ) : ( - - + + )}
@@ -34,9 +36,9 @@ export function KeywordSection({ section }: KeywordSectionProps) { {isExpanded && section.keywords.length > 0 && ( <> -
-
- Keyword +
+
+ Keyword
G Search Vol @@ -67,21 +69,19 @@ export function KeywordSection({ section }: KeywordSectionProps) {
Beacons - - - - + +
- {section.keywords.map((keyword) => { - return ; - })} + {section.keywords.map((keyword) => ( + + ))}
-
-
diff --git a/src/components/shared/ActionBadge.tsx b/src/components/shared/ActionBadge.tsx index f4ed65d..eef0dab 100644 --- a/src/components/shared/ActionBadge.tsx +++ b/src/components/shared/ActionBadge.tsx @@ -17,9 +17,9 @@ export function ActionBadge({ type }: ActionBadgeProps) { if (type === "active") { return ( -
- - +
+ + Active
@@ -27,7 +27,7 @@ export function ActionBadge({ type }: ActionBadgeProps) { } return ( -
+
diff --git a/src/components/shared/HeaderPage.tsx b/src/components/shared/HeaderPage.tsx index 304b6a3..05d678e 100644 --- a/src/components/shared/HeaderPage.tsx +++ b/src/components/shared/HeaderPage.tsx @@ -1,7 +1,7 @@ import MetricCard from "./MetricCard" import UrlDropdown from "./UrlDropdown" -const HeaderPage = ({ title }: { title: string }) => { +const HeaderPage = ({ title, buttonShow = false }: { title: string, buttonShow?: boolean }) => { return (
@@ -40,14 +40,16 @@ const HeaderPage = ({ title }: { title: string }) => {
+ { + buttonShow && + + Export to Slides + + }
) } diff --git a/src/components/shared/MetricBadge.tsx b/src/components/shared/MetricBadge.tsx index fb57ebc..0a42a5c 100644 --- a/src/components/shared/MetricBadge.tsx +++ b/src/components/shared/MetricBadge.tsx @@ -6,7 +6,7 @@ interface MetricBadgeProps { export function MetricBadge({ type, value }: MetricBadgeProps) { if (type === "google") { return ( -
+
@@ -26,7 +26,7 @@ interface MetricBadgeProps { } return ( -
+
diff --git a/src/components/shared/MetricTooltip.tsx b/src/components/shared/MetricTooltip.tsx index f7c7b99..4dcd7c8 100644 --- a/src/components/shared/MetricTooltip.tsx +++ b/src/components/shared/MetricTooltip.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; -function MetricTooltip({ tooltipText }: { tooltipText: string, }) { +function MetricTooltip({ tooltipText, extraTooltipText, widthfit }: { tooltipText: string, extraTooltipText?: string, widthfit: boolean }) { const [isHovered, setIsHovered] = useState(false); @@ -17,11 +17,12 @@ function MetricTooltip({ tooltipText }: { tooltipText: string, }) { - {isHovered && ( -
+
{/* Tooltip triangle */} -
+
+ {extraTooltipText && {extraTooltipText} } + {tooltipText}
)} diff --git a/src/components/shared/UrlDropdown.tsx b/src/components/shared/UrlDropdown.tsx index 07db9d4..798dfe8 100644 --- a/src/components/shared/UrlDropdown.tsx +++ b/src/components/shared/UrlDropdown.tsx @@ -22,7 +22,7 @@ export default function UrlDropdown() {
{/* Input box */}
{selected} diff --git a/src/components/shared/VisibilityIndicator.tsx b/src/components/shared/VisibilityIndicator.tsx index 8b3f3d7..4456958 100644 --- a/src/components/shared/VisibilityIndicator.tsx +++ b/src/components/shared/VisibilityIndicator.tsx @@ -24,7 +24,7 @@ export function VisibilityIndicator({ platform, visible }: VisibilityIndicatorPr }; return ( -
+
{platformIcons[platform]} {visible ? "Visible" : "Invisible"} diff --git a/src/pages/Analysis.tsx b/src/pages/Analysis.tsx index 7a0d4c0..6611092 100644 --- a/src/pages/Analysis.tsx +++ b/src/pages/Analysis.tsx @@ -51,25 +51,26 @@ const Analysis = () => { { label: "20% Multimedia Content & Beauty Visuals", color: "#FBBC05", icons: ["📹", "📷", "🎬"] }, { label: "10% Community and UGC Signals", color: "#EA4335", icons: ["👥", "💭", "⭐"] }, ]; - + return ( <>
+
-

Analysis of Visibility

-
+

Analysis of Visibility

+
AIO Health - +
Backlinks - +
G Pos #
Maps
@@ -79,9 +80,9 @@ const Analysis = () => {
Perplexity
-
+
-

BH Medical Spa of Beverly Hills

+

BH Medical Spa of Beverly Hills

Sector: @@ -100,7 +101,7 @@ const Analysis = () => { - 24% + 24%
@@ -109,22 +110,22 @@ const Analysis = () => {
- 14% - 50/370 links + 14% + 50/370 links
-
+
- 5 + 5
-
+
@@ -132,39 +133,39 @@ const Analysis = () => { - 8 + 8
-
+
G Invisible
-
+
ChatGPT Invisible
-
+
GeminiInvisible
-
+
Perplexity Invisible
-
-
-
-

Ai Frequently Cited Sources in Healthcare

+
+
+

Ai Frequently Cited Sources in Healthcare

@@ -175,17 +176,17 @@ const Analysis = () => { {healthcareItems.map((item, index) => (
- {item.label.split(" ")[0]} - {item.label.split(" ").slice(1).join(" ")} + {item.label.split(" ")[0]} + {item.label.split(" ").slice(1).join(" ")} {item.subtitle && ( - {item.subtitle} + {item.subtitle} )}
@@ -200,9 +201,9 @@ const Analysis = () => { - How Ai and LLMs Choose Their Sources + How Ai and LLMs Choose Their Sources
-

+

Our analysis reveals distinct patterns in how leading AIs source and prioritize industry information. For example, ChatGPT leans heavily on user-generated content, while Google's AI Overviews favors authoritative tech review sites. Across the board, backlink quality plays a crucial role, with...{" "} read more

@@ -210,12 +211,12 @@ const Analysis = () => {
-
-
+
+
-

Become the Source

-

- Custom Authority Beacons & Backlink Strategy, Tailored for Medical Spas +

Become the Source

+

+ Custom Authority Beacons & Backlink Strategy, Tailored for Medical Spas

@@ -231,18 +232,18 @@ const Analysis = () => {
- {item.label.split(" ")[0]} + {item.label.split(" ")[0]}
{item.icons.map((icon, i) => ( -
+
{icon}
))}
- {item.label.split(" ").slice(1).join(" ")} + {item.label.split(" ").slice(1).join(" ")}
))} @@ -260,26 +261,10 @@ const Analysis = () => {
- {/* */}
- {/*
- - -
- - -
-
*/} @@ -307,29 +292,29 @@ interface DonutChartProps { function Header() { return ( -
+
-
+
- AIQ + AIQ
-
- 10 +
+ 10
-
-
- mysite.com - +
+
+ mysite.com +
-
diff --git a/src/pages/Keywords.tsx b/src/pages/Keywords.tsx index 4288df0..9dd2212 100644 --- a/src/pages/Keywords.tsx +++ b/src/pages/Keywords.tsx @@ -8,7 +8,8 @@ import HeaderPage from '../components/shared/HeaderPage'; const Keywords = () => { return ( - + +
{keywordSections.map((section) => (