Bob AI: Populate src/pages/TeamPage.tsx (snippet builder, 3 sections)

src/App.tsx

@@ -3,12 +3,18 @@ import HomePage from "@/pages/HomePage";
 import PlansPage from "@/pages/PlansPage";
 
 import AboutPage from "@/pages/AboutPage";
+import SubscriptionPage from "@/pages/SubscriptionPage";
+import ContactPage from "@/pages/ContactPage";
+import TeamPage from "@/pages/TeamPage";
 export default function App() {
   return (
     <Routes>
       <Route path="/" element={<HomePage />} />
       <Route path="/plans" element={<PlansPage />} />
       <Route path="/about" element={<AboutPage />} />
+      <Route path="/subscription" element={<SubscriptionPage />} />
+      <Route path="/contact" element={<ContactPage />} />
+      <Route path="/team" element={<TeamPage />} />
     </Routes>
   );
 }

src/index.css

@@ -15,8 +15,8 @@
   --accent: #15479c;
   --background-accent: #a8cce8;
 
-  /* @layout/border-radius/rounded */
-  --radius: 9999px;
+  /* @layout/border-radius/sharp */
+  --radius: 0px;
 
   /* @layout/content-width/medium */
   --width-content-width: clamp(40rem, 80vw, 100rem);
@@ -94,8 +94,8 @@
   /* Border Radius */
   --radius: var(--radius);
   --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: var(--radius);
+  --radius-sm: var(--radius);
 
   /* Width */
   --width-content-width: var(--width-content-width);
@@ -175,4 +175,4 @@ h6 {
     radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
     var(--color-secondary-cta);
   box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent);
-}
+}

src/pages/ContactPage.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+const ContactPage: React.FC = () => {
+  return (
+    <div className="flex min-h-screen flex-col bg-background text-foreground">
+      <NavbarCentered
+        logo="FlowSync"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Get Started", href: "/plans" }}
+      />
+
+      <main className="flex-grow pt-24">
+        <ContactSplitForm
+          tag="Contact Us"
+          title="Get in touch"
+          description="We'd love to hear from you! Fill out the form below and we'll get back to you as soon as possible."
+          inputs={[
+            { name: "name", type: "text", placeholder: "Your Name", required: true },
+            { name: "email", type: "email", placeholder: "your@email.com", required: true },
+          ]}
+          textarea={{ name: "message", placeholder: "Your message...", rows: 5, required: true }}
+          buttonText="Send Message"
+          imageSrc="https://images.unsplash.com/photo-1516387938699-a93567ec168e?auto=format&fit=crop&w=800&q=80"
+        />
+
+        <section className="py-20 bg-background">
+          <div className="w-content-width mx-auto px-4 md:px-0">
+            <div className="flex flex-col items-center gap-3 mb-12">
+              <span className="px-3 py-1 text-sm card rounded bg-background">Location</span>
+              <h2 className="text-4xl md:text-5xl font-medium text-center text-balance">Find Us on the Map</h2>
+            </div>
+            <div className="relative h-[500px] w-full overflow-hidden card rounded-lg shadow-lg">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.01891969062!2d-122.4194155846816!3d37.7749294797597!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085808e8f8f8f8f%3A0x8085808e8f8f8f8f!2sSan%20Francisco%2C%20CA!5e0!3m2!1sen!2sus!4v1678901234567!5m2!1sen!2sus"
+                width="100%"
+                height="100%"
+                style={{ border: 0 }}
+                allowFullScreen={false}
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+                title="Google Maps Location"
+              ></iframe>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      <FooterSimple
+        brand="FlowSync"
+        columns={[
+          { title: "Product", items: [{ label: "Features", href: "/#features" }, { label: "Pricing", href: "/plans" }] },
+          { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] },
+          { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
+        ]}
+        copyright="© 2024 FlowSync. All rights reserved."
+        links={[]}
+      />
+    </div>
+  );
+};
+
+export default ContactPage;

src/pages/SubscriptionPage.tsx

@@ -0,0 +1,125 @@
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import PricingCenteredCards from "@/components/sections/pricing/PricingCenteredCards";
+import FeaturesIconCards from "@/components/sections/features/FeaturesIconCards";
+import Button from "@/components/ui/Button";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+export default function SubscriptionPage() {
+  return (
+    <div className="flex flex-col min-h-screen bg-background text-foreground">
+      <NavbarCentered
+        logo="Webild"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Get Started", href: "/contact" }}
+      />
+      <main className="flex-grow">
+        <HeroBillboard
+          tag="Unlock Your Potential"
+          title="Flexible Plans for Every Goal"
+          description="Choose the perfect subscription to supercharge your productivity, creativity, and growth. No hidden fees, cancel anytime."
+          primaryButton={{ text: "View Plans", href: "#pricing" }}
+          secondaryButton={{ text: "Contact Sales", href: "/contact" }}
+          imageSrc="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1200&q=80"
+        />
+
+        <FeaturesIconCards
+          tag="Features"
+          title="What You Get With Every Plan"
+          description="Experience a suite of powerful tools designed to elevate your work and streamline your processes."
+          features={[
+            { icon: "Layers", title: "Unlimited Projects", description: "Create and manage as many projects as you need without any restrictions." },
+            { icon: "Headset", title: "Priority Support", description: "Get fast, dedicated help from our expert support team whenever you need it." },
+            { icon: "BarChart", title: "Advanced Analytics", description: "Gain deep insights into your performance with comprehensive reporting tools." },
+            { icon: "Users", title: "Team Collaboration", description: "Work seamlessly with your team members in real-time, anywhere in the world." },
+            { icon: "Cloud", title: "Secure Cloud Storage", description: "Keep your files safe and accessible with our encrypted cloud storage solution." },
+            { icon: "Puzzle", title: "Custom Integrations", description: "Connect your favorite tools and automate your workflow effortlessly." },
+          ]}
+        />
+
+        <div id="pricing">
+          <PricingCenteredCards
+            tag="Pricing"
+            title="Simple, Transparent Pricing"
+            description="Find the plan that fits your needs, whether you're an individual, a growing team, or an enterprise."
+            plans={[
+              {
+                tag: "Basic",
+                price: "$19/mo",
+                description: "Perfect for individuals getting started.",
+                features: ["Unlimited Projects", "Basic Analytics", "Community Support", "1GB Storage"],
+                primaryButton: { text: "Start Basic", href: "/signup/basic" },
+              },
+              {
+                tag: "Pro",
+                price: "$49/mo",
+                description: "Ideal for growing teams and professionals.",
+                features: ["Everything in Basic", "Advanced Analytics", "Priority Support", "100GB Storage", "Custom Integrations"],
+                primaryButton: { text: "Go Pro", href: "/signup/pro" },
+              },
+              {
+                tag: "Enterprise",
+                price: "Custom",
+                description: "Tailored solutions for large organizations.",
+                features: ["Everything in Pro", "Dedicated Account Manager", "Unlimited Storage", "SLA Guarantee", "On-Premise Options"],
+                primaryButton: { text: "Contact Sales", href: "/contact" },
+                secondaryButton: { text: "Learn More", href: "/about" },
+              },
+            ]}
+          />
+        </div>
+
+        <section className="py-20 bg-card text-foreground">
+          <div className="w-content-width mx-auto px-4 md:px-0">
+            <div className="flex flex-col items-center gap-3 md:gap-2 mb-12">
+              <span className="px-3 py-1 text-sm card rounded bg-background">FAQ</span>
+              <h2 className="text-4xl md:text-5xl font-medium text-center text-balance">Frequently Asked Questions</h2>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+              <div className="flex flex-col gap-2">
+                <h3 className="text-xl font-medium">Can I change my plan later?</h3>
+                <p className="text-base opacity-75">Yes, you can upgrade or downgrade your plan at any time from your account settings.</p>
+              </div>
+              <div className="flex flex-col gap-2">
+                <h3 className="text-xl font-medium">Do you offer a free trial?</h3>
+                <p className="text-base opacity-75">We offer a 14-day free trial on all our paid plans so you can experience the full features before committing.</p>
+              </div>
+              <div className="flex flex-col gap-2">
+                <h3 className="text-xl font-medium">What payment methods do you accept?</h3>
+                <p className="text-base opacity-75">We accept all major credit cards, PayPal, and wire transfers for annual enterprise plans.</p>
+              </div>
+              <div className="flex flex-col gap-2">
+                <h3 className="text-xl font-medium">Is my data secure?</h3>
+                <p className="text-base opacity-75">Absolutely. We use industry-standard encryption and regular security audits to ensure your data is always protected.</p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="py-24 bg-background text-foreground text-center">
+          <div className="w-content-width mx-auto flex flex-col items-center gap-6 px-4 md:px-0">
+            <h2 className="text-4xl md:text-5xl font-medium text-balance">Ready to Elevate Your Workflow?</h2>
+            <p className="text-lg opacity-75 max-w-2xl text-balance">
+              Join thousands of satisfied users who are transforming their productivity with our powerful platform.
+            </p>
+            <div className="mt-4">
+              <Button text="Choose Your Plan" href="#pricing" variant="primary" animate />
+            </div>
+          </div>
+        </section>
+      </main>
+
+      <FooterSimple
+        brand="Webild"
+        columns={[
+          { title: "Product", items: [{ label: "Features", href: "/#features" }, { label: "Pricing", href: "/plans" }] },
+          { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] },
+          { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
+        ]}
+        copyright="© 2024 Webild. All rights reserved."
+        links={[]}
+      />
+    </div>
+  );
+}

src/pages/TeamPage.tsx

@@ -0,0 +1,28 @@
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import TeamDetailedCards from "@/components/sections/team/TeamDetailedCards";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+export default function TeamPage() {
+  return (
+    <div className="flex flex-col min-h-screen bg-background text-foreground">
+      <NavbarCentered
+        logo="Brand"
+        navItems={[{"name":"Home","href":"/"},{"name":"About Us","href":"/about"},{"name":"Services","href":"/services"},{"name":"Our Team","href":"/team"},{"name":"Contact","href":"/contact"}]}
+        ctaButton={{"text":"Get in Touch","href":"/contact"}}
+      />
+      <TeamDetailedCards
+        tag="Our Leadership"
+        title="Meet the Visionaries Behind Brand"
+        description="At Brand, we believe in the power of people. Our dedicated team of founders and core leaders brings together diverse expertise, passion, and a shared commitment to innovation. Get to know the individuals driving our mission forward and shaping the future of our organization."
+        members={[{"name":"Alice Johnson","role":"Co-founder & CEO","description":"Alice is the strategic force behind Brand, guiding its vision and overall direction. With a background in business development and a passion for disruptive technology, she ensures our company remains at the forefront of innovation.","imageSrc":"https://images.unsplash.com/photo-1580489944761-15a19d654956?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTMzNXwwfDF8c2VhcmNofDEwfHxwcm9mZXNzaW9uYWwlMjB3b21hbiUyMHBvcnRyYWl0fGVufDB8fHx8MTcxNjY0ODkyM3ww&ixlib=rb-4.0.3&q=80&w=1080","socialLinks":[{"icon":"Linkedin","url":"/team/alice-johnson#linkedin"},{"icon":"Twitter","url":"/team/alice-johnson#twitter"}]},{"name":"Bob Williams","role":"Co-founder & CTO","description":"Bob leads our technological innovation, overseeing the development and architecture of our core products. His expertise in software engineering and commitment to cutting-edge solutions are pivotal to Brand's success.","imageSrc":"https://images.unsplash.com/photo-1560250097-0b93528c311a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTMzNXwwfDF8c2VhcmNofDEyfHxwcm9mZXNzaW9uYWwlMjBtYW4lMjBwb3J0cmFpdHxlbnwwfHx8fDE3MTY2NDg5MjN8MA&ixlib=rb-4.0.3&q=80&w=1080","socialLinks":[{"icon":"Linkedin","url":"/team/bob-williams#linkedin"},{"icon":"Twitter","url":"/team/bob-williams#twitter"}]},{"name":"Carol Davis","role":"Head of Product","description":"Carol is responsible for defining and executing Brand's product strategy. Her user-centric approach and deep understanding of market needs ensure we deliver solutions that truly resonate with our customers.","imageSrc":"https://images.unsplash.com/photo-1531123897727-8f129e1688ce?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTMzNXwwfDF8c2VhcmNofDE2fHxwcm9mZXNzaW9uYWwlMjB3b21hbiUyMHBvcnRyYWl0fGVufDB8fHx8MTcxNjY0ODkyM3ww&ixlib=rb-4.0.3&q=80&w=1080","socialLinks":[{"icon":"Linkedin","url":"/team/carol-davis#linkedin"},{"icon":"Twitter","url":"/team/carol-davis#twitter"}]},{"name":"David Lee","role":"Head of Marketing","description":"David spearheads our marketing efforts, crafting compelling narratives and strategies that connect Brand with our audience. His innovative campaigns and data-driven insights drive our growth and brand presence.","imageSrc":"https://images.unsplash.com/photo-1507003211169-e69fe1c5a3bb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTMzNXwwfDF8c2VhcmNofDIwfHxwcm9mZXNzaW9uYWwlMjBtYW4lMjBwb3J0cmFpdHxlbnwwfHx8fDE3MTY2NDg5MjN8MA&ixlib=rb-4.0.3&q=80&w=1080","socialLinks":[{"icon":"Linkedin","url":"/team/david-lee#linkedin"},{"icon":"Twitter","url":"/team/david-lee#twitter"}]}]}
+      />
+      <FooterSimple
+        brand="Brand"
+        columns={[{"title":"Company","items":[{"label":"About Us","href":"/about"},{"label":"Our Team","href":"/team"},{"label":"Careers","href":"/careers"},{"label":"Blog","href":"/blog"}]},{"title":"Resources","items":[{"label":"Support","href":"/support"},{"label":"FAQ","href":"/faq"},{"label":"Contact Us","href":"/contact"}]},{"title":"Legal","items":[{"label":"Privacy Policy","href":"/privacy"},{"label":"Terms of Service","href":"/terms"}]}]}
+        copyright="© 2024 Brand. All rights reserved."
+        links={[{"label":"LinkedIn","href":"/linkedin"},{"label":"Twitter","href":"/twitter"},{"label":"Facebook","href":"/facebook"}]}
+      />
+    </div>
+  );
+}

src/routes.ts

@@ -8,4 +8,7 @@ export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
   { path: '/plans', label: 'Plans', pageFile: 'PlansPage' },
   { path: '/about', label: 'About', pageFile: 'AboutPage' },
+  { path: '/subscription', label: 'Subscription', pageFile: 'SubscriptionPage' },
+  { path: '/contact', label: 'Contact', pageFile: 'ContactPage' },
+  { path: '/team', label: 'Team', pageFile: 'TeamPage' },
 ];