kunthawat/ALwrity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ALwrity + Wordpress + Wix + GSC integration

Browse Source
This commit is contained in:
ajaysi
2025-10-08 10:13:14 +05:30
parent 14dfb2e5c0
commit 3bab3450dc
147 changed files with 19815 additions and 17053 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/components/Landing/EnterpriseCTA.tsx
View File

@@ -13,6 +13,34 @@ import OptimizedImage from './OptimizedImage';
import { SignInButton } from '@clerk/clerk-react';
import { RocketLaunch } from '@mui/icons-material';
import { motion } from 'framer-motion';
import { ScrambleText } from '../ScrambleText';
// Scrambling text component for multiple phrases
const ScramblingText: React.FC<{ phrases: string[]; interval?: number; duration?: number; delay?: number }> = ({
phrases,
interval = 3500,
duration = 500,
delay = 300
}) => {
const [currentIndex, setCurrentIndex] = React.useState(0);
React.useEffect(() => {
const timer = setInterval(() => {
setCurrentIndex((prev) => (prev + 1) % phrases.length);
}, interval);
return () => clearInterval(timer);
}, [phrases.length, interval]);
return (
<ScrambleText
text={phrases[currentIndex]}
duration={duration}
delay={delay}
restartInterval={interval}
as="span"
/>
);
};
const EnterpriseCTA: React.FC = () => {
const theme = useTheme();
@@ -111,7 +139,12 @@ const EnterpriseCTA: React.FC = () => {
transition: 'all 0.3s ease'
}}
>
Start Creating Now
<ScramblingText
phrases={['Start Creating Now', 'Begin Content Creation', 'Launch Your Content', 'Start Creating Today']}
duration={500}
delay={300}
interval={3500}
/>
</Button>
</SignInButton>

42
frontend/src/components/Landing/HeroSection.tsx
View File

@@ -20,37 +20,42 @@ import {
CloudDone,
} from '@mui/icons-material';
import { motion } from 'framer-motion';
import { ScrambleText } from '../ScrambleText';
// Rotating text component
const RotatingText: React.FC<{ words: string[]; interval?: number }> = ({
words,
interval = 2000
// Scrambling text component with multiple phrases
const ScramblingText: React.FC<{ phrases: string[]; interval?: number; duration?: number; delay?: number }> = ({
phrases,
interval = 4000,
duration = 800,
delay = 200
}) => {
const [currentIndex, setCurrentIndex] = React.useState(0);
React.useEffect(() => {
const timer = setInterval(() => {
setCurrentIndex((prev) => (prev + 1) % words.length);
setCurrentIndex((prev) => (prev + 1) % phrases.length);
}, interval);
return () => clearInterval(timer);
}, [words.length, interval]);
}, [phrases.length, interval]);
return (
<Box
component="span"
sx={{
<ScrambleText
text={phrases[currentIndex]}
duration={duration}
delay={delay}
restartInterval={interval}
as="span"
className="scramble-text"
style={{
color: '#fff',
fontWeight: 900,
// Strong text shadow for readability
textShadow: `
0 2px 10px rgba(0, 0, 0, 0.9),
0 4px 20px rgba(0, 0, 0, 0.7),
0 0 40px rgba(102, 126, 234, 0.4)
`,
}}
>
{words[currentIndex]}
</Box>
/>
);
};
@@ -195,8 +200,8 @@ const HeroSection: React.FC = () => {
}}
>
Enterprise AI for{' '}
<RotatingText
words={['Revenue Growth', 'Brand Automation', 'Content Strategy', 'Market Intelligence']}
<ScramblingText
phrases={['Content Planning', 'MultiModal Generation', 'Cross Platform Publishing', 'All-Analytics One-platform', 'Content Engagement', 'Content Remarketing']}
/>
</Typography>
@@ -299,7 +304,12 @@ const HeroSection: React.FC = () => {
},
}}
>
ALwrity For Free - BYOK
<ScramblingText
phrases={['ALwrity For Free - BYOK', 'Start Free Today', 'Try ALwrity Free', 'Get Started Free']}
duration={600}
delay={500}
interval={4000}
/>
</Button>
</SignInButton>

42
frontend/src/components/Landing/IntroducingAlwrity.tsx
View File

@@ -24,6 +24,34 @@ import {
Speed
} from '@mui/icons-material';
import { motion } from 'framer-motion';
import { ScrambleText } from '../ScrambleText';
// Scrambling text component for multiple phrases
const ScramblingText: React.FC<{ phrases: string[]; interval?: number; duration?: number; delay?: number }> = ({
phrases,
interval = 4000,
duration = 600,
delay = 0
}) => {
const [currentIndex, setCurrentIndex] = React.useState(0);
React.useEffect(() => {
const timer = setInterval(() => {
setCurrentIndex((prev) => (prev + 1) % phrases.length);
}, interval);
return () => clearInterval(timer);
}, [phrases.length, interval]);
return (
<ScrambleText
text={phrases[currentIndex]}
duration={duration}
delay={delay}
restartInterval={interval}
as="span"
/>
);
};
const IntroducingAlwrity: React.FC = () => {
const theme = useTheme();
@@ -134,7 +162,12 @@ const IntroducingAlwrity: React.FC = () => {
<Stack spacing={6} alignItems="center" textAlign="center">
<motion.div variants={fadeInUp}>
<Typography variant="h3" fontWeight={700} sx={{ color: 'white' }}>
Introducing ALwrity
<ScramblingText
phrases={['Introducing ALwrity', 'Welcome to ALwrity', 'Meet ALwrity', 'Discover ALwrity']}
duration={600}
delay={1000}
interval={5000}
/>
</Typography>
</motion.div>
<motion.div variants={fadeInUp}>
@@ -166,7 +199,12 @@ const IntroducingAlwrity: React.FC = () => {
transition: 'all 0.3s ease'
}}
>
Start Your AI Journey
<ScramblingText
phrases={['Start Your AI Journey', 'Begin AI Transformation', 'Launch AI Success', 'Start AI Revolution']}
duration={500}
delay={300}
interval={3500}
/>
</Button>
</SignInButton>
</Box>

131
frontend/src/components/Landing/Landing.tsx
View File

@@ -16,12 +16,7 @@ import {
CircularProgress
} from '@mui/material';
import { keyframes } from '@mui/system';
import { SignInButton } from '@clerk/clerk-react';
import {
AutoAwesome,
Speed,
TrendingUp,
Security,
Analytics,
Psychology,
AccessTime,
@@ -37,6 +32,36 @@ import {
} from '@mui/icons-material';
import { motion } from 'framer-motion';
import HeroSection from './HeroSection';
import { ScrambleText } from '../ScrambleText';
// Scrambling text component for multiple phrases
const ScramblingText: React.FC<{ phrases: string[]; interval?: number; duration?: number; delay?: number; style?: React.CSSProperties }> = ({
phrases,
interval = 3000,
duration = 400,
delay = 200,
style = {}
}) => {
const [currentIndex, setCurrentIndex] = React.useState(0);
React.useEffect(() => {
const timer = setInterval(() => {
setCurrentIndex((prev) => (prev + 1) % phrases.length);
}, interval);
return () => clearInterval(timer);
}, [phrases.length, interval]);
return (
<ScrambleText
text={phrases[currentIndex]}
duration={duration}
delay={delay}
restartInterval={interval}
as="span"
style={style}
/>
);
};
// Lazy load components for better performance
const FeatureShowcase = lazy(() => import('./FeatureShowcase'));
@@ -51,29 +76,6 @@ const Landing: React.FC = () => {
usePerformanceMonitor('Landing');
// Optimized Framer Motion variants for better performance
const fadeInUp = {
hidden: { opacity: 0, y: 24 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.4,
ease: "easeOut" as const,
// Use transform3d for hardware acceleration
transform: "translate3d(0,0,0)"
}
},
};
const stagger = {
hidden: {},
visible: {
transition: {
staggerChildren: 0.08, // Reduced stagger time
delayChildren: 0.1
}
},
};
// Cinematic lifecycle section animations
const backgroundFade = {
@@ -206,49 +208,9 @@ const Landing: React.FC = () => {
];
const painPoints = [
{
icon: <AccessTime />,
title: 'Time Constraints',
description: 'Limited time for content creation and strategy development. Solopreneurs wear many hats and struggle to maintain consistent content output.'
},
{
icon: <TrendingDown />,
title: 'Lack of Expertise',
description: 'Not trained as content strategists, SEO experts, or data analysts. Missing the knowledge to create effective marketing campaigns.'
},
{
icon: <MonetizationOn />,
title: 'Resource Limitations',
description: 'Cannot afford full marketing teams or expensive enterprise tools. Need cost-effective solutions that deliver professional results.'
},
{
icon: <Analytics />,
title: 'Poor ROI Tracking',
description: 'Only 21% of marketers successfully track content ROI. Lack of data-driven insights to optimize marketing spend and strategy.'
},
{
icon: <Group />,
title: 'Manual Processes',
description: 'Overwhelmed by repetitive content creation tasks. Need automation to scale efforts without sacrificing quality.'
},
{
icon: <Psychology />,
title: 'Inconsistent Voice',
description: 'Struggle to maintain brand voice across platforms. Need personalized AI that understands your unique style and messaging.'
}
];
// Glassmorphism styles
const glassPanelSx = {
background: `linear-gradient(135deg, ${alpha(theme.palette.common.white, 0.06)} 0%, ${alpha(theme.palette.common.white, 0.02)} 100%)`,
backdropFilter: 'blur(12px)',
border: '1px solid rgba(255,255,255,0.12)',
borderRadius: 4,
boxShadow: '0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06)'
} as const;
const glassCardSx = {
background: `linear-gradient(135deg, ${alpha(theme.palette.common.white, 0.05)} 0%, ${alpha(theme.palette.common.white, 0.015)} 100%)`,
@@ -279,11 +241,6 @@ const Landing: React.FC = () => {
}
`;
// Slide in animation for lifecycle image
const slideIn = keyframes`
0% { opacity: 0; transform: scale(0.9) translateY(20px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
`;
// Loading component for Suspense
const LoadingSpinner = () => (
@@ -425,8 +382,15 @@ const Landing: React.FC = () => {
</Box>
{/* chips */}
<Grid container spacing={{ xs: 1, md: 2 }} justifyContent="space-between" alignItems="center">
{['Plan','Generate','Publish','Analyze','Engage','Remarket'].map((label, idx) => (
<Grid item key={label} xs={2} sx={{ display: 'flex', justifyContent: idx === 0 ? 'flex-start' : idx === 5 ? 'flex-end' : 'center' }}>
{[
{ label: 'Plan', variations: ['Plan', 'Strategy', 'Research', 'Blueprint'] },
{ label: 'Generate', variations: ['Generate', 'Create', 'Produce', 'Craft'] },
{ label: 'Publish', variations: ['Publish', 'Launch', 'Deploy', 'Release'] },
{ label: 'Analyze', variations: ['Analyze', 'Measure', 'Track', 'Monitor'] },
{ label: 'Engage', variations: ['Engage', 'Interact', 'Connect', 'Respond'] },
{ label: 'Remarket', variations: ['Remarket', 'Repurpose', 'Recycle', 'Amplify'] }
].map((item, idx) => (
<Grid item key={item.label} xs={2} sx={{ display: 'flex', justifyContent: idx === 0 ? 'flex-start' : idx === 5 ? 'flex-end' : 'center' }}>
<Chip
label={
<Stack direction="row" spacing={0.5} alignItems="center">
@@ -440,16 +404,17 @@ const Landing: React.FC = () => {
>
{idx+1}
</Typography>
<Typography
variant="caption"
sx={{
fontWeight: 700,
fontSize: { xs: '0.7rem', md: '0.8rem' },
<ScramblingText
phrases={item.variations}
duration={400}
delay={200}
interval={3000}
style={{
fontWeight: 700,
fontSize: '0.7rem',
color: 'white'
}}
>
{label}
</Typography>
/>
</Stack>
}
size="medium"

45
frontend/src/components/Landing/SolopreneurDilemma.tsx
View File

@@ -17,6 +17,34 @@ import {
ArrowForward
} from '@mui/icons-material';
import { motion } from 'framer-motion';
import { ScrambleText } from '../ScrambleText';
// Scrambling text component for multiple phrases
const ScramblingText: React.FC<{ phrases: string[]; interval?: number; duration?: number; delay?: number }> = ({
phrases,
interval = 4000,
duration = 600,
delay = 0
}) => {
const [currentIndex, setCurrentIndex] = React.useState(0);
React.useEffect(() => {
const timer = setInterval(() => {
setCurrentIndex((prev) => (prev + 1) % phrases.length);
}, interval);
return () => clearInterval(timer);
}, [phrases.length, interval]);
return (
<ScrambleText
text={phrases[currentIndex]}
duration={duration}
delay={delay}
restartInterval={interval}
as="span"
/>
);
};
const SolopreneurDilemma: React.FC = () => {
const theme = useTheme();
@@ -25,16 +53,19 @@ const SolopreneurDilemma: React.FC = () => {
{
icon: <Psychology />,
title: "Content Overwhelm",
titleVariations: ["Content Overwhelm", "Content Chaos", "Content Confusion", "Content Crisis"],
description: "Managing 8+ social platforms with different audiences, tones, and posting schedules"
},
{
icon: <TrendingUp />,
title: "Inconsistent Brand Voice",
titleVariations: ["Inconsistent Brand Voice", "Voice Confusion", "Brand Inconsistency", "Tone Problems"],
description: "Struggling to maintain your unique voice across all platforms while scaling content"
},
{
icon: <Speed />,
title: "Time Drain",
titleVariations: ["Time Drain", "Time Sink", "Time Waste", "Productivity Loss"],
description: "Spending 4-6 hours daily on content creation, research, and platform management"
}
];
@@ -238,7 +269,12 @@ const SolopreneurDilemma: React.FC = () => {
textShadow: '0 1px 2px rgba(0, 0, 0, 0.7)'
}}
>
{point.title}
<ScramblingText
phrases={point.titleVariations || [point.title]}
duration={500}
delay={500}
interval={4000}
/>
</Typography>
<Typography
variant="body1"
@@ -375,7 +411,12 @@ const SolopreneurDilemma: React.FC = () => {
transition: 'all 0.3s ease',
}}
>
End the Struggle Today
<ScramblingText
phrases={['End the Struggle Today', 'Stop the Chaos', 'Solve Content Problems', 'Transform Your Workflow']}
duration={500}
delay={300}
interval={3500}
/>
</Button>
</motion.div>
</Stack>