add faq

src/app/contact/page.tsx

@@ -0,0 +1,33 @@
+import { CallToAction } from '@/components/CallToAction'
+import { Faqs } from '@/components/Faqs'
+import { Footer } from '@/components/Footer'
+import { Header_darkbg } from '@/components/Header_darkbg'
+import { HomeAbout } from '@/components/HomeAbout'
+import { Hero } from '@/components/Hero'
+import { Pricing } from '@/components/Pricing'
+import { PrimaryFeatures } from '@/components/PrimaryFeatures'
+import { SecondaryFeatures } from '@/components/SecondaryFeatures'
+import { Testimonials } from '@/components/Testimonials'
+import { HomePrinciples } from '@/components/HomePrinciples'
+import { HomeMilestones } from '@/components/HomeMilestones'
+import { HomeVentures } from '@/components/HomeVentures'
+import { Quote } from '@/components/Quote'
+import { AboutHero } from '@/components/AboutHero'
+import { AboutMission } from '@/components/AboutMission'
+import { AboutExperience } from '@/components/AboutExperience'
+import { ContactHero } from '@/components/ContactHero'
+
+export default function Contact() {
+  return (
+    <>
+      <Header_darkbg />
+      <main>
+        <ContactHero />
+        <Quote />
+        <CallToAction />
+        <Faqs />
+      </main>
+      <Footer />
+    </>
+  )
+}

src/components/ContactHero.tsx

@@ -0,0 +1,164 @@
+import { BuildingOffice2Icon, EnvelopeIcon, PhoneIcon } from '@heroicons/react/24/outline'
+
+export function ContactHero() {
+  return (
+    <div className="relative isolate bg-white">
+      <div className="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
+        <div className="relative px-6 pt-24 pb-20 lg:static lg:px-8 lg:py-32">
+          <div className="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
+            <div className="absolute inset-y-0 left-0 -z-10 w-full overflow-hidden bg-gray-100 ring-1 ring-gray-900/10 lg:w-1/2">
+              <svg
+                aria-hidden="true"
+                className="absolute inset-0 size-full mask-[radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-gray-200"
+              >
+                <defs>
+                  <pattern
+                    x="100%"
+                    y={-1}
+                    id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527"
+                    width={200}
+                    height={200}
+                    patternUnits="userSpaceOnUse"
+                  >
+                    <path d="M130 200V.5M.5 .5H200" fill="none" />
+                  </pattern>
+                </defs>
+                <rect width="100%" height="100%" strokeWidth={0} className="fill-white" />
+                <svg x="100%" y={-1} className="overflow-visible fill-gray-50">
+                  <path d="M-470.5 0h201v201h-201Z" strokeWidth={0} />
+                </svg>
+                <rect fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)" width="100%" height="100%" strokeWidth={0} />
+              </svg>
+              <div
+                aria-hidden="true"
+                className="absolute top-[calc(100%-13rem)] -left-56 hidden transform-gpu blur-3xl lg:top-[calc(50%-7rem)] lg:left-[max(-14rem,calc(100%-59rem))]"
+              >
+                <div
+                  style={{
+                    clipPath:
+                      'polygon(74.1% 56.1%, 100% 38.6%, 97.5% 73.3%, 85.5% 100%, 80.7% 98.2%, 72.5% 67.7%, 60.2% 37.8%, 52.4% 32.2%, 47.5% 41.9%, 45.2% 65.8%, 27.5% 23.5%, 0.1% 35.4%, 17.9% 0.1%, 27.6% 23.5%, 76.1% 2.6%, 74.1% 56.1%)',
+                  }}
+                  className="aspect-1155/678 w-288.75 bg-linear-to-br from-[#80caff] to-[#4f46e5] opacity-10"
+                />
+              </div>
+            </div>
+            <h2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
+              Get in Touch
+            </h2>
+            <p className="mt-6 text-lg/8 text-gray-600">
+              At OurWorld, we value your feedback and inquiries. Whether you're interested in our ventures, have questions about our technologies, or want to collaborate, we're here to connect. Reach out to us today and let's build a better digital future together.
+            </p>
+            <dl className="mt-10 space-y-4 text-base/7 text-gray-600">
+              <div className="flex gap-x-4">
+                <dt className="flex-none">
+                  <span className="sr-only">Address</span>
+                  <BuildingOffice2Icon aria-hidden="true" className="h-7 w-6 text-gray-400" />
+                </dt>
+                <dd>
+                  Nexus Global Financial Services Limited,
+                  <br />
+                  Ebene, Mauritius.
+                </dd>
+              </div>
+              <div className="flex gap-x-4">
+                <dt className="flex-none">
+                  <span className="sr-only">Email</span>
+                  <EnvelopeIcon aria-hidden="true" className="h-7 w-6 text-gray-400" />
+                </dt>
+                <dd>
+                  <a href="mailto:hello@example.com" className="hover:text-gray-900">
+                    info@ourworld.tf
+                  </a>
+                </dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+        <form action="#" method="POST" className="px-6 pt-20 pb-24 sm:pb-32 lg:px-8 lg:py-48">
+          <div className="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
+            <div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
+              <div>
+                <label htmlFor="first-name" className="block text-sm/6 font-semibold text-gray-900">
+                  First name
+                </label>
+                <div className="mt-2.5">
+                  <input
+                    id="first-name"
+                    name="first-name"
+                    type="text"
+                    autoComplete="given-name"
+                    className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
+                  />
+                </div>
+              </div>
+              <div>
+                <label htmlFor="last-name" className="block text-sm/6 font-semibold text-gray-900">
+                  Last name
+                </label>
+                <div className="mt-2.5">
+                  <input
+                    id="last-name"
+                    name="last-name"
+                    type="text"
+                    autoComplete="family-name"
+                    className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
+                  />
+                </div>
+              </div>
+              <div className="sm:col-span-2">
+                <label htmlFor="email" className="block text-sm/6 font-semibold text-gray-900">
+                  Email
+                </label>
+                <div className="mt-2.5">
+                  <input
+                    id="email"
+                    name="email"
+                    type="email"
+                    autoComplete="email"
+                    className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
+                  />
+                </div>
+              </div>
+              <div className="sm:col-span-2">
+                <label htmlFor="phone-number" className="block text-sm/6 font-semibold text-gray-900">
+                  Phone number
+                </label>
+                <div className="mt-2.5">
+                  <input
+                    id="phone-number"
+                    name="phone-number"
+                    type="tel"
+                    autoComplete="tel"
+                    className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
+                  />
+                </div>
+              </div>
+              <div className="sm:col-span-2">
+                <label htmlFor="message" className="block text-sm/6 font-semibold text-gray-900">
+                  Message
+                </label>
+                <div className="mt-2.5">
+                  <textarea
+                    id="message"
+                    name="message"
+                    rows={4}
+                    className="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
+                    defaultValue={''}
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="mt-8 flex justify-end">
+              <button
+                type="submit"
+                className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+              >
+                Send message
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

src/components/Faqs.tsx

@@ -6,57 +6,59 @@ import backgroundImage from '@/images/background-faqs.jpg'
 const faqs = [
   [
     {
-      question: 'Does OurWorld handle VAT?',
+      question: 'What is OurWorld?',
       answer:
-        'Well no, but if you move your company offshore you can probably ignore it.',
+        'OurWorld is a venture creator focused on building decentralized digital infrastructure for a more sovereign, inclusive, and regenerative future.',
     },
     {
-      question: 'Can I pay for my subscription via purchase order?',
+      question: 'Who is OurWorld for?',
-      answer: 'Absolutely, we are happy to take your money in all forms.',
+      answer:
+        'We collaborate with entrepreneurs, investors, governments, and changemakers who want to build systems beyond Big Tech and traditional finance.',
     },
     {
-      question: 'How do I apply for a job at OurWorld?',
+      question: 'How does OurWorld support ventures?',
       answer:
-        'We only hire our customers, so subscribe for a minimum of 6 months and then let’s talk.',
+        'We co-create projects by providing capital, strategy, governance, technical infrastructure, and access to a global network of collaborators.',
     },
   ],
   [
     {
-      question: 'What was that testimonial about tax fraud all about?',
+      question: 'What kinds of projects are in the OurWorld ecosystem?',
       answer:
-        'OurWorld is just a software application, ultimately your books are your responsibility.',
+        'Our portfolio includes decentralized cloud (ThreeFold), tokenized economies (TF9), digital jurisdictions (FreeZone), and open education (Sikana).',
     },
     {
-      question:
+      question: 'Where does OurWorld operate?',
-        'OurWorld sounds horrible but why do I still feel compelled to purchase?',
       answer:
-        'This is the power of excellent visual design. You just can’t resist it, no matter how poorly it actually functions.',
+        'We’re active in strategic hubs like Mauritius, Zanzibar, UAE, Belgium, and expanding across Europe, Africa, and the Middle East.',
     },
     {
-      question:
+      question: 'Is this a blockchain company?',
-        'I found other companies called OurWorld, are you sure you can use this name?',
       answer:
-        'Honestly not sure at all. We haven’t actually incorporated or anything, we just thought it sounded cool and made this website.',
+        'We use blockchain when it’s useful, but OurWorld is much broader—it’s about real-world infrastructure and long-term systemic change.',
     },
   ],
   [
     {
-      question: 'How do you generate reports?',
+      question: 'How can I get involved with OurWorld?',
       answer:
-        'You just tell us what data you need a report for, and we get our kids to create beautiful charts for you using only the finest crayons.',
+        'Whether you’re a founder, funder, builder or policymaker—if you resonate with our mission, reach out to start a conversation.',
     },
     {
-      question: 'Can we expect more inventory features?',
+      question: 'What is the Digital Freezone?',
-      answer: 'In life it’s really better to never expect anything at all.',
+      answer:
+        'It’s a sovereign digital jurisdiction enabling remote company creation, tokenized commerce, and flexible digital residency.',
     },
     {
-      question: 'I lost my password, how do I get into my account?',
+      question: 'Where can I learn more or contact the team?',
       answer:
-        'Send us an email and we will send you a copy of our latest password spreadsheet so you can find your information.',
+        'Visit www.ourworld.tf or email us at info@ourworld.tf to explore opportunities and collaborations. Visit www.ourworld.tf/ventures to see our current initiatives.',
     },
   ],
 ]
 
+
+
 export function Faqs() {
   return (
     <section

src/components/Header.tsx

@@ -74,7 +74,6 @@ function MobileNavigation() {
       >
         <MobileNavLink href="/about">About</MobileNavLink>
         <MobileNavLink href="/ventures">Ventures</MobileNavLink>
-        <MobileNavLink href="/News">News</MobileNavLink>
         <hr className="m-2 border-slate-300/40" />
         <MobileNavLink href="/contact">Contact Us</MobileNavLink>
       </PopoverPanel>
@@ -95,7 +94,6 @@ export function Header() {
               <NavLink href="/about">About</NavLink>
               <NavLink href="/ventures">Ventures</NavLink>
               <NavLink href="/people">People</NavLink>
-              <NavLink href="/news">News</NavLink>
             </div>
           </div>
           <div className="flex items-center gap-x-5 md:gap-x-8">

src/components/Header_darkbg.tsx

@@ -89,7 +89,6 @@ function MobileNavigation() {
       >
         <MobileNavLink href="/about">About</MobileNavLink>
         <MobileNavLink href="/ventures">Ventures</MobileNavLink>
-        <MobileNavLink href="/News">News</MobileNavLink>
         <hr className="m-2 border-white/20" />
         <MobileNavLink href="/contact">Contact Us</MobileNavLink>
       </PopoverPanel>
@@ -117,7 +116,7 @@ export function Header_darkbg() {
               <NavLinkDark href="/about">About</NavLinkDark>
               <NavLinkDark href="/ventures">Ventures</NavLinkDark>
               <NavLinkDark href="/people">People</NavLinkDark>
-              <NavLinkDark href="/news">News</NavLinkDark>
+
             </div>
           </div>
           <div className="flex items-center gap-x-5 md:gap-x-8">

src/components/PersonTemplate.tsx

@@ -45,9 +45,9 @@ export function PersonTemplate({ personData, biography }: PersonTemplateProps) {
                 <img
                   alt={personData.name}
                   src={personData.imageUrl}
-                  width={1184}
+                  width={592}
-                  height={1376}
+                  height={688}
-                  className="aspect-12/7 w-full rounded-lg object-cover shadow-lg lg:aspect-auto"
+                  className="aspect-12/7 w-1/2 mx-auto rounded-lg object-cover shadow-lg lg:aspect-auto"
                 />
               </figure>
             </div>

src/components/Quote.tsx

@@ -1,6 +1,6 @@
 export function Quote() {
   return (
-    <section className="relative isolate overflow-hidden bg-white px-6 pt-12 pb-32  lg:px-8">
+    <section className="relative isolate overflow-hidden bg-white px-6 pt-24 pb-32 lg:px-8">
       <div className="mx-auto max-w-2xl lg:max-w-4xl">
         <img
           alt=""