color changes.

src/app/page.tsx

@@ -8,13 +8,31 @@ import Hero from "../components/Hero";
 
 export default async function Home() {
   return (
-    <div className="bg-gray-100 min-h-screen flex flex-col">
-      <Header /> 
-      <Hero />
-      <FeaturesSection />
-      <About />
-      <Contact />
-      <Footer />   
+    <div className="p-4 pt-16 mx-auto max-w-screen-md">
+    <h1 className="text-4xl font-bold mb-6 text-black">Welcome to Ballistic Builder</h1>
+    
+    <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+      <h2 className="text-2xl font-semibold mb-4 text-black">Build Your Next Project</h2>
+      <p className="text-gray-600 mb-4">
+        Create, customize, and manage your projects with our intuitive builder interface.
+      </p>
+      <a 
+        href="/builder" 
+        className="inline-block bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 transition-colors"
+      >
+        Get Started
+      </a>
     </div>
+
+    <div className="bg-white rounded-lg shadow-md p-6">
+      <h2 className="text-2xl font-semibold mb-4 text-black">Features</h2>
+      <ul className="list-disc list-inside text-gray-600 space-y-2">
+        <li>Easy-to-use interface</li>
+        <li>Customizable components</li>
+        <li>Real-time preview</li>
+        <li>Export functionality</li>
+      </ul>
+    </div>
+  </div>
   );
 }