bender/376e0687-e775-47b9-b64e-141402bb7538
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #2

Merged
bender merged 2 commits from version_1 into main 2026-03-11 22:30:35 +00:00
Conversation 0 Commits 2 Files Changed 2 +40 -61
2 changed files with 40 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/app/page.tsx
View File

@@ -22,7 +22,7 @@ export default function LandingPage() {
borderRadius="soft"
contentWidth="smallMedium"
sizing="largeSmallSizeMediumTitles"
background="aurora"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="shadow"
secondaryButtonStyle="glass"
@@ -47,7 +47,7 @@ export default function LandingPage() {
<HeroBillboardRotatedCarousel
title="Stay Safe, Secure, and Private Online"
description="Simple, straightforward guidance for adults 65+ to protect yourself from scams, fraud, and online threats. Learn at your own pace with clear, jargon-free lessons."
background={{ variant: "aurora" }}
background={{ variant: "plain" }}
tag="Welcome to CyberSafe Seniors"
tagIcon={Shield}
tagAnimation="slide-up"
@@ -58,11 +58,11 @@ export default function LandingPage() {
buttonAnimation="slide-up"
carouselItems={[
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-with-laptop-working_23-2148937746.jpg", imageAlt: "senior adult using tablet safely online" },
{ id: "2", imageSrc: "http://img.b2bpic.net/free-vector/steal-data-concept-illustrated_23-2148542545.jpg?_wi=1", imageAlt: "email phishing scam warning message" },
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/closeup-businessman-using-mobile-phone-video-call-from-office_637285-10972.jpg?_wi=1", imageAlt: "phone scam fraud call warning" },
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/senior-man-looking-through-his-laptop-his-wife_23-2148404356.jpg?_wi=1", imageAlt: "online banking security elderly" },
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/extreme-close-up-shot-man-working-notebook-data-center_482257-89921.jpg?_wi=1", imageAlt: "strong password creation security" },
{ id: "6", imageSrc: "http://img.b2bpic.net/free-vector/isometric-hacker-activity-template-with-computer-servers-atm-hacking-cyber-thief-online-money-steal-biometric-authorization-security_1284-35296.jpg?_wi=1", imageAlt: "device security software elderly" }
{ id: "2", imageSrc: "http://img.b2bpic.net/free-vector/steal-data-concept-illustrated_23-2148542545.jpg", imageAlt: "email phishing scam warning message" },
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/closeup-businessman-using-mobile-phone-video-call-from-office_637285-10972.jpg", imageAlt: "phone scam fraud call warning" },
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/senior-man-looking-through-his-laptop-his-wife_23-2148404356.jpg", imageAlt: "online banking security elderly" },
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/extreme-close-up-shot-man-working-notebook-data-center_482257-89921.jpg", imageAlt: "strong password creation security" },
{ id: "6", imageSrc: "http://img.b2bpic.net/free-vector/isometric-hacker-activity-template-with-computer-servers-atm-hacking-cyber-thief-online-money-steal-biometric-authorization-security_1284-35296.jpg", imageAlt: "device security software elderly" }
]}
autoPlay={true}
autoPlayInterval={5000}
@@ -84,16 +84,16 @@ export default function LandingPage() {
tagIcon={BookOpen}
tagAnimation="slide-up"
products={[
{ id: "1", name: "Email Scams", price: "Learn", imageSrc: "http://img.b2bpic.net/free-vector/steal-data-concept-illustrated_23-2148542545.jpg?_wi=2", imageAlt: "Email scams warning" },
{ id: "2", name: "Phone Scams", price: "Learn", imageSrc: "http://img.b2bpic.net/free-photo/closeup-businessman-using-mobile-phone-video-call-from-office_637285-10972.jpg?_wi=2", imageAlt: "Phone scams alert" },
{ id: "1", name: "Email Scams", price: "Learn", imageSrc: "http://img.b2bpic.net/free-vector/steal-data-concept-illustrated_23-2148542545.jpg", imageAlt: "Email scams warning" },
{ id: "2", name: "Phone Scams", price: "Learn", imageSrc: "http://img.b2bpic.net/free-photo/closeup-businessman-using-mobile-phone-video-call-from-office_637285-10972.jpg", imageAlt: "Phone scams alert" },
{ id: "3", name: "Social Media Safety", price: "Learn", imageSrc: "http://img.b2bpic.net/free-photo/modern-senior-woman-with-laptop-coffee_23-2148001785.jpg", imageAlt: "Social media security" },
{ id: "4", name: "Banking & Financial Fraud", price: "Learn", imageSrc: "http://img.b2bpic.net/free-photo/senior-man-looking-through-his-laptop-his-wife_23-2148404356.jpg?_wi=2", imageAlt: "Banking security" },
{ id: "5", name: "Password & Account Security", price: "Learn", imageSrc: "http://img.b2bpic.net/free-photo/extreme-close-up-shot-man-working-notebook-data-center_482257-89921.jpg?_wi=2", imageAlt: "Password strength" },
{ id: "6", name: "Privacy Protection", price: "Learn", imageSrc: "http://img.b2bpic.net/free-photo/african-american-man-using-ai-develop-software-system-with-chroma-key-pc_482257-118525.jpg?_wi=1", imageAlt: "Privacy settings" },
{ id: "7", name: "Safe Browsing & Downloads", price: "Learn", imageSrc: "http://img.b2bpic.net/free-vector/flat-background-safer-internet-day_23-2151121216.jpg?_wi=1", imageAlt: "Safe website browsing" },
{ id: "8", name: "Device Security", price: "Learn", imageSrc: "http://img.b2bpic.net/free-vector/isometric-hacker-activity-template-with-computer-servers-atm-hacking-cyber-thief-online-money-steal-biometric-authorization-security_1284-35296.jpg?_wi=2", imageAlt: "Device protection" }
{ id: "4", name: "Banking & Financial Fraud", price: "Learn", imageSrc: "http://img.b2bpic.net/free-photo/senior-man-looking-through-his-laptop-his-wife_23-2148404356.jpg", imageAlt: "Banking security" },
{ id: "5", name: "Password & Account Security", price: "Learn", imageSrc: "http://img.b2bpic.net/free-photo/extreme-close-up-shot-man-working-notebook-data-center_482257-89921.jpg", imageAlt: "Password strength" },
{ id: "6", name: "Privacy Protection", price: "Learn", imageSrc: "http://img.b2bpic.net/free-photo/african-american-man-using-ai-develop-software-system-with-chroma-key-pc_482257-118525.jpg", imageAlt: "Privacy settings" },
{ id: "7", name: "Safe Browsing & Downloads", price: "Learn", imageSrc: "http://img.b2bpic.net/free-vector/flat-background-safer-internet-day_23-2151121216.jpg", imageAlt: "Safe website browsing" },
{ id: "8", name: "Device Security", price: "Learn", imageSrc: "http://img.b2bpic.net/free-vector/isometric-hacker-activity-template-with-computer-servers-atm-hacking-cyber-thief-online-money-steal-biometric-authorization-security_1284-35296.jpg", imageAlt: "Device protection" }
]}
gridVariant="four-items-2x2-equal-grid"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
@@ -111,18 +111,18 @@ export default function LandingPage() {
features={[
{
id: 1,
title: "Firewalls: Your Digital Fortress", description: "A firewall acts like a security guard for your computer. It blocks unwanted visitors from accessing your personal information while you browse safely. Think of it as a protective barrier between you and the internet.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-vector/isometric-hacker-activity-template-with-computer-servers-atm-hacking-cyber-thief-online-money-steal-biometric-authorization-security_1284-35296.jpg?_wi=3", imageAlt: "Device security" },
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/computer-background-with-safety-items_1284-1089.jpg?_wi=1", imageAlt: "Network security" }
title: "Firewalls: Your Digital Fortress", description: "A firewall acts like a security guard for your computer. It blocks unwanted visitors from accessing your personal information while you browse safely. Think of it as a protective barrier between you and the internet.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-vector/isometric-hacker-activity-template-with-computer-servers-atm-hacking-cyber-thief-online-money-steal-biometric-authorization-security_1284-35296.jpg", imageAlt: "Device security" },
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/computer-background-with-safety-items_1284-1089.jpg", imageAlt: "Network security" }
},
{
id: 2,
title: "VPNs: Private Tunnels for Your Data", description: "A VPN creates a secure, private tunnel for your internet activity. Your data travels safely through this tunnel, hidden from outsiders. Companies like Cisco use this technology to keep business information safe—now you can use it too.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/african-american-man-using-ai-develop-software-system-with-chroma-key-pc_482257-118525.jpg?_wi=2", imageAlt: "Privacy protection" },
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/flat-background-safer-internet-day_23-2151121216.jpg?_wi=2", imageAlt: "Safe browsing" }
title: "VPNs: Private Tunnels for Your Data", description: "A VPN creates a secure, private tunnel for your internet activity. Your data travels safely through this tunnel, hidden from outsiders. Companies like Cisco use this technology to keep business information safe—now you can use it too.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/african-american-man-using-ai-develop-software-system-with-chroma-key-pc_482257-118525.jpg", imageAlt: "Privacy protection" },
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/flat-background-safer-internet-day_23-2151121216.jpg", imageAlt: "Safe browsing" }
},
{
id: 3,
title: "Network Security: Enterprise-Grade Protection", description: "Enterprise security tools protect networks the way a bank protects its vault. These tools monitor for threats, stop attackers, and keep your personal devices safe. Cisco's technology helps millions stay secure—and it's now accessible to you.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-vector/computer-background-with-safety-items_1284-1089.jpg?_wi=2", imageAlt: "Network security" },
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/isometric-hacker-activity-template-with-computer-servers-atm-hacking-cyber-thief-online-money-steal-biometric-authorization-security_1284-35296.jpg?_wi=4", imageAlt: "Device security" }
title: "Network Security: Enterprise-Grade Protection", description: "Enterprise security tools protect networks the way a bank protects its vault. These tools monitor for threats, stop attackers, and keep your personal devices safe. Cisco's technology helps millions stay secure—and it's now accessible to you.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-vector/computer-background-with-safety-items_1284-1089.jpg", imageAlt: "Network security" },
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/isometric-hacker-activity-template-with-computer-servers-atm-hacking-cyber-thief-online-money-steal-biometric-authorization-security_1284-35296.jpg", imageAlt: "Device security" }
}
]}
showStepNumbers={true}
@@ -212,7 +212,7 @@ export default function LandingPage() {
id: "4", value: "∞", title: "Retakes", description: "Take the quiz as many times as you want", icon: RefreshCw
}
]}
gridVariant="four-items-2x2-equal-grid"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
@@ -258,9 +258,9 @@ export default function LandingPage() {
description="Did you experience a scam or suspicious activity? Report it to the authorities. Your report helps protect other seniors and can lead to action against scammers."
tagIcon={AlertTriangle}
tagAnimation="slide-up"
background={{ variant: "aurora" }}
background={{ variant: "plain" }}
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-vector/blue-white-business-card-template_23-2147741401.jpg?_wi=1"
imageSrc="http://img.b2bpic.net/free-vector/blue-white-business-card-template_23-2147741401.jpg"
mediaAnimation="slide-up"
mediaPosition="right"
inputPlaceholder="Not used - external links only"
@@ -320,7 +320,7 @@ export default function LandingPage() {
description="Margaret, retired teacher"
subdescription="Using our printable card saved me when I was confused about a call"
icon={Heart}
imageSrc="http://img.b2bpic.net/free-vector/blue-white-business-card-template_23-2147741401.jpg?_wi=2"
imageSrc="http://img.b2bpic.net/free-vector/blue-white-business-card-template_23-2147741401.jpg"
imageAlt="Printable emergency contact card"
mediaAnimation="slide-up"
useInvertedBackground={false}

51
src/components/shared/SvgTextLogo/SvgTextLogo.tsx
View File

@@ -1,51 +1,30 @@
"use client";
import { memo } from "react";
import useSvgTextLogo from "./useSvgTextLogo";
import { cls } from "@/lib/utils";
import React from 'react';
interface SvgTextLogoProps {
logoText: string;
adjustHeightFactor?: number;
verticalAlign?: "top" | "center";
text: string;
className?: string;
textClassName?: string;
}
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
logoText,
adjustHeightFactor,
verticalAlign = "top",
className = "",
}) {
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({ text, className = '', textClassName = '' }) => {
return (
<svg
ref={svgRef}
viewBox={viewBox}
className={cls("w-full", className)}
style={{ aspectRatio: aspectRatio }}
preserveAspectRatio="none"
role="img"
aria-label={`${logoText} logo`}
viewBox="0 0 200 100"
className={`w-auto h-12 ${className}`}
xmlns="http://www.w3.org/2000/svg"
aria-label={text}
>
<text
ref={textRef}
x="0"
y={verticalAlign === "center" ? "50%" : "0"}
className="font-bold fill-current"
style={{
fontSize: "20px",
letterSpacing: "-0.02em",
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
}}
x="100"
y="60"
textAnchor="middle"
dominantBaseline="middle"
className={`text-2xl font-bold fill-current ${textClassName}`}
>
{logoText}
{text}
</text>
</svg>
);
});
SvgTextLogo.displayName = "SvgTextLogo";
};
export default SvgTextLogo;