src/components/sections/about/AboutText.tsx

@@ -1,37 +1,67 @@
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
+import ScrollReveal from "@/components/ui/ScrollReveal";
 
 interface AboutTextProps {
-  title: string;
+  title?: string;
+  subheading?: string;
+  paragraphs?: string[];
   primaryButton?: { text: string; href: string };
   secondaryButton?: { text: string; href: string };
 }
 
+const defaultParagraphs = [
+  "We believe in pushing the boundaries of what's possible. Our team of dedicated professionals works tirelessly to bring innovative solutions to the forefront of the industry, ensuring that every project we undertake is a testament to our commitment to excellence.",
+  "With years of experience and a passion for design and technology, we have cultivated an environment where creativity thrives. We partner with our clients to understand their unique needs and deliver tailored experiences that resonate with their audiences.",
+  "Join us on our journey to redefine the standards of quality and performance. Together, we can build a future that is not only functional but also beautifully crafted."
+];
+
 const AboutText = ({
-  title,
-  primaryButton,
+  title = "About Us",
+  subheading = "Our Story and Vision",
+  paragraphs = defaultParagraphs,
+  primaryButton = { text: "Get in Touch", href: "#contact" },
   secondaryButton,
 }: AboutTextProps) => {
   return (
     <section aria-label="About section" className="py-20">
-      <div className="w-content-width mx-auto flex flex-col gap-3 items-center">
-        <TextAnimation
-          text={title}
-          variant="fade-blur"
-          gradientText={false}
-          tag="h2"
-          className="text-2xl md:text-5xl font-medium text-center leading-tight text-balance"
-        />
+      <div className="w-content-width mx-auto flex flex-col md:flex-row gap-12 md:gap-8 items-start">
+        <div className="flex flex-col gap-4 w-full md:w-1/2 sticky top-24">
+          {subheading && (
+            <div className="flex">
+              <span className="px-3 py-1 text-sm card rounded">{subheading}</span>
+            </div>
+          )}
+          <TextAnimation
+            text={title}
+            variant="fade-blur"
+            gradientText={false}
+            tag="h2"
+            className="text-4xl md:text-6xl font-medium leading-tight text-balance"
+          />
+        </div>
 
-        {(primaryButton || secondaryButton) && (
-          <div className="flex flex-wrap gap-3 justify-center mt-3">
-            {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary" />}
-            {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />}
-          </div>
-        )}
+        <div className="flex flex-col gap-6 w-full md:w-1/2">
+          {paragraphs.map((paragraph, index) => (
+            <ScrollReveal key={index} variant="fade" delay={index * 0.1}>
+              <p className="text-lg leading-relaxed text-foreground/80">
+                {paragraph}
+              </p>
+            </ScrollReveal>
+          ))}
+
+          {(primaryButton || secondaryButton) && (
+            <ScrollReveal variant="fade" delay={paragraphs.length * 0.1}>
+              <div className="flex flex-wrap gap-3 mt-4">
+                {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary" />}
+                {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />}
+              </div>
+            </ScrollReveal>
+          )}
+        </div>
       </div>
     </section>
   );
 };
 
-export default AboutText;
+export default AboutText;