Skip to content

Refactor front end and add email signup #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
chimera-defi wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Refactor front end and add email signup #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
608 changes: 27 additions & 581 deletions frontend/app/client-page.tsx
View file
Open in desktop

Large diffs are not rendered by default.

87 changes: 87 additions & 0 deletions frontend/components/ui/ComparisonSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
'use client';

import { GlassCard } from "./GlassCard";

export function ComparisonSection() {
const comparisonData = [
{
feature: "Fractional ownership",
traditional: false,
ens: false,
densofi: true,
},
{
feature: "Instant liquidity",
traditional: false,
ens: "Partial",
densofi: true,
},
{
feature: "Cross-chain support",
traditional: false,
ens: "Partial",
densofi: true,
},
{
feature: "DeFi integration",
traditional: false,
ens: true,
densofi: true,
},
{
feature: "Subdomain monetization",
traditional: false,
ens: "Limited",
densofi: true,
},
{
feature: "Price discovery via LP",
traditional: false,
ens: false,
densofi: true,
},
];

const renderCell = (value: boolean | string) => {
if (value === true) {
return <span className="text-green-400 drop-shadow-[0_0_8px_rgba(74,222,128,0.7)]">✓</span>;
}
if (value === false) {
return <span className="text-red-400 drop-shadow-[0_0_8px_rgba(239,68,68,0.7)]">✗</span>;
}
return <span className="text-yellow-400 drop-shadow-[0_0_8px_rgba(250,204,21,0.7)]">{value}</span>;
};

return (
<div className="container mx-auto px-4 mt-16">
<GlassCard className="max-w-5xl mx-auto p-4 md:p-8">
<h3 className="text-2xl md:text-3xl font-bold text-white text-center mb-8">
Why Choose <span className="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">Densofi</span>?
</h3>

<div className="overflow-x-auto">
<table className="w-full text-left">
<thead>
<tr className="border-b border-white/10">
<th className="p-2 text-sm md:p-4 md:text-base font-medium text-gray-300">Feature</th>
<th className="p-2 text-sm md:p-4 md:text-base font-medium text-center text-gray-300">Traditional Domains</th>
<th className="p-2 text-sm md:p-4 md:text-base font-medium text-center text-gray-300">ENS</th>
<th className="p-2 text-sm md:p-4 md:text-base font-medium text-center text-blue-400">Densofi</th>
</tr>
</thead>
<tbody>
{comparisonData.map((row, index) => (
<tr key={index} className="border-t border-white/5 transition-colors duration-300">
<td className="p-2 text-sm md:p-4 md:text-base text-gray-300">{row.feature}</td>
<td className="p-2 text-sm md:p-4 md:text-base text-center">{renderCell(row.traditional)}</td>
<td className="p-2 text-sm md:p-4 md:text-base text-center">{renderCell(row.ens)}</td>
<td className="p-2 text-sm md:p-4 md:text-base text-center">{renderCell(row.densofi)}</td>
</tr>
))}
</tbody>
</table>
</div>
</GlassCard>
</div>
);
}
130 changes: 130 additions & 0 deletions frontend/components/ui/EmailSignup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
'use client';

import { useState } from 'react';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

interface EmailSignupProps {
className?: string;
variant?: 'default' | 'compact';
}

export function EmailSignup({ className = '', variant = 'default' }: EmailSignupProps) {
const [email, setEmail] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
const [isSubmitted, setIsSubmitted] = useState(false);
const [error, setError] = useState('');

const validateEmail = (email: string) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
};

const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError('');

if (!email) {
setError('Email is required');
return;
}

if (!validateEmail(email)) {
setError('Please enter a valid email address');
return;
}

setIsSubmitting(true);

try {
// TODO: Replace with actual API call
await new Promise(resolve => setTimeout(resolve, 1000));
setIsSubmitted(true);
setEmail('');
} catch (err) {
setError('Something went wrong. Please try again.');
} finally {
setIsSubmitting(false);
}
};

if (isSubmitted) {
return (
<div className={`${className}`}>
<div className="text-center">
<div className="inline-flex items-center justify-center w-12 h-12 bg-green-500/20 rounded-full mb-4">
<svg className="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
</div>
<h3 className="text-lg font-medium text-white mb-2">Thanks for subscribing!</h3>
<p className="text-gray-400 text-sm">We'll keep you updated on the latest developments.</p>
</div>
</div>
);
}

if (variant === 'compact') {
return (
<div className={`${className}`}>
<form onSubmit={handleSubmit} className="flex gap-2">
<Input
type="email"
placeholder="Enter your email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="flex-1 bg-white/5 border-white/20 text-white placeholder-gray-400 focus:border-blue-400 focus:ring-blue-400/20"
disabled={isSubmitting}
/>
<Button
type="submit"
disabled={isSubmitting}
className="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-6 shrink-0"
>
{isSubmitting ? 'Subscribing...' : 'Subscribe'}
</Button>
</form>
{error && (
<p className="text-red-400 text-sm mt-2">{error}</p>
)}
</div>
);
}

return (
<div className={`${className}`}>
<div className="text-center mb-6">
<h3 className="text-2xl font-bold text-white mb-2">Stay Updated</h3>
<p className="text-gray-400">Get the latest updates on Densofi developments and new features.</p>
</div>

<form onSubmit={handleSubmit} className="max-w-md mx-auto">
<div className="flex flex-col sm:flex-row gap-3">
<Input
type="email"
placeholder="Enter your email address"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="flex-1 bg-white/5 border-white/20 text-white placeholder-gray-400 focus:border-blue-400 focus:ring-blue-400/20 h-12"
disabled={isSubmitting}
/>
<Button
type="submit"
disabled={isSubmitting}
className="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-8 h-12 shrink-0 hover:shadow-lg hover:shadow-blue-500/25 transition-all duration-300"
>
{isSubmitting ? 'Subscribing...' : 'Subscribe'}
</Button>
</div>

{error && (
<p className="text-red-400 text-sm mt-3 text-center">{error}</p>
)}

<p className="text-gray-500 text-xs mt-3 text-center">
By subscribing, you agree to receive updates from Densofi. Unsubscribe anytime.
</p>
</form>
</div>
);
}
111 changes: 111 additions & 0 deletions frontend/components/ui/FeaturesSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
'use client';

export function FeaturesSection() {
const features = [
{
title: "Fractional Ownership",
description: "Convert domain names into fungible tokens that can be traded on open markets, unlocking value and liquidity.",
icon: (
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 md:h-8 md:w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
</svg>
),
gradient: "from-blue-500 to-indigo-600",
hoverColor: "blue",
},
{
title: "Liquidity Pools",
description: "Automatic market making ensures ongoing price discovery and instant liquidity for domain token traders.",
icon: (
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 md:h-8 md:w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
),
gradient: "from-teal-500 to-emerald-600",
hoverColor: "teal",
},
{
title: "Subdomain Utility",
description: "Token holders with significant stakes can register valuable subdomains, creating additional revenue streams.",
icon: (
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 md:h-8 md:w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
</svg>
),
gradient: "from-purple-500 to-pink-600",
hoverColor: "purple",
},
];

return (
<div className="container mx-auto px-4 mt-16">
{/* Feature Cards */}
<div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
{features.map((feature, index) => {
const isBlue = index === 0;
const isTeal = index === 1;
const isPurple = index === 2;

return (
<div key={index} className="relative group">
<div className={`relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 rounded-2xl p-4 md:p-8 border border-slate-700/50 transition-all duration-500 backdrop-blur-sm hover:shadow-xl hover:-translate-y-2 ${
isBlue ? 'hover:border-blue-500/30 hover:shadow-blue-500/10' :
isTeal ? 'hover:border-teal-500/30 hover:shadow-teal-500/10' :
'hover:border-purple-500/30 hover:shadow-purple-500/10'
}`}>
{/* Background glow */}
<div className={`absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 ${
isBlue ? 'bg-gradient-to-br from-blue-500/5 to-indigo-500/5' :
isTeal ? 'bg-gradient-to-br from-teal-500/5 to-emerald-500/5' :
'bg-gradient-to-br from-purple-500/5 to-pink-500/5'
}`}></div>

{/* Icon */}
<div className="relative mb-4 md:mb-6 flex justify-center">
<div className={`h-12 w-12 md:h-16 md:w-16 rounded-2xl bg-gradient-to-br ${feature.gradient} flex items-center justify-center transition-all duration-300 group-hover:scale-110 ${
isBlue ? 'group-hover:shadow-lg group-hover:shadow-blue-500/40' :
isTeal ? 'group-hover:shadow-lg group-hover:shadow-teal-500/40' :
'group-hover:shadow-lg group-hover:shadow-purple-500/40'
}`}>
{feature.icon}
</div>
<div className={`absolute inset-0 rounded-2xl blur-xl -z-10 transition-all duration-300 ${
isBlue ? 'bg-gradient-to-r from-blue-500/20 to-indigo-500/20 group-hover:from-blue-500/30 group-hover:to-indigo-500/30' :
isTeal ? 'bg-gradient-to-r from-teal-500/20 to-emerald-500/20 group-hover:from-teal-500/30 group-hover:to-emerald-500/30' :
'bg-gradient-to-r from-purple-500/20 to-pink-500/20 group-hover:from-purple-500/30 group-hover:to-pink-500/30'
}`}></div>
</div>

{/* Content */}
<div className="relative z-10 text-center">
<h3 className={`text-xl md:text-2xl font-bold text-white mb-4 transition-colors duration-300 ${
isBlue ? 'group-hover:text-blue-300' :
isTeal ? 'group-hover:text-teal-300' :
'group-hover:text-purple-300'
}`}>
{feature.title}
</h3>
<div className={`w-12 h-0.5 mx-auto mb-4 opacity-50 group-hover:opacity-100 transition-opacity duration-300 ${
isBlue ? 'bg-gradient-to-r from-blue-400 to-indigo-400' :
isTeal ? 'bg-gradient-to-r from-teal-400 to-emerald-400' :
'bg-gradient-to-r from-purple-400 to-pink-400'
}`}></div>
<p className="text-sm md:text-base text-gray-300 leading-relaxed group-hover:text-gray-200 transition-colors duration-300">
{feature.description}
</p>
</div>

{/* Corner accent */}
<div className={`absolute top-4 right-4 w-2 h-2 rounded-full transition-colors duration-300 ${
isBlue ? 'bg-blue-400/30 group-hover:bg-blue-400/60' :
isTeal ? 'bg-teal-400/30 group-hover:bg-teal-400/60' :
'bg-purple-400/30 group-hover:bg-purple-400/60'
}`}></div>
</div>
</div>
);
})}
</div>
</div>
);
}
6 changes: 3 additions & 3 deletions frontend/components/ui/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,9 @@ export default function Footer() {
<div>
<h4 className="font-medium text-white mb-4">Connect</h4>
<div className="space-y-2">
<a href="https://t.me/+H5Z6_hPdJao5MWY5" className="block text-gray-400 hover:text-white">Telegram</a>
<a href="https://twitter.com/densofinance" className="block text-gray-400 hover:text-white">Twitter</a>
<a href="https://discord.gg/juhHmAw4" className="block text-gray-400 hover:text-white">Discord</a>
<a href="https://t.me/+H5Z6_hPdJao5MWY5" className="block text-gray-400 hover:text-white transition-colors">Telegram</a>
<a href="https://twitter.com/densofinance" className="block text-gray-400 hover:text-white transition-colors">Twitter</a>
<a href="https://discord.gg/juhHmAw4" className="block text-gray-400 hover:text-white transition-colors">Discord</a>
</div>
</div>
</div>
Expand Down
Loading