-
+
K-Scale Labs
diff --git a/frontend/src/components/pages/PrivacyPolicy.tsx b/frontend/src/components/pages/PrivacyPolicy.tsx
index 34622182..87c8f9de 100644
--- a/frontend/src/components/pages/PrivacyPolicy.tsx
+++ b/frontend/src/components/pages/PrivacyPolicy.tsx
@@ -1,8 +1,10 @@
import React from "react";
+import Container from "@/components/ui/container";
+
const PrivacyPolicy: React.FC = () => {
return (
-
+
Privacy Policy
Last updated {new Date().toLocaleDateString()}
@@ -54,7 +56,7 @@ const PrivacyPolicy: React.FC = () => {
© 2024 K-Scale Labs. All Rights Reserved.
-
+
);
};
diff --git a/frontend/src/components/pages/TermsOfService.tsx b/frontend/src/components/pages/TermsOfService.tsx
index 97562272..91940b55 100644
--- a/frontend/src/components/pages/TermsOfService.tsx
+++ b/frontend/src/components/pages/TermsOfService.tsx
@@ -1,6 +1,8 @@
+import Container from "@/components/ui/container";
+
const TermsOfService = () => {
return (
-
+
Terms of Service
Last updated {new Date().toLocaleDateString()}
@@ -231,7 +233,7 @@ const TermsOfService = () => {
© 2024 K-Scale Labs. All Rights Reserved.
-
+
);
};
diff --git a/frontend/src/components/ui/PageHeader.tsx b/frontend/src/components/ui/PageHeader.tsx
index fab5248a..a214ab3d 100644
--- a/frontend/src/components/ui/PageHeader.tsx
+++ b/frontend/src/components/ui/PageHeader.tsx
@@ -19,6 +19,9 @@ const PageHeader = ({ children }: Props) => {
const fakeMouseAngleRef = useRef(0);
const isRealMouseActiveRef = useRef(false);
+ const isMobile = window.innerWidth < 600;
+ const cellSize = isMobile ? 3 : 5;
+
// Initialize grid with R-pentomino pattern and random points
const initializeGrid = useCallback((rows: number, cols: number) => {
const grid = Array(rows)
@@ -42,14 +45,32 @@ const PageHeader = ({ children }: Props) => {
});
});
- // Add random points (1% of cells)
- const numberOfRandomPoints = Math.floor(cols * rows * 0.01);
+ // Add more random points (10% of cells)
+ const numberOfRandomPoints = Math.floor(cols * rows * 0.1);
for (let i = 0; i < numberOfRandomPoints; i++) {
const randomX = Math.floor(Math.random() * cols);
const randomY = Math.floor(Math.random() * rows);
grid[randomY][randomX] = true;
}
+ // Add additional clusters of points
+ const numberOfClusters = Math.floor((cols * rows) / 2000);
+ for (let i = 0; i < numberOfClusters; i++) {
+ const clusterX = Math.floor(Math.random() * cols);
+ const clusterY = Math.floor(Math.random() * rows);
+ const clusterSize = Math.floor(Math.random() * 5) + 3;
+
+ for (let dy = -clusterSize; dy <= clusterSize; dy++) {
+ for (let dx = -clusterSize; dx <= clusterSize; dx++) {
+ if (Math.random() < 0.4) {
+ const x = (clusterX + dx + cols) % cols;
+ const y = (clusterY + dy + rows) % rows;
+ grid[y][x] = true;
+ }
+ }
+ }
+ }
+
return grid;
}, []);
@@ -170,22 +191,30 @@ const PageHeader = ({ children }: Props) => {
const ctx = canvas.getContext("2d");
if (!ctx) return;
- // Responsive cell size
- const isMobile = window.innerWidth < 600;
- const cellSize = isMobile ? 3 : 5;
+ // Move canvas setup into a separate function
+ const setupCanvas = () => {
+ const containerWidth =
+ canvas.parentElement?.clientWidth || window.innerWidth;
+ const viewportHeight = window.innerHeight;
+ const cols = Math.floor(containerWidth / cellSize);
+ const rows = Math.floor((viewportHeight * 0.4) / cellSize);
+
+ canvas.width = cols * cellSize;
+ canvas.height = rows * cellSize;
- // Set canvas size
- const containerWidth =
- canvas.parentElement?.clientWidth || window.innerWidth;
- const viewportHeight = window.innerHeight;
- const cols = Math.floor(containerWidth / cellSize);
- const rows = Math.floor((viewportHeight * 0.4) / cellSize);
+ // Reinitialize grid when canvas is resized
+ gridRef.current = initializeGrid(rows, cols);
+ };
- canvas.width = cols * cellSize;
- canvas.height = rows * cellSize;
+ // Initial setup
+ setupCanvas();
+
+ // Add resize handler
+ const handleResize = () => {
+ setupCanvas();
+ };
- // Initialize grid
- gridRef.current = initializeGrid(rows, cols);
+ window.addEventListener("resize", handleResize);
const animate = () => {
// Draw current state
@@ -210,7 +239,7 @@ const PageHeader = ({ children }: Props) => {
if (!isRealMouseActiveRef.current) {
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
- const radiusX = Math.min(canvas.width * 0.33, 200);
+ const radiusX = Math.min(canvas.width * 0.45, 400);
const radiusY = Math.min(canvas.height * 0.3, 100);
targetPosRef.current = {
@@ -292,12 +321,13 @@ const PageHeader = ({ children }: Props) => {
}
canvas.removeEventListener("pointermove", handlePointerMove);
canvas.removeEventListener("pointerleave", handlePointerLeave);
+ window.removeEventListener("resize", handleResize); // Clean up resize listener
};
}, [initializeGrid, updateGrid, clearLineBetweenPoints]);
return (
-
-
+
+
{children}
);
diff --git a/frontend/src/components/ui/Skeleton.tsx b/frontend/src/components/ui/Skeleton.tsx
deleted file mode 100644
index 2cdf440d..00000000
--- a/frontend/src/components/ui/Skeleton.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { cn } from "@/lib/utils";
-
-function Skeleton({
- className,
- ...props
-}: React.HTMLAttributes
) {
- return (
-
- );
-}
-
-export { Skeleton };
+