Repurpose Functionality from React to Astro
Objective:
Port React code generated by Figma into elegant Astro code, with minimum inclusion of libraries and dependencies. Port sections one by one until we have a working landing page.
Steps:
- Port React code generated by Figma into elegant Astro code, with minimum inclusion of libraries and dependencies. Port sections one by one until we have a working landing page.
Here's a formal legal page the React code we want to port, it's the privacy policy page please write a new one at
/Users/mpstaton/code/lossless-monorepo/astro-knots/sites/cilantro-site/src/pages/formalities/PrivacyPolicy.astroNote that we do not want to use any of these libraries, we need to implement motion with CSS:
jsx
import { motion } from 'motion/react';
export function PrivacyPolicy() {
return (
<div className="min-h-screen bg-white">
<div className="max-w-4xl mx-auto px-6 py-24">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="space-y-12"
>
{/* Header */}
<div className="text-center space-y-4">
<h1 className="text-[#091B35]">Privacy Policy</h1>
<p className="text-gray-600 max-w-2xl mx-auto">
Last updated: October 6, 2025
</p>
</div>
{/* Content */}
<div className="prose prose-lg max-w-none space-y-8">
<section className="space-y-4">
<h2 className="text-[#091B35]">Introduction</h2>
<p className="text-gray-700">
Parslee ("we," "our," or "us") is committed to protecting your privacy. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you visit our website or use our services.
</p>
</section>
<section className="space-y-4">
<h2 className="text-[#091B35]">Information We Collect</h2>
<p className="text-gray-700">
We may collect information about you in a variety of ways. The information we may collect includes:
</p>
<div className="space-y-4">
<div>
<h3 className="text-[#091B35]">Personal Data</h3>
<p className="text-gray-700">
Personally identifiable information, such as your name, email address, and demographic information, that you voluntarily give to us when you register for our waitlist or contact us.
</p>
</div>
<div>
<h3 className="text-[#091B35]">Usage Data</h3>
<p className="text-gray-700">
Information our servers automatically collect when you access the site, such as your IP address, browser type, operating system, access times, and the pages you have viewed directly before and after accessing the site.
</p>
</div>
</div>
</section>
<section className="space-y-4">
<h2 className="text-[#091B35]">Use of Your Information</h2>
<p className="text-gray-700">
Having accurate information about you permits us to provide you with a smooth, efficient, and customized experience. Specifically, we may use information collected about you via the site to:
</p>
<ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
<li>Create and manage your account</li>
<li>Process your waitlist registration</li>
<li>Send you administrative information</li>
<li>Respond to your inquiries and support requests</li>
<li>Improve our website and services</li>
<li>Send you marketing communications (with your consent)</li>
</ul>
</section>
<section className="space-y-4">
<h2 className="text-[#091B35]">Disclosure of Your Information</h2>
<p className="text-gray-700">
We may share information we have collected about you in certain situations. Your information may be disclosed as follows:
</p>
<div className="space-y-4">
<div>
<h3 className="text-[#091B35]">By Law or to Protect Rights</h3>
<p className="text-gray-700">
If we believe the release of information about you is necessary to respond to legal process, to investigate or remedy potential violations of our policies, or to protect the rights, property, and safety of others.
</p>
</div>
<div>
<h3 className="text-[#091B35]">Business Transfers</h3>
<p className="text-gray-700">
We may share or transfer your information in connection with, or during negotiations of, any merger, sale of company assets, financing, or acquisition of all or a portion of our business to another company.
</p>
</div>
</div>
</section>
<section className="space-y-4">
<h2 className="text-[#091B35]">Security of Your Information</h2>
<p className="text-gray-700">
We use administrative, technical, and physical security measures to help protect your personal information. While we have taken reasonable steps to secure the personal information you provide to us, please be aware that despite our efforts, no security measures are perfect or impenetrable.
</p>
</section>
<section className="space-y-4">
<h2 className="text-[#091B35]">Data Retention</h2>
<p className="text-gray-700">
We will retain your personal information only for as long as is necessary for the purposes set out in this Privacy Policy. We will retain and use your information to the extent necessary to comply with our legal obligations, resolve disputes, and enforce our policies.
</p>
</section>
<section className="space-y-4">
<h2 className="text-[#091B35]">Your Privacy Rights</h2>
<p className="text-gray-700">
Depending on your location, you may have certain rights regarding your personal information, including:
</p>
<ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
<li>The right to access your personal information</li>
<li>The right to update or correct your personal information</li>
<li>The right to delete your personal information</li>
<li>The right to restrict or object to our use of your personal information</li>
<li>The right to data portability</li>
</ul>
</section>
<section className="space-y-4">
<h2 className="text-[#091B35]">Contact Us</h2>
<p className="text-gray-700">
If you have questions or comments about this Privacy Policy, please contact us at:
</p>
<div className="bg-gray-50 p-6 rounded-lg space-y-2">
<p className="text-gray-700">
<strong>Email:</strong> privacy@parslee.ai
</p>
<p className="text-gray-700">
<strong>Company:</strong> Parslee by Volato Group
</p>
<p className="text-gray-700">
<strong>Address:</strong> [Company Address]
</p>
</div>
</section>
<section className="space-y-4">
<h2 className="text-[#091B35]">Changes to This Privacy Policy</h2>
<p className="text-gray-700">
We may update this Privacy Policy from time to time in order to reflect changes to our practices or for other operational, legal, or regulatory reasons. We will notify you of any changes by posting the new Privacy Policy on this page and updating the "Last updated" date.
</p>
</section>
</div>
</motion.div>
</div>
</div>
);
} - Review our exploration on Multi-Site Astro Starter Kit Architecture and review our package architecture. Make sure we refactor this new Astro code into perfectly setup Astro Knots with our configuration-first philosophy.