From 593b8d365235068b5023ad458c8fc1d0b3c80af7 Mon Sep 17 00:00:00 2001 From: harish876 Date: Sun, 22 Jun 2025 23:17:27 +0000 Subject: [PATCH 1/5] Add PocketFlowChatbot component and integrate into layout; update package-lock.json for @codemirror/view and add new dependency --- app/layout.tsx | 2 + components/PocketFlowChatbot.tsx | 130 +++++++++++++++++++++++++++++++ components/index.ts | 1 + package-lock.json | 8 +- 4 files changed, 138 insertions(+), 3 deletions(-) create mode 100644 components/PocketFlowChatbot.tsx diff --git a/app/layout.tsx b/app/layout.tsx index 069f963..dff8e81 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -15,6 +15,7 @@ import { theme } from '../theme'; import './global.css'; import { FloatingAssistant } from '@/components/FloatingAssistant'; +import { PocketFlowChatbot } from '@/components/PocketFlowChatbot'; import { Providers } from './providers'; export const metadata = { @@ -90,6 +91,7 @@ export default async function RootLayout({ children }: { children: any }) { {children} + 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/index.ts b/components/index.ts index 759f3dc..3778df1 100644 --- a/components/index.ts +++ b/components/index.ts @@ -8,3 +8,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/package-lock.json b/package-lock.json index 04ddf2f..0472c0f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@ai-sdk/react": "^1.2.12", "@codemirror/lang-javascript": "^6.2.4", "@codemirror/lang-python": "^6.2.1", + "@codemirror/view": "^6.37.2", "@floating-ui/react-dom": "^2.0.0", "@gfazioli/mantine-marquee": "^2.2.7", "@gfazioli/mantine-text-animate": "^1.0.3", @@ -2248,12 +2249,13 @@ } }, "node_modules/@codemirror/view": { - "version": "6.36.8", - "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.36.8.tgz", - "integrity": "sha512-yoRo4f+FdnD01fFt4XpfpMCcCAo9QvZOtbrXExn4SqzH32YC6LgzqxfLZw/r6Ge65xyY03mK/UfUqrVw1gFiFg==", + "version": "6.37.2", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.37.2.tgz", + "integrity": "sha512-XD3LdgQpxQs5jhOOZ2HRVT+Rj59O4Suc7g2ULvZ+Yi8eCkickrkZ5JFuoDhs2ST1mNI5zSsNYgR3NGa4OUrbnw==", "license": "MIT", "dependencies": { "@codemirror/state": "^6.5.0", + "crelt": "^1.0.6", "style-mod": "^4.1.0", "w3c-keyname": "^2.2.4" } From f0dd1d94938eca6e2df8e1b9b94bdebca7da76f8 Mon Sep 17 00:00:00 2001 From: harish876 Date: Fri, 19 Sep 2025 00:15:22 +0000 Subject: [PATCH 2/5] Enhance landing page with new components and styles; integrate ShaderBackground, Header, HeroContent, and PulsingCircle; update global styles for a sleek design; add framer-motion and @paper-design/shaders-react dependencies. --- app/global.css | 197 ++++++++++- app/layout.tsx | 25 +- app/page.tsx | 17 +- components/MantineFooter/MantineFooter.tsx | 387 ++++++++++++++++++++- components/MantineNavBar/MantineNavBar.tsx | 32 +- components/SearchBar/SearchBar.tsx | 16 +- components/Welcome/Welcome.module.css | 26 +- components/Welcome/Welcome.tsx | 82 ++--- components/landing/Header.tsx | 214 ++++++++++++ components/landing/HeroContent.tsx | 106 ++++++ components/landing/PulsingCircle.tsx | 51 +++ components/landing/ShaderBackground.tsx | 136 ++++++++ content/index.mdx | 14 +- package-lock.json | 68 ++++ package.json | 2 + public/favicon.svg | 19 +- theme.ts | 69 +++- 17 files changed, 1343 insertions(+), 118 deletions(-) create mode 100644 components/landing/Header.tsx create mode 100644 components/landing/HeroContent.tsx create mode 100644 components/landing/PulsingCircle.tsx create mode 100644 components/landing/ShaderBackground.tsx diff --git a/app/global.css b/app/global.css index b51c5ff..38f9f54 100644 --- a/app/global.css +++ b/app/global.css @@ -10,7 +10,9 @@ */ @layer overwrite { :root { - --x-color-nextra-bg: var(--mantine-color-body); + /* Force Nextra base background to pure black to match landing */ + --x-color-nextra-bg: #000; + --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; } :where(.dark) { @@ -24,3 +26,196 @@ } @layer components, mantine, nextra, overwrite; + +/* Global sleek styles */ +@layer overwrite { + html { + scroll-behavior: smooth; + } + + body { + color: var(--mantine-color-text); + font-family: var(--font-sans); + background: + radial-gradient(1200px 600px at 80% -10%, rgba(0, 102, 255, 0.12), transparent 100%), + radial-gradient(1000px 500px at -10% 10%, rgba(255, 0, 128, 0.09), transparent 100%), + linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.0)) !important; + /* background: #000000; */ + } + + :where(.dark) body { + color: rgba(255, 255, 255, 0.92); + } + + h1, h2, h3, h4, h5, h6 { + color: inherit; + font-family: var(--font-sans); + } + + a { + color: #1f2937; + } + :where(.dark) a { + color: rgba(255, 255, 255, 0.92) !important; + } + + /* Stronger override for Nextra link styling in docs */ + :where(.dark) .nextra-content a, + :where(.dark) .nextra-content a:visited { + color: rgba(255, 255, 255, 0.92) !important; + } + .nextra-content a, + .nextra-content a:visited { + color: #1f2937 !important; + } + + /* Ensure Nextra containers don’t paint a gray background */ + :where(.nextra-container, + .nextra-content, + .nextra-sidebar-container, + .nx-bg-neutral-900, + .nx-bg-gray-900, + .nx-bg-black, + .nx-bg-dark, + .nx-bg-zinc-900, + .nx-bg-slate-900) { + background-color: transparent !important; + } + + /* Make sticky headers/footers transparent and remove borders/shadows */ + :where(.nx-sticky) { + background: transparent !important; + box-shadow: none !important; + border: none !important; + } + :where(.nextra-sidebar) header, + :where(.nextra-sidebar) footer, + :where(.nextra-container > header) { + background: transparent !important; + border: none !important; + box-shadow: none !important; + } + + /* Glassmorphism utility */ + .glass { + background: rgba(255, 255, 255, 0.06); + -webkit-backdrop-filter: saturate(120%) blur(10px); + backdrop-filter: saturate(120%) blur(10px); + border: 1px solid rgba(255, 255, 255, 0.08); + } + + code, pre { + border-radius: 10px; + } + + /* Target article tag for markdown content font styling */ + article { + font-family: 'Inter', system-ui, -apple-system, sans-serif !important; + font-weight: 400; + line-height: 1.6; + } + + /* Specific styling for the main content article */ + article[data-pagefind-body="true"] { + font-family: 'Inter', system-ui, -apple-system, sans-serif !important; + font-size: 16px; + line-height: 1.7; + color: rgba(255, 255, 255, 0.9); + } + + /* Override Nextra's default article styling */ + article.x\:w-full { + font-family: 'Inter', system-ui, -apple-system, sans-serif !important; + } + + /* Sidebar footer background override */ + :where(.nextra-sidebar-footer) { + background: transparent !important; + border-top: none !important; + box-shadow: none !important; + } + + /* Lightweight parallax blob for landing */ + .parallax-blob { + position: absolute; + left: 0; + top: 0; + width: 55vmax; + height: 55vmax; + transform: translate(-50%, -50%) scale(0.9); + background: radial-gradient(closest-side, rgba(0, 102, 255, 0.18), transparent 72%); + pointer-events: none; + transition: transform 0.18s ease-out, opacity 300ms ease-out; + will-change: transform; + filter: blur(12px); + opacity: 0; + } + + /* Beacon of light effect */ + @keyframes beamPulse { + 0%, 100% { opacity: 0.45; transform: translateX(-50%) scaleX(1); } + 50% { opacity: 0.7; transform: translateX(-50%) scaleX(1.08); } + } + .beacon-beam { + position: absolute; + left: 50%; + top: -10vh; + height: 120vh; + width: 2px; + transform: translateX(-50%); + background: linear-gradient(180deg, + rgba(255,255,255,0) 0%, + rgba(0, 146, 255, 0.4) 40%, + rgba(0, 146, 255, 0.35) 60%, + rgba(255,255,255,0) 100%); + filter: blur(8px); + opacity: 0.55; + pointer-events: none; + animation: beamPulse 4s ease-in-out infinite; + } + .beacon-source { + position: absolute; + left: 50%; + bottom: 10vh; + width: 36vmin; + height: 12vmin; + transform: translateX(-50%); + background: radial-gradient(closest-side, rgba(0,146,255,0.28), rgba(0,146,255,0.08) 60%, transparent 70%); + filter: blur(14px); + opacity: 0.6; + pointer-events: none; + } + + /* Distant beacon cone (perspective beam) */ + .beacon-cone { + position: absolute; + left: 50%; + bottom: -10vh; + transform: translateX(-50%) perspective(800px) rotateX(60deg); + width: 4px; + height: 130vh; + background: linear-gradient( + 180deg, + rgba(0, 146, 255, 0.0) 0%, + rgba(0, 146, 255, 0.28) 30%, + rgba(0, 146, 255, 0.18) 70%, + rgba(0, 146, 255, 0.0) 100% + ); + box-shadow: 0 0 40px 6px rgba(0,146,255,0.18), 0 0 120px 24px rgba(0,146,255,0.10); + filter: blur(2px); + pointer-events: none; + opacity: 0.55; + } + + /* Beacon outline (SVG stroke glow) */ + .beacon-outline { + position: absolute; + left: 50%; + bottom: 6vh; + transform: translateX(-50%); + width: clamp(120px, 22vmin, 220px); + height: auto; + opacity: 0.8; + pointer-events: none; + } +} diff --git a/app/layout.tsx b/app/layout.tsx index dff8e81..07e79ff 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -5,12 +5,11 @@ import '@gfazioli/mantine-text-animate/styles.layer.css'; import { ColorSchemeScript, mantineHtmlProps, MantineProvider } from '@mantine/core'; -import '@mantine/core/styles.layer.css'; - import { Layout } from 'nextra-theme-docs'; import { Banner, Head } from 'nextra/components'; import { getPageMap } from 'nextra/page-map'; import { theme } from '../theme'; +import { Inter } from 'next/font/google'; import './global.css'; @@ -18,6 +17,8 @@ import { FloatingAssistant } from '@/components/FloatingAssistant'; import { PocketFlowChatbot } from '@/components/PocketFlowChatbot'; import { Providers } from './providers'; +const inter = Inter({ subsets: ['latin'], variable: '--font-sans' }); + export const metadata = { title: { default: 'Beacon - NextGen Docs for Nexres', @@ -64,10 +65,10 @@ export default async function RootLayout({ children }: { children: any }) { const pageMap = await getPageMap(); return ( - + - + - + - ✨ AI powered documentation for ResilientDB Ecosystem and Apps - - } + // banner={ + // + // ✨ AI powered documentation for ResilientDB Ecosystem and Apps + // + // } navbar={} pageMap={pageMap} docsRepositoryBase="https://github.com/shuding/nextra/tree/main/docs" footer={} - sidebar={{ defaultMenuCollapseLevel: 1 }} + sidebar={{ defaultMenuCollapseLevel: 1, toggleButton: true }} > {children} - + {/* */} diff --git a/app/page.tsx b/app/page.tsx index 9718a19..e0a1e86 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,14 +1,17 @@ import { Container } from '@mantine/core'; -import { ColorSchemeToggle } from '@/components/ColorSchemeToggle/ColorSchemeToggle'; -import { Content } from '@/components/Content/Content'; -import { Welcome } from '@/components/Welcome/Welcome'; +import ShaderBackground from '@/components/landing/ShaderBackground'; +import PulsingCircle from '@/components/landing/PulsingCircle'; +import HeroContent from '@/components/landing/HeroContent'; +import Header from '@/components/landing/Header'; export default function HomePage() { return ( - - - - + + +
+ + + ); } diff --git a/components/MantineFooter/MantineFooter.tsx b/components/MantineFooter/MantineFooter.tsx index 066657f..37b9839 100644 --- a/components/MantineFooter/MantineFooter.tsx +++ b/components/MantineFooter/MantineFooter.tsx @@ -1,17 +1,384 @@ -import { Footer } from 'nextra-theme-docs'; -import { Anchor, Box } from '@mantine/core'; +'use client'; /** - * You can customize the Nextra Footer component. - * Don't forget to use the MantineProvider component. + * Sleek footer component matching the landing page design language + * Features glassmorphism effects, subtle animations, and modern styling + * Uses regular HTML/React components for full width stretching * * @since 1.0.0 - * */ export const MantineFooter = () => ( - -
- Apache {new Date().getFullYear()} © Expolabs -
- + ); diff --git a/components/MantineNavBar/MantineNavBar.tsx b/components/MantineNavBar/MantineNavBar.tsx index d8656ed..09bc07b 100644 --- a/components/MantineNavBar/MantineNavBar.tsx +++ b/components/MantineNavBar/MantineNavBar.tsx @@ -1,15 +1,11 @@ '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. @@ -19,26 +15,14 @@ import { SearchBar } from '../SearchBar/SearchBar'; * */ export const MantineNavBar = () => { + const pathname = usePathname(); + if (pathname === '/') return null; return ( <> - - - - Beacon - - - } - > - <> - - {/* */} - - - - + +
+ ); }; diff --git a/components/SearchBar/SearchBar.tsx b/components/SearchBar/SearchBar.tsx index c49395a..4090e59 100644 --- a/components/SearchBar/SearchBar.tsx +++ b/components/SearchBar/SearchBar.tsx @@ -1,6 +1,6 @@ 'use client' -import { Button } from '@mantine/core'; +import { Button, Group, Kbd, Text } from '@mantine/core'; import { IconSearch } from '@tabler/icons-react'; export function SearchBar() { @@ -15,12 +15,14 @@ export function SearchBar() { }; return ( - ); } \ No newline at end of file diff --git a/components/Welcome/Welcome.module.css b/components/Welcome/Welcome.module.css index 6d149d9..e35538c 100644 --- a/components/Welcome/Welcome.module.css +++ b/components/Welcome/Welcome.module.css @@ -1,12 +1,32 @@ .title { color: white; - font-size: 100px; + font-size: 72px; + line-height: 1.05; + letter-spacing: -0.02em; @media (max-width: 768px) { - font-size: 70px; + font-size: 44px; } } .subtitle { - font-size: 100px; + 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 312c15e..08ae7a3 100644 --- a/components/Welcome/Welcome.tsx +++ b/components/Welcome/Welcome.tsx @@ -2,59 +2,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/landing/Header.tsx b/components/landing/Header.tsx new file mode 100644 index 0000000..453c0e1 --- /dev/null +++ b/components/landing/Header.tsx @@ -0,0 +1,214 @@ +'use client'; + +import { SearchBar } from '../SearchBar/SearchBar'; + +export default function Header() { + return ( +
+ + + + +
+ { + e.target.style.background = 'rgba(255,255,255,0.15)'; + e.target.style.borderColor = 'rgba(255,255,255,0.4)'; + }} + onBlur={(e) => { + e.target.style.background = 'rgba(255,255,255,0.1)'; + e.target.style.borderColor = 'rgba(255,255,255,0.2)'; + }} + onKeyDown={(e) => { + if (e.key === 'Enter') { + // Trigger search functionality + const event = new KeyboardEvent('keydown', { + key: 'k', + metaKey: true, + ctrlKey: true, + }); + document.dispatchEvent(event); + } + }} + /> + + + +
+
+ ); +} + + diff --git a/components/landing/HeroContent.tsx b/components/landing/HeroContent.tsx new file mode 100644 index 0000000..100750f --- /dev/null +++ b/components/landing/HeroContent.tsx @@ -0,0 +1,106 @@ +'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 + official website. +

+ +
+ + +
+
+
+ ); +} + + diff --git a/components/landing/PulsingCircle.tsx b/components/landing/PulsingCircle.tsx new file mode 100644 index 0000000..cd19888 --- /dev/null +++ b/components/landing/PulsingCircle.tsx @@ -0,0 +1,51 @@ +'use client'; + +import { PulsingBorder } from '@paper-design/shaders-react'; +import { motion } from 'framer-motion'; + +export default function PulsingCircle() { + return ( +
+
+ + + + + + + + + Beacon • Resilient • Modern • Elegant • + + + +
+
+ ); +} + + + + + diff --git a/components/landing/ShaderBackground.tsx b/components/landing/ShaderBackground.tsx new file mode 100644 index 0000000..28fd93e --- /dev/null +++ b/components/landing/ShaderBackground.tsx @@ -0,0 +1,136 @@ +'use client'; + +import React, { useEffect, useRef } from 'react'; + +interface ShaderBackgroundProps { + children: React.ReactNode; +} + +export default function ShaderBackground({ children }: ShaderBackgroundProps) { + const containerRef = useRef(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} +
+ ); +} + + diff --git a/content/index.mdx b/content/index.mdx index fa05f89..efefb47 100644 --- a/content/index.mdx +++ b/content/index.mdx @@ -20,13 +20,13 @@ Welcome to the **ResilientDB Quickstart Guide**—your one-stop shop for all Res --- -## 🚀 **What is ResilientDB?** +## 🚀 What is ResilientDB? ResilientDB is a high-performance, scalable, and secure blockchain platform designed to meet the demands of modern distributed applications. It offers a suite of tools and projects that enable developers and organizations to build robust blockchain solutions efficiently. --- -## 📖 **Get Started** +## 📖 Get Started - **[Installation Guide](installation/):** Learn how to install all ResilientDB projects using the `INSTALL.sh` script. - **[Usage Guides](usage/):** Explore detailed guides on how to use each ResilientDB project. @@ -35,7 +35,7 @@ ResilientDB is a high-performance, scalable, and secure blockchain platform desi --- -## 🌐 **Main Repositories** +## 🌐 Main Repositories Access the main repositories within the ResilientDB Ecosystem and ResilientApps collections: @@ -50,7 +50,7 @@ Access the main repositories within the ResilientDB Ecosystem and ResilientApps --- -## 🌎 **ResilientDB Ecosystem** +## 🌎 ResilientDB Ecosystem Explore the core components and tools designed to interact with and extend the functionality of the ResilientDB platform. @@ -69,7 +69,7 @@ Explore the core components and tools designed to interact with and extend the f --- -## 📱 **ResilientApps** +## 📱 ResilientApps This list includes various applications and tools built on top of the ResilientDB platform, enhancing its use cases and usability. @@ -96,7 +96,7 @@ This list includes various applications and tools built on top of the ResilientD --- -## 💡 **Why Choose ResilientDB?** +## 💡 Why Choose ResilientDB? - **High Performance:** Achieve high transaction throughput with low latency. - **Scalability:** Designed to scale horizontally to meet growing demands. @@ -105,7 +105,7 @@ This list includes various applications and tools built on top of the ResilientD --- -## 📞 **Get Involved** +## 📞 Get Involved - **GitHub:** [ResilientEcosystem](https://github.com/ResilientEcosystem) - **Support:** If you have any questions or need help, feel free to [open an issue](https://github.com/apache/incubator-resilientdb/issues). diff --git a/package-lock.json b/package-lock.json index 0472c0f..9af80c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,10 +22,12 @@ "@mdx-js/react": "^3.1.0", "@next/bundle-analyzer": "^15.3.1", "@octokit/rest": "^22.0.0", + "@paper-design/shaders-react": "0.0.53", "@tabler/icons-react": "^3.31.0", "@uiw/codemirror-theme-vscode": "^4.23.12", "@uiw/react-codemirror": "^4.23.12", "ai": "^4.3.16", + "framer-motion": "12.23.14", "internmap": "^2.0.3", "next": "15.3.2", "next-auth": "^4.24.11", @@ -4961,6 +4963,30 @@ "url": "https://github.com/sponsors/panva" } }, + "node_modules/@paper-design/shaders": { + "version": "0.0.53", + "resolved": "https://registry.npmjs.org/@paper-design/shaders/-/shaders-0.0.53.tgz", + "integrity": "sha512-ACeYUZNOGLFWXaidIf5CQ0pxPgKgSZjzCe7VJB83NcZJzkHoSppxnchhTrBxTt0OR85wIX+eQOxMJoDgqVCBGw==", + "license": "SEE LICENSE IN https://github.com/paper-design/shaders/blob/main/LICENSE" + }, + "node_modules/@paper-design/shaders-react": { + "version": "0.0.53", + "resolved": "https://registry.npmjs.org/@paper-design/shaders-react/-/shaders-react-0.0.53.tgz", + "integrity": "sha512-3WxkYrCpbIJE2l6uHbxHbuISnTM68i93fV1qIyBFUS/l01HBPM/90A9TTinyVWwOA4gIsnn+iSSmv9328z01nA==", + "license": "SEE LICENSE IN https://github.com/paper-design/shaders/blob/main/LICENSE", + "dependencies": { + "@paper-design/shaders": "0.0.53" + }, + "peerDependencies": { + "@types/react": "^18 || ^19", + "react": "^18 || ^19" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@pmmmwh/react-refresh-webpack-plugin": { "version": "0.5.16", "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.16.tgz", @@ -12268,6 +12294,33 @@ "node": ">= 0.6" } }, + "node_modules/framer-motion": { + "version": "12.23.14", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.14.tgz", + "integrity": "sha512-8BQ6dvqOht2w8P1CwIEvAA0gypDR3fNG/M6/f5lT0QgNIKnJf7J43Bpv++NnCWU8YfmL47UEm2hbI0GRvdVhsQ==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.23.12", + "motion-utils": "^12.23.6", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fresh": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz", @@ -17422,6 +17475,21 @@ "pathe": "^2.0.1" } }, + "node_modules/motion-dom": { + "version": "12.23.12", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.12.tgz", + "integrity": "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.23.6" + } + }, + "node_modules/motion-utils": { + "version": "12.23.6", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz", + "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==", + "license": "MIT" + }, "node_modules/mrmime": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz", diff --git a/package.json b/package.json index aa99e17..7b34616 100644 --- a/package.json +++ b/package.json @@ -35,10 +35,12 @@ "@mdx-js/react": "^3.1.0", "@next/bundle-analyzer": "^15.3.1", "@octokit/rest": "^22.0.0", + "@paper-design/shaders-react": "0.0.53", "@tabler/icons-react": "^3.31.0", "@uiw/codemirror-theme-vscode": "^4.23.12", "@uiw/react-codemirror": "^4.23.12", "ai": "^4.3.16", + "framer-motion": "12.23.14", "internmap": "^2.0.3", "next": "15.3.2", "next-auth": "^4.24.11", diff --git a/public/favicon.svg b/public/favicon.svg index 22bab82..e0632f6 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -1 +1,18 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/theme.ts b/theme.ts index 7fdf832..107b26f 100644 --- a/theme.ts +++ b/theme.ts @@ -3,5 +3,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' }, + }, + }, }); From 1bef733cb5f7499ac3a2c0aae87e4383bf30d945 Mon Sep 17 00:00:00 2001 From: harish876 Date: Fri, 19 Sep 2025 02:48:29 +0000 Subject: [PATCH 3/5] Enhance FloatingAssistant component with new settings for highlight mode; update GitHubAuth and PythonPlayground components for improved UI; add postbuild script to package.json for pagefind integration; refine styles across various components for a cohesive design. --- app/layout.tsx | 4 +- components/FloatingAssistant.tsx | 468 +++++++++++++++++++++++---- components/GitHubAuth.tsx | 96 +++++- components/PythonPlayground.tsx | 213 ++++++++++-- components/landing/HeroContent.tsx | 28 +- components/landing/PulsingCircle.tsx | 2 + package.json | 1 + 7 files changed, 700 insertions(+), 112 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 07e79ff..5f4e48f 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -91,8 +91,8 @@ export default async function RootLayout({ children }: { children: any }) { > {children} - {/* */} - + + {/* */} diff --git a/components/FloatingAssistant.tsx b/components/FloatingAssistant.tsx index 7d08b1e..75398d4 100644 --- a/components/FloatingAssistant.tsx +++ b/components/FloatingAssistant.tsx @@ -1,7 +1,7 @@ 'use client'; -import { ActionIcon, Tooltip, Paper, Text, Group, Box, Modal, Textarea, Button, Stack, Divider, Avatar } from '@mantine/core'; -import { IconBrain, IconSend, IconRobot, IconUser } from '@tabler/icons-react'; +import { ActionIcon, Tooltip, Paper, Text, Group, Box, Modal, Textarea, Button, Stack, Divider, Avatar, Switch, Badge } from '@mantine/core'; +import { IconBrain, IconSend, IconRobot, IconUser, IconHighlight, IconSettings } from '@tabler/icons-react'; import { useState, useEffect, ReactNode, useCallback } from 'react'; import ReactMarkdown from 'react-markdown'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; @@ -28,6 +28,8 @@ export function FloatingAssistant() { const [isAskingQuestion, setIsAskingQuestion] = useState(false); const [debounceTimer, setDebounceTimer] = useState(null); const [lastSelection, setLastSelection] = useState(''); + const [highlightMode, setHighlightMode] = useState(true); + const [showSettings, setShowSettings] = useState(false); // Function to check if element is within a code editor const isWithinCodeEditor = (element: Element | null): boolean => { @@ -47,6 +49,9 @@ export function FloatingAssistant() { // Debounced text selection handler const handleTextSelection = useCallback(() => { + // Only handle text selection if highlight mode is enabled + if (!highlightMode) return; + // Clear any existing timer if (debounceTimer) { clearTimeout(debounceTimer); @@ -74,7 +79,7 @@ export function FloatingAssistant() { }, 300); // 300ms debounce delay setDebounceTimer(timer); - }, [debounceTimer, lastSelection]); + }, [debounceTimer, lastSelection, highlightMode]); // Cleanup timer on unmount useEffect(() => { @@ -163,25 +168,200 @@ Please: return ( <> - - + {/* Settings Toggle */} + setIsOpen(true)} > - + setShowSettings(!showSettings)} + onMouseEnter={(e) => { + e.currentTarget.style.background = 'rgba(0, 191, 255, 0.1)'; + e.currentTarget.style.borderColor = 'rgba(0, 191, 255, 0.3)'; + e.currentTarget.style.color = '#00bfff'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.background = 'rgba(255,255,255,0.05)'; + e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)'; + e.currentTarget.style.color = 'rgba(255,255,255,0.7)'; + }} + > + + {/* Settings Panel */} + {showSettings && ( +
+
+ + + + + + Highlight Mode + + + setHighlightMode(event.currentTarget.checked)} + size="sm" + styles={{ + track: { + backgroundColor: highlightMode ? 'rgba(0, 191, 255, 0.3)' : 'rgba(255,255,255,0.1)', + borderColor: highlightMode ? 'rgba(0, 191, 255, 0.5)' : 'rgba(255,255,255,0.2)', + }, + thumb: { + backgroundColor: highlightMode ? '#00bfff' : 'rgba(255,255,255,0.6)', + }, + }} + /> + + + {highlightMode + ? "Select text to automatically get explanations" + : "Click the AI button to ask questions manually"} + + {highlightMode && ( + + Active + + )} + +
+ )} + + {/* Main AI Assistant Button */} + + setIsOpen(true)} + onMouseEnter={(e) => { + e.currentTarget.style.background = 'rgba(0, 191, 255, 0.2)'; + e.currentTarget.style.borderColor = 'rgba(0, 191, 255, 0.4)'; + e.currentTarget.style.transform = 'translateY(-2px)'; + e.currentTarget.style.boxShadow = '0 8px 20px rgba(0, 191, 255, 0.3)'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.background = 'rgba(0, 191, 255, 0.1)'; + e.currentTarget.style.borderColor = 'rgba(0, 191, 255, 0.2)'; + e.currentTarget.style.transform = 'translateY(0)'; + e.currentTarget.style.boxShadow = 'none'; + }} + > +
+ + {highlightMode && ( +
+ )} + + +
+ - - - - - AI Assistant + +
+ +
+
+ + AI Assistant + + + {highlightMode ? "Highlight mode enabled" : "Manual mode"} + +
{selectedText && ( - +
+ Selected: "{selectedText.length > 50 ? selectedText.substring(0, 50) + '...' : selectedText}" +
)} } > {selectedText && ( - - - - - - - Selected Text - {selectedText} +
+ +
+ +
+ + + Selected Text + + + {selectedText} + - +
)} {isLoading ? ( - - - - - - Generating response... - + +
+ +
+
+ + Generating response... + +
) : explanation ? ( - - - - - + +
+ +
+
( - + {children} ), @@ -296,67 +574,91 @@ Please: ), li: ({ children }: MarkdownComponentProps) => ( - + {children} ), h1: ({ children }: MarkdownComponentProps) => ( - + {children} ), h2: ({ children }: MarkdownComponentProps) => ( - + {children} ), h3: ({ children }: MarkdownComponentProps) => ( - + {children} ), blockquote: ({ children }: MarkdownComponentProps) => ( - {children} - +
), }} > {explanation} - +
) : ( - - - - - - + +
+ +
+
+ {selectedText ? "Select text to get an explanation" : "Ask any question or select text to get an explanation"} - +
)} -
- +