Add standards legend to offset order page with proper positioning
All checks were successful
Build and Push Docker Images / docker (push) Successful in 2m23s
All checks were successful
Build and Push Docker Images / docker (push) Successful in 2m23s
- Move StandardsLegend from calculator input page to OffsetOrder page - Position after project cards and before offset amount slider - Update Wren certification link to https://www.wren.co/certification - Add vertical spacing (mb-8) below the dropdown for better layout
This commit is contained in:
parent
ab096c6878
commit
848a8be995
@ -4,7 +4,6 @@ import { useState } from 'react';
|
|||||||
import { TripCalculator } from '../src/components/TripCalculator';
|
import { TripCalculator } from '../src/components/TripCalculator';
|
||||||
import { QRCalculatorLoader } from '../src/components/QRCalculatorLoader';
|
import { QRCalculatorLoader } from '../src/components/QRCalculatorLoader';
|
||||||
import { OffsetOrder } from '../src/components/OffsetOrder';
|
import { OffsetOrder } from '../src/components/OffsetOrder';
|
||||||
import { StandardsLegend } from './StandardsLegend';
|
|
||||||
import { useHasQRData } from '../src/hooks/useQRDecoder';
|
import { useHasQRData } from '../src/hooks/useQRDecoder';
|
||||||
import type { VesselData } from '../src/types';
|
import type { VesselData } from '../src/types';
|
||||||
|
|
||||||
@ -74,11 +73,6 @@ export function CalculatorClient() {
|
|||||||
onOffsetClick={handleOffsetClick}
|
onOffsetClick={handleOffsetClick}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Standards Legend - Learn about Wren's offset standards */}
|
|
||||||
<div className="w-full">
|
|
||||||
<StandardsLegend />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -7,7 +7,7 @@ export function StandardsLegend() {
|
|||||||
const [isExpanded, setIsExpanded] = useState(false);
|
const [isExpanded, setIsExpanded] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mt-8 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-2xl p-6 border border-blue-200 print:hidden">
|
<div className="mt-8 mb-8 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-2xl p-6 border border-blue-200 print:hidden">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<button
|
<button
|
||||||
onClick={() => setIsExpanded(!isExpanded)}
|
onClick={() => setIsExpanded(!isExpanded)}
|
||||||
@ -145,7 +145,7 @@ export function StandardsLegend() {
|
|||||||
{/* Learn More */}
|
{/* Learn More */}
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<a
|
<a
|
||||||
href="https://www.wren.co/certification-standards"
|
href="https://www.wren.co/certification"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="inline-flex items-center gap-2 text-sm font-medium text-blue-600 hover:text-blue-700 hover:underline"
|
className="inline-flex items-center gap-2 text-sm font-medium text-blue-600 hover:text-blue-700 hover:underline"
|
||||||
|
|||||||
@ -15,6 +15,7 @@ import { PortfolioDonutChart } from './PortfolioDonutChart';
|
|||||||
import { getProjectColor } from '../utils/portfolioColors';
|
import { getProjectColor } from '../utils/portfolioColors';
|
||||||
import { CertificationBadge } from './CertificationBadge';
|
import { CertificationBadge } from './CertificationBadge';
|
||||||
import { useCalculatorState } from '../hooks/useCalculatorState';
|
import { useCalculatorState } from '../hooks/useCalculatorState';
|
||||||
|
import { StandardsLegend } from '../../components/StandardsLegend';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
tons: number;
|
tons: number;
|
||||||
@ -464,6 +465,9 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
|
|||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Standards Legend - Learn about Wren's certification standards */}
|
||||||
|
<StandardsLegend />
|
||||||
|
|
||||||
{/* Offset Percentage Slider */}
|
{/* Offset Percentage Slider */}
|
||||||
{!monetaryAmount && (
|
{!monetaryAmount && (
|
||||||
<motion.div
|
<motion.div
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user