bender/ed4a92a1-4937-4913-bdd2-76f70d1efa18
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #2

Merged
bender merged 2 commits from version_1 into main 2026-03-11 19:24:48 +00:00
Conversation 0 Commits 2 Files Changed 2 +42 -58
2 changed files with 42 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/app/page.tsx
View File

@@ -8,7 +8,7 @@ import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSp
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
import FaqBase from "@/components/sections/faq/FaqBase";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Code, CreditCard, Github, HelpCircle, Linkedin, Mail, Sparkles, Twitter, Zap } from "lucide-react";
import { Code, CreditCard, Github, HelpCircle, Linkedin, Mail, Sparkles, Twitter, Zap, Crown } from "lucide-react";
export default function LandingPage() {
return (
@@ -18,7 +18,7 @@ export default function LandingPage() {
borderRadius="soft"
contentWidth="compact"
sizing="largeSmallSizeMediumTitles"
background="grid"
background="circleGradient"
cardStyle="solid"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="solid"
@@ -41,7 +41,7 @@ export default function LandingPage() {
<HeroBillboardGallery
title="Build React Native Apps in Your Browser"
description="A high-performance, full-featured web-based IDE with Monaco Editor integration, live mobile preview, real-time hot reload, and complete development tooling. Ship React Native apps faster with instant feedback and persistent file storage."
background={{ variant: "grid" }}
background={{ variant: "radial-gradient" }}
tag="Developer Tool"
tagIcon={Code}
tagAnimation="slide-up"
@@ -55,16 +55,16 @@ export default function LandingPage() {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/a-modern-web-based-ide-interface-showing-1773256998016-3f9b5e47.png", imageAlt: "Monaco Editor with split-screen layout showing file explorer, code editor, and mobile preview"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/mobile-device-preview-panes-showing-side-1773256997545-63993a77.png?_wi=1", imageAlt: "iOS and Android mobile device preview frames with live app rendering"
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/mobile-device-preview-panes-showing-side-1773256997545-63993a77.png", imageAlt: "iOS and Android mobile device preview frames with live app rendering"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/visual-representation-of-hot-reload-mech-1773256998764-e1f895f3.png?_wi=1", imageAlt: "Hot reload mechanism with real-time preview update indicator"
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/visual-representation-of-hot-reload-mech-1773256998764-e1f895f3.png", imageAlt: "Hot reload mechanism with real-time preview update indicator"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/close-up-of-monaco-editor-displaying-rea-1773256997880-ccc6e4fd.png?_wi=1", imageAlt: "Monaco Editor with TypeScript and JSX syntax highlighting"
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/close-up-of-monaco-editor-displaying-rea-1773256997880-ccc6e4fd.png", imageAlt: "Monaco Editor with TypeScript and JSX syntax highlighting"
},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/split-panel-showing-a-file-explorer-tree-1773256998196-c0c4211c.png?_wi=1", imageAlt: "File explorer tree and terminal showing npm commands and project structure"
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/split-panel-showing-a-file-explorer-tree-1773256998196-c0c4211c.png", imageAlt: "File explorer tree and terminal showing npm commands and project structure"
}
]}
mediaAnimation="slide-up"
@@ -81,22 +81,22 @@ export default function LandingPage() {
tagAnimation="slide-up"
features={[
{
id: "01", title: "Monaco Editor Integration", description: "Full-featured code editor with TypeScript, JSX, and advanced syntax highlighting. Supports code completion, error detection, and VS Code keybindings.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/close-up-of-monaco-editor-displaying-rea-1773256997880-ccc6e4fd.png?_wi=2", imageAlt: "Monaco Editor showing React Native code with syntax highlighting"
id: "01", title: "Monaco Editor Integration", description: "Full-featured code editor with TypeScript, JSX, and advanced syntax highlighting. Supports code completion, error detection, and VS Code keybindings.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/close-up-of-monaco-editor-displaying-rea-1773256997880-ccc6e4fd.png", imageAlt: "Monaco Editor showing React Native code with syntax highlighting"
},
{
id: "02", title: "Virtual File System", description: "Create, rename, delete, and organize files with memfs-powered file explorer. Full support for .tsx, .js, and project structure navigation.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/split-panel-showing-a-file-explorer-tree-1773256998196-c0c4211c.png?_wi=2", imageAlt: "File explorer with React Native project structure"
id: "02", title: "Virtual File System", description: "Create, rename, delete, and organize files with memfs-powered file explorer. Full support for .tsx, .js, and project structure navigation.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/split-panel-showing-a-file-explorer-tree-1773256998196-c0c4211c.png", imageAlt: "File explorer with React Native project structure"
},
{
id: "03", title: "Terminal Emulation", description: "Integrated xterm.js terminal for running npm commands, expo start, and other CLI tools directly in your browser.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/split-panel-showing-a-file-explorer-tree-1773256998196-c0c4211c.png?_wi=3", imageAlt: "Terminal showing npm install and expo start commands"
id: "03", title: "Terminal Emulation", description: "Integrated xterm.js terminal for running npm commands, expo start, and other CLI tools directly in your browser.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/split-panel-showing-a-file-explorer-tree-1773256998196-c0c4211c.png", imageAlt: "Terminal showing npm install and expo start commands"
},
{
id: "04", title: "Live Mobile Preview", description: "Real-time preview of your React Native app on iOS and Android frames. Instant visual feedback as you code with one-click refresh.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/mobile-device-preview-panes-showing-side-1773256997545-63993a77.png?_wi=2", imageAlt: "iOS and Android mobile device preview frames"
id: "04", title: "Live Mobile Preview", description: "Real-time preview of your React Native app on iOS and Android frames. Instant visual feedback as you code with one-click refresh.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/mobile-device-preview-panes-showing-side-1773256997545-63993a77.png", imageAlt: "iOS and Android mobile device preview frames"
},
{
id: "05", title: "Platform Switching", description: "Toggle between iOS and Android preview frames to test platform-specific UI and behavior instantly.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/mobile-device-preview-panes-showing-side-1773256997545-63993a77.png?_wi=3", imageAlt: "Platform toggle controls for iOS and Android"
id: "05", title: "Platform Switching", description: "Toggle between iOS and Android preview frames to test platform-specific UI and behavior instantly.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/mobile-device-preview-panes-showing-side-1773256997545-63993a77.png", imageAlt: "Platform toggle controls for iOS and Android"
},
{
id: "06", title: "Hot Reload Sync", description: "Automatic file synchronization with instant hot reload. Save your code and see changes reflected immediately in the preview.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/visual-representation-of-hot-reload-mech-1773256998764-e1f895f3.png?_wi=2", imageAlt: "Hot reload cycle from code change to preview update"
id: "06", title: "Hot Reload Sync", description: "Automatic file synchronization with instant hot reload. Save your code and see changes reflected immediately in the preview.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AlrH9RdeSbpFPfNuPcacc4rPWG/visual-representation-of-hot-reload-mech-1773256998764-e1f895f3.png", imageAlt: "Hot reload cycle from code change to preview update"
}
]}
textboxLayout="default"
@@ -148,7 +148,7 @@ export default function LandingPage() {
]
},
{
id: "enterprise", badge: "Enterprise", badgeIcon: undefined,
id: "enterprise", badge: "Enterprise", badgeIcon: Crown,
price: "Custom", subtitle: "For teams and organizations", buttons: [
{ text: "Contact Sales", href: "mailto:sales@rn-ide.dev" }
],

72
src/components/shared/SvgTextLogo/SvgTextLogo.tsx
View File

@@ -1,51 +1,35 @@
"use client";
import React, { SVGProps } from 'react';
import { memo } from "react";
import useSvgTextLogo from "./useSvgTextLogo";
import { cls } from "@/lib/utils";
interface SvgTextLogoProps {
logoText: string;
adjustHeightFactor?: number;
verticalAlign?: "top" | "center";
interface SvgTextLogoProps extends SVGProps<SVGSVGElement> {
text?: string;
className?: string;
}
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
logoText,
adjustHeightFactor,
verticalAlign = "top",
className = "",
}) {
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
return (
<svg
ref={svgRef}
viewBox={viewBox}
className={cls("w-full", className)}
style={{ aspectRatio: aspectRatio }}
preserveAspectRatio="none"
role="img"
aria-label={`${logoText} logo`}
>
<text
ref={textRef}
x="0"
y={verticalAlign === "center" ? "50%" : "0"}
className="font-bold fill-current"
style={{
fontSize: "20px",
letterSpacing: "-0.02em",
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
}}
const SvgTextLogo = React.forwardRef<SVGSVGElement, SvgTextLogoProps>(
({ text = 'Logo', className = '', ...props }, ref) => {
return (
<svg
ref={ref}
viewBox="0 0 200 50"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...props}
>
{logoText}
</text>
</svg>
);
});
<text
x="10"
y="35"
fontSize="32"
fontWeight="bold"
fill="currentColor"
dominantBaseline="hanging"
>
{text}
</text>
</svg>
);
}
);
SvgTextLogo.displayName = "SvgTextLogo";
SvgTextLogo.displayName = 'SvgTextLogo';
export default SvgTextLogo;
export default SvgTextLogo;