From 096620a437569ee23a4a9ad38ee4470ea5d1e7d9 Mon Sep 17 00:00:00 2001
From: DJ Keiran <100867528+keiranchippendaleuk@users.noreply.github.com>
Date: Sun, 7 Dec 2025 22:52:57 +0000
Subject: [PATCH] fixed issue #90 a better warning to users that code edit is
 still in development

---
 components/common/Ribbon.jsx       | 67 +++++++++++++++++----------
 components/pages/download/index.js | 72 +++++++++++++++++++++++++++---
 components/pages/home/index.js     |  6 ++-
 3 files changed, 113 insertions(+), 32 deletions(-)

diff --git a/components/common/Ribbon.jsx b/components/common/Ribbon.jsx
index 5494ee5..4c60533 100644
--- a/components/common/Ribbon.jsx
+++ b/components/common/Ribbon.jsx
@@ -1,38 +1,59 @@
+/**
+ * Beta Warning Ribbon (Enhanced visibility)
+ * Updated to be more eye-catching with a subtle flash and bolder text
+ * so users clearly notice the beta status (Issue #90).
+ */
+
 import React from "react";
 import styled, { keyframes } from "styled-components";
 
 const ribbonDrop = keyframes`
-  0% {
-      transform: translateY(-100%);
-  }
-  100% {
-      transform: translateY(0);
-  }
+  0% { transform: translateY(-100%); }
+  100% { transform: translateY(0); }
+`;
+
+/* Slight flashing effect (brightness pulse) */
+const flash = keyframes`
+  0% { filter: brightness(1); }
+  50% { filter: brightness(1.25); }
+  100% { filter: brightness(1); }
 `;
+
 const RibbonWrap = styled.div`
-  --ribbon-background-color: #0071e3;
-  --ribbon-text-color: #fff;
-  --ribbon-link-color: #fff;
-  --ribbon-focus-color: rgba(255,255,255,0.6);
   overflow: hidden;
-  ${({ onClick }) => onClick ? `cursor: pointer;` : ``}
+  ${({ onClick }) => (onClick ? "cursor: pointer;" : "")}
 `;
+
 const RibbonDrop = styled.div`
-  animation: ${ribbonDrop} 0.8s cubic-bezier(0.42, 0, 0.58, 1) forwards;
+  animation: ${ribbonDrop} 0.7s ease forwards;
 `;
+
 const RibbonContentWrapper = styled.div`
-  background-color: var(--ribbon-background-color);
-  padding-top: 0.94118em;
-  padding-bottom: 0.94118em;
+  background: linear-gradient(
+    90deg,
+    #0a84ff 0%,
+    #1d4ed8 50%,
+    #2563eb 100%
+  );
+  padding: 1rem 0;
   text-align: center;
+
+  /* soft blue glow */
+  box-shadow: 0 4px 18px rgba(30, 100, 255, 0.35);
+  backdrop-filter: blur(6px);
+
+  /* FLASH effect added here */
+  animation: ${flash} 2s ease-in-out infinite;
 `;
+
 const RibbonContent = styled.div`
-  color: var(--ribbon-text-color);
-  font-size: 14px;
-  line-height: 1.42859;
-  font-weight: 400;
-  letter-spacing: -.016em;
+  color: white;
+  font-size: 18px;
+  font-weight: 900;         /* MUCH bolder */
+  letter-spacing: 0.02em;
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+
+  text-shadow: 0 1px 4px rgba(0,0,0,0.4); /* clearer visibility */
 `;
 
 function Ribbon({ children, onClick, ...props }) {
@@ -40,13 +61,11 @@ function Ribbon({ children, onClick, ...props }) {
     <RibbonWrap onClick={onClick} {...props}>
       <RibbonDrop>
         <RibbonContentWrapper>
-          <RibbonContent>
-            {children}
-          </RibbonContent>
+          <RibbonContent>{children}</RibbonContent>
         </RibbonContentWrapper>
       </RibbonDrop>
     </RibbonWrap>
-  )
+  );
 }
 
 export default Ribbon;
diff --git a/components/pages/download/index.js b/components/pages/download/index.js
index efb1f67..cf2ef8a 100644
--- a/components/pages/download/index.js
+++ b/components/pages/download/index.js
@@ -1,10 +1,50 @@
-import React, { useEffect, useRef } from 'react';
-import styled from 'styled-components';
+/**
+ * Download Page + Beta Warning Banner
+ * Adds a friendly but noticeable warning so users understand
+ * that CodeEdit is still in development and some features may be incomplete.
+ */
+
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
 import { Column, Row, Section, Stack } from '@/components/common/layout';
 import Typography from '@/components/common/Typography';
 import Image from 'next/image';
 import Tile from '@/components/common/Tile';
 import { mediaQueries } from '@/styles/breakpoints';
+import config from '@/data/config';
+
+/* Warning banner flash animation */
+const flash = keyframes`
+  0% { filter: brightness(1); }
+  50% { filter: brightness(1.18); }
+  100% { filter: brightness(1); }
+`;
+
+/* Friendly, noticeable beta warning */
+const BetaWarning = styled.div`
+  background: linear-gradient(
+    90deg,
+    #0a84ff 0%,
+    #1d4ed8 50%,
+    #2563eb 100%
+  );
+  padding: 1rem 1.2rem;
+  border-radius: 12px;
+  text-align: center;
+  margin-top: 0.5rem;
+  margin-bottom: 1.8rem;
+
+  color: white;
+  font-size: 17px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+
+  box-shadow: 0 4px 18px rgba(30, 100, 255, 0.35);
+  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
+
+  animation: ${flash} 2.4s ease-in-out infinite;
+`;
 
 const StepTile = styled(Tile)`
   overflow: hidden;
@@ -28,11 +68,13 @@ const StepTile = styled(Tile)`
     }
   }
 `;
+
 const ProductIconWrap = styled.div`
   width: 128px;
   margin-left: auto;
   margin-right: auto;
 `;
+
 const StepNumber = styled.div`
   width: 1.75em;
   height: 1.75em;
@@ -43,6 +85,7 @@ const StepNumber = styled.div`
   font-size: 18px;
   border: 2.5px solid;
 `;
+
 const Download = styled.iframe`
   width: 0;
   height: 0;
@@ -58,10 +101,12 @@ export default function DownloadPage({ downloadUrl }) {
   return (
     <>
       <Download src={downloadUrl} />
+
       <Section contained gutterTop>
         <Row align="center" style={{ position: 'relative', zIndex: 1 }}>
           <Column width={{ md: 12, lg: 12 }}>
             <Stack gap={2} align="center">
+
               <ProductIconWrap>
                 <Image
                   width={128}
@@ -70,9 +115,16 @@ export default function DownloadPage({ downloadUrl }) {
                   alt="CodeEdit product icon"
                 />
               </ProductIconWrap>
+
               <Typography variant="headline-elevated">
                 Thanks for downloading CodeEdit!
               </Typography>
+
+              {/* NEW: Beta warning banner */}
+              <BetaWarning>
+                🚧 CodeEdit is still in development, some features may be incomplete or not final.
+              </BetaWarning>
+
               <Typography
                 variant="intro-elevated"
                 color="tertiary"
@@ -93,14 +145,17 @@ export default function DownloadPage({ downloadUrl }) {
           </Column>
         </Row>
       </Section>
+
       <Section contained gutterY>
         <Row gap>
+
+          {/* Step 1 */}
           <Column width={{ md: 12, lg: 4 }}>
             <StepTile>
               <Stack gap>
                 <StepNumber>1</StepNumber>
                 <Typography variant="eyebrow">
-                  Open CodeEdit disk image in Downloads
+                  Open the CodeEdit disk image in Downloads
                 </Typography>
                 <Image
                   width={200}
@@ -116,6 +171,8 @@ export default function DownloadPage({ downloadUrl }) {
               </Stack>
             </StepTile>
           </Column>
+
+          {/* Step 2 */}
           <Column width={{ md: 12, lg: 4 }}>
             <StepTile gap>
               <Stack gap>
@@ -127,7 +184,7 @@ export default function DownloadPage({ downloadUrl }) {
                   width={256}
                   height={149}
                   src="/drag-to-applications-folder.png"
-                  alt="Downloads folder"
+                  alt="Applications folder"
                   style={{
                     position: 'absolute',
                     left: '50%',
@@ -137,18 +194,20 @@ export default function DownloadPage({ downloadUrl }) {
               </Stack>
             </StepTile>
           </Column>
+
+          {/* Step 3 */}
           <Column width={{ md: 12, lg: 4 }}>
             <StepTile>
               <Stack gap>
                 <StepNumber>3</StepNumber>
                 <Typography variant="eyebrow">
-                  Add to dock, click to launch!
+                  Add to Dock, then click to launch!
                 </Typography>
                 <Image
                   width={400}
                   height={120}
                   src="/drag-to-dock.png"
-                  alt="Downloads folder"
+                  alt="macOS Dock"
                   style={{
                     position: 'absolute',
                     left: '50%',
@@ -158,6 +217,7 @@ export default function DownloadPage({ downloadUrl }) {
               </Stack>
             </StepTile>
           </Column>
+
         </Row>
       </Section>
     </>
diff --git a/components/pages/home/index.js b/components/pages/home/index.js
index e386eff..ff70eee 100644
--- a/components/pages/home/index.js
+++ b/components/pages/home/index.js
@@ -16,8 +16,10 @@ import Head from 'next/head';
 export default function HomePage(props) {
   return (
     <>
-      <Ribbon onClick={() => window.open(config.links.githubProject)}>
-        CodeEdit is currently in development. Check out the roadmap.
+      <Ribbon
+        onClick={() => window.open(config.links.githubProject)}
+      >
+        ✨ CodeEdit is still growing, Some features are in development. Check the roadmap →
       </Ribbon>
       <HeroSection {...props} />
       <IntroFeaturesSection />