+
+ {/* Main footer content */}
+
+ {/* Left section - Brand */}
+
+
+
+
+ Next generation documentation for ResilientDB ecosystem.
+ Your gateway to high-performance blockchain infrastructure.
+
+
+
-
- {
- e.currentTarget.style.transform = "translateY(-2px)"
- e.currentTarget.style.color = "#40c057"
- e.currentTarget.style.textShadow = "0 2px 4px rgba(81, 207, 102, 0.5)"
- }}
- onMouseLeave={(e) => {
- e.currentTarget.style.transform = "translateY(0)"
- e.currentTarget.style.color = "#51cf66"
- e.currentTarget.style.textShadow = "0 1px 2px rgba(81, 207, 102, 0.3)"
- }}
- >
- Ecosystem
-
- {
- e.currentTarget.style.color = "#51cf66"
- e.currentTarget.style.backgroundColor = "rgba(81, 207, 102, 0.15)"
- e.currentTarget.style.transform = "translateX(6px) translateY(-1px)"
- e.currentTarget.style.borderColor = "rgba(81, 207, 102, 0.3)"
- e.currentTarget.style.boxShadow = "0 4px 12px rgba(81, 207, 102, 0.2)"
- }}
- onMouseLeave={(e) => {
- e.currentTarget.style.color = "rgba(255, 255, 255, 0.8)"
- e.currentTarget.style.backgroundColor = "transparent"
- e.currentTarget.style.transform = "translateX(0) translateY(0)"
- e.currentTarget.style.borderColor = "transparent"
- e.currentTarget.style.boxShadow = "none"
- }}
- >
- ResilientDB GraphQL
-
- {
- e.currentTarget.style.color = "#51cf66"
- e.currentTarget.style.backgroundColor = "rgba(81, 207, 102, 0.15)"
- e.currentTarget.style.transform = "translateX(6px) translateY(-1px)"
- e.currentTarget.style.borderColor = "rgba(81, 207, 102, 0.3)"
- e.currentTarget.style.boxShadow = "0 4px 12px rgba(81, 207, 102, 0.2)"
- }}
- onMouseLeave={(e) => {
- e.currentTarget.style.color = "rgba(255, 255, 255, 0.8)"
- e.currentTarget.style.backgroundColor = "transparent"
- e.currentTarget.style.transform = "translateX(0) translateY(0)"
- e.currentTarget.style.borderColor = "transparent"
- e.currentTarget.style.boxShadow = "none"
- }}
- >
- ResLens β Monitoring
-
- {
- e.currentTarget.style.color = "#51cf66"
- e.currentTarget.style.backgroundColor = "rgba(81, 207, 102, 0.15)"
- e.currentTarget.style.transform = "translateX(6px) translateY(-1px)"
- e.currentTarget.style.borderColor = "rgba(81, 207, 102, 0.3)"
- e.currentTarget.style.boxShadow = "0 4px 12px rgba(81, 207, 102, 0.2)"
- }}
- onMouseLeave={(e) => {
- e.currentTarget.style.color = "rgba(255, 255, 255, 0.8)"
- e.currentTarget.style.backgroundColor = "transparent"
- e.currentTarget.style.transform = "translateX(0) translateY(0)"
- e.currentTarget.style.borderColor = "transparent"
- e.currentTarget.style.boxShadow = "none"
- }}
- >
- ResVault
-
-
+ {/* Center section - Links */}
+
+
+
+ Documentation
+
+
+
{
+ e.currentTarget.style.color = 'rgba(255,255,255,0.9)';
+ e.currentTarget.style.transform = 'translateX(4px)';
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.color = 'rgba(255,255,255,0.6)';
+ e.currentTarget.style.transform = 'translateX(0)';
+ }}
+ >
+ Getting Started
+
+
{
+ e.currentTarget.style.color = 'rgba(255,255,255,0.9)';
+ e.currentTarget.style.transform = 'translateX(4px)';
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.color = 'rgba(255,255,255,0.6)';
+ e.currentTarget.style.transform = 'translateX(0)';
+ }}
+ >
+ Installation
+
+
{
+ e.currentTarget.style.color = 'rgba(255,255,255,0.9)';
+ e.currentTarget.style.transform = 'translateX(4px)';
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.color = 'rgba(255,255,255,0.6)';
+ e.currentTarget.style.transform = 'translateX(0)';
+ }}
+ >
+ ResilientDB
+
+
+
-
- {
- e.currentTarget.style.transform = "translateY(-2px)"
- e.currentTarget.style.color = "#40c057"
- e.currentTarget.style.textShadow = "0 2px 4px rgba(81, 207, 102, 0.5)"
- }}
- onMouseLeave={(e) => {
- e.currentTarget.style.transform = "translateY(0)"
- e.currentTarget.style.color = "#51cf66"
- e.currentTarget.style.textShadow = "0 1px 2px rgba(81, 207, 102, 0.3)"
- }}
- >
- Community
-
-
-
+
+ Community
+
+
+
{
+ e.currentTarget.style.color = 'rgba(255,255,255,0.9)';
+ e.currentTarget.style.transform = 'translateX(4px)';
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.color = 'rgba(255,255,255,0.6)';
+ e.currentTarget.style.transform = 'translateX(0)';
+ }}
+ >
+ Official Site
+
+
{
+ e.currentTarget.style.color = 'rgba(255,255,255,0.9)';
+ e.currentTarget.style.transform = 'translateX(4px)';
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.color = 'rgba(255,255,255,0.6)';
+ e.currentTarget.style.transform = 'translateX(0)';
+ }}
+ >
+ Blog
+
+
{
+ e.currentTarget.style.color = 'rgba(255,255,255,0.9)';
+ e.currentTarget.style.transform = 'translateX(4px)';
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.color = 'rgba(255,255,255,0.6)';
+ e.currentTarget.style.transform = 'translateX(0)';
+ }}
+ >
+ About
+
+
+
+
+ {/* Right section - Tech stack */}
+
+
+ Built with
+
+
+
{
- e.currentTarget.style.backgroundColor = "rgba(81, 207, 102, 0.2)"
- e.currentTarget.style.color = "#51cf66"
- e.currentTarget.style.transform = "translateY(-3px) scale(1.1)"
- e.currentTarget.style.boxShadow = "0 8px 20px rgba(81, 207, 102, 0.3)"
- e.currentTarget.style.borderColor = "rgba(81, 207, 102, 0.5)"
+ e.currentTarget.style.background = 'rgba(255,255,255,0.1)';
+ e.currentTarget.style.borderColor = 'rgba(255,255,255,0.2)';
}}
onMouseLeave={(e) => {
- e.currentTarget.style.backgroundColor = "rgba(81, 207, 102, 0.05)"
- e.currentTarget.style.color = "rgba(255, 255, 255, 0.8)"
- e.currentTarget.style.transform = "translateY(0) scale(1)"
- e.currentTarget.style.boxShadow = "none"
- e.currentTarget.style.borderColor = "rgba(81, 207, 102, 0.2)"
+ e.currentTarget.style.background = 'rgba(255,255,255,0.05)';
+ e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)';
}}
>
-
-
-
+ {
- e.currentTarget.style.backgroundColor = "rgba(81, 207, 102, 0.2)"
- e.currentTarget.style.color = "#51cf66"
- e.currentTarget.style.transform = "translateY(-3px) scale(1.1)"
- e.currentTarget.style.boxShadow = "0 8px 20px rgba(81, 207, 102, 0.3)"
- e.currentTarget.style.borderColor = "rgba(81, 207, 102, 0.5)"
+ e.currentTarget.style.background = 'rgba(255,255,255,0.1)';
+ e.currentTarget.style.borderColor = 'rgba(255,255,255,0.2)';
}}
onMouseLeave={(e) => {
- e.currentTarget.style.backgroundColor = "rgba(81, 207, 102, 0.05)"
- e.currentTarget.style.color = "rgba(255, 255, 255, 0.8)"
- e.currentTarget.style.transform = "translateY(0) scale(1)"
- e.currentTarget.style.boxShadow = "none"
- e.currentTarget.style.borderColor = "rgba(81, 207, 102, 0.2)"
+ e.currentTarget.style.background = 'rgba(255,255,255,0.05)';
+ e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)';
}}
>
-
-
-
+ {
- e.currentTarget.style.backgroundColor = "rgba(81, 207, 102, 0.2)"
- e.currentTarget.style.color = "#51cf66"
- e.currentTarget.style.transform = "translateY(-3px) scale(1.1)"
- e.currentTarget.style.boxShadow = "0 8px 20px rgba(81, 207, 102, 0.3)"
- e.currentTarget.style.borderColor = "rgba(81, 207, 102, 0.5)"
+ e.currentTarget.style.background = 'rgba(255,255,255,0.1)';
+ e.currentTarget.style.borderColor = 'rgba(255,255,255,0.2)';
}}
onMouseLeave={(e) => {
- e.currentTarget.style.backgroundColor = "rgba(81, 207, 102, 0.05)"
- e.currentTarget.style.color = "rgba(255, 255, 255, 0.8)"
- e.currentTarget.style.transform = "translateY(0) scale(1)"
- e.currentTarget.style.boxShadow = "none"
- e.currentTarget.style.borderColor = "rgba(81, 207, 102, 0.2)"
+ e.currentTarget.style.background = 'rgba(255,255,255,0.05)';
+ e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)';
}}
>
-
-
-
-
- Docs and tools to help you build with ResilientDB.
-
-
-
-
- {/* Integrated copyright section */}
-
-
- Β© {new Date().getFullYear()} ResilientDB. Part of the
-
+
+
+ {/* Divider */}
+
+
+ {/* Bottom section - Copyright */}
+
+
+
+
+);
diff --git a/components/MantineNavBar/MantineNavBar.tsx b/components/MantineNavBar/MantineNavBar.tsx
index f842b81..09bc07b 100644
--- a/components/MantineNavBar/MantineNavBar.tsx
+++ b/components/MantineNavBar/MantineNavBar.tsx
@@ -1,34 +1,11 @@
-/*
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements. See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership. The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License. You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing,
-* software distributed under the License is distributed on an
-* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-* KIND, either express or implied. See the License for the
-* specific language governing permissions and limitations
-* under the License.
-*/
-
'use client';
-import { Group, Text } from '@mantine/core';
+import { Box } from '@mantine/core';
+import { usePathname } from 'next/navigation';
import '@mantine/core/styles.css';
-
-import { Navbar } from 'nextra-theme-docs';
-import { ColorSchemeControl } from '../ColorSchemeControl/ColorSchemeControl';
-import { Logo } from '../Logo/Logo';
import { MantineNextraThemeObserver } from '../MantineNextraThemeObserver/MantineNextraThemeObserver';
-import { AskAIModal } from '../AskAIModal';
-import { SearchBar } from '../SearchBar/SearchBar';
+import Header from '@/components/landing/Header';
/**
* You can customize the Nextra NavBar component.
@@ -38,26 +15,14 @@ import { SearchBar } from '../SearchBar/SearchBar';
*
*/
export const MantineNavBar = () => {
+ const pathname = usePathname();
+ if (pathname === '/') return null;
return (
<>
-
-
- ResilientDB
-
-
- }
- >
- <>
-
- {/*
-
-
+
+
+
);
-};
\ No newline at end of file
+};
diff --git a/components/PocketFlowChatbot.tsx b/components/PocketFlowChatbot.tsx
new file mode 100644
index 0000000..5e8944f
--- /dev/null
+++ b/components/PocketFlowChatbot.tsx
@@ -0,0 +1,130 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+declare global {
+ interface Window {
+ initializeChatbot: (config: any) => void;
+ }
+}
+
+interface PocketFlowChatbotProps {
+ extraUrls?: string[];
+ prefixes?: string[];
+ chatbotName?: string;
+ wsUrl?: string;
+ instruction?: string;
+ isOpen?: boolean;
+}
+
+export function PocketFlowChatbot({
+ extraUrls = ["https://beacon.resilientdb.com/docs"],
+ prefixes = [],
+ chatbotName = 'Beacon',
+ wsUrl = 'wss://askthispage.com/api/ws/chat',
+ instruction = '',
+ isOpen = false
+}: PocketFlowChatbotProps) {
+ const containerRef = useRef
(null);
+
+ useEffect(() => {
+ // Check if the script is already loaded
+ if (document.querySelector('script[src="https://askthispage.com/embed/chatbot.js"]')) {
+ return;
+ }
+
+ const script = document.createElement("script");
+ script.src = "https://askthispage.com/embed/chatbot.js";
+ script.onload = function() {
+ if (window.initializeChatbot) {
+ window.initializeChatbot({
+ extra_urls: extraUrls,
+ prefixes: prefixes,
+ chatbotName: chatbotName,
+ wsUrl: wsUrl,
+ instruction: instruction,
+ isOpen: isOpen
+ });
+ }
+ };
+ document.head.appendChild(script);
+
+ // Cleanup function
+ return () => {
+ const existingScript = document.querySelector('script[src="https://askthispage.com/embed/chatbot.js"]');
+ if (existingScript) {
+ existingScript.remove();
+ }
+ };
+ }, [extraUrls, prefixes, chatbotName, wsUrl, instruction, isOpen]);
+
+ // Add custom styles after the chatbot loads
+ useEffect(() => {
+ const checkAndStyle = () => {
+ const chatbot = document.querySelector('.askthispage-chatbot') as HTMLElement;
+ if (chatbot) {
+ // Move to left corner
+ chatbot.style.position = 'fixed';
+ chatbot.style.left = '20px';
+ chatbot.style.right = 'auto';
+ chatbot.style.bottom = '20px';
+ chatbot.style.zIndex = '1000';
+
+ // Add experimental badge
+ const badge = document.createElement('div');
+ badge.innerHTML = 'π§ͺ Experimental';
+ badge.style.cssText = `
+ position: absolute;
+ top: -30px;
+ left: 0;
+ background: linear-gradient(45deg, #ff6b6b, #ffa500);
+ color: white;
+ padding: 4px 8px;
+ border-radius: 12px;
+ font-size: 10px;
+ font-weight: bold;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+ z-index: 1001;
+ animation: pulse 2s infinite;
+ white-space: nowrap;
+ `;
+
+ // Add pulse animation
+ const style = document.createElement('style');
+ style.textContent = `
+ @keyframes pulse {
+ 0% { opacity: 1; }
+ 50% { opacity: 0.7; }
+ 100% { opacity: 1; }
+ }
+ `;
+ document.head.appendChild(style);
+
+ chatbot.appendChild(badge);
+ }
+ };
+
+ // Check immediately and then periodically
+ checkAndStyle();
+ const interval = setInterval(checkAndStyle, 1000);
+
+ return () => {
+ clearInterval(interval);
+ };
+ }, []);
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/components/PythonPlayground.tsx b/components/PythonPlayground.tsx
index 4e98551..7539df1 100644
--- a/components/PythonPlayground.tsx
+++ b/components/PythonPlayground.tsx
@@ -268,10 +268,48 @@ loop.run_until_complete(__run())
};
return (
-
-
+
+ {/* Glass effect overlay */}
+
+
+
-
+
+
+ π Python Playground
+
+
+
+
t.value === value)?.code || '')
}
leftSection={
@@ -288,6 +336,11 @@ loop.run_until_complete(__run())
variant="light"
onClick={() => setShowChat(!showChat)}
color={showChat ? "blue" : "gray"}
+ style={{
+ background: showChat ? 'rgba(0, 191, 255, 0.1)' : 'rgba(255,255,255,0.05)',
+ border: '1px solid rgba(255,255,255,0.1)',
+ color: showChat ? '#00bfff' : 'rgba(255,255,255,0.7)',
+ }}
>
-
+
{showChat && (
<>
-
-
+
+
- AI Assistant
-
+
+ AI Assistant
+
+
setIsExpanded(true)}
disabled={isExpanded}
+ style={{
+ background: 'rgba(255,255,255,0.05)',
+ border: '1px solid rgba(255,255,255,0.1)',
+ color: 'rgba(255,255,255,0.7)',
+ }}
>
@@ -354,16 +441,37 @@ loop.run_until_complete(__run())
color="red"
onClick={clearConversation}
disabled={messages.length === 0}
+ style={{
+ background: 'rgba(255,255,255,0.05)',
+ border: '1px solid rgba(255,255,255,0.1)',
+ color: 'rgba(255,255,255,0.7)',
+ }}
>
-
+
{[...messages].reverse().map((message, i) => (
-
-
+
+
{message.role === 'user' ? (
message.content
) : (
@@ -392,11 +500,11 @@ loop.run_until_complete(__run())
)}
-
+
))}
-
+
-
+
-
{output.map((line, i) => (
-
+
{line}
))}
-
+
-
+
);
}
diff --git a/components/SearchBar/SearchBar.tsx b/components/SearchBar/SearchBar.tsx
index 351195d..7195ec2 100644
--- a/components/SearchBar/SearchBar.tsx
+++ b/components/SearchBar/SearchBar.tsx
@@ -19,7 +19,7 @@
'use client'
-import { Button } from '@mantine/core';
+import { Button, Group, Kbd, Text } from '@mantine/core';
import { IconSearch } from '@tabler/icons-react';
export function SearchBar() {
@@ -34,12 +34,14 @@ export function SearchBar() {
};
return (
-
}
- variant="subtle"
- >
- Search
+
+
+ Search
+ Ctrl
+ +
+ K
+
);
}
\ No newline at end of file
diff --git a/components/Welcome/Welcome.module.css b/components/Welcome/Welcome.module.css
index 9bd7e46..e35538c 100644
--- a/components/Welcome/Welcome.module.css
+++ b/components/Welcome/Welcome.module.css
@@ -1,30 +1,32 @@
-/*
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements. See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership. The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License. You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing,
-* software distributed under the License is distributed on an
-* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-* KIND, either express or implied. See the License for the
-* specific language governing permissions and limitations
-* under the License.
-*/
-
.title {
color: white;
- font-size: 80px;
+ font-size: 72px;
+ line-height: 1.05;
+ letter-spacing: -0.02em;
@media (max-width: 768px) {
- font-size: 60px;
+ font-size: 44px;
}
}
+
.subtitle {
font-size: 80px;
+ line-height: 1.05;
+ letter-spacing: -0.03em;
+}
+
+.hero {
+ position: relative;
+ padding-top: 96px;
+}
+
+.halo {
+ position: absolute;
+ inset: 0;
+ background:
+ radial-gradient(600px 200px at 50% 0%, rgba(0, 102, 255, 0.15), transparent 70%),
+ radial-gradient(300px 150px at 10% 30%, rgba(255, 0, 128, 0.12), transparent 70%),
+ radial-gradient(300px 150px at 90% 30%, rgba(255, 196, 0, 0.12), transparent 70%);
+ pointer-events: none;
+ mask-image: radial-gradient(closest-side, rgba(0,0,0,0.6), transparent 70%);
}
diff --git a/components/Welcome/Welcome.tsx b/components/Welcome/Welcome.tsx
index 6b58799..79c6344 100644
--- a/components/Welcome/Welcome.tsx
+++ b/components/Welcome/Welcome.tsx
@@ -21,59 +21,51 @@
import { TextAnimate } from '@gfazioli/mantine-text-animate';
import { IconBrandGithub, IconExternalLink } from '@tabler/icons-react';
-import { Anchor, Button, Center, Paper, Text, Title } from '@mantine/core';
+import { Anchor, Button, Center, Paper, Text, Title, Stack } from '@mantine/core';
import pack from '../../package.json';
import classes from './Welcome.module.css';
export function Welcome() {
return (
<>
-
- <span className={classes.title}>Next Gen Docs for</span>
- <TextAnimate
- animate="in"
- by="character"
- inherit
- variant="gradient"
- component="span"
- segmentDelay={0.2}
- className={classes.subtitle}
- duration={2}
- animation="scale"
- animateProps={{
- scaleAmount: 3,
- }}
- gradient={{ from: 'pink', to: 'yellow' }}
- >
- NexRes
- </TextAnimate>
-
+
+
+
+
+ <span className={classes.title}>Nextβgen docs for </span>
+ <Text component="span" variant="gradient" gradient={{ from: 'pink', to: 'yellow' }} className={classes.subtitle}>
+ NexRes
+ </Text>
+
-
- Find all documentation related to ResilientDB, its applications, and ecosystem tools
- supported by the ResilientDB team. This site is your gateway to high-performance blockchain
- infrastructure, developer guides, and integration resources. To learn more about
- ResilientDB, visit the official website .
-
+
+ Find all documentation related to ResilientDB, its applications, and ecosystem tools
+ supported by the ResilientDB team. This site is your gateway to high-performance
+ blockchain infrastructure, developer guides, and integration resources. To learn more
+ about ResilientDB, visit the official website .
+
-
-
+
+
+
+
-
+
`β’ ${key} : ${pack.dependencies[key as keyof typeof pack.dependencies].toString()}`
diff --git a/components/index.ts b/components/index.ts
index 9f70a84..ea1574e 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -27,3 +27,4 @@ export { NodeConfigGenerator } from './cache/NodeConfigGenerator';
export { PythonConfigGenerator } from './cache/PythonConfigGenerator';
export { NodeQueryBuilder } from './cache/NodeQueryBuilder';
export { PythonQueryBuilder } from './cache/PythonQueryBuilder';
+export { PocketFlowChatbot } from './PocketFlowChatbot';
diff --git a/components/landing/Header.tsx b/components/landing/Header.tsx
new file mode 100644
index 0000000..c85ff7f
--- /dev/null
+++ b/components/landing/Header.tsx
@@ -0,0 +1,164 @@
+'use client';
+
+import { SearchBar } from '../SearchBar/SearchBar';
+
+export default function Header() {
+ return (
+
+ );
+}
+
+
diff --git a/components/landing/HeroContent.tsx b/components/landing/HeroContent.tsx
new file mode 100644
index 0000000..c064f9c
--- /dev/null
+++ b/components/landing/HeroContent.tsx
@@ -0,0 +1,130 @@
+'use client';
+
+export default function HeroContent() {
+ return (
+
+
+
+
+
+ β¨ New Beacon Experience
+
+
+
+
+ Next Gen Docs for
+ ResilientDB
+
+
+
+ Find all documentation related to ResilientDB, its applications, and ecosystem tools supported by the ResilientDB team. This site is your gateway to high-performance blockchain infrastructure, developer guides, and integration resources. To learn more about ResilientDB, visit the
+ {
+ e.currentTarget.style.color = '#ffffff';
+ e.currentTarget.style.textDecorationColor = 'rgba(255, 255, 255, 0.8)';
+ e.currentTarget.style.textShadow = '0 0 8px rgba(0, 191, 255, 0.6)';
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.color = '#00bfff';
+ e.currentTarget.style.textDecorationColor = 'rgba(0, 191, 255, 0.5)';
+ e.currentTarget.style.textShadow = 'none';
+ }}
+ >
+ {" "}official website
+ .
+
+
+
+ window.open('https://github.com/apache/incubator-resilientdb/releases/tag/v1.10.0-rc03', '_blank')}
+ style={{
+ paddingInline: 24,
+ paddingBlock: 12,
+ borderRadius: 999,
+ background: 'transparent',
+ border: '1px solid rgba(255,255,255,0.3)',
+ color: '#fff',
+ fontWeight: 400,
+ fontSize: 12,
+ transition: 'all 200ms ease',
+ cursor: 'pointer',
+ fontFamily: 'inherit'
+ }}
+ onMouseEnter={(e) => {
+ e.currentTarget.style.background = 'rgba(255,255,255,0.1)';
+ e.currentTarget.style.borderColor = 'rgba(255,255,255,0.5)';
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.background = 'transparent';
+ e.currentTarget.style.borderColor = 'rgba(255,255,255,0.3)';
+ }}
+ >
+ Latest Release
+
+ window.location.href = '/docs'}
+ style={{
+ paddingInline: 24,
+ paddingBlock: 12,
+ borderRadius: 999,
+ background: '#fff',
+ border: '1px solid #fff',
+ color: '#000',
+ fontWeight: 400,
+ fontSize: 12,
+ transition: 'all 200ms ease',
+ cursor: 'pointer',
+ fontFamily: 'inherit'
+ }}
+ onMouseEnter={(e) => {
+ e.currentTarget.style.background = 'rgba(255,255,255,0.9)';
+ e.currentTarget.style.borderColor = 'rgba(255,255,255,0.9)';
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.background = '#fff';
+ e.currentTarget.style.borderColor = '#fff';
+ }}
+ >
+ Get Started
+
+
+
+ );
+}
+
+
diff --git a/components/landing/PulsingCircle.tsx b/components/landing/PulsingCircle.tsx
new file mode 100644
index 0000000..126cd31
--- /dev/null
+++ b/components/landing/PulsingCircle.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import { PulsingBorder } from '@paper-design/shaders-react';
+import { motion } from 'framer-motion';
+
+export default function PulsingCircle() {
+ return (
+
+
+
+
+
+
+
+
+
+ Beacon β’ Resilient β’ Modern β’ Elegant β’
+
+
+
+
+
(null);
+ const blobRef = useRef(null);
+
+ // Lightweight pointer-based parallax, transform only (GPU-accelerated)
+ useEffect(() => {
+ const container = containerRef.current;
+ const blob = blobRef.current;
+ if (!container || !blob) return;
+
+ let rafId = 0;
+ const target = { x: 0, y: 0 };
+ const current = { x: 0, y: 0 };
+
+ const onMove = (e: PointerEvent) => {
+ const rect = container.getBoundingClientRect();
+ target.x = e.clientX - rect.left;
+ target.y = e.clientY - rect.top;
+ if (!rafId) rafId = requestAnimationFrame(tick);
+ };
+
+ const tick = () => {
+ const lerp = 0.18;
+ current.x += (target.x - current.x) * lerp;
+ current.y += (target.y - current.y) * lerp;
+ blob.style.left = `${current.x}px`;
+ blob.style.top = `${current.y}px`;
+ blob.style.opacity = '1';
+ if (Math.abs(current.x - target.x) > 0.001 || Math.abs(current.y - target.y) > 0.001) {
+ rafId = requestAnimationFrame(tick);
+ } else {
+ rafId = 0;
+ }
+ };
+
+ const onLeave = () => {
+ blob.style.opacity = '0';
+ };
+
+ container.addEventListener('pointermove', onMove, { passive: true });
+ container.addEventListener('pointerleave', onLeave, { passive: true });
+ return () => {
+ container.removeEventListener('pointermove', onMove as any);
+ container.removeEventListener('pointerleave', onLeave as any);
+ if (rafId) cancelAnimationFrame(rafId);
+ };
+ }, []);
+
+ return (
+
+ {/* SVG Filters (used by header gooey/pill effects) */}
+
+
+
+
+
+
+
+
+
+ {/* Subtle radial overlays (dark, snappy) */}
+
+
+ {/* Subtle grey hue overlay */}
+
+
+ {/* Low-cost parallax blob */}
+
+
+ {/* Beacon of light elements */}
+
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/theme.ts b/theme.ts
index 75c6cf9..95c31aa 100644
--- a/theme.ts
+++ b/theme.ts
@@ -22,5 +22,72 @@
import { createTheme } from '@mantine/core';
export const theme = createTheme({
- /* Put your mantine theme override here */
+ /* Sleek, modern theme overrides */
+ primaryColor: 'blue',
+ defaultRadius: 12,
+ fontFamily: 'Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, \"Apple Color Emoji\", \"Segoe UI Emoji\"',
+ headings: {
+ fontFamily:
+ 'Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, \"Apple Color Emoji\", \"Segoe UI Emoji\"',
+ sizes: {
+ h1: { fontSize: '2.75rem', fontWeight: '800', lineHeight: '1.1' },
+ h2: { fontSize: '2.25rem', fontWeight: '800', lineHeight: '1.15' },
+ h3: { fontSize: '1.75rem', fontWeight: '700', lineHeight: '1.2' },
+ },
+ },
+ colors: {
+ blue: [
+ '#e8f1ff',
+ '#d3e4ff',
+ '#a7c6ff',
+ '#7aa8ff',
+ '#4d8aff',
+ '#256dff',
+ '#0d5bff',
+ '#0046d8',
+ '#0037a6',
+ '#002874',
+ ],
+ dark: [
+ '#f8f9fa',
+ '#f1f3f5',
+ '#e9ecef',
+ '#dee2e6',
+ '#ced4da',
+ '#343a40',
+ '#2b3035',
+ '#212529',
+ '#161a1d',
+ '#0b0d0e',
+ ],
+ gray: [
+ '#f8fafc',
+ '#f1f5f9',
+ '#e2e8f0',
+ '#cbd5e1',
+ '#94a3b8',
+ '#64748b',
+ '#475569',
+ '#334155',
+ '#1f2937',
+ '#0f172a',
+ ],
+ },
+ components: {
+ Button: {
+ defaultProps: { radius: 'xl' },
+ styles: {
+ root: { fontWeight: 600 },
+ },
+ },
+ Paper: {
+ defaultProps: { radius: 'lg' },
+ },
+ Card: {
+ defaultProps: { radius: 'lg' },
+ },
+ Tooltip: {
+ defaultProps: { radius: 'md' },
+ },
+ },
});