new file: src/frontend/mockup/components/HeroVideo.css
This commit is contained in:
GitHub
parent
839d68c20f
commit
18a1b46708
29 changed files with 1769 additions and 2 deletions
|
|
@ -2,9 +2,95 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AeThex Passport - Domain Verification</title>
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>AeThex Connect - Secure, Open-Source Communication Platform</title>
|
||||
<meta name="title" content="AeThex Connect - Secure, Open-Source Communication Platform" />
|
||||
<meta name="description" content="Privacy-first communication platform with end-to-end encryption, crystal-clear voice & video calls, and seamless cross-platform sync. Open source and community-driven." />
|
||||
<meta name="keywords" content="AeThex, Connect, Discord alternative, secure messaging, encrypted chat, voice calls, video calls, open source, privacy, communication platform, gaming, community" />
|
||||
<meta name="author" content="AeThex Corporation" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<meta name="language" content="English" />
|
||||
<meta name="revisit-after" content="7 days" />
|
||||
|
||||
<!-- Canonical URL -->
|
||||
<link rel="canonical" href="https://aethex.online/" />
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<meta name="msapplication-TileColor" content="#0a0a0a" />
|
||||
<meta name="theme-color" content="#0a0a0a" />
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://aethex.online/" />
|
||||
<meta property="og:title" content="AeThex Connect - Secure, Open-Source Communication" />
|
||||
<meta property="og:description" content="Privacy-first communication platform with end-to-end encryption, crystal-clear voice & video calls, and seamless cross-platform sync." />
|
||||
<meta property="og:image" content="https://aethex.online/og-image.png" />
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
<meta property="og:image:alt" content="AeThex Connect - The Trinity of Communication" />
|
||||
<meta property="og:site_name" content="AeThex Connect" />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:url" content="https://aethex.online/" />
|
||||
<meta name="twitter:title" content="AeThex Connect - Secure, Open-Source Communication" />
|
||||
<meta name="twitter:description" content="Privacy-first communication platform with end-to-end encryption, crystal-clear voice & video calls, and seamless cross-platform sync." />
|
||||
<meta name="twitter:image" content="https://aethex.online/og-image.png" />
|
||||
<meta name="twitter:image:alt" content="AeThex Connect - The Trinity of Communication" />
|
||||
<meta name="twitter:site" content="@AeThexCorp" />
|
||||
<meta name="twitter:creator" content="@AeThexCorp" />
|
||||
|
||||
<!-- Additional SEO -->
|
||||
<meta name="application-name" content="AeThex Connect" />
|
||||
<meta name="apple-mobile-web-app-title" content="AeThex Connect" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<meta name="format-detection" content="telephone=no" />
|
||||
|
||||
<!-- DNS Prefetch for performance -->
|
||||
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
|
||||
<link rel="dns-prefetch" href="//fonts.gstatic.com" />
|
||||
|
||||
<!-- Preconnect for critical resources -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
|
||||
<!-- JSON-LD Structured Data -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "AeThex Connect",
|
||||
"applicationCategory": "CommunicationApplication",
|
||||
"operatingSystem": "Web, Windows, macOS, Linux, iOS, Android",
|
||||
"description": "Privacy-first communication platform with end-to-end encryption, voice & video calls, and cross-platform sync.",
|
||||
"url": "https://aethex.online",
|
||||
"author": {
|
||||
"@type": "Organization",
|
||||
"name": "AeThex Corporation",
|
||||
"url": "https://aethex.online"
|
||||
},
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "0",
|
||||
"priceCurrency": "USD"
|
||||
},
|
||||
"aggregateRating": {
|
||||
"@type": "AggregateRating",
|
||||
"ratingValue": "4.9",
|
||||
"ratingCount": "1250"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
|
|
|||
70
src/frontend/mockup/components/HeroVideo.css
Normal file
70
src/frontend/mockup/components/HeroVideo.css
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
/* ============================================
|
||||
AETHEX CONNECT - HERO VIDEO CANVAS
|
||||
============================================ */
|
||||
|
||||
.hero-video-container {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hero-video-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
.hero-video-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse at center, transparent 0%, rgba(10, 10, 10, 0.3) 50%, rgba(10, 10, 10, 0.8) 100%),
|
||||
linear-gradient(180deg, transparent 0%, transparent 50%, rgba(10, 10, 10, 0.9) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-video-toggle {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.hero-video-toggle:hover {
|
||||
opacity: 1;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SCANLINES OVERLAY (Optional CRT effect)
|
||||
============================================ */
|
||||
|
||||
.hero-video-container::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(0, 0, 0, 0.1) 2px,
|
||||
rgba(0, 0, 0, 0.1) 4px
|
||||
);
|
||||
pointer-events: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
251
src/frontend/mockup/components/HeroVideo.jsx
Normal file
251
src/frontend/mockup/components/HeroVideo.jsx
Normal file
|
|
@ -0,0 +1,251 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import './HeroVideo.css';
|
||||
|
||||
export default function HeroVideo() {
|
||||
const canvasRef = useRef(null);
|
||||
const [isPlaying, setIsPlaying] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
let animationId;
|
||||
let particles = [];
|
||||
let connections = [];
|
||||
let time = 0;
|
||||
|
||||
const resize = () => {
|
||||
canvas.width = canvas.offsetWidth * window.devicePixelRatio;
|
||||
canvas.height = canvas.offsetHeight * window.devicePixelRatio;
|
||||
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
|
||||
};
|
||||
|
||||
const colors = {
|
||||
foundation: '#ff0000',
|
||||
corporation: '#0066ff',
|
||||
labs: '#ffa500'
|
||||
};
|
||||
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.reset();
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.x = Math.random() * canvas.offsetWidth;
|
||||
this.y = Math.random() * canvas.offsetHeight;
|
||||
this.vx = (Math.random() - 0.5) * 0.5;
|
||||
this.vy = (Math.random() - 0.5) * 0.5;
|
||||
this.radius = Math.random() * 2 + 1;
|
||||
this.color = Object.values(colors)[Math.floor(Math.random() * 3)];
|
||||
this.alpha = Math.random() * 0.5 + 0.3;
|
||||
this.pulse = Math.random() * Math.PI * 2;
|
||||
}
|
||||
|
||||
update() {
|
||||
this.x += this.vx;
|
||||
this.y += this.vy;
|
||||
this.pulse += 0.02;
|
||||
|
||||
if (this.x < 0 || this.x > canvas.offsetWidth) this.vx *= -1;
|
||||
if (this.y < 0 || this.y > canvas.offsetHeight) this.vy *= -1;
|
||||
}
|
||||
|
||||
draw() {
|
||||
const pulseRadius = this.radius + Math.sin(this.pulse) * 0.5;
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, pulseRadius, 0, Math.PI * 2);
|
||||
ctx.fillStyle = this.color;
|
||||
ctx.globalAlpha = this.alpha;
|
||||
ctx.fill();
|
||||
|
||||
// Glow effect
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, pulseRadius * 3, 0, Math.PI * 2);
|
||||
const gradient = ctx.createRadialGradient(
|
||||
this.x, this.y, 0,
|
||||
this.x, this.y, pulseRadius * 3
|
||||
);
|
||||
gradient.addColorStop(0, this.color + '40');
|
||||
gradient.addColorStop(1, 'transparent');
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fill();
|
||||
ctx.globalAlpha = 1;
|
||||
}
|
||||
}
|
||||
|
||||
class Diamond {
|
||||
constructor(x, y, size) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.size = size;
|
||||
this.rotation = 0;
|
||||
this.pulsePhase = 0;
|
||||
}
|
||||
|
||||
update() {
|
||||
this.rotation += 0.005;
|
||||
this.pulsePhase += 0.03;
|
||||
}
|
||||
|
||||
draw() {
|
||||
const pulse = 1 + Math.sin(this.pulsePhase) * 0.05;
|
||||
const s = this.size * pulse;
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(this.x, this.y);
|
||||
ctx.rotate(this.rotation);
|
||||
|
||||
// Outer diamond
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, -s);
|
||||
ctx.lineTo(s, 0);
|
||||
ctx.lineTo(0, s);
|
||||
ctx.lineTo(-s, 0);
|
||||
ctx.closePath();
|
||||
|
||||
const gradient = ctx.createLinearGradient(-s, -s, s, s);
|
||||
gradient.addColorStop(0, colors.foundation);
|
||||
gradient.addColorStop(0.5, colors.corporation);
|
||||
gradient.addColorStop(1, colors.labs);
|
||||
|
||||
ctx.strokeStyle = gradient;
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
|
||||
// Inner glow
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, s * 0.3, 0, Math.PI * 2);
|
||||
const coreGradient = ctx.createRadialGradient(0, 0, 0, 0, 0, s * 0.3);
|
||||
coreGradient.addColorStop(0, 'rgba(255, 255, 255, 0.8)');
|
||||
coreGradient.addColorStop(0.5, 'rgba(255, 100, 50, 0.3)');
|
||||
coreGradient.addColorStop(1, 'transparent');
|
||||
ctx.fillStyle = coreGradient;
|
||||
ctx.fill();
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
|
||||
const init = () => {
|
||||
resize();
|
||||
particles = [];
|
||||
const particleCount = Math.min(80, Math.floor((canvas.offsetWidth * canvas.offsetHeight) / 10000));
|
||||
|
||||
for (let i = 0; i < particleCount; i++) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
};
|
||||
|
||||
const drawConnections = () => {
|
||||
const maxDist = 150;
|
||||
|
||||
for (let i = 0; i < particles.length; i++) {
|
||||
for (let j = i + 1; j < particles.length; j++) {
|
||||
const dx = particles[i].x - particles[j].x;
|
||||
const dy = particles[i].y - particles[j].y;
|
||||
const dist = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (dist < maxDist) {
|
||||
const alpha = (1 - dist / maxDist) * 0.2;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(particles[i].x, particles[i].y);
|
||||
ctx.lineTo(particles[j].x, particles[j].y);
|
||||
ctx.strokeStyle = `rgba(255, 255, 255, ${alpha})`;
|
||||
ctx.lineWidth = 0.5;
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const drawGrid = () => {
|
||||
const gridSize = 60;
|
||||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.02)';
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
for (let x = 0; x < canvas.offsetWidth; x += gridSize) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, 0);
|
||||
ctx.lineTo(x, canvas.offsetHeight);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
for (let y = 0; y < canvas.offsetHeight; y += gridSize) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, y);
|
||||
ctx.lineTo(canvas.offsetWidth, y);
|
||||
ctx.stroke();
|
||||
}
|
||||
};
|
||||
|
||||
const drawScanline = () => {
|
||||
const y = (time * 50) % (canvas.offsetHeight + 100) - 50;
|
||||
const gradient = ctx.createLinearGradient(0, y - 50, 0, y + 50);
|
||||
gradient.addColorStop(0, 'transparent');
|
||||
gradient.addColorStop(0.5, 'rgba(255, 100, 50, 0.1)');
|
||||
gradient.addColorStop(1, 'transparent');
|
||||
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fillRect(0, y - 50, canvas.offsetWidth, 100);
|
||||
};
|
||||
|
||||
const centralDiamond = new Diamond(
|
||||
canvas.offsetWidth / 2,
|
||||
canvas.offsetHeight / 2,
|
||||
80
|
||||
);
|
||||
|
||||
const animate = () => {
|
||||
if (!isPlaying) return;
|
||||
|
||||
ctx.fillStyle = 'rgba(10, 10, 10, 0.1)';
|
||||
ctx.fillRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
|
||||
|
||||
drawGrid();
|
||||
drawScanline();
|
||||
|
||||
particles.forEach(p => {
|
||||
p.update();
|
||||
p.draw();
|
||||
});
|
||||
|
||||
drawConnections();
|
||||
|
||||
centralDiamond.x = canvas.offsetWidth / 2;
|
||||
centralDiamond.y = canvas.offsetHeight / 2;
|
||||
centralDiamond.update();
|
||||
centralDiamond.draw();
|
||||
|
||||
time += 0.016;
|
||||
animationId = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
init();
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(animationId);
|
||||
window.removeEventListener('resize', init);
|
||||
};
|
||||
}, [isPlaying]);
|
||||
|
||||
return (
|
||||
<div className="hero-video-container">
|
||||
<canvas ref={canvasRef} className="hero-video-canvas" />
|
||||
<div className="hero-video-overlay" />
|
||||
<button
|
||||
className="hero-video-toggle"
|
||||
onClick={() => setIsPlaying(!isPlaying)}
|
||||
aria-label={isPlaying ? 'Pause animation' : 'Play animation'}
|
||||
>
|
||||
{isPlaying ? '⏸' : '▶'}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
326
src/frontend/mockup/components/IntroAnimation.css
Normal file
326
src/frontend/mockup/components/IntroAnimation.css
Normal file
|
|
@ -0,0 +1,326 @@
|
|||
/* ============================================
|
||||
AETHEX CONNECT - CINEMATIC INTRO ANIMATION
|
||||
============================================ */
|
||||
|
||||
.intro-animation {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 10000;
|
||||
background: #000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
transition: opacity 1s ease-out;
|
||||
}
|
||||
|
||||
.intro-animation.fade {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
PARTICLE FIELD
|
||||
============================================ */
|
||||
|
||||
.intro-particles {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.intro-particle {
|
||||
position: absolute;
|
||||
left: var(--x);
|
||||
top: var(--y);
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
background: var(--color);
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
animation: particle-float var(--duration) var(--delay) infinite;
|
||||
box-shadow: 0 0 10px var(--color);
|
||||
}
|
||||
|
||||
@keyframes particle-float {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(0) scale(0);
|
||||
}
|
||||
10% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1);
|
||||
}
|
||||
90% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-100px) scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
ANIMATED LOGO
|
||||
============================================ */
|
||||
|
||||
.intro-logo-container {
|
||||
position: relative;
|
||||
margin-bottom: 40px;
|
||||
animation: logo-appear 1s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes logo-appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5) rotate(-180deg);
|
||||
}
|
||||
60% {
|
||||
transform: scale(1.1) rotate(10deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.intro-logo {
|
||||
filter: drop-shadow(0 0 30px rgba(255, 100, 50, 0.5));
|
||||
}
|
||||
|
||||
/* Diamond outer - draw animation */
|
||||
.intro-diamond-outer {
|
||||
stroke-dasharray: 1000;
|
||||
stroke-dashoffset: 1000;
|
||||
animation: draw-diamond 1.5s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes draw-diamond {
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Diamond inner - fade in */
|
||||
.intro-diamond-inner {
|
||||
opacity: 0;
|
||||
animation: fade-in 0.5s ease-out 1s forwards;
|
||||
}
|
||||
|
||||
/* Core pulse */
|
||||
.intro-core {
|
||||
animation: core-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes core-pulse {
|
||||
0%, 100% {
|
||||
r: 15;
|
||||
filter: drop-shadow(0 0 20px rgba(255, 100, 50, 0.8));
|
||||
}
|
||||
50% {
|
||||
r: 18;
|
||||
filter: drop-shadow(0 0 40px rgba(255, 100, 50, 1));
|
||||
}
|
||||
}
|
||||
|
||||
/* Orbiting dots */
|
||||
.intro-orbit {
|
||||
transform-origin: 100px 100px;
|
||||
}
|
||||
|
||||
.intro-orbit-1 {
|
||||
animation: orbit 3s linear infinite;
|
||||
}
|
||||
|
||||
.intro-orbit-2 {
|
||||
animation: orbit 3s linear infinite;
|
||||
animation-delay: -1s;
|
||||
}
|
||||
|
||||
.intro-orbit-3 {
|
||||
animation: orbit 3s linear infinite;
|
||||
animation-delay: -2s;
|
||||
}
|
||||
|
||||
@keyframes orbit {
|
||||
0% {
|
||||
transform: rotate(0deg) translateX(70px) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg) translateX(70px) rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
TEXT REVEAL
|
||||
============================================ */
|
||||
|
||||
.intro-text-container {
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.intro-animation.text .intro-text-container,
|
||||
.intro-animation.fade .intro-text-container {
|
||||
animation: text-reveal 1s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes text-reveal {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.intro-title {
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
letter-spacing: 0.1em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.intro-letter {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
transform: translateY(40px) rotateX(-90deg);
|
||||
animation: letter-flip 0.6s ease-out forwards;
|
||||
animation-delay: calc(var(--i) * 0.05s + 1.5s);
|
||||
background: linear-gradient(135deg, #ff0000, #0066ff, #ffa500);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
@keyframes letter-flip {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) rotateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.intro-space {
|
||||
width: 0.3em;
|
||||
}
|
||||
|
||||
.intro-tagline {
|
||||
font-size: 1.2rem;
|
||||
color: #666;
|
||||
margin-top: 12px;
|
||||
opacity: 0;
|
||||
animation: fade-in 0.8s ease-out 2.5s forwards;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SCAN LINE EFFECT
|
||||
============================================ */
|
||||
|
||||
.intro-scanline {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #ff0000, #0066ff, #ffa500, transparent);
|
||||
opacity: 0.6;
|
||||
animation: scanline 3s linear infinite;
|
||||
box-shadow: 0 0 20px rgba(255, 100, 50, 0.5);
|
||||
}
|
||||
|
||||
@keyframes scanline {
|
||||
0% {
|
||||
top: -2px;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
CORNER ACCENTS
|
||||
============================================ */
|
||||
|
||||
.intro-corner {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
opacity: 0;
|
||||
animation: corner-appear 0.5s ease-out 0.5s forwards;
|
||||
}
|
||||
|
||||
.intro-corner-tl {
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
border-top: 2px solid #ff0000;
|
||||
border-left: 2px solid #ff0000;
|
||||
}
|
||||
|
||||
.intro-corner-tr {
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
border-top: 2px solid #0066ff;
|
||||
border-right: 2px solid #0066ff;
|
||||
}
|
||||
|
||||
.intro-corner-bl {
|
||||
bottom: 30px;
|
||||
left: 30px;
|
||||
border-bottom: 2px solid #ffa500;
|
||||
border-left: 2px solid #ffa500;
|
||||
}
|
||||
|
||||
.intro-corner-br {
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
border-bottom: 2px solid #fff;
|
||||
border-right: 2px solid #fff;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
@keyframes corner-appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
RESPONSIVE
|
||||
============================================ */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.intro-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.intro-tagline {
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
|
||||
.intro-logo-container svg {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.intro-corner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
126
src/frontend/mockup/components/IntroAnimation.jsx
Normal file
126
src/frontend/mockup/components/IntroAnimation.jsx
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import './IntroAnimation.css';
|
||||
|
||||
export default function IntroAnimation({ onComplete }) {
|
||||
const [phase, setPhase] = useState('logo'); // logo -> text -> fade
|
||||
const [visible, setVisible] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const timers = [
|
||||
setTimeout(() => setPhase('text'), 1500),
|
||||
setTimeout(() => setPhase('fade'), 3500),
|
||||
setTimeout(() => {
|
||||
setVisible(false);
|
||||
onComplete?.();
|
||||
}, 4500)
|
||||
];
|
||||
|
||||
return () => timers.forEach(clearTimeout);
|
||||
}, [onComplete]);
|
||||
|
||||
if (!visible) return null;
|
||||
|
||||
return (
|
||||
<div className={`intro-animation ${phase}`}>
|
||||
{/* Particle field background */}
|
||||
<div className="intro-particles">
|
||||
{[...Array(50)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="intro-particle"
|
||||
style={{
|
||||
'--x': `${Math.random() * 100}%`,
|
||||
'--y': `${Math.random() * 100}%`,
|
||||
'--delay': `${Math.random() * 2}s`,
|
||||
'--duration': `${3 + Math.random() * 4}s`,
|
||||
'--size': `${1 + Math.random() * 3}px`,
|
||||
'--color': ['#ff0000', '#0066ff', '#ffa500'][Math.floor(Math.random() * 3)]
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Animated logo */}
|
||||
<div className="intro-logo-container">
|
||||
<svg className="intro-logo" viewBox="0 0 200 200" width="200" height="200">
|
||||
<defs>
|
||||
<linearGradient id="intro-trinity" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#ff0000"/>
|
||||
<stop offset="50%" stopColor="#0066ff"/>
|
||||
<stop offset="100%" stopColor="#ffa500"/>
|
||||
</linearGradient>
|
||||
<filter id="intro-glow">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Outer diamond */}
|
||||
<path
|
||||
className="intro-diamond-outer"
|
||||
d="M100 10 L190 100 L100 190 L10 100 Z"
|
||||
fill="none"
|
||||
stroke="url(#intro-trinity)"
|
||||
strokeWidth="2"
|
||||
filter="url(#intro-glow)"
|
||||
/>
|
||||
|
||||
{/* Inner diamond */}
|
||||
<path
|
||||
className="intro-diamond-inner"
|
||||
d="M100 40 L160 100 L100 160 L40 100 Z"
|
||||
fill="url(#intro-trinity)"
|
||||
opacity="0.2"
|
||||
/>
|
||||
|
||||
{/* Center pulse */}
|
||||
<circle
|
||||
className="intro-core"
|
||||
cx="100"
|
||||
cy="100"
|
||||
r="15"
|
||||
fill="url(#intro-trinity)"
|
||||
/>
|
||||
|
||||
{/* Orbiting dots */}
|
||||
<circle className="intro-orbit intro-orbit-1" r="4" fill="#ff0000"/>
|
||||
<circle className="intro-orbit intro-orbit-2" r="4" fill="#0066ff"/>
|
||||
<circle className="intro-orbit intro-orbit-3" r="4" fill="#ffa500"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Text reveal */}
|
||||
<div className="intro-text-container">
|
||||
<h1 className="intro-title">
|
||||
<span className="intro-letter" style={{ '--i': 0 }}>A</span>
|
||||
<span className="intro-letter" style={{ '--i': 1 }}>e</span>
|
||||
<span className="intro-letter" style={{ '--i': 2 }}>T</span>
|
||||
<span className="intro-letter" style={{ '--i': 3 }}>h</span>
|
||||
<span className="intro-letter" style={{ '--i': 4 }}>e</span>
|
||||
<span className="intro-letter" style={{ '--i': 5 }}>x</span>
|
||||
<span className="intro-space"> </span>
|
||||
<span className="intro-letter" style={{ '--i': 6 }}>C</span>
|
||||
<span className="intro-letter" style={{ '--i': 7 }}>o</span>
|
||||
<span className="intro-letter" style={{ '--i': 8 }}>n</span>
|
||||
<span className="intro-letter" style={{ '--i': 9 }}>n</span>
|
||||
<span className="intro-letter" style={{ '--i': 10 }}>e</span>
|
||||
<span className="intro-letter" style={{ '--i': 11 }}>c</span>
|
||||
<span className="intro-letter" style={{ '--i': 12 }}>t</span>
|
||||
</h1>
|
||||
<p className="intro-tagline">The Trinity of Communication</p>
|
||||
</div>
|
||||
|
||||
{/* Scan line effect */}
|
||||
<div className="intro-scanline" />
|
||||
|
||||
{/* Corner accents */}
|
||||
<div className="intro-corner intro-corner-tl" />
|
||||
<div className="intro-corner intro-corner-tr" />
|
||||
<div className="intro-corner intro-corner-bl" />
|
||||
<div className="intro-corner intro-corner-br" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import HeroVideo from '../components/HeroVideo';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
|
|
@ -23,6 +24,7 @@ export default function LandingPage() {
|
|||
|
||||
{/* Hero Section */}
|
||||
<section className="hero">
|
||||
<HeroVideo />
|
||||
<div className="hero-content">
|
||||
<div className="hero-badge">
|
||||
<span className="badge-dot"></span>
|
||||
|
|
|
|||
16
src/frontend/public/.well-known/security.txt
Normal file
16
src/frontend/public/.well-known/security.txt
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
# AeThex Connect Security Policy
|
||||
# https://aethex.online/.well-known/security.txt
|
||||
|
||||
Contact: mailto:security@aethex.online
|
||||
Contact: https://github.com/AeThex-Corporation/AeThex-Connect/security/advisories
|
||||
Expires: 2027-02-05T00:00:00.000Z
|
||||
Encryption: https://aethex.online/.well-known/pgp-key.txt
|
||||
Preferred-Languages: en
|
||||
Canonical: https://aethex.online/.well-known/security.txt
|
||||
Policy: https://aethex.online/security-policy
|
||||
|
||||
# We take security seriously. If you discover a vulnerability,
|
||||
# please report it responsibly. We offer a bug bounty program
|
||||
# for qualifying security issues.
|
||||
|
||||
# Acknowledgments: https://aethex.online/security/hall-of-fame
|
||||
BIN
src/frontend/public/apple-touch-icon.png
Normal file
BIN
src/frontend/public/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/frontend/public/brand-kit.png
Normal file
BIN
src/frontend/public/brand-kit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
175
src/frontend/public/brand-kit.svg
Normal file
175
src/frontend/public/brand-kit.svg
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1600">
|
||||
<defs>
|
||||
<!-- Core Gradients -->
|
||||
<linearGradient id="trinity-full" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#ff0000"/>
|
||||
<stop offset="50%" style="stop-color:#0066ff"/>
|
||||
<stop offset="100%" style="stop-color:#ffa500"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="foundation" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#ff0000"/>
|
||||
<stop offset="100%" style="stop-color:#cc0000"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="corporation" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0066ff"/>
|
||||
<stop offset="100%" style="stop-color:#0044cc"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="labs" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#ffa500"/>
|
||||
<stop offset="100%" style="stop-color:#cc8400"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1200" height="1600" fill="#0a0a0a"/>
|
||||
|
||||
<!-- Header -->
|
||||
<text x="600" y="80" font-family="system-ui, sans-serif" font-size="36" font-weight="700" fill="white" text-anchor="middle">
|
||||
AeThex Connect Brand Kit
|
||||
</text>
|
||||
<line x1="100" y1="110" x2="1100" y2="110" stroke="url(#trinity-full)" stroke-width="2"/>
|
||||
|
||||
<!-- Section 1: Primary Logos -->
|
||||
<text x="100" y="180" font-family="system-ui, sans-serif" font-size="24" font-weight="600" fill="#888">PRIMARY LOGOS</text>
|
||||
|
||||
<!-- Full Color Logo -->
|
||||
<g transform="translate(200, 250)">
|
||||
<rect x="-80" y="-80" width="160" height="160" fill="#0a0a0a" stroke="#333" rx="8"/>
|
||||
<path d="M0 -50 L50 0 L0 50 L-50 0 Z" fill="none" stroke="url(#trinity-full)" stroke-width="3"/>
|
||||
<path d="M0 -30 L30 0 L0 30 L-30 0 Z" fill="url(#trinity-full)" opacity="0.2"/>
|
||||
<circle cx="0" cy="0" r="8" fill="url(#trinity-full)"/>
|
||||
<text x="0" y="110" font-family="system-ui, sans-serif" font-size="12" fill="#666" text-anchor="middle">Full Color</text>
|
||||
</g>
|
||||
|
||||
<!-- White Logo -->
|
||||
<g transform="translate(450, 250)">
|
||||
<rect x="-80" y="-80" width="160" height="160" fill="#0a0a0a" stroke="#333" rx="8"/>
|
||||
<path d="M0 -50 L50 0 L0 50 L-50 0 Z" fill="none" stroke="white" stroke-width="3"/>
|
||||
<path d="M0 -30 L30 0 L0 30 L-30 0 Z" fill="white" opacity="0.2"/>
|
||||
<circle cx="0" cy="0" r="8" fill="white"/>
|
||||
<text x="0" y="110" font-family="system-ui, sans-serif" font-size="12" fill="#666" text-anchor="middle">White (Dark BG)</text>
|
||||
</g>
|
||||
|
||||
<!-- Black Logo -->
|
||||
<g transform="translate(700, 250)">
|
||||
<rect x="-80" y="-80" width="160" height="160" fill="white" stroke="#333" rx="8"/>
|
||||
<path d="M0 -50 L50 0 L0 50 L-50 0 Z" fill="none" stroke="#0a0a0a" stroke-width="3"/>
|
||||
<path d="M0 -30 L30 0 L0 30 L-30 0 Z" fill="#0a0a0a" opacity="0.2"/>
|
||||
<circle cx="0" cy="0" r="8" fill="#0a0a0a"/>
|
||||
<text x="0" y="110" font-family="system-ui, sans-serif" font-size="12" fill="#666" text-anchor="middle">Black (Light BG)</text>
|
||||
</g>
|
||||
|
||||
<!-- Minimal Icon -->
|
||||
<g transform="translate(950, 250)">
|
||||
<rect x="-80" y="-80" width="160" height="160" fill="#0a0a0a" stroke="#333" rx="8"/>
|
||||
<path d="M0 -40 L40 0 L0 40 L-40 0 Z" fill="url(#trinity-full)"/>
|
||||
<text x="0" y="110" font-family="system-ui, sans-serif" font-size="12" fill="#666" text-anchor="middle">Minimal Icon</text>
|
||||
</g>
|
||||
|
||||
<!-- Section 2: Trinity Variations -->
|
||||
<text x="100" y="450" font-family="system-ui, sans-serif" font-size="24" font-weight="600" fill="#888">TRINITY DIVISIONS</text>
|
||||
|
||||
<!-- Foundation -->
|
||||
<g transform="translate(250, 550)">
|
||||
<rect x="-100" y="-70" width="200" height="140" fill="#0a0a0a" stroke="#ff0000" stroke-width="2" rx="8"/>
|
||||
<path d="M0 -35 L35 0 L0 35 L-35 0 Z" fill="none" stroke="#ff0000" stroke-width="2"/>
|
||||
<circle cx="0" cy="0" r="6" fill="#ff0000"/>
|
||||
<text x="0" y="55" font-family="system-ui, sans-serif" font-size="14" font-weight="600" fill="#ff0000" text-anchor="middle">Foundation</text>
|
||||
<text x="0" y="90" font-family="system-ui, sans-serif" font-size="10" fill="#666" text-anchor="middle">#ff0000 | RGB(255,0,0)</text>
|
||||
</g>
|
||||
|
||||
<!-- Corporation -->
|
||||
<g transform="translate(550, 550)">
|
||||
<rect x="-100" y="-70" width="200" height="140" fill="#0a0a0a" stroke="#0066ff" stroke-width="2" rx="8"/>
|
||||
<path d="M0 -35 L35 0 L0 35 L-35 0 Z" fill="none" stroke="#0066ff" stroke-width="2"/>
|
||||
<circle cx="0" cy="0" r="6" fill="#0066ff"/>
|
||||
<text x="0" y="55" font-family="system-ui, sans-serif" font-size="14" font-weight="600" fill="#0066ff" text-anchor="middle">Corporation</text>
|
||||
<text x="0" y="90" font-family="system-ui, sans-serif" font-size="10" fill="#666" text-anchor="middle">#0066ff | RGB(0,102,255)</text>
|
||||
</g>
|
||||
|
||||
<!-- Labs -->
|
||||
<g transform="translate(850, 550)">
|
||||
<rect x="-100" y="-70" width="200" height="140" fill="#0a0a0a" stroke="#ffa500" stroke-width="2" rx="8"/>
|
||||
<path d="M0 -35 L35 0 L0 35 L-35 0 Z" fill="none" stroke="#ffa500" stroke-width="2"/>
|
||||
<circle cx="0" cy="0" r="6" fill="#ffa500"/>
|
||||
<text x="0" y="55" font-family="system-ui, sans-serif" font-size="14" font-weight="600" fill="#ffa500" text-anchor="middle">Labs</text>
|
||||
<text x="0" y="90" font-family="system-ui, sans-serif" font-size="10" fill="#666" text-anchor="middle">#ffa500 | RGB(255,165,0)</text>
|
||||
</g>
|
||||
|
||||
<!-- Section 3: Color Palette -->
|
||||
<text x="100" y="750" font-family="system-ui, sans-serif" font-size="24" font-weight="600" fill="#888">COLOR PALETTE</text>
|
||||
|
||||
<!-- Primary Colors -->
|
||||
<g transform="translate(100, 800)">
|
||||
<rect width="150" height="100" fill="#ff0000" rx="8"/>
|
||||
<text x="75" y="130" font-family="monospace" font-size="12" fill="#888" text-anchor="middle">#ff0000</text>
|
||||
<text x="75" y="145" font-family="system-ui, sans-serif" font-size="10" fill="#666" text-anchor="middle">Foundation Red</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(280, 800)">
|
||||
<rect width="150" height="100" fill="#0066ff" rx="8"/>
|
||||
<text x="75" y="130" font-family="monospace" font-size="12" fill="#888" text-anchor="middle">#0066ff</text>
|
||||
<text x="75" y="145" font-family="system-ui, sans-serif" font-size="10" fill="#666" text-anchor="middle">Corporation Blue</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(460, 800)">
|
||||
<rect width="150" height="100" fill="#ffa500" rx="8"/>
|
||||
<text x="75" y="130" font-family="monospace" font-size="12" fill="#888" text-anchor="middle">#ffa500</text>
|
||||
<text x="75" y="145" font-family="system-ui, sans-serif" font-size="10" fill="#666" text-anchor="middle">Labs Orange</text>
|
||||
</g>
|
||||
|
||||
<!-- Neutral Colors -->
|
||||
<g transform="translate(640, 800)">
|
||||
<rect width="150" height="100" fill="#0a0a0a" stroke="#333" rx="8"/>
|
||||
<text x="75" y="130" font-family="monospace" font-size="12" fill="#888" text-anchor="middle">#0a0a0a</text>
|
||||
<text x="75" y="145" font-family="system-ui, sans-serif" font-size="10" fill="#666" text-anchor="middle">Background</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(820, 800)">
|
||||
<rect width="150" height="100" fill="#1a1a1a" stroke="#333" rx="8"/>
|
||||
<text x="75" y="130" font-family="monospace" font-size="12" fill="#888" text-anchor="middle">#1a1a1a</text>
|
||||
<text x="75" y="145" font-family="system-ui, sans-serif" font-size="10" fill="#666" text-anchor="middle">Surface</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(1000, 800)">
|
||||
<rect width="150" height="100" fill="#2a2a2a" stroke="#333" rx="8"/>
|
||||
<text x="75" y="130" font-family="monospace" font-size="12" fill="#888" text-anchor="middle">#2a2a2a</text>
|
||||
<text x="75" y="145" font-family="system-ui, sans-serif" font-size="10" fill="#666" text-anchor="middle">Elevated</text>
|
||||
</g>
|
||||
|
||||
<!-- Section 4: Wordmark -->
|
||||
<text x="100" y="1020" font-family="system-ui, sans-serif" font-size="24" font-weight="600" fill="#888">WORDMARKS</text>
|
||||
|
||||
<!-- Full Wordmark -->
|
||||
<g transform="translate(600, 1100)">
|
||||
<rect x="-400" y="-50" width="800" height="100" fill="#0a0a0a" stroke="#333" rx="8"/>
|
||||
<path d="M-350 0 L-320 -30 L-290 0 L-320 30 Z" fill="url(#trinity-full)"/>
|
||||
<text x="-260" y="12" font-family="system-ui, sans-serif" font-size="36" font-weight="700" fill="white">AeThex Connect</text>
|
||||
</g>
|
||||
|
||||
<!-- Tagline -->
|
||||
<g transform="translate(600, 1200)">
|
||||
<text x="0" y="0" font-family="system-ui, sans-serif" font-size="18" fill="#666" text-anchor="middle" letter-spacing="0.3em">THE TRINITY OF COMMUNICATION</text>
|
||||
</g>
|
||||
|
||||
<!-- Section 5: Usage Guidelines -->
|
||||
<text x="100" y="1300" font-family="system-ui, sans-serif" font-size="24" font-weight="600" fill="#888">USAGE GUIDELINES</text>
|
||||
|
||||
<g transform="translate(100, 1340)">
|
||||
<text font-family="system-ui, sans-serif" font-size="14" fill="#aaa">
|
||||
<tspan x="0" dy="0">• Minimum logo size: 32px</tspan>
|
||||
<tspan x="0" dy="25">• Always maintain clear space equal to the diamond height</tspan>
|
||||
<tspan x="0" dy="25">• Do not rotate, stretch, or distort the logo</tspan>
|
||||
<tspan x="0" dy="25">• Do not change the trinity colors</tspan>
|
||||
<tspan x="0" dy="25">• Use white logo on dark backgrounds, black on light</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- Footer -->
|
||||
<text x="600" y="1560" font-family="system-ui, sans-serif" font-size="12" fill="#444" text-anchor="middle">
|
||||
© 2026 AeThex Corporation. All rights reserved.
|
||||
</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.2 KiB |
BIN
src/frontend/public/discord-banner.png
Normal file
BIN
src/frontend/public/discord-banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
56
src/frontend/public/discord-banner.svg
Normal file
56
src/frontend/public/discord-banner.svg
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 540" width="960" height="540">
|
||||
<defs>
|
||||
<linearGradient id="trinity" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#ff0000"/>
|
||||
<stop offset="50%" style="stop-color:#0066ff"/>
|
||||
<stop offset="100%" style="stop-color:#ffa500"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#050505"/>
|
||||
<stop offset="100%" style="stop-color:#0a0a0a"/>
|
||||
</linearGradient>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="white" stroke-width="0.5" opacity="0.03"/>
|
||||
</pattern>
|
||||
<radialGradient id="vignette" cx="50%" cy="50%" r="70%">
|
||||
<stop offset="0%" style="stop-color:#0a0a0a;stop-opacity:0"/>
|
||||
<stop offset="100%" style="stop-color:#000000;stop-opacity:0.6"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect width="960" height="540" fill="url(#bg)"/>
|
||||
<rect width="960" height="540" fill="url(#grid)"/>
|
||||
<ellipse cx="150" cy="150" rx="250" ry="180" fill="#ff0000" opacity="0.04" filter="url(#glow)"/>
|
||||
<ellipse cx="850" cy="400" rx="280" ry="200" fill="#0066ff" opacity="0.04" filter="url(#glow)"/>
|
||||
<ellipse cx="480" cy="270" rx="150" ry="120" fill="#ffa500" opacity="0.03" filter="url(#glow)"/>
|
||||
<g transform="translate(480, 220)" filter="url(#glow)">
|
||||
<path d="M0 -80 L80 0 L0 80 L-80 0 Z" fill="none" stroke="url(#trinity)" stroke-width="3"/>
|
||||
<path d="M0 -48 L48 0 L0 48 L-48 0 Z" fill="url(#trinity)" opacity="0.15"/>
|
||||
<circle cx="0" cy="0" r="12" fill="url(#trinity)"/>
|
||||
</g>
|
||||
<text x="480" y="360" font-family="system-ui, sans-serif" font-size="48" font-weight="700" fill="white" text-anchor="middle">AeThex Connect</text>
|
||||
<text x="480" y="400" font-family="system-ui, sans-serif" font-size="18" fill="#666" text-anchor="middle">The Trinity of Communication</text>
|
||||
<g transform="translate(480, 460)">
|
||||
<rect x="-150" width="80" height="28" rx="14" fill="#ff0000" opacity="0.8"/>
|
||||
<text x="-110" y="19" font-family="system-ui, sans-serif" font-size="11" font-weight="600" fill="white" text-anchor="middle">Foundation</text>
|
||||
<rect x="-45" width="90" height="28" rx="14" fill="#0066ff" opacity="0.8"/>
|
||||
<text x="0" y="19" font-family="system-ui, sans-serif" font-size="11" font-weight="600" fill="white" text-anchor="middle">Corporation</text>
|
||||
<rect x="70" width="80" height="28" rx="14" fill="#ffa500" opacity="0.8"/>
|
||||
<text x="110" y="19" font-family="system-ui, sans-serif" font-size="11" font-weight="600" fill="white" text-anchor="middle">Labs</text>
|
||||
</g>
|
||||
<g opacity="0.4">
|
||||
<path d="M0 40 L0 0 L40 0" fill="none" stroke="#ff0000" stroke-width="2"/>
|
||||
<path d="M920 0 L960 0 L960 40" fill="none" stroke="#0066ff" stroke-width="2"/>
|
||||
<path d="M0 500 L0 540 L40 540" fill="none" stroke="#ffa500" stroke-width="2"/>
|
||||
<path d="M920 540 L960 540 L960 500" fill="none" stroke="white" stroke-width="2"/>
|
||||
</g>
|
||||
<rect x="0" y="0" width="960" height="2" fill="url(#trinity)"/>
|
||||
<rect x="0" y="538" width="960" height="2" fill="url(#trinity)"/>
|
||||
<rect width="960" height="540" fill="url(#vignette)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
BIN
src/frontend/public/favicon-16x16.png
Normal file
BIN
src/frontend/public/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 818 B |
BIN
src/frontend/public/favicon-192x192.png
Normal file
BIN
src/frontend/public/favicon-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/frontend/public/favicon-32x32.png
Normal file
BIN
src/frontend/public/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 KiB |
BIN
src/frontend/public/favicon-512x512.png
Normal file
BIN
src/frontend/public/favicon-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
17
src/frontend/public/favicon.svg
Normal file
17
src/frontend/public/favicon.svg
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<defs>
|
||||
<linearGradient id="trinity" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#ff0000"/>
|
||||
<stop offset="50%" style="stop-color:#0066ff"/>
|
||||
<stop offset="100%" style="stop-color:#ffa500"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Background circle -->
|
||||
<circle cx="50" cy="50" r="48" fill="#0a0a0a" stroke="url(#trinity)" stroke-width="2"/>
|
||||
<!-- AeThex Trinity Diamond -->
|
||||
<path d="M50 15 L80 50 L50 85 L20 50 Z" fill="none" stroke="url(#trinity)" stroke-width="3"/>
|
||||
<!-- Inner diamond -->
|
||||
<path d="M50 28 L68 50 L50 72 L32 50 Z" fill="url(#trinity)" opacity="0.3"/>
|
||||
<!-- Center dot -->
|
||||
<circle cx="50" cy="50" r="6" fill="url(#trinity)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 773 B |
138
src/frontend/public/hero-bg.svg
Normal file
138
src/frontend/public/hero-bg.svg
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice">
|
||||
<defs>
|
||||
<!-- Animated gradient for background -->
|
||||
<linearGradient id="bg-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0a0a0a"/>
|
||||
<stop offset="50%" style="stop-color:#0f0f0f"/>
|
||||
<stop offset="100%" style="stop-color:#0a0a0a"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="foundation-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#ff0000"/>
|
||||
<stop offset="100%" style="stop-color:#cc0000"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="corporation-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0066ff"/>
|
||||
<stop offset="100%" style="stop-color:#0044cc"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="labs-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#ffa500"/>
|
||||
<stop offset="100%" style="stop-color:#cc8400"/>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="blur-glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="20" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Grid pattern -->
|
||||
<pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
|
||||
<path d="M 100 0 L 0 0 0 100" fill="none" stroke="white" stroke-width="0.5" opacity="0.05"/>
|
||||
</pattern>
|
||||
|
||||
<!-- Hexagon pattern -->
|
||||
<pattern id="hex-pattern" width="60" height="52" patternUnits="userSpaceOnUse">
|
||||
<polygon points="30,0 60,15 60,37 30,52 0,37 0,15" fill="none" stroke="white" stroke-width="0.3" opacity="0.03"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1920" height="1080" fill="url(#bg-gradient)"/>
|
||||
|
||||
<!-- Grid overlay -->
|
||||
<rect width="1920" height="1080" fill="url(#grid)"/>
|
||||
<rect width="1920" height="1080" fill="url(#hex-pattern)">
|
||||
<animate attributeName="opacity" values="0.5;1;0.5" dur="8s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
|
||||
<!-- Animated nebula blobs -->
|
||||
<ellipse cx="300" cy="200" rx="400" ry="300" fill="url(#foundation-grad)" opacity="0.05" filter="url(#blur-glow)">
|
||||
<animate attributeName="cx" values="300;500;300" dur="20s" repeatCount="indefinite"/>
|
||||
<animate attributeName="cy" values="200;400;200" dur="25s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.03;0.08;0.03" dur="8s" repeatCount="indefinite"/>
|
||||
</ellipse>
|
||||
|
||||
<ellipse cx="1600" cy="800" rx="500" ry="350" fill="url(#corporation-grad)" opacity="0.05" filter="url(#blur-glow)">
|
||||
<animate attributeName="cx" values="1600;1400;1600" dur="22s" repeatCount="indefinite"/>
|
||||
<animate attributeName="cy" values="800;600;800" dur="18s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.03;0.08;0.03" dur="10s" repeatCount="indefinite"/>
|
||||
</ellipse>
|
||||
|
||||
<ellipse cx="960" cy="540" rx="300" ry="250" fill="url(#labs-grad)" opacity="0.04" filter="url(#blur-glow)">
|
||||
<animate attributeName="rx" values="300;400;300" dur="15s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.02;0.06;0.02" dur="6s" repeatCount="indefinite"/>
|
||||
</ellipse>
|
||||
|
||||
<!-- Floating particles -->
|
||||
<g>
|
||||
<!-- Foundation particles -->
|
||||
<circle cx="100" cy="100" r="2" fill="#ff0000" opacity="0.6">
|
||||
<animate attributeName="cy" values="100;1000;100" dur="30s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0" dur="30s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="400" cy="300" r="1.5" fill="#ff0000" opacity="0.5">
|
||||
<animate attributeName="cy" values="300;1100;300" dur="25s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="25s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="250" cy="500" r="1" fill="#ff0000" opacity="0.4">
|
||||
<animate attributeName="cy" values="500;1300;500" dur="35s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Corporation particles -->
|
||||
<circle cx="1500" cy="200" r="2" fill="#0066ff" opacity="0.6">
|
||||
<animate attributeName="cy" values="200;1100;200" dur="28s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0" dur="28s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="1700" cy="400" r="1.5" fill="#0066ff" opacity="0.5">
|
||||
<animate attributeName="cy" values="400;1200;400" dur="32s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="1300" cy="600" r="1" fill="#0066ff" opacity="0.4">
|
||||
<animate attributeName="cy" values="600;1400;600" dur="26s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Labs particles -->
|
||||
<circle cx="900" cy="150" r="2" fill="#ffa500" opacity="0.6">
|
||||
<animate attributeName="cy" values="150;1050;150" dur="24s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0" dur="24s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="1000" cy="350" r="1.5" fill="#ffa500" opacity="0.5">
|
||||
<animate attributeName="cy" values="350;1150;350" dur="29s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="800" cy="550" r="1" fill="#ffa500" opacity="0.4">
|
||||
<animate attributeName="cy" values="550;1350;550" dur="33s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Scanning lines -->
|
||||
<rect x="0" y="0" width="1920" height="1" fill="white" opacity="0.03">
|
||||
<animate attributeName="y" values="0;1080;0" dur="8s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="0" y="0" width="1920" height="1" fill="white" opacity="0.02">
|
||||
<animate attributeName="y" values="1080;0;1080" dur="12s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
|
||||
<!-- Horizontal accent lines -->
|
||||
<line x1="0" y1="540" x2="1920" y2="540" stroke="white" stroke-width="0.5" opacity="0.02">
|
||||
<animate attributeName="opacity" values="0.01;0.04;0.01" dur="5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
|
||||
<!-- Corner accents -->
|
||||
<g opacity="0.1">
|
||||
<path d="M0 100 L0 0 L100 0" fill="none" stroke="url(#foundation-grad)" stroke-width="2"/>
|
||||
<path d="M1820 0 L1920 0 L1920 100" fill="none" stroke="url(#corporation-grad)" stroke-width="2"/>
|
||||
<path d="M0 980 L0 1080 L100 1080" fill="none" stroke="url(#labs-grad)" stroke-width="2"/>
|
||||
<path d="M1820 1080 L1920 1080 L1920 980" fill="none" stroke="white" stroke-width="2"/>
|
||||
</g>
|
||||
|
||||
<!-- Vignette effect -->
|
||||
<radialGradient id="vignette" cx="50%" cy="50%" r="70%">
|
||||
<stop offset="0%" style="stop-color:#0a0a0a;stop-opacity:0"/>
|
||||
<stop offset="100%" style="stop-color:#000000;stop-opacity:0.8"/>
|
||||
</radialGradient>
|
||||
<rect width="1920" height="1080" fill="url(#vignette)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.6 KiB |
BIN
src/frontend/public/logo-400.png
Normal file
BIN
src/frontend/public/logo-400.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
117
src/frontend/public/logo-animated.svg
Normal file
117
src/frontend/public/logo-animated.svg
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
|
||||
<defs>
|
||||
<!-- Trinity Gradient -->
|
||||
<linearGradient id="trinity" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#ff0000">
|
||||
<animate attributeName="stop-color" values="#ff0000;#0066ff;#ffa500;#ff0000" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="50%" style="stop-color:#0066ff">
|
||||
<animate attributeName="stop-color" values="#0066ff;#ffa500;#ff0000;#0066ff" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="100%" style="stop-color:#ffa500">
|
||||
<animate attributeName="stop-color" values="#ffa500;#ff0000;#0066ff;#ffa500" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Glow Filter -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Pulse Glow -->
|
||||
<filter id="pulse-glow" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="8" result="blur">
|
||||
<animate attributeName="stdDeviation" values="4;12;4" dur="2s" repeatCount="indefinite"/>
|
||||
</feGaussianBlur>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="400" height="400" fill="#0a0a0a"/>
|
||||
|
||||
<!-- Rotating outer ring -->
|
||||
<g transform="translate(200, 200)">
|
||||
<circle r="150" fill="none" stroke="url(#trinity)" stroke-width="1" opacity="0.3">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="20s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="140" fill="none" stroke="url(#trinity)" stroke-width="0.5" opacity="0.2">
|
||||
<animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="15s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Orbiting particles -->
|
||||
<g transform="translate(200, 200)">
|
||||
<!-- Foundation particle -->
|
||||
<circle r="4" fill="#ff0000" filter="url(#glow)">
|
||||
<animateMotion dur="6s" repeatCount="indefinite">
|
||||
<mpath href="#orbit1"/>
|
||||
</animateMotion>
|
||||
</circle>
|
||||
<!-- Corporation particle -->
|
||||
<circle r="4" fill="#0066ff" filter="url(#glow)">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" begin="2s">
|
||||
<mpath href="#orbit1"/>
|
||||
</animateMotion>
|
||||
</circle>
|
||||
<!-- Labs particle -->
|
||||
<circle r="4" fill="#ffa500" filter="url(#glow)">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" begin="4s">
|
||||
<mpath href="#orbit1"/>
|
||||
</animateMotion>
|
||||
</circle>
|
||||
|
||||
<!-- Orbit path (invisible) -->
|
||||
<path id="orbit1" d="M 0,-120 A 120,120 0 1,1 0,120 A 120,120 0 1,1 0,-120" fill="none"/>
|
||||
</g>
|
||||
|
||||
<!-- Main Diamond - Outer -->
|
||||
<g transform="translate(200, 200)" filter="url(#glow)">
|
||||
<path d="M0 -100 L100 0 L0 100 L-100 0 Z" fill="none" stroke="url(#trinity)" stroke-width="3">
|
||||
<animate attributeName="stroke-dasharray" values="0 800;400 400;800 0;400 400;0 800" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Main Diamond - Inner -->
|
||||
<g transform="translate(200, 200)">
|
||||
<path d="M0 -60 L60 0 L0 60 L-60 0 Z" fill="url(#trinity)" opacity="0.15">
|
||||
<animate attributeName="opacity" values="0.1;0.25;0.1" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M0 -60 L60 0 L0 60 L-60 0 Z" fill="none" stroke="url(#trinity)" stroke-width="2"/>
|
||||
</g>
|
||||
|
||||
<!-- Center Core -->
|
||||
<g transform="translate(200, 200)" filter="url(#pulse-glow)">
|
||||
<circle r="20" fill="url(#trinity)">
|
||||
<animate attributeName="r" values="18;22;18" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Trinity connection lines -->
|
||||
<g transform="translate(200, 200)" opacity="0.5">
|
||||
<!-- Top to bottom-left -->
|
||||
<line x1="0" y1="-100" x2="-60" y2="60" stroke="#ff0000" stroke-width="1">
|
||||
<animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<!-- Top to bottom-right -->
|
||||
<line x1="0" y1="-100" x2="60" y2="60" stroke="#0066ff" stroke-width="1">
|
||||
<animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite" begin="1s"/>
|
||||
</line>
|
||||
<!-- Bottom-left to bottom-right -->
|
||||
<line x1="-60" y1="60" x2="60" y2="60" stroke="#ffa500" stroke-width="1">
|
||||
<animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite" begin="2s"/>
|
||||
</line>
|
||||
</g>
|
||||
|
||||
<!-- Scan line effect -->
|
||||
<rect x="0" y="0" width="400" height="2" fill="url(#trinity)" opacity="0.3">
|
||||
<animate attributeName="y" values="0;400;0" dur="4s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
BIN
src/frontend/public/og-image.png
Normal file
BIN
src/frontend/public/og-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
94
src/frontend/public/og-image.svg
Normal file
94
src/frontend/public/og-image.svg
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" width="1200" height="630">
|
||||
<defs>
|
||||
<linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0a0a0a"/>
|
||||
<stop offset="50%" style="stop-color:#0f0f0f"/>
|
||||
<stop offset="100%" style="stop-color:#0a0a0a"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="trinity-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#ff0000"/>
|
||||
<stop offset="50%" style="stop-color:#0066ff"/>
|
||||
<stop offset="100%" style="stop-color:#ffa500"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="foundation" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#ff0000"/>
|
||||
<stop offset="100%" style="stop-color:#cc0000"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="corporation" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#0066ff"/>
|
||||
<stop offset="100%" style="stop-color:#0044cc"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="labs" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#ffa500"/>
|
||||
<stop offset="100%" style="stop-color:#cc8400"/>
|
||||
</linearGradient>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1200" height="630" fill="url(#bg-grad)"/>
|
||||
|
||||
<!-- Grid pattern background -->
|
||||
<g opacity="0.03">
|
||||
<pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse">
|
||||
<path d="M 60 0 L 0 0 0 60" fill="none" stroke="white" stroke-width="1"/>
|
||||
</pattern>
|
||||
<rect width="1200" height="630" fill="url(#grid)"/>
|
||||
</g>
|
||||
|
||||
<!-- Decorative circles -->
|
||||
<circle cx="100" cy="100" r="200" fill="url(#foundation)" opacity="0.05"/>
|
||||
<circle cx="1100" cy="530" r="250" fill="url(#corporation)" opacity="0.05"/>
|
||||
<circle cx="600" cy="315" r="150" fill="url(#labs)" opacity="0.03"/>
|
||||
|
||||
<!-- Trinity Diamond Logo -->
|
||||
<g transform="translate(150, 200)" filter="url(#glow)">
|
||||
<path d="M100 0 L200 100 L100 200 L0 100 Z" fill="none" stroke="url(#trinity-grad)" stroke-width="4"/>
|
||||
<path d="M100 30 L170 100 L100 170 L30 100 Z" fill="url(#trinity-grad)" opacity="0.2"/>
|
||||
<circle cx="100" cy="100" r="15" fill="url(#trinity-grad)"/>
|
||||
</g>
|
||||
|
||||
<!-- Main Text -->
|
||||
<text x="420" y="260" font-family="system-ui, -apple-system, sans-serif" font-size="72" font-weight="700" fill="white">
|
||||
AeThex Connect
|
||||
</text>
|
||||
|
||||
<!-- Tagline -->
|
||||
<text x="420" y="330" font-family="system-ui, -apple-system, sans-serif" font-size="28" fill="#888888">
|
||||
Secure, Open-Source Communication
|
||||
</text>
|
||||
|
||||
<!-- Trinity Pills -->
|
||||
<g transform="translate(420, 370)">
|
||||
<rect x="0" y="0" width="120" height="36" rx="18" fill="url(#foundation)" opacity="0.8"/>
|
||||
<text x="60" y="24" font-family="system-ui, sans-serif" font-size="14" font-weight="600" fill="white" text-anchor="middle">Foundation</text>
|
||||
|
||||
<rect x="140" y="0" width="130" height="36" rx="18" fill="url(#corporation)" opacity="0.8"/>
|
||||
<text x="205" y="24" font-family="system-ui, sans-serif" font-size="14" font-weight="600" fill="white" text-anchor="middle">Corporation</text>
|
||||
|
||||
<rect x="290" y="0" width="80" height="36" rx="18" fill="url(#labs)" opacity="0.8"/>
|
||||
<text x="330" y="24" font-family="system-ui, sans-serif" font-size="14" font-weight="600" fill="white" text-anchor="middle">Labs</text>
|
||||
</g>
|
||||
|
||||
<!-- Features -->
|
||||
<g transform="translate(420, 450)" font-family="system-ui, sans-serif" font-size="18" fill="#666666">
|
||||
<text x="0" y="0">🔐 End-to-End Encrypted</text>
|
||||
<text x="280" y="0">📞 Voice & Video</text>
|
||||
<text x="480" y="0">🌐 Cross-Platform</text>
|
||||
</g>
|
||||
|
||||
<!-- URL -->
|
||||
<text x="420" y="530" font-family="system-ui, sans-serif" font-size="24" fill="url(#trinity-grad)">
|
||||
aethex.online
|
||||
</text>
|
||||
|
||||
<!-- Border accent -->
|
||||
<rect x="0" y="0" width="1200" height="4" fill="url(#trinity-grad)"/>
|
||||
<rect x="0" y="626" width="1200" height="4" fill="url(#trinity-grad)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
23
src/frontend/public/robots.txt
Normal file
23
src/frontend/public/robots.txt
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
# AeThex Connect - robots.txt
|
||||
# https://aethex.online
|
||||
|
||||
User-agent: *
|
||||
Allow: /
|
||||
Disallow: /api/
|
||||
Disallow: /app/
|
||||
|
||||
# Sitemaps
|
||||
Sitemap: https://aethex.online/sitemap.xml
|
||||
|
||||
# Crawl-delay for politeness
|
||||
Crawl-delay: 1
|
||||
|
||||
# Block specific bots if needed
|
||||
User-agent: GPTBot
|
||||
Disallow: /
|
||||
|
||||
User-agent: ChatGPT-User
|
||||
Disallow: /
|
||||
|
||||
User-agent: CCBot
|
||||
Disallow: /
|
||||
66
src/frontend/public/site.webmanifest
Normal file
66
src/frontend/public/site.webmanifest
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
{
|
||||
"name": "AeThex Connect",
|
||||
"short_name": "AeThex",
|
||||
"description": "Privacy-first communication platform with end-to-end encryption",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#0a0a0a",
|
||||
"theme_color": "#0a0a0a",
|
||||
"orientation": "portrait-primary",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/favicon.svg",
|
||||
"sizes": "any",
|
||||
"type": "image/svg+xml",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "/favicon-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/favicon-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"categories": ["communication", "social", "utilities"],
|
||||
"screenshots": [
|
||||
{
|
||||
"src": "/screenshots/desktop.png",
|
||||
"sizes": "1920x1080",
|
||||
"type": "image/png",
|
||||
"form_factor": "wide"
|
||||
},
|
||||
{
|
||||
"src": "/screenshots/mobile.png",
|
||||
"sizes": "750x1334",
|
||||
"type": "image/png",
|
||||
"form_factor": "narrow"
|
||||
}
|
||||
],
|
||||
"related_applications": [
|
||||
{
|
||||
"platform": "play",
|
||||
"url": "https://play.google.com/store/apps/details?id=online.aethex.connect"
|
||||
},
|
||||
{
|
||||
"platform": "itunes",
|
||||
"url": "https://apps.apple.com/app/aethex-connect/id123456789"
|
||||
}
|
||||
],
|
||||
"prefer_related_applications": false,
|
||||
"shortcuts": [
|
||||
{
|
||||
"name": "New Message",
|
||||
"url": "/app?action=new-message",
|
||||
"icons": [{ "src": "/icons/message.png", "sizes": "96x96" }]
|
||||
},
|
||||
{
|
||||
"name": "Join Call",
|
||||
"url": "/app?action=join-call",
|
||||
"icons": [{ "src": "/icons/call.png", "sizes": "96x96" }]
|
||||
}
|
||||
]
|
||||
}
|
||||
47
src/frontend/public/sitemap.xml
Normal file
47
src/frontend/public/sitemap.xml
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
|
||||
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
|
||||
|
||||
<!-- Homepage -->
|
||||
<url>
|
||||
<loc>https://aethex.online/</loc>
|
||||
<lastmod>2026-02-05</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
|
||||
<!-- Features Page -->
|
||||
<url>
|
||||
<loc>https://aethex.online/features</loc>
|
||||
<lastmod>2026-02-05</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
</url>
|
||||
|
||||
<!-- About Page -->
|
||||
<url>
|
||||
<loc>https://aethex.online/about</loc>
|
||||
<lastmod>2026-02-05</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
|
||||
<!-- Login Page -->
|
||||
<url>
|
||||
<loc>https://aethex.online/login</loc>
|
||||
<lastmod>2026-02-05</lastmod>
|
||||
<changefreq>yearly</changefreq>
|
||||
<priority>0.6</priority>
|
||||
</url>
|
||||
|
||||
<!-- Register Page -->
|
||||
<url>
|
||||
<loc>https://aethex.online/register</loc>
|
||||
<lastmod>2026-02-05</lastmod>
|
||||
<changefreq>yearly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
|
||||
</urlset>
|
||||
BIN
src/frontend/public/twitter-banner.png
Normal file
BIN
src/frontend/public/twitter-banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
68
src/frontend/public/twitter-banner.svg
Normal file
68
src/frontend/public/twitter-banner.svg
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 500" width="1500" height="500">
|
||||
<defs>
|
||||
<linearGradient id="trinity" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#ff0000"/>
|
||||
<stop offset="50%" style="stop-color:#0066ff"/>
|
||||
<stop offset="100%" style="stop-color:#ffa500"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0a0a0a"/>
|
||||
<stop offset="100%" style="stop-color:#0f0f0f"/>
|
||||
</linearGradient>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="8" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse">
|
||||
<path d="M 50 0 L 0 0 0 50" fill="none" stroke="white" stroke-width="0.5" opacity="0.03"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1500" height="500" fill="url(#bg-grad)"/>
|
||||
<rect width="1500" height="500" fill="url(#grid)"/>
|
||||
|
||||
<!-- Decorative elements -->
|
||||
<circle cx="100" cy="100" r="200" fill="#ff0000" opacity="0.03"/>
|
||||
<circle cx="1400" cy="400" r="250" fill="#0066ff" opacity="0.03"/>
|
||||
<circle cx="750" cy="250" r="150" fill="#ffa500" opacity="0.02"/>
|
||||
|
||||
<!-- Logo -->
|
||||
<g transform="translate(250, 250)" filter="url(#glow)">
|
||||
<path d="M0 -80 L80 0 L0 80 L-80 0 Z" fill="none" stroke="url(#trinity)" stroke-width="4"/>
|
||||
<path d="M0 -50 L50 0 L0 50 L-50 0 Z" fill="url(#trinity)" opacity="0.2"/>
|
||||
<circle cx="0" cy="0" r="15" fill="url(#trinity)"/>
|
||||
</g>
|
||||
|
||||
<!-- Text -->
|
||||
<text x="420" y="230" font-family="system-ui, -apple-system, sans-serif" font-size="72" font-weight="700" fill="white">
|
||||
AeThex Connect
|
||||
</text>
|
||||
<text x="420" y="290" font-family="system-ui, sans-serif" font-size="24" fill="#666">
|
||||
Secure, Open-Source Communication Platform
|
||||
</text>
|
||||
|
||||
<!-- Trinity pills -->
|
||||
<g transform="translate(420, 330)">
|
||||
<rect width="100" height="32" rx="16" fill="#ff0000" opacity="0.8"/>
|
||||
<text x="50" y="21" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="white" text-anchor="middle">Foundation</text>
|
||||
|
||||
<rect x="120" width="110" height="32" rx="16" fill="#0066ff" opacity="0.8"/>
|
||||
<text x="175" y="21" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="white" text-anchor="middle">Corporation</text>
|
||||
|
||||
<rect x="250" width="70" height="32" rx="16" fill="#ffa500" opacity="0.8"/>
|
||||
<text x="285" y="21" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="white" text-anchor="middle">Labs</text>
|
||||
</g>
|
||||
|
||||
<!-- URL -->
|
||||
<text x="420" y="430" font-family="system-ui, sans-serif" font-size="20" fill="url(#trinity)">
|
||||
aethex.online
|
||||
</text>
|
||||
|
||||
<!-- Border accents -->
|
||||
<rect x="0" y="0" width="1500" height="3" fill="url(#trinity)"/>
|
||||
<rect x="0" y="497" width="1500" height="3" fill="url(#trinity)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3 KiB |
BIN
src/frontend/public/youtube-banner.png
Normal file
BIN
src/frontend/public/youtube-banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 368 KiB |
89
src/frontend/public/youtube-banner.svg
Normal file
89
src/frontend/public/youtube-banner.svg
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 1440" width="2560" height="1440">
|
||||
<defs>
|
||||
<linearGradient id="trinity" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#ff0000"/>
|
||||
<stop offset="50%" style="stop-color:#0066ff"/>
|
||||
<stop offset="100%" style="stop-color:#ffa500"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#050505"/>
|
||||
<stop offset="50%" style="stop-color:#0a0a0a"/>
|
||||
<stop offset="100%" style="stop-color:#050505"/>
|
||||
</linearGradient>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="15" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
|
||||
<path d="M 80 0 L 0 0 0 80" fill="none" stroke="white" stroke-width="0.5" opacity="0.02"/>
|
||||
</pattern>
|
||||
<pattern id="hex" width="60" height="52" patternUnits="userSpaceOnUse">
|
||||
<polygon points="30,0 60,15 60,37 30,52 0,37 0,15" fill="none" stroke="white" stroke-width="0.3" opacity="0.02"/>
|
||||
</pattern>
|
||||
<radialGradient id="vignette" cx="50%" cy="50%" r="70%">
|
||||
<stop offset="0%" style="stop-color:#0a0a0a;stop-opacity:0"/>
|
||||
<stop offset="100%" style="stop-color:#000000;stop-opacity:0.7"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="2560" height="1440" fill="url(#bg-grad)"/>
|
||||
<rect width="2560" height="1440" fill="url(#grid)"/>
|
||||
<rect width="2560" height="1440" fill="url(#hex)"/>
|
||||
|
||||
<!-- Nebula blobs -->
|
||||
<ellipse cx="400" cy="400" rx="600" ry="450" fill="#ff0000" opacity="0.04" filter="url(#glow)"/>
|
||||
<ellipse cx="2200" cy="1000" rx="700" ry="500" fill="#0066ff" opacity="0.04" filter="url(#glow)"/>
|
||||
<ellipse cx="1280" cy="720" rx="400" ry="350" fill="#ffa500" opacity="0.03" filter="url(#glow)"/>
|
||||
|
||||
<!-- Center content - safe zone 1546x423 centered -->
|
||||
<g transform="translate(1280, 720)">
|
||||
<!-- Main Diamond Logo -->
|
||||
<g filter="url(#glow)">
|
||||
<path d="M0 -150 L150 0 L0 150 L-150 0 Z" fill="none" stroke="url(#trinity)" stroke-width="5"/>
|
||||
<path d="M0 -90 L90 0 L0 90 L-90 0 Z" fill="url(#trinity)" opacity="0.15"/>
|
||||
<circle cx="0" cy="0" r="25" fill="url(#trinity)"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Text in safe zone -->
|
||||
<text x="1280" y="550" font-family="system-ui, -apple-system, sans-serif" font-size="42" font-weight="600" fill="#666" text-anchor="middle" letter-spacing="0.2em">
|
||||
WELCOME TO
|
||||
</text>
|
||||
<text x="1280" y="920" font-family="system-ui, -apple-system, sans-serif" font-size="96" font-weight="700" fill="white" text-anchor="middle">
|
||||
AeThex Connect
|
||||
</text>
|
||||
<text x="1280" y="1000" font-family="system-ui, sans-serif" font-size="32" fill="#888" text-anchor="middle">
|
||||
Secure, Open-Source Communication
|
||||
</text>
|
||||
|
||||
<!-- Trinity badges -->
|
||||
<g transform="translate(1280, 1080)">
|
||||
<rect x="-250" width="140" height="40" rx="20" fill="#ff0000" opacity="0.8"/>
|
||||
<text x="-180" y="27" font-family="system-ui, sans-serif" font-size="16" font-weight="600" fill="white" text-anchor="middle">Foundation</text>
|
||||
|
||||
<rect x="-70" width="140" height="40" rx="20" fill="#0066ff" opacity="0.8"/>
|
||||
<text x="0" y="27" font-family="system-ui, sans-serif" font-size="16" font-weight="600" fill="white" text-anchor="middle">Corporation</text>
|
||||
|
||||
<rect x="110" width="140" height="40" rx="20" fill="#ffa500" opacity="0.8"/>
|
||||
<text x="180" y="27" font-family="system-ui, sans-serif" font-size="16" font-weight="600" fill="white" text-anchor="middle">Labs</text>
|
||||
</g>
|
||||
|
||||
<!-- Corner accents -->
|
||||
<g opacity="0.3">
|
||||
<path d="M0 100 L0 0 L100 0" fill="none" stroke="#ff0000" stroke-width="3"/>
|
||||
<path d="M2460 0 L2560 0 L2560 100" fill="none" stroke="#0066ff" stroke-width="3"/>
|
||||
<path d="M0 1340 L0 1440 L100 1440" fill="none" stroke="#ffa500" stroke-width="3"/>
|
||||
<path d="M2460 1440 L2560 1440 L2560 1340" fill="none" stroke="white" stroke-width="3"/>
|
||||
</g>
|
||||
|
||||
<!-- Top and bottom gradient bars -->
|
||||
<rect x="0" y="0" width="2560" height="4" fill="url(#trinity)"/>
|
||||
<rect x="0" y="1436" width="2560" height="4" fill="url(#trinity)"/>
|
||||
|
||||
<!-- Vignette -->
|
||||
<rect width="2560" height="1440" fill="url(#vignette)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
Loading…
Reference in a new issue