feat: add decorative FloatingNodes and SectionConnector components for Pro and Home pages, enhancing visual hierarchy and theme consistency

Author: pavanpodila

website/.vitepress/theme/HomePage.vue

@@ -8,11 +8,13 @@ import CtaSection from './components/CtaSection.vue';
 import DemoFrame from './components/DemoFrame.vue';
 import FeatureCard from './components/FeatureCard.vue';
 import FeatureSection from './components/FeatureSection.vue';
+import FloatingNodes from './components/FloatingNodes.vue';
 import FlutterBrand from './components/FlutterBrand.vue';
 import GridBackground from './components/GridBackground.vue';
 import HeroSection from './components/HeroSection.vue';
 import MarqueeGroup from './components/MarqueeGroup.vue';
 import Section from './components/Section.vue';
+import SectionConnector from './components/SectionConnector.vue';
 import SectionHeader from './components/SectionHeader.vue';
 import SiteFooter from './components/SiteFooter.vue';
 import WordFlipper from './components/WordFlipper.vue';
@@ -409,6 +411,9 @@ const heroBlinkCells = generateBlinkCells(20, 42);
     <!-- Canvas-based Grid Background with blinking cells -->
     <GridBackground color="blue" :blinkCells="heroBlinkCells" />
 
+    <!-- Decorative floating nodes -->
+    <FloatingNodes />
+
     <!-- Hero Section -->
     <HeroSection>
       <template #text>
@@ -508,9 +513,15 @@ const heroBlinkCells = generateBlinkCells(20, 42);
       </BentoGrid>
     </Section>
 
+    <!-- Section connector -->
+    <SectionConnector color="purple" />
+
     <!-- Marquee -->
     <MarqueeGroup :lines="marqueeLines" />
 
+    <!-- Section connector -->
+    <SectionConnector color="teal" />
+
     <!-- Use Cases Section -->
     <Section background>
       <SectionHeader

website/.vitepress/theme/ProPage.vue

@@ -3,11 +3,13 @@ import Badge from './components/Badge.vue';
 import CtaSection from './components/CtaSection.vue';
 import FeatureCard from './components/FeatureCard.vue';
 import FeatureSection from './components/FeatureSection.vue';
+import FloatingNodes from './components/FloatingNodes.vue';
 import FlutterBrand from './components/FlutterBrand.vue';
 import GridBackground from './components/GridBackground.vue';
 import HeroSection from './components/HeroSection.vue';
 import MarqueeGroup from './components/MarqueeGroup.vue';
 import Section from './components/Section.vue';
+import SectionConnector from './components/SectionConnector.vue';
 import SectionHeader from './components/SectionHeader.vue';
 import SelectProgramCard from './components/SelectProgramCard.vue';
 import SiteFooter from './components/SiteFooter.vue';
@@ -212,6 +214,9 @@ const marqueeLines = [
     <!-- Grid Background -->
     <GridBackground color="purple" :blinkCells="proBlinkCells" />
 
+    <!-- Floating decorative nodes -->
+    <FloatingNodes />
+
     <!-- Hero Section with centered variant -->
     <HeroSection variant="centered">
       <Badge icon="ph:crown-fill" color="purple">Pro Edition</Badge>
@@ -228,6 +233,9 @@ const marqueeLines = [
       </div>
     </HeroSection>
 
+    <!-- Connector: Hero to Features -->
+    <SectionConnector color="purple" />
+
     <!-- Pro Features Grid -->
     <Section first background>
       <SectionHeader
@@ -250,9 +258,15 @@ const marqueeLines = [
       </div>
     </Section>
 
+    <!-- Connector: Features to Marquee -->
+    <SectionConnector color="teal" />
+
     <!-- Marquee -->
     <MarqueeGroup :lines="marqueeLines" />
 
+    <!-- Connector: Marquee to Workflow -->
+    <SectionConnector color="purple" />
+
     <!-- Workflow Engine Section -->
     <Section background>
       <SectionHeader
@@ -281,6 +295,9 @@ const marqueeLines = [
       </div>
     </Section>
 
+    <!-- Connector: Workflow to CTA -->
+    <SectionConnector color="teal" />
+
     <!-- CTA Section -->
     <CtaSection
       badge="Partner With Us"

website/.vitepress/theme/components/Badge.vue

@@ -34,7 +34,7 @@ defineProps<{
 }
 
 .badge-line {
-  @apply h-12;
+  @apply h-20;
   width: 2px;
   background: repeating-linear-gradient(
     to bottom,
@@ -44,6 +44,8 @@ defineProps<{
     transparent 6px
   );
   opacity: 0.4;
+  mask-image: linear-gradient(to bottom, transparent, black 40%);
+  -webkit-mask-image: linear-gradient(to bottom, transparent, black 40%);
 }
 
 .badge-port-wrapper {

website/.vitepress/theme/components/FeatureCard.vue

@@ -18,6 +18,10 @@ defineProps<{
       layout === 'horizontal' ? 'feature-card-horizontal' : ''
     ]"
   >
+    <!-- Node ports -->
+    <div class="card-port card-port-left" :class="'card-port-' + color" />
+    <div class="card-port card-port-right" :class="'card-port-' + color" />
+
     <div class="feature-icon" :class="'feature-icon-' + color">
       <Icon :icon="icon" />
     </div>
@@ -32,7 +36,7 @@ defineProps<{
 @reference "../style.css";
 
 .feature-card {
-  @apply relative p-10 bg-white dark:bg-zinc-800 border border-slate-200/60 dark:border-zinc-500/40 rounded-2xl overflow-hidden;
+  @apply relative p-10 bg-white dark:bg-zinc-800 border border-slate-200/60 dark:border-zinc-500/40 rounded-2xl;
   transition: all 0.4s var(--vn-ease-out);
 }
 
@@ -87,4 +91,30 @@ defineProps<{
 .feature-desc {
   @apply text-base text-slate-600 dark:text-zinc-400 leading-relaxed;
 }
+
+/* Node-style ports on cards */
+.card-port {
+  @apply absolute w-2.5 h-2.5 rounded-full border-2;
+  @apply bg-white dark:bg-zinc-900;
+  @apply opacity-0 transition-opacity duration-300;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.feature-card:hover .card-port {
+  @apply opacity-100;
+}
+
+.card-port-left {
+  left: -5px;
+}
+
+.card-port-right {
+  right: -5px;
+}
+
+.card-port-blue { @apply border-blue-600 dark:border-blue-400; }
+.card-port-purple { @apply border-violet-500 dark:border-violet-400; }
+.card-port-teal { @apply border-teal-500 dark:border-teal-400; }
+.card-port-amber { @apply border-amber-500 dark:border-amber-400; }
 </style>