update remotion video generation and styles

wheattoast11 · Nov 20, 2024 · 64fe7fb · 64fe7fb
1 parent 184a2eb
commit 64fe7fb
Show file tree

Hide file tree

Showing 4 changed files with 190 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -19,11 +19,8 @@ <h1>Intuition Labs</h1>
             <h2>Our Vision</h2>
             <p>Transforming enterprises through cutting-edge AI solutions and polymathic expertise</p>
             <div class="cta-container">
-                <button class="cta-button">Schedule Consultation</button>
-                <div class="zcal-inline-widget" data-zcal-options='{"showBackground":1}'>
-                    <a href="https://zcal.co/terminals">Schedule a meeting</a>
-                </div>
-                <a href="#manifesto" class="text-link">Read Our Manifesto</a>
+                <a href="https://zcal.co/terminals" class="cta-button">Schedule Consultation</a>
+                <a href="/manifesto.html" class="text-link">Read Our Manifesto</a>
             </div>
         </section>
 

diff --git a/manifesto.html b/manifesto.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Our Manifesto</title>
+    <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+    <canvas id="bg"></canvas>
+    <div id="app">
+        <header>
+            <a href="/" class="back-link">← Back to Home</a>
+            <h1>Our Manifesto</h1>
+            <p class="tagline">Shaping the future of AI with purpose and responsibility</p>
+        </header>
+
+        <section class="section manifesto-content">
+            <div class="manifesto-grid">
+                <div class="manifesto-item">
+                    <h2>Purpose</h2>
+                    <p>We believe AI should augment human capabilities, not replace them. Our mission is to create AI systems that enhance human potential while maintaining ethical boundaries and promoting sustainable innovation.</p>
+                </div>
+
+                <div class="manifesto-item">
+                    <h2>Innovation</h2>
+                    <p>True innovation comes from understanding both the technical and human aspects of AI. We combine cutting-edge technology with deep industry knowledge to create solutions that matter.</p>
+                </div>
+
+                <div class="manifesto-item">
+                    <h2>Ethics</h2>
+                    <p>We are committed to developing AI systems that are transparent, fair, and accountable. Our ethical framework ensures that every solution we create considers its impact on society and individuals.</p>
+                </div>
+
+                <div class="manifesto-item">
+                    <h2>Collaboration</h2>
+                    <p>The best solutions emerge from diverse perspectives. We work closely with our clients, fostering partnerships that drive meaningful transformation and sustainable growth.</p>
+                </div>
+            </div>
+
+            <div class="principles">
+                <h2>Our Guiding Principles</h2>
+                <ul class="experience-list">
+                    <li>Human-centered AI development that prioritizes user needs and experiences</li>
+                    <li>Continuous learning and adaptation to emerging technologies and methodologies</li>
+                    <li>Transparent communication and collaboration with stakeholders</li>
+                    <li>Sustainable and responsible AI implementation practices</li>
+                    <li>Commitment to diversity, equity, and inclusion in AI development</li>
+                </ul>
+            </div>
+        </section>
+
+        <footer>
+            <div class="social-links">
+                <a href="#linkedin">LinkedIn</a>
+                <a href="#github">GitHub</a>
+                <a href="#twitter">Twitter</a>
+            </div>
+            <p class="copyright">© 2024 Intuition Labs LLC. Pioneering the future of AI.</p>
+        </footer>
+    </div>
+    <script type="module" src="/main.jsx"></script>
+</body>
+</html>
diff --git a/src/Video.jsx b/src/Video.jsx
@@ -5,6 +5,22 @@ import { createNoise4D } from 'simplex-noise';
 
 const BackgroundAnimation = () => {
   const noise4D = createNoise4D();
+  const [dimensions, setDimensions] = React.useState({
+    width: window.innerWidth,
+    height: window.innerHeight
+  });
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      setDimensions({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
 
   React.useEffect(() => {
     const canvas = document.getElementById('remotionCanvas');
@@ -13,16 +29,16 @@ const BackgroundAnimation = () => {
     const ctx = canvas.getContext('2d');
     let animationFrame;
     let particles = Array.from({ length: 100 }, () => ({
-      x: Math.random() * window.innerWidth,
-      y: Math.random() * window.innerHeight,
+      x: Math.random() * dimensions.width,
+      y: Math.random() * dimensions.height,
       size: Math.random() * 2 + 1,
       speedX: (Math.random() - 0.5) * 0.5,
       speedY: (Math.random() - 0.5) * 0.5
     }));
 
     const animate = (time) => {
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight;
+      canvas.width = dimensions.width;
+      canvas.height = dimensions.height;
 
       // Create gradient background
       const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
@@ -79,7 +95,7 @@ const BackgroundAnimation = () => {
         cancelAnimationFrame(animationFrame);
       }
     };
-  }, []);
+  }, [dimensions]);
 
   return (
     <AbsoluteFill style={{ background: 'transparent' }}>
@@ -97,12 +113,29 @@ const BackgroundAnimation = () => {
 };
 
 export const RemotionVideo = () => {
+  const [dimensions, setDimensions] = React.useState({
+    width: window.innerWidth,
+    height: window.innerHeight
+  });
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      setDimensions({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   return (
     <Player
       component={BackgroundAnimation}
       durationInFrames={300}
-      compositionWidth={1920}
-      compositionHeight={1080}
+      compositionWidth={dimensions.width}
+      compositionHeight={dimensions.height}
       fps={30}
       style={{
         width: '100%',

diff --git a/style.css b/style.css
@@ -389,6 +389,90 @@ footer {
     letter-spacing: 0.01em;
 }
 
+/* Add to existing style.css */
+.back-link {
+    display: inline-block;
+    color: var(--text);
+    text-decoration: none;
+    opacity: 0.8;
+    margin-bottom: 2rem;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+    letter-spacing: 0.02em;
+}
+
+.back-link:hover {
+    opacity: 1;
+    color: var(--glow);
+    transform: translateX(-3px);
+}
+
+.manifesto-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 4rem;
+    margin-bottom: 6rem;
+}
+
+.manifesto-item {
+    position: relative;
+    padding: 2rem;
+    background: var(--card-bg);
+    border: 1px solid rgba(255, 255, 255, 0.03);
+    border-radius: 2px;
+    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.manifesto-item:hover {
+    transform: translateY(-3px);
+    background: var(--hover);
+    border-color: var(--glow);
+}
+
+.manifesto-item h2 {
+    font-size: 2rem;
+    margin-bottom: 1.5rem;
+}
+
+.manifesto-item p {
+    font-size: 1.1rem;
+    line-height: 1.7;
+    opacity: 0.9;
+    letter-spacing: -0.01em;
+}
+
+.principles {
+    margin-top: 8rem;
+    padding: 3rem;
+    background: var(--card-bg);
+    border: 1px solid rgba(255, 255, 255, 0.03);
+    border-radius: 2px;
+}
+
+.principles h2 {
+    margin-bottom: 3rem;
+}
+
+@media (max-width: 768px) {
+    .manifesto-grid {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+    }
+
+    .manifesto-item {
+        padding: 1.5rem;
+    }
+
+    .manifesto-item h2 {
+        font-size: 1.75rem;
+    }
+
+    .principles {
+        padding: 1.5rem;
+        margin-top: 4rem;
+    }
+}
+
 @keyframes fadeIn {
     to {
         opacity: 1;