src/App.tsx

@@ -6,6 +6,7 @@ import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
 import NavbarCentered from '@/components/ui/NavbarCentered';
 import PricingHighlightedCards from '@/components/sections/pricing/PricingHighlightedCards';
 import TeamGlassCards from '@/components/sections/team/TeamGlassCards';
+import FreeTrialSignup from '@/components/sections/trial/FreeTrialSignup';
 import { CheckCircle2, Code, Database, Palette, Star, TrendingUp, Users, Volume2 } from "lucide-react";
 
 export default function App() {
@@ -116,6 +117,10 @@ export default function App() {
         />
       </div>
 
+      <div data-section="trial">
+        <FreeTrialSignup />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterBrand
           brand="LUMIS AI"

src/components/sections/trial/FreeTrialSignup.tsx

@@ -0,0 +1,52 @@
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+
+const FreeTrialSignup = () => {
+  return (
+    <section id="trial" className="py-20" style={{ backgroundColor: 'var(--background-accent)' }}>
+      <div className="flex flex-col items-center gap-8 mx-auto w-content-width">
+        <div className="flex flex-col items-center gap-3 md:gap-2 text-center px-5">
+          <TextAnimation
+            text="Start Your Free Trial Today"
+            variant="slide-up"
+            tag="h2"
+            className="text-5xl font-medium text-center text-balance"
+          />
+          <TextAnimation
+            text="No credit card required. Get instant access to our platform and start learning."
+            variant="slide-up"
+            tag="p"
+            className="md:max-w-8/10 text-lg leading-tight text-center"
+          />
+        </div>
+        <form className="flex flex-col md:flex-row items-center gap-4 w-full max-w-3xl px-5 md:px-0">
+          <input
+            type="text"
+            placeholder="Your Name"
+            className="w-full px-4 py-3 rounded border focus:outline-none focus:ring-2"
+            style={{ 
+              backgroundColor: 'var(--background)', 
+              color: 'var(--foreground)',
+              borderColor: 'color-mix(in srgb, var(--foreground) 20%, transparent)',
+              '--tw-ring-color': 'var(--primary-cta)'
+            }}
+          />
+          <input
+            type="email"
+            placeholder="Your Email"
+            className="w-full px-4 py-3 rounded border focus:outline-none focus:ring-2"
+            style={{ 
+              backgroundColor: 'var(--background)', 
+              color: 'var(--foreground)',
+              borderColor: 'color-mix(in srgb, var(--foreground) 20%, transparent)',
+              '--tw-ring-color': 'var(--primary-cta)'
+            }}
+          />
+          <Button text="Start Learning Free" href="#" variant="primary" className="w-full md:w-auto shrink-0" />
+        </form>
+      </div>
+    </section>
+  );
+};
+
+export default FreeTrialSignup;