Add src/components/Home.tsx

2026-01-21 11:11:03 +00:00
parent 0eb870beb6
commit 299f49c5c5
1 changed files with 66 additions and 0 deletions
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+
+type BackgroundType = 'solid' | 'glass' | 'transparent';
+type BorderRadiusType = 'none' | 'small' | 'rounded' | 'large';
+type CardStyleType = 'minimal' | 'glass' | 'glass-elevated' | 'solid';
+type ButtonStyleType = 'solid' | 'glass' | 'outline';
+type TextAnimationType = 'none' | 'entrance-slide' | 'entrance-fade' | 'typing';
+
+interface HomeProps {
+  defaultTextAnimation?: TextAnimationType;
+  borderRadius?: BorderRadiusType;
+  background?: BackgroundType;
+  cardStyle?: CardStyleType;
+  primaryButtonStyle?: ButtonStyleType;
+  secondaryButtonStyle?: ButtonStyleType;
+}
+
+const Home: React.FC<HomeProps> = ({
+  defaultTextAnimation = "entrance-slide",  borderRadius = "rounded",  background = "glass",  cardStyle = "glass-elevated",  primaryButtonStyle = "solid",  secondaryButtonStyle = "glass"
+}) => {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
+      <div className="container mx-auto px-4 py-16">
+        <div className="text-center mb-16">
+          <h1 className="text-6xl font-bold text-white mb-6">
+            Welcome to Webild Components
+          </h1>
+          <p className="text-xl text-slate-300 max-w-3xl mx-auto">
+            A modern component library built with React and Tailwind CSS
+          </p>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
+            <h3 className="text-2xl font-semibold text-white mb-4">Modern Design</h3>
+            <p className="text-slate-300">
+              Beautiful, responsive components with glass morphism effects
+            </p>
+          </div>
+          
+          <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
+            <h3 className="text-2xl font-semibold text-white mb-4">TypeScript</h3>
+            <p className="text-slate-300">
+              Fully typed components for better developer experience
+            </p>
+          </div>
+          
+          <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
+            <h3 className="text-2xl font-semibold text-white mb-4">Customizable</h3>
+            <p className="text-slate-300">
+              Flexible theming system with multiple style variants
+            </p>
+          </div>
+        </div>
+        
+        <div className="text-center mt-16">
+          <button className="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-8 py-4 rounded-lg font-semibold hover:from-purple-600 hover:to-pink-600 transition-all duration-300 transform hover:scale-105">
+            Get Started
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Home;