feat: Add marketing and use case pages, their data structures, and supporting UI components.

src/components/marketing/Hero.tsx

@@ -71,14 +71,16 @@ const FlippingCard = ({ front, back, delay }: { front: any, back: any, delay: nu
   );
 };
 
-interface HeroProps {
-  t: any; // i18n translation function
-}
-
-export const Hero: React.FC<HeroProps> = ({ t }) => {
-
-
-  const containerjs = {
+interface HeroProps {
+  t: any; // i18n translation function
+  headingAs?: 'h1' | 'div';
+}
+
+export const Hero: React.FC<HeroProps> = ({ t, headingAs = 'h1' }) => {
+  const HeadingTag = headingAs;
+
+
+  const containerjs = {
     hidden: { opacity: 0 },
     show: {
       opacity: 1,
@@ -124,12 +126,12 @@ export const Hero: React.FC<HeroProps> = ({ t }) => {
               transition={{ duration: 0.5 }}
               className="space-y-6"
             >
-              <h1 className="text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
-                {t.hero.title}
-              </h1>
-
-              <p className="text-xl text-gray-600 leading-relaxed max-w-2xl">
-                {t.hero.subtitle}
+              <HeadingTag className="text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
+                {t.hero.title}
+              </HeadingTag>
+
+              <p className="text-xl text-gray-600 leading-relaxed max-w-2xl">
+                {t.hero.subtitle}
               </p>
 
               <div className="space-y-3 pt-2">
@@ -207,4 +209,4 @@ export const Hero: React.FC<HeroProps> = ({ t }) => {
       <div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-b from-transparent to-gray-50 pointer-events-none" />
     </section >
   );
-};
+};