From 8470c0b795a55baac2d74a58a0bf9edee99ab4bf Mon Sep 17 00:00:00 2001 From: kpdve Date: Tue, 8 Apr 2025 19:50:57 +0200 Subject: [PATCH 1/3] feat(app)--home-page --- src/features/home/home.view.tsx | 1430 +++++++++++++++++++++++++++++++ src/pages/home.tsx | 29 + 2 files changed, 1459 insertions(+) create mode 100644 src/features/home/home.view.tsx create mode 100644 src/pages/home.tsx diff --git a/src/features/home/home.view.tsx b/src/features/home/home.view.tsx new file mode 100644 index 000000000..2d05e1586 --- /dev/null +++ b/src/features/home/home.view.tsx @@ -0,0 +1,1430 @@ +import { AppNavigation } from 'components/app-navigation'; +import { AppFooterContainer } from 'containers/app-footer.container'; +import { Link } from 'gatsby'; +import React from 'react'; + +interface AnimatedCompanyLogoProps { + className?: string; + size: number; + animationSpeed?: number; + rotationSpeed?: number; + pulseIntensity?: number; + zapEffect?: boolean; + morphIntensity?: number; + continuous?: boolean; +} + +const AnimatedCompanyLogo = ({ + className, + size = 32, + animationSpeed = 1, + rotationSpeed = 0.0092, + pulseIntensity = 1.37, + zapEffect = true, + morphIntensity = 0.8, + continuous = true, +}: AnimatedCompanyLogoProps) => { + const [rotation, setRotation] = React.useState(0); + const [scale, setScale] = React.useState(1); + const [zapOpacity, setZapOpacity] = React.useState(0); + const [morphProgress, setMorphProgress] = React.useState(0); + const [isVisible, setIsVisible] = React.useState(false); + + React.useEffect(() => { + // Add a small delay before starting animations to prevent flash + const visibilityTimer = setTimeout(() => { + setIsVisible(true); + }, 100); + + let animationFrame: number; + let startTime = Date.now(); + let lastZapTime = Date.now(); + + const animate = () => { + const currentTime = Date.now(); + const deltaTime = (currentTime - startTime) * 0.001 * animationSpeed; + startTime = currentTime; + + // Smooth rotation + if (rotationSpeed > 0) { + setRotation((prev) => (prev + rotationSpeed * deltaTime * 360) % 360); + } + + // Smoother pulse effect + if (pulseIntensity > 0) { + const pulseVal = + Math.sin(currentTime * 0.001 * pulseIntensity) * 0.05 + 1; + setScale(pulseVal); + } + + // Less frequent zap effect + if (zapEffect && currentTime - lastZapTime > 3000) { + // Only trigger every 3 seconds + if (Math.random() < 0.3) { + // Reduced probability + setZapOpacity(0.7); + setTimeout(() => setZapOpacity(0), 200); // Longer duration + lastZapTime = currentTime; + } + } + + // Smoother morph effect + if (morphIntensity > 0) { + const morphVal = + Math.sin(currentTime * 0.0005 * morphIntensity) * 0.5 + 0.5; + setMorphProgress(morphVal); + } + + animationFrame = requestAnimationFrame(animate); + }; + + if (continuous) { + animationFrame = requestAnimationFrame(animate); + } + + return () => { + clearTimeout(visibilityTimer); + if (animationFrame) { + cancelAnimationFrame(animationFrame); + } + }; + }, [ + animationSpeed, + rotationSpeed, + pulseIntensity, + zapEffect, + morphIntensity, + continuous, + ]); + + const centerX = 26; + const centerY = 26; + const morphDistortion = (val: number) => morphProgress * val * morphIntensity; + + return ( +
+ + {/* Main circles with morph effect */} + + + + + {/* Zap/electrical effect overlay */} + {zapEffect && ( + + + + + )} + + + + + + + + + + + + + + + + +
+ ); +}; + +export { AnimatedCompanyLogo }; + +const HomeView = () => { + // Add state for FAQ items collapse state + const [openFAQs, setOpenFAQs] = React.useState([]); + + // Function to toggle FAQ item open/closed state + const toggleFAQ = (index: number) => { + setOpenFAQs((prev) => + prev.includes(index) + ? prev.filter((item) => item !== index) + : [...prev, index], + ); + }; + + // FAQ contents with random text + const faqItems = [ + { + question: `What services do you offer?`, + answer: `4Markdown offers a complete suite of document creation and organization tools. Our primary services include an AI-powered markdown editor with live preview, interactive mindmaps that integrate with your documents, automated document formatting, collaborative editing features, and AI writing assistance. We also provide educational resources and templates to help you get the most out of markdown formatting.`, + }, + { + question: `How long does a typical project take?`, + answer: `The time to complete a project in 4Markdown varies depending on complexity and size. Most users can create basic documents in minutes, while complex documents with extensive mindmaps might take a few hours. Our AI assistance can significantly reduce your writing time by up to 40%. The platform is designed for efficiency, with features like templates and keyboard shortcuts that help streamline your workflow.`, + }, + { + question: `Do you offer ongoing support after project completion?`, + answer: `Yes, we offer comprehensive ongoing support for all 4Markdown users. Our support includes access to our knowledge base, video tutorials, community forums, and direct customer support via email. Premium users receive priority support with faster response times. We also regularly update our platform with new features and improvements based on user feedback, ensuring that your 4Markdown experience continues to evolve and improve over time.`, + }, + { + question: `What is your pricing structure?`, + answer: `4Markdown operates on a token-based pricing model. We offer three main pricing tiers: Starter (100 tokens for $2.50), Popular (1,000 tokens for $15), and Professional (10,000 tokens for $99). Basic document creation is free, while tokens are consumed when using premium features like AI writing assistance, advanced mindmap creation, and collaborative tools. This flexible approach allows you to pay only for the features you actually use, making it cost-effective for both occasional and power users.`, + }, + { + question: `How do we get started working together?`, + answer: `Getting started with 4Markdown is simple. Just create a free account on our platform, which gives you immediate access to the basic document editor and mindmap tools. You can start creating documents right away without any token purchases. To access premium features, purchase a token package that suits your needs. We also offer a comprehensive onboarding guide and tutorial videos to help new users become familiar with all the features. For teams and organizations, we provide customized onboarding sessions upon request.`, + }, + ]; + + return ( + <> + + + Document Creator + + + Mindmap Creator + + + Education Zone + + + +
+
+

+ Animated Logo Test +

+
+
+ +

+ Default settings +

+
+
+ +

+ Fast rotation +

+
+
+ +

+ Pulse only +

+
+
+
+ Based on brain settings: Base Rotation={0.0092}, Zap Frequency=10, + Zap Intensity=1.37, Zap Duration=2s, Morph Intensity=0.8 +
+
+
+ {/* Hero Section */} +
+
+

+ Your AI-Powered Markdown & Mindmap Workspace +

+

+ Create beautiful documents, visualize ideas with mindmaps, and + accelerate your writing with AI assistance—all in one seamless + workspace. +

+ + Start Writing for Free + +
+
+
+ +
+
+

+ See 4Markdown in Action +

+

+ Discover how our editor, mindmap, and AI tools work together +

+
+
+
+
+
+ + {/* How It Works Section */} +
+
+

+ How It Works +

+

+ Get started with 4Markdown in just a few simple steps +

+ +
+ {/* Step connector lines (hidden on mobile) */} +
+ + {/* Step 1 */} +
+
+ + 1 + +
+
+

+ Create +

+
+
+
+
+
+
+
+
+ + # + + + My Document + +
+
+ Start writing your content with our intuitive editor... +
+
+
+

+ Begin writing in our intuitive markdown editor with live + preview +

+
+
+ + {/* Step 2 */} +
+
+ + 2 + +
+
+

+ Organize +

+
+
+
+ Main Idea +
+
+
+
+ Topic 1 +
+
+
+ Topic 2 +
+
+
+
+
+

+ Transform text into interactive mindmaps with a single click +

+
+
+ + {/* Step 3 */} +
+
+ + 3 + +
+
+

+ Enhance +

+
+
+
+
+
+
+
+
+
+
+ AI Suggestion: +
+
+ Consider rephrasing this sentence for clarity... +
+
+
+
+

+ Let our AI tools polish your writing and suggest improvements +

+
+
+ + {/* Step 4 */} +
+
+ + 4 + +
+
+

+ Share +

+
+
+
+
+ PDF +
+
+ HTML +
+
+ Word +
+
+ Image +
+
+
+ Export & Share +
+
+
+

+ Export to multiple formats or share directly with colleagues +

+
+
+
+ +
+ + Try 4Markdown Now + +
+
+
+ + {/* Features Section */} +
+
+

+ Powerful Features +

+

+ Everything you need to create, organize, and enhance your thoughts +

+ +
+ {/* Feature 1 */} +
+
+ 📝 +
+

+ Markdown Documents +

+

+ Create beautiful documents with our intuitive markdown editor + featuring live preview and formatting tools. +

+
+ + {/* Feature 2 */} +
+
+ 🔄 +
+

+ Mindmap Generator +

+

+ Visualize your ideas with interactive mindmaps that integrate + seamlessly with your documents. +

+
+ + {/* Feature 3 */} +
+
+ 🤖 +
+

+ AI Assistance +

+

+ Let AI help you write better with grammar checks, style + suggestions, and idea expansion capabilities. +

+
+
+
+
+ + {/* Feature Comparison Section */} +
+
+

+ Why Choose 4Markdown? +

+

+ See how we compare to other solutions +

+ + {/* Comparison table - desktop version */} +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Features + +
+ 4Markdown + + Recommended + +
+ 		+ Traditional Markdown Editors + + Note-taking Apps +
+ Markdown Support + +
+ + Full syntax + extensions + + + + +
+ 		+ Basic/Standard + + Limited/None +
+ Visual Mindmapping + +
+ + Built-in, bidirectional + + + + +
+ 		+ None/Plugin required + + Limited +
+ AI Assistance + +
+ + Grammar, style, expansion + + + + +
+ 		+ None + + Basic/None +
+ Export Options + +
+ + 10+ formats + + + + +
+ 		+ 2-5 formats + + Limited +
+ Pricing Model + +
+ + Freemium + token-based + + + + +
+ 		+ Subscription/One-time + + Subscription +
+
+ + {/* Comparison cards - mobile version */} +
+ {/* 4Markdown Card */} +
+
+

+ 4Markdown +

+

Recommended

+
+
+
+ + + +
+

+ Markdown Support +

+

+ Full syntax + extensions +

+
+
+
+ + + +
+

+ Visual Mindmapping +

+

+ Built-in, bidirectional +

+
+
+
+ + + +
+

AI Assistance

+

+ Grammar, style, expansion +

+
+
+
+ + + +
+

+ Export Options +

+

+ 10+ formats +

+
+
+
+ + + +
+

Pricing Model

+

+ Freemium + token-based +

+
+
+
+
+ + {/* Other Editors Brief Comparison */} +
+

+ Other Solutions +

+ +
+
+

+ Traditional Markdown Editors +

+
    +
  • + + + + No built-in mindmapping +
    • +
  • + + + + Limited or no AI assistance +
    • +
+
+ +
+

+ Note-taking Apps +

+
    +
  • + + + + Limited markdown support +
    • +
  • + + + + Higher monthly subscription costs +
    • +
+
+
+
+
+ +
+ + Get Started + +
+
+
+ + {/* Getting Started Guide Section */} +
+
+

+ Get Started in Minutes +

+

+ Follow these simple steps to begin your markdown journey +

+ +
+
+
+ + + +
+

+ 1. Create an Account +

+

+ Sign up for free and get access to basic features immediately. + No credit card required. +

+ + Sign up free + + + + +
+ +
+
+ + + +
+

+ 2. Customize Your Workspace +

+

+ Set up your preferences, choose themes, and configure keyboard + shortcuts to match your workflow. +

+ + Explore settings + + + + +
+ +
+
+ + + +
+

+ 3. Create Your First Document +

+

+ Start writing in Markdown or import existing files. Our editor + supports all standard Markdown syntax. +

+ + View tutorial + + + + +
+
+ +
+
+
+

+ Need Help Getting Started? +

+

+ Check out our comprehensive documentation and video tutorials + to master 4Markdown and boost your productivity. +

+
+ + + + + Documentation + + + + + + Video Tutorials + + + + + + Community Forum + +
+
+
+
+
+
+
+
+
+
+ + # Welcome to 4Markdown + +
+
+ + Start typing here... + +
+ | +
+
+
+
+
+
+
+ + {/* Pricing Section */} +
+
+

+ Token Pricing +

+

+ Purchase tokens for premium features like AI-powered writing and + mindmap expansion +

+ +
+ {/* Pricing Option 1 */} +
+

+ Starter +

+

+ 100 +

+

+ $2.50 +

+ +
+ + {/* Pricing Option 2 */} +
+

+ Popular +

+

+ 1,000 +

+

+ $15 +

+ +
+ + {/* Pricing Option 3 */} +
+

+ Professional +

+

+ 10,000 +

+

+ $99 +

+ +
+
+
+
+ + {/* Testimonials Section */} +
+
+

+ What Our Users Say +

+

+ Join thousands of writers and thinkers who love 4Markdown +

+ +
+ {/* Testimonial 1 */} +
+

+ “The combination of markdown editing and mindmapping has + completely transformed my workflow. I use 4Markdown for + everything from blog posts to project planning.” +

+
+
+ JD +
+
+

Jane Doe

+

+ Content Creator +

+
+
+
+ + {/* Testimonial 2 */} +
+

+ “The AI writing suggestions are incredibly accurate. + It’s like having a writing coach watching over my + shoulder, but without the pressure!” +

+
+
+ MS +
+
+

Mark Smith

+

+ Technical Writer +

+
+
+
+
+
+
+ + {/* FAQ Section */} +
+
+

+ Frequently Asked Questions +

+

+ Find answers to common questions about our services and products. +

+ +
+ {faqItems.map((faq, index) => ( +
+ + +
+

+ {faq.answer} +

+
+
+ ))} +
+
+
+ + {/* CTA Section */} +
+
+

+ See 4Markdown in Action +

+

+ Watch how our editor, mindmap, and AI tools work together +

+ + Start Writing for Free + +
+
+ + + + ); +}; + +export { HomeView }; diff --git a/src/pages/home.tsx b/src/pages/home.tsx new file mode 100644 index 000000000..9f5de5c86 --- /dev/null +++ b/src/pages/home.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import type { HeadFC } from 'gatsby'; +import Meta from 'components/meta'; +import { meta } from '../../meta'; +import LogoThumbnail from 'images/logo-thumbnail.png'; +import { HomeView } from 'features/home/home.view'; + +const HomePage = () => { + return ( +
+ +
+ ); +}; + +export default HomePage; + +export const Head: HeadFC = () => { + return ( + + ); +}; From beb331280d7c4818de16a97ff2cfc61ab349c0dc Mon Sep 17 00:00:00 2001 From: kpdve Date: Thu, 17 Apr 2025 17:39:52 +0200 Subject: [PATCH 2/3] feat(app)--home-page --- src/features/home/home.view.tsx | 82 --------------------------------- 1 file changed, 82 deletions(-) diff --git a/src/features/home/home.view.tsx b/src/features/home/home.view.tsx index 2d05e1586..1a1dff3d2 100644 --- a/src/features/home/home.view.tsx +++ b/src/features/home/home.view.tsx @@ -57,7 +57,6 @@ const AnimatedCompanyLogo = ({ setScale(pulseVal); } - // Less frequent zap effect if (zapEffect && currentTime - lastZapTime > 3000) { // Only trigger every 3 seconds if (Math.random() < 0.3) { @@ -260,59 +259,6 @@ const HomeView = () => { -
-
-

- Animated Logo Test -

-
-
- -

- Default settings -

-
-
- -

- Fast rotation -

-
-
- -

- Pulse only -

-
-
-
- Based on brain settings: Base Rotation={0.0092}, Zap Frequency=10, - Zap Intensity=1.37, Zap Duration=2s, Morph Intensity=0.8 -
-
-
- {/* Hero Section */}

@@ -330,36 +276,8 @@ const HomeView = () => { Start Writing for Free

-
-
- -
-
-

- See 4Markdown in Action -

-

- Discover how our editor, mindmap, and AI tools work together -

-
-
-
-
- {/* How It Works Section */}

From 7d1e16e2c83251fb07c5cab3920452dd583afdbc Mon Sep 17 00:00:00 2001 From: kpdve Date: Thu, 17 Apr 2025 17:41:55 +0200 Subject: [PATCH 3/3] feat(app)--remove-logo-component --- src/features/home/home.view.tsx | 202 -------------------------------- 1 file changed, 202 deletions(-) diff --git a/src/features/home/home.view.tsx b/src/features/home/home.view.tsx index 1a1dff3d2..bee5c7a3c 100644 --- a/src/features/home/home.view.tsx +++ b/src/features/home/home.view.tsx @@ -3,210 +3,9 @@ import { AppFooterContainer } from 'containers/app-footer.container'; import { Link } from 'gatsby'; import React from 'react'; -interface AnimatedCompanyLogoProps { - className?: string; - size: number; - animationSpeed?: number; - rotationSpeed?: number; - pulseIntensity?: number; - zapEffect?: boolean; - morphIntensity?: number; - continuous?: boolean; -} - -const AnimatedCompanyLogo = ({ - className, - size = 32, - animationSpeed = 1, - rotationSpeed = 0.0092, - pulseIntensity = 1.37, - zapEffect = true, - morphIntensity = 0.8, - continuous = true, -}: AnimatedCompanyLogoProps) => { - const [rotation, setRotation] = React.useState(0); - const [scale, setScale] = React.useState(1); - const [zapOpacity, setZapOpacity] = React.useState(0); - const [morphProgress, setMorphProgress] = React.useState(0); - const [isVisible, setIsVisible] = React.useState(false); - - React.useEffect(() => { - // Add a small delay before starting animations to prevent flash - const visibilityTimer = setTimeout(() => { - setIsVisible(true); - }, 100); - - let animationFrame: number; - let startTime = Date.now(); - let lastZapTime = Date.now(); - - const animate = () => { - const currentTime = Date.now(); - const deltaTime = (currentTime - startTime) * 0.001 * animationSpeed; - startTime = currentTime; - - // Smooth rotation - if (rotationSpeed > 0) { - setRotation((prev) => (prev + rotationSpeed * deltaTime * 360) % 360); - } - - // Smoother pulse effect - if (pulseIntensity > 0) { - const pulseVal = - Math.sin(currentTime * 0.001 * pulseIntensity) * 0.05 + 1; - setScale(pulseVal); - } - - if (zapEffect && currentTime - lastZapTime > 3000) { - // Only trigger every 3 seconds - if (Math.random() < 0.3) { - // Reduced probability - setZapOpacity(0.7); - setTimeout(() => setZapOpacity(0), 200); // Longer duration - lastZapTime = currentTime; - } - } - - // Smoother morph effect - if (morphIntensity > 0) { - const morphVal = - Math.sin(currentTime * 0.0005 * morphIntensity) * 0.5 + 0.5; - setMorphProgress(morphVal); - } - - animationFrame = requestAnimationFrame(animate); - }; - - if (continuous) { - animationFrame = requestAnimationFrame(animate); - } - - return () => { - clearTimeout(visibilityTimer); - if (animationFrame) { - cancelAnimationFrame(animationFrame); - } - }; - }, [ - animationSpeed, - rotationSpeed, - pulseIntensity, - zapEffect, - morphIntensity, - continuous, - ]); - - const centerX = 26; - const centerY = 26; - const morphDistortion = (val: number) => morphProgress * val * morphIntensity; - - return ( -
- - {/* Main circles with morph effect */} - - - - - {/* Zap/electrical effect overlay */} - {zapEffect && ( - - - - - )} - - - - - - - - - - - - - - - - -
- ); -}; - -export { AnimatedCompanyLogo }; - const HomeView = () => { - // Add state for FAQ items collapse state const [openFAQs, setOpenFAQs] = React.useState([]); - // Function to toggle FAQ item open/closed state const toggleFAQ = (index: number) => { setOpenFAQs((prev) => prev.includes(index) @@ -1322,7 +1121,6 @@ const HomeView = () => {

- {/* CTA Section */}