crft-reference / index.html
bibbler's picture
can you recreate this reference image landing page? - Initial Deployment
773fe0c verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRFT Lookup - Free BuiltWith Alternative</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.gradient-text {
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
</head>
<body class="bg-white font-sans antialiased">
<!-- Navigation -->
<nav class="bg-white border-b border-gray-100 py-4 sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<a href="#" class="flex-shrink-0 flex items-center">
<span class="text-2xl font-bold gradient-text">CRFT</span>
</a>
<div class="hidden sm:ml-10 sm:flex sm:space-x-8">
<a href="#" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-indigo-500 text-sm font-medium">Services</a>
<a href="#" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">Customers</a>
<a href="#" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">About Us</a>
<a href="#" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">Pricing</a>
</div>
</div>
<div class="hidden sm:ml-6 sm:flex sm:items-center">
<a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium">Blog</a>
<a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium">Glossary</a>
<a href="#" class="ml-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Lookup</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="relative bg-white overflow-hidden">
<div class="max-w-7xl mx-auto">
<div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
<main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
<div class="sm:text-center lg:text-left">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
<span class="block">The CRFT Lookup,</span>
<span class="block gradient-text">a free BuiltWith alternative</span>
</h1>
<p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
The CRFT Lookup is the free alternative to BuiltWith for up-to-date website technology detection, with added performance benchmarks, meta tag previews and sitemap visualization.
</p>
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
<div class="rounded-md shadow">
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10">
Scan a website
</a>
</div>
</div>
</div>
</main>
</div>
</div>
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://www.crft.studio/_astro/lookup-overview.Dsrgn2nw_Z1FYMd.webp" alt="CRFT Lookup report on TailwindCSS">
</div>
</div>
<!-- Features Grid -->
<div class="py-12 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Everything you need to analyze websites
</p>
</div>
<div class="mt-10">
<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
<div class="feature-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
<i data-feather="layers" class="text-white"></i>
</div>
<div class="ml-5 w-0 flex-1">
<h3 class="text-lg font-medium text-gray-900">Technology Checker</h3>
</div>
</div>
</div>
</div>
<div class="feature-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
<i data-feather="bar-chart-2" class="text-white"></i>
</div>
<div class="ml-5 w-0 flex-1">
<h3 class="text-lg font-medium text-gray-900">Performance Scores</h3>
</div>
</div>
</div>
</div>
<div class="feature-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
<i data-feather="eye" class="text-white"></i>
</div>
<div class="ml-5 w-0 flex-1">
<h3 class="text-lg font-medium text-gray-900">Meta Preview</h3>
</div>
</div>
</div>
</div>
<div class="feature-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
<i data-feather="search" class="text-white"></i>
</div>
<div class="ml-5 w-0 flex-1">
<h3 class="text-lg font-medium text-gray-900">SEO Analysis</h3>
</div>
</div>
</div>
</div>
<div class="feature-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
<i data-feather="users" class="text-white"></i>
</div>
<div class="ml-5 w-0 flex-1">
<h3 class="text-lg font-medium text-gray-900">Accessibility Check</h3>
</div>
</div>
</div>
</div>
<div class="feature-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
<i data-feather="map" class="text-white"></i>
</div>
<div class="ml-5 w-0 flex-1">
<h3 class="text-lg font-medium text-gray-900">Sitemap Visualization</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tech Stack Section -->
<div class="py-12 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Technology Detection</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Comprehensive tech stack detection
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
Identify frameworks, CMS platforms, analytics tools, and more with our powerful technology detection engine.
</p>
</div>
<div class="mt-10">
<div class="grid grid-cols-2 gap-8 md:grid-cols-4">
<div class="col-span-1 flex justify-center">
<div class="flex items-center">
<img class="h-12" src="https://www.crft.studio/icons/React.svg" alt="React">
<div class="ml-3">
<h3 class="text-sm font-medium text-gray-900">React</h3>
<p class="text-xs text-gray-500">JavaScript library</p>
</div>
</div>
</div>
<div class="col-span-1 flex justify-center">
<div class="flex items-center">
<img class="h-12" src="https://www.crft.studio/icons/Next.js.svg" alt="Next.js">
<div class="ml-3">
<h3 class="text-sm font-medium text-gray-900">Next.js</h3>
<p class="text-xs text-gray-500">React framework</p>
</div>
</div>
</div>
<div class="col-span-1 flex justify-center">
<div class="flex items-center">
<img class="h-12" src="https://www.crft.studio/icons/Linkedin.svg" alt="LinkedIn">
<div class="ml-3">
<h3 class="text-sm font-medium text-gray-900">LinkedIn Tag</h3>
<p class="text-xs text-gray-500">Conversion tracking</p>
</div>
</div>
</div>
<div class="col-span-1 flex justify-center">
<div class="flex items-center">
<img class="h-12" src="https://www.crft.studio/icons/Hotjar.svg" alt="Hotjar">
<div class="ml-3">
<h3 class="text-sm font-medium text-gray-900">Hotjar</h3>
<p class="text-xs text-gray-500">Analytics tools</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Performance Section -->
<div class="py-12 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
<div>
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
Performance benchmarks with Lighthouse
</h2>
<p class="mt-3 text-lg text-gray-500">
Go beyond tech detection with integrated Google Lighthouse scoring. Analyze performance, accessibility, SEO, and best practices to understand how well a website is built using its detected technologies.
</p>
<div class="mt-8 sm:flex">
<div class="rounded-md shadow">
<a href="#" class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10">
Scan a website
</a>
</div>
</div>
</div>
<div class="mt-12 lg:mt-0">
<img class="w-full rounded-lg shadow-xl" src="https://www.crft.studio/_astro/tailwind-lh-screenshot.BdK8d8_3_ZgQBVX.webp" alt="TailwindCSS Lighthouse Report">
</div>
</div>
</div>
</div>
<!-- Comparison Section -->
<div class="bg-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Comparison</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
How we stack up
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
See how CRFT Lookup compares to BuiltWith in features and capabilities.
</p>
</div>
<div class="mt-10">
<div class="flex flex-col">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Feature
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
CRFT Lookup
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
BuiltWith
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
Technology Detection
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<i data-feather="check" class="text-green-500"></i>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<i data-feather="check" class="text-green-500"></i>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
Lighthouse Analysis
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<i data-feather="check" class="text-green-500"></i>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<i data-feather="x" class="text-red-500"></i>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
Meta Tag Previews
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<i data-feather="check" class="text-green-500"></i>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<i data-feather="x" class="text-red-500"></i>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
Free, Unlimited Usage
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<i data-feather="check" class="text-green-500"></i>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<i data-feather="x" class="text-red-500"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="bg-indigo-700">
<div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
<h2 class="text-3xl font-extrabold text-white sm:text-4xl">
<span class="block">Get the complete technical profile</span>
<span class="block">of any website</span>
</h2>
<p class="mt-4 text-lg leading-6 text-indigo-200">
Discover what technologies power any website, visualize their sitemap structure, analyze their performance with Lighthouse scores, and preview how they appear across social platforms with meta tag previews - all in one free tool.
</p>
<a href="#" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto">
Scan a website
</a>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-800">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<div class="space-y-8 xl:col-span-1">
<span class="text-2xl font-bold text-white">CRFT</span>
<p class="text-gray-300 text-base">
We design and develop beautiful, performant, and maintainable websites for the best marketing teams.
</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-gray-300">
<i data-feather="twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<i data-feather="github"></i>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300">
<i data-feather="linkedin"></i>
</a>
</div>
</div>
<div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Company
</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Services
</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Customers
</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
About Us
</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Pricing
</a>
</li>
</ul>
</div>
<div class="mt-12 md:mt-0">
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Resources
</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Glossary
</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Blog
</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
FAQ
</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Contact Us
</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Lookup
</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Technology Detection
</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Lighthouse Scoring
</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Meta Tag Previews
</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Sitemap Visualization
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-12 border-t border-gray-700 pt-8">
<p class="text-base text-gray-400 xl:text-center">
&copy; 2025 CRFT Studio. All rights reserved.
</p>
</div>
</div>
</footer>
<script>
AOS.init();
feather.replace();
</script>
</body>
</html>