Embed


<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>CRE India Real Estate Calculator</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    /* Scoped styles for the CRE India Calculator */
    .creindia-calculator-wrapper {
      padding: 20px;
      font-family: 'Arial', sans-serif;
      background: #f4f6f9;
      color: #333;
    }
    .creindia-calculator-wrapper .container {
      max-width: 800px;
      margin: auto;
      background: white;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    .creindia-calculator-wrapper h1, 
    .creindia-calculator-wrapper h2 {
      color: #002244;
      font-weight: 600;
    }
    .creindia-calculator-wrapper label, 
    .creindia-calculator-wrapper input {
      display: block;
      width: 100%;
      margin-bottom: 10px;
      font-size: 14px;
    }
    .creindia-calculator-wrapper input {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 6px;
    }
    .creindia-calculator-wrapper button {
      background: #002244;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 10px;
      margin-right: 10px;
    }
    .creindia-calculator-wrapper .results {
      background: #eef2f7;
      padding: 20px;
      border-radius: 10px;
      margin-top: 20px;
      display: none;
    }
    .creindia-calculator-wrapper .header, 
    .creindia-calculator-wrapper .footer {
      text-align: center;
      margin: 20px 0;
    }
    .creindia-calculator-wrapper .footer {
      font-size: 12px;
      color: #777;
    }
    .creindia-calculator-wrapper table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    .creindia-calculator-wrapper th, 
    .creindia-calculator-wrapper td {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: left;
    }
    .creindia-calculator-wrapper th {
      background-color: #002244;
      color: white;
    }
    .creindia-calculator-wrapper .chart-container {
      position: relative;
      margin: 20px 0;
      height: 40vh;
      width: 80vw;
    }
    @media print {
      .creindia-calculator-wrapper * {
        visibility: hidden;
      }
      .creindia-calculator-wrapper .print-area, 
      .creindia-calculator-wrapper .print-area * {
        visibility: visible;
      }
      .creindia-calculator-wrapper .print-area {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: white;
        padding: 20px;
      }
    }
  </style>
</head>
<body>
  <div class="creindia-calculator-wrapper">
    <div class="container">
      <h1>CRE India Investment Calculator</h1>

      <label>Email</label>
      <input type="email" id="userEmail" placeholder="Enter your email" required>
      <label>Mobile Number</label>
      <input type="tel" id="userMobile" placeholder="Enter your mobile number" required>
      
      <label>Purchase Price (₹)</label>
      <input type="number" id="purchasePrice" oninput="syncFields()">
      <label>Monthly Rent (₹)</label>
      <input type="number" id="monthlyRent">
      <label>Years of Holding</label>
      <input type="number" id="yearsHeld" oninput="syncFields()">
      <label>Expected Resale Price (₹)</label>
      <input type="number" id="resalePrice" oninput="syncFields()">
      <label>Loan Interest Rate (%)</label>
      <input type="number" id="interestRate">
      <label>Loan Amount (₹)</label>
      <input type="number" id="loanAmount">
      <label>Loan Tenure (Years)</label>
      <input type="number" id="loanTenure">
      <button onclick="calculate()">Calculate ROI</button>

      <hr>

      <h2>Capital Gains Calculator</h2>
      <label>Purchase Price (₹)</label>
      <input type="number" id="cgPurchase">
      <label>Resale Price (₹)</label>
      <input type="number" id="cgResale">
      <label>Years Held</label>
      <input type="number" id="cgYearsHeld">
      <button onclick="calculateCapitalGains()">Calculate Capital Gains</button>

      <div class="print-area">
        <div id="result" class="results"></div>
        <div id="capitalGainsResult" class="results"></div>
        <div class="chart-container">
          <canvas id="resultsChart"></canvas>
        </div>
      </div>

      <button onclick="downloadPDF()">📄 Download PDF</button>
    </div>
  </div>

  <script>
    function syncFields() {
      document.getElementById("cgPurchase").value = document.getElementById("purchasePrice").value;
      document.getElementById("cgResale").value = document.getElementById("resalePrice").value;
      document.getElementById("cgYearsHeld").value = document.getElementById("yearsHeld").value;
    }

    window.calculate = function () {
      const userEmail = document.getElementById("userEmail").value;
      const userMobile = document.getElementById("userMobile").value;
      const purchase = parseFloat(document.getElementById("purchasePrice").value) || 0;
      const rent = parseFloat(document.getElementById("monthlyRent").value) || 0;
      const years = parseFloat(document.getElementById("yearsHeld").value) || 0;
      const resale = parseFloat(document.getElementById("resalePrice").value) || 0;
      const interest = parseFloat(document.getElementById("interestRate").value) || 0;
      const loan = parseFloat(document.getElementById("loanAmount").value) || 0;
      const tenure = parseFloat(document.getElementById("loanTenure").value) || 0;

      if (!userEmail || !userMobile || !purchase || !rent || !years || !resale || !interest || !loan || !tenure) {
        alert("Please fill in all fields.");
        return;
      }

      const annualRent = rent * 12;
      const rentalYield = ((annualRent / purchase) * 100).toFixed(2);
      const totalRent = annualRent * years;
      const resaleGain = resale - purchase;
      const roi = (((totalRent + resaleGain) / purchase) * 100).toFixed(2);
      const totalInvestment = purchase + loan;
      const netProfit = totalRent + resaleGain - totalInvestment;

      const months = tenure * 12;
      const monthlyRate = interest / 1200;
      const emi = (loan * monthlyRate * Math.pow(1 + monthlyRate, months)) / (Math.pow(1 + monthlyRate, months) - 1);
      const totalInterest = emi * months - loan;
      const deductible = totalInterest * 0.6;

      document.getElementById("result").innerHTML = `
        <div class="header">
          <h2>Investment Report</h2>
          <p>Date: ${new Date().toLocaleDateString()}</p>
        </div>
        <h3>Investment Summary</h3>
        <table>
          <tr>
            <th>Metric</th>
            <th>Value</th>
          </tr>
          <tr>
            <td>Rental Yield</td>
            <td>${rentalYield}%</td>
          </tr>
          <tr>
            <td>Total Rent Earned</td>
            <td>₹${totalRent.toLocaleString()}</td>
          </tr>
          <tr>
            <td>Resale Gain</td>
            <td>₹${resaleGain.toLocaleString()}</td>
          </tr>
          <tr>
            <td>Total Investment</td>
            <td>₹${totalInvestment.toLocaleString()}</td>
          </tr>
          <tr>
            <td>Net Profit</td>
            <td>₹${netProfit.toLocaleString()}</td>
          </tr>
          <tr>
            <td>Total ROI</td>
            <td>${roi}%</td>
          </tr>
          <tr>
            <td>Monthly EMI</td>
            <td>₹${emi.toFixed(2).toLocaleString()}</td>
          </tr>
          <tr>
            <td>Deductible Interest</td>
            <td>₹${deductible.toFixed(2).toLocaleString()}</td>
          </tr>
        </table>
      `;
      document.getElementById("result").style.display = "block";

      // Update the chart
      updateChart(rentalYield, roi);
    };

    window.calculateCapitalGains = function () {
      const purchase = parseFloat(document.getElementById("cgPurchase").value) || 0;
      const resale = parseFloat(document.getElementById("cgResale").value) || 0;
      const years = parseFloat(document.getElementById("cgYearsHeld").value) || 0;

      if (!purchase || !resale || !years) {
        alert("Please fill in all Capital Gains fields.");
        return;
      }

      const gain = resale - purchase;
      const taxType = years >= 2 ? "Long-Term Capital Gains" : "Short-Term Capital Gains";
      const taxRate = years >= 2 ? 0.20 : 0.30;
      const taxPayable = years >= 2 ? gain * taxRate * 0.8 : gain * taxRate;

      document.getElementById("capitalGainsResult").innerHTML = `
        <div class="header">
          <h2>Capital Gains Report</h2>
          <p>Date: ${new Date().toLocaleDateString()}</p>
        </div>
        <table>
          <tr>
            <th>Metric</th>
            <th>Value</th>
          </tr>
          <tr>
            <td>Capital Gain</td>
            <td>₹${gain.toLocaleString()}</td>
          </tr>
          <tr>
            <td>Type</td>
            <td>${taxType}</td>
          </tr>
          <tr>
            <td>Estimated Tax Payable</td>
            <td>₹${taxPayable.toLocaleString()}</td>
          </tr>
        </table>
      `;
      document.getElementById("capitalGainsResult").style.display = "block";
    };

    function updateChart(rentalYield, roi) {
      const ctx = document.getElementById('resultsChart').getContext('2d');
      const chart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['Rental Yield', 'Total ROI'],
          datasets: [{
            label: 'Percentage',
            data: [rentalYield, roi],
            backgroundColor: [
              'rgba(54, 162, 235, 0.6)',
              'rgba(255, 99, 132, 0.6)'
            ],
            borderColor: [
              'rgba(54, 162, 235, 1)',
              'rgba(255, 99, 132, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true,
              title: {
                display: true,
                text: 'Percentage (%)'
              }
            }
          }
        }
      });
    }

    window.downloadPDF = function () {
      const element = document.querySelector(".print-area");
      
      // Create a new content for the PDF
      const reportContent = `
        <div class="header">
          <h2>CRE India LLP</h2>
          <p>Date: ${new Date().toLocaleDateString()}</p>
        </div>
        ${document.getElementById("result").innerHTML}
        ${document.getElementById("capitalGainsResult").innerHTML}
        <div class="footer">
          <p>Contact us: admin@creindia.in | Phone: +91 123 456 7890</p>
        </div>
      `;

      // Create a temporary element to hold the report content
      const tempElement = document.createElement('div');
      tempElement.innerHTML = reportContent;
      document.body.appendChild(tempElement);

      const opt = {
        margin: 0.5,
        filename: 'CRE-India-Investment-Report.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
      };

      html2pdf().set(opt).from(tempElement).save().then(() => {
        document.body.removeChild(tempElement); // Clean up the temporary element
      });
    };
  </script>
</body>
</html>


CRE India

Business Name: CRE INDIA
Business Type: Premium Real Estate Consultancy Firm
What We Do: CRE INDIA provides strategic real estate advisory, investment planning, leasing, and property sales. We serve HNIs, developers, and corporates with intelligent market insight and personalized consulting — inspired by the sophistication of CBRE and JLL.

Then manually update:

Colors: CBRE green + JLL red

Fonts (if editable)

Add custom imagery/scroll effects where possible (or leave placeholders)

✅ Option 2: Use Durable as MVP, then Migrate to Webflow or Framer
Since your vision (Lazy Eight-level storytelling + branded UX) exceeds Durable’s customization limits, I recommend:

Use Durable to prototype content and layout.

Then export the structure and rebuild in:

Webflow (visual builder, great for motion + CMS)

Framer (modern, fast, immersive animations)

Or get it custom-coded via HTML5/GSAP/Lottie as your brief suggests

📦 Want Help Converting This into Webflow or Framer-Ready Copy?
I can give you:

Full page-by-page content

Layout section wireframes (in text or Figma-style references)

SEO-optimized headlines

UI component suggestions

A JSON layout structure if you're passing it to a dev/designer

Would you like that? Or prefer I rewrite the brief so it works fully within Durable’s capabilities?







You said:
lets try for webflow ;ill make the website there


ChatGPT said:
Perfect — Webflow is exactly the right tool for a premium, storytelling-driven real estate consulting site like CRE INDIA. It gives you full control over layout, animation, and branding — all without needing deep front-end coding.

✅ Let's Translate Your Vision into a Webflow-Ready Structure
Here’s a Webflow-ready layout plan based on your original brief — clean, CBRE/JLL-inspired design with Lazy Eight storytelling flair:

🧭 SITE MAP + PAGE STRUCTURE
1. Homepage
Hero Section:
Fullscreen background: Video or animated cityscape (can embed Lottie or MP4)

Headline (Large, bold, center):

“Your Vision. Our Strategy. Real Estate Done Right.”

CTA Button (JLL Red):

"Explore Opportunities"

Scroll Section 1: What We Do
3 Columns: Investment Advisory | Leasing | Sales

Icons in CBRE Green (#007a33), titles in bold

Short descriptions, hover interaction

Scroll Section 2: Visual Break
Full-width image with parallax scroll

Overlay headline:

“Decades of Experience. Billion-dollar Strategies.”

Scroll Section 3: Success Stories
Client portraits + quotes

Auto-slider or grid with hover motion

Scroll Section 4: Featured Properties
Filterable grid (Webflow CMS)

Hover: Name + location + brief deal tag
(“₹82 Cr Asset Sale | Gurgaon SEZ”)

CTA Strip
Text: “Book a Free Strategy Call”

Button (JLL red), large padding

Footer
Brand logo, contact info, social links

Trust badges (RERA, years in service, partners)

2. About Us
Founder/Team image (high quality, grayscale)

Core Values as icon grid

Timeline or vision statement with horizontal scroll motion

3. Services Page
Investment Advisory: detail w/ charts/icons

Sales & Leasing: show property types

Consulting: client onboarding flow

4. Success Stories / Case Studies
Use CMS collection

Cards w/ client name, type of service, and outcome

Include testimonials + project images

5. Contact Page
Hero section w/ map or office image

Lead form styled in CBRE/JLL theme

Optional: Calendly embed for consultations

🧰 DESIGN & STYLING GUIDE
Element	Style
Fonts	Headings: Neue Montreal / Inter Bold
Body: Lora or Inter Regular
Primary Colors	CBRE Green (#007a33), JLL Red (#e4002b), Neutral Gray palette
Motion Effects	Webflow Interactions + ScrollTrigger style effects via custom code
Nav	Sticky nav, scroll shrink on downscroll
Spacing	Generous padding, negative space between sections


