Skip to content

Commit 276fa98

Browse files
committed
seo
1 parent 96bcff8 commit 276fa98

File tree

11 files changed

+601
-9
lines changed

11 files changed

+601
-9
lines changed

frontend/public/placeholder.svg

Lines changed: 6 additions & 0 deletions
Loading
Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import { useState, useRef, useEffect } from 'react'
2+
3+
const LazyImage = ({
4+
src,
5+
alt,
6+
className = '',
7+
placeholder = '/placeholder.svg',
8+
onLoad,
9+
onError,
10+
...props
11+
}) => {
12+
const [isLoaded, setIsLoaded] = useState(false)
13+
const [isInView, setIsInView] = useState(false)
14+
const [hasError, setHasError] = useState(false)
15+
const imgRef = useRef(null)
16+
17+
useEffect(() => {
18+
const observer = new IntersectionObserver(
19+
([entry]) => {
20+
if (entry.isIntersecting) {
21+
setIsInView(true)
22+
observer.disconnect()
23+
}
24+
},
25+
{
26+
threshold: 0.1,
27+
rootMargin: '50px'
28+
}
29+
)
30+
31+
if (imgRef.current) {
32+
observer.observe(imgRef.current)
33+
}
34+
35+
return () => observer.disconnect()
36+
}, [])
37+
38+
const handleLoad = (e) => {
39+
setIsLoaded(true)
40+
if (onLoad) onLoad(e)
41+
}
42+
43+
const handleError = (e) => {
44+
setHasError(true)
45+
if (onError) onError(e)
46+
}
47+
48+
return (
49+
<div ref={imgRef} className={`relative overflow-hidden ${className}`}>
50+
{/* Placeholder */}
51+
{!isLoaded && !hasError && (
52+
<div className="absolute inset-0 bg-gray-200 dark:bg-gray-700 animate-pulse flex items-center justify-center">
53+
<div className="w-8 h-8 text-gray-400">
54+
<svg fill="currentColor" viewBox="0 0 20 20">
55+
<path fillRule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clipRule="evenodd" />
56+
</svg>
57+
</div>
58+
</div>
59+
)}
60+
61+
{/* Error state */}
62+
{hasError && (
63+
<div className="absolute inset-0 bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
64+
<div className="text-center text-gray-500 dark:text-gray-400">
65+
<div className="w-8 h-8 mx-auto mb-2">
66+
<svg fill="currentColor" viewBox="0 0 20 20">
67+
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
68+
</svg>
69+
</div>
70+
<span className="text-xs">Failed to load</span>
71+
</div>
72+
</div>
73+
)}
74+
75+
{/* Actual image */}
76+
{isInView && (
77+
<img
78+
src={src}
79+
alt={alt}
80+
className={`transition-opacity duration-300 ${
81+
isLoaded ? 'opacity-100' : 'opacity-0'
82+
} ${className}`}
83+
onLoad={handleLoad}
84+
onError={handleError}
85+
loading="lazy"
86+
{...props}
87+
/>
88+
)}
89+
</div>
90+
)
91+
}
92+
93+
export default LazyImage

frontend/src/components/SEOHead.jsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Helmet } from 'react-helmet-async'
2+
import { organizationSchema, websiteSchema, softwareApplicationSchema } from '../utils/schemaMarkup'
23

34
const SEOHead = ({
45
title,
@@ -59,6 +60,17 @@ const SEOHead = ({
5960
{JSON.stringify(structuredData)}
6061
</script>
6162
)}
63+
64+
{/* Global Schema Markup */}
65+
<script type="application/ld+json">
66+
{JSON.stringify(organizationSchema)}
67+
</script>
68+
<script type="application/ld+json">
69+
{JSON.stringify(websiteSchema)}
70+
</script>
71+
<script type="application/ld+json">
72+
{JSON.stringify(softwareApplicationSchema)}
73+
</script>
6274
</Helmet>
6375
)
6476
}

frontend/src/components/layout/Footer.jsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,18 @@ const Footer = () => {
99

1010
const productLinks = [
1111
{ label: 'Dashboard', href: '/dashboard' },
12+
{ label: 'GitHub README AI', href: '/github-readme-ai-landing' },
13+
{ label: 'Repository README', href: '/repository-readme-generator-landing' },
14+
{ label: 'Architecture Generator', href: '/repository-architecture-generator-landing' },
1215
{ label: 'Pricing', href: '/upgrade' },
1316
{ label: 'Features', href: '/#features' },
14-
{ label: 'README AI', href: '/readme-generator' },
1517
{ label: 'Patterns', href: '/patterns' }
1618
]
1719

1820
const supportLinks = [
1921
{ label: 'About Us', href: '/about' },
2022
{ label: 'Contact Us', href: '/contact' },
23+
{ label: 'Business Verification', href: '/business-verification' },
2124
{ label: 'Privacy Policy', href: '/privacy-policy' },
2225
{ label: 'Terms of Service', href: '/terms-of-service' },
2326
{ label: 'Refund Policy', href: '/refund-policy' }

frontend/src/components/ui/HeroScrollDemo.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22
import React from "react";
33
import { ContainerScroll } from "./container-scroll-animation";
4+
import LazyImage from "../LazyImage";
45

56
export function HeroScrollDemo() {
67
return (
@@ -21,14 +22,14 @@ export function HeroScrollDemo() {
2122
}
2223
>
2324
{/* Desktop Image */}
24-
<img
25+
<LazyImage
2526
src="/images/Frameweb.png"
2627
alt="AutoMaxLib dashboard showing GitHub analytics, commit automation, and README generation tools"
2728
className="mx-auto rounded-2xl object-contain h-full w-full hidden md:block"
2829
draggable={false}
2930
/>
3031
{/* Mobile Image */}
31-
<img
32+
<LazyImage
3233
src="/images/Framemobile.png"
3334
alt="AutoMaxLib mobile dashboard"
3435
className="mx-auto rounded-2xl object-contain h-full w-full block md:hidden"

frontend/src/components/ui/ScrollytellingFeatureShowcase.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ const ScrollytellingFeatureShowcase = forwardRef(({ features, title, subtitle },
248248
<motion.img
249249
key={index}
250250
src={getFeatureImage(index)}
251-
alt={feature?.title || 'Feature preview'}
251+
alt={`${feature?.title || 'Feature preview'} - AutoMaxLib GitHub automation tool demonstration`}
252252
className="absolute inset-0 w-full h-full object-cover rounded-2xl"
253253
initial={{ opacity: 0 }}
254254
animate={{

frontend/src/components/ui/compare.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@ export const Compare = ({
195195
transition={{ duration: 0 }}
196196
>
197197
<img
198-
alt="first image"
198+
alt="Before using AutoMaxLib - Basic GitHub profile"
199199
src={firstImage}
200200
className={cn(
201201
"absolute inset-0 z-20 rounded-2xl flex-shrink-0 w-full h-full select-none",
@@ -215,7 +215,7 @@ export const Compare = ({
215215
"absolute top-0 left-0 z-[19] rounded-2xl w-full h-full select-none",
216216
secondImageClassname
217217
)}
218-
alt="second image"
218+
alt="After using AutoMaxLib - Professional GitHub profile with AI-generated content"
219219
src={secondImage}
220220
draggable={false}
221221
/>

frontend/src/main.jsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { BrowserRouter, useNavigate } from "react-router-dom"
55
import App from "./App.jsx"
66
import "./index.css"
77
import "./services/errorLogger.js" // Initialize error logger
8+
import { initPerformanceOptimizations } from "./utils/performance.js"
89

910
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
1011

@@ -44,6 +45,9 @@ const ClerkWithRouter = ({ children }) => {
4445
)
4546
}
4647

48+
// Initialize performance optimizations
49+
initPerformanceOptimizations()
50+
4751
createRoot(document.getElementById("root")).render(
4852
<StrictMode>
4953
<BrowserRouter>

frontend/src/pages/LandingPage.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -314,13 +314,13 @@ const LandingPage = () => {
314314
<div className="text-center space-y-8">
315315
{/* Main Headline */}
316316
<h1 className="text-3xl md:text-4xl lg:text-5xl font-semibold text-gray-900 dark:text-white leading-tight animate-fade-in-up">
317-
GitHub README AI -README & Archicture Diagram Generator
317+
GitHub README AI - README & Architecture Diagram Generator
318318
</h1>
319319

320320
{/* Subheadline */}
321321
<p className="text-lg text-foreground max-w-2xl mx-auto leading-relaxed animate-fade-in-up" style={{ animationDelay: '0.2s' }}>
322-
AutoMaxLib is the leading GitHub README AI platform. Create professional GitHub READMEs with our advanced README AI generator,
323-
plus auto commit tools and GitHub contribution features to boost your developer profile.
322+
AutoMaxLib is the leading <Link to="/github-readme-ai-landing" className="text-primary-600 hover:text-primary-700 underline">GitHub README AI platform</Link>. Create professional GitHub READMEs with our advanced <Link to="/repository-readme-generator-landing" className="text-primary-600 hover:text-primary-700 underline">README AI generator</Link>,
323+
plus <Link to="/dashboard" className="text-primary-600 hover:text-primary-700 underline">auto commit tools</Link> and <Link to="/repository-architecture-generator-landing" className="text-primary-600 hover:text-primary-700 underline">GitHub contribution features</Link> to boost your developer profile.
324324
</p>
325325

326326
{/* CTA Buttons */}

0 commit comments

Comments
 (0)