landing page added
This commit is contained in:
nabijonovdavronbek619@gmail.com
15
src/widgets/home/animations.ts
Normal file
15
src/widgets/home/animations.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import type { Variants } from 'framer-motion';
|
||||
|
||||
export const fadeUp = (delay = 0): Variants => ({
|
||||
hidden: { opacity: 0, y: 28 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.65, delay, ease: [0.22, 1, 0.36, 1] },
|
||||
},
|
||||
});
|
||||
|
||||
export const stagger: Variants = {
|
||||
hidden: {},
|
||||
visible: { transition: { staggerChildren: 0.1 } },
|
||||
};
|
||||
43
src/widgets/home/components/Badge.tsx
Normal file
43
src/widgets/home/components/Badge.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import type { FC, ReactNode } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { C } from '../tokens';
|
||||
|
||||
interface BadgeProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
const Badge: FC<BadgeProps> = ({ children }) => (
|
||||
<motion.span
|
||||
initial={{ opacity: 0, scale: 0.88 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.15, duration: 0.5, ease: 'backOut' }}
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 7,
|
||||
padding: '5px 14px',
|
||||
borderRadius: 999,
|
||||
border: `1px solid ${C.accent}33`,
|
||||
background: C.accentLight,
|
||||
color: C.accent,
|
||||
fontSize: 11,
|
||||
fontFamily: "'DM Mono', monospace",
|
||||
letterSpacing: '0.12em',
|
||||
textTransform: 'uppercase',
|
||||
marginBottom: 24,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: '50%',
|
||||
background: C.accent,
|
||||
display: 'inline-block',
|
||||
}}
|
||||
/>
|
||||
{children}
|
||||
</motion.span>
|
||||
);
|
||||
|
||||
export default Badge;
|
||||
137
src/widgets/home/components/DocIllustration.tsx
Normal file
137
src/widgets/home/components/DocIllustration.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
import type { FC } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { C } from '../tokens';
|
||||
import { DOC_LINE_WIDTHS } from '../constants';
|
||||
|
||||
const DocIllustration: FC = () => (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 40, rotate: 2 }}
|
||||
animate={{ opacity: 1, x: 0, rotate: 0 }}
|
||||
transition={{ delay: 0.5, duration: 0.9, ease: [0.22, 1, 0.36, 1] }}
|
||||
style={{ position: 'relative', width: 300, flexShrink: 0 }}
|
||||
>
|
||||
{/* Shadow card behind */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 18,
|
||||
left: 18,
|
||||
width: 240,
|
||||
height: 300,
|
||||
background: C.border,
|
||||
borderRadius: 10,
|
||||
transform: 'rotate(4deg)',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Main document card */}
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: 240,
|
||||
background: C.surface,
|
||||
borderRadius: 10,
|
||||
border: `1px solid ${C.border}`,
|
||||
boxShadow: `0 12px 40px ${C.shadowMd}`,
|
||||
padding: 28,
|
||||
}}
|
||||
>
|
||||
{/* Card header */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
marginBottom: 20,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 8,
|
||||
background: C.accentLight,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: 16,
|
||||
}}
|
||||
>
|
||||
📄
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
height: 8,
|
||||
width: 80,
|
||||
background: C.border,
|
||||
borderRadius: 4,
|
||||
marginBottom: 5,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
height: 6,
|
||||
width: 50,
|
||||
background: C.border,
|
||||
borderRadius: 4,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Skeleton lines */}
|
||||
{DOC_LINE_WIDTHS.map((w, i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
height: 7,
|
||||
width: `${w}%`,
|
||||
background: i === 2 ? `${C.accent}18` : C.surfaceWarm,
|
||||
borderRadius: 4,
|
||||
marginBottom: 8,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Similarity warning */}
|
||||
<div
|
||||
style={{
|
||||
marginTop: 16,
|
||||
padding: '8px 12px',
|
||||
background: '#FFF8E1',
|
||||
borderLeft: `3px solid ${C.gold}`,
|
||||
borderRadius: '0 4px 4px 0',
|
||||
fontSize: 11,
|
||||
color: C.gold,
|
||||
fontFamily: "'DM Mono', monospace",
|
||||
letterSpacing: '0.05em',
|
||||
}}
|
||||
>
|
||||
⚠ 12% similarity found
|
||||
</div>
|
||||
|
||||
{/* Verified badge */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: -12,
|
||||
right: -12,
|
||||
background: C.green,
|
||||
color: '#fff',
|
||||
borderRadius: 999,
|
||||
padding: '4px 12px',
|
||||
fontSize: 10,
|
||||
fontFamily: "'DM Mono', monospace",
|
||||
letterSpacing: '0.06em',
|
||||
fontWeight: 500,
|
||||
boxShadow: `0 4px 12px ${C.green}44`,
|
||||
}}
|
||||
>
|
||||
✓ VERIFIED
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
export default DocIllustration;
|
||||
177
src/widgets/home/components/Hero.tsx
Normal file
177
src/widgets/home/components/Hero.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
import type { FC } from 'react';
|
||||
import { motion, type MotionStyle, type MotionValue } from 'framer-motion';
|
||||
import { fadeUp, stagger } from '../animations';
|
||||
import { C } from '../tokens';
|
||||
import { STATS } from '../constants';
|
||||
import { useIsMobile } from '../hooks/useIsMobile';
|
||||
import Badge from './Badge';
|
||||
import DocIllustration from './DocIllustration';
|
||||
import Section from './Section';
|
||||
import Stat from './Stat';
|
||||
import StartButton from './StartButton';
|
||||
|
||||
interface HeroProps {
|
||||
onStart: () => void;
|
||||
blobY: MotionValue<number>;
|
||||
}
|
||||
|
||||
const Hero: FC<HeroProps> = ({ onStart, blobY }) => {
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
return (
|
||||
<div style={{ position: 'relative', overflow: 'hidden', background: C.bg }}>
|
||||
{/* Dot grid background */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
pointerEvents: 'none',
|
||||
backgroundImage: `radial-gradient(circle, ${C.borderDark} 1px, transparent 1px)`,
|
||||
backgroundSize: '28px 28px',
|
||||
opacity: 0.4,
|
||||
maskImage:
|
||||
'radial-gradient(ellipse 70% 60% at 65% 40%, black, transparent)',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Ambient glow blob */}
|
||||
<motion.div
|
||||
style={
|
||||
{
|
||||
position: 'absolute',
|
||||
width: 700,
|
||||
height: 500,
|
||||
borderRadius: '50%',
|
||||
background: `radial-gradient(circle, ${C.accentLight} 0%, transparent 70%)`,
|
||||
right: -100,
|
||||
top: -60,
|
||||
pointerEvents: 'none',
|
||||
y: blobY,
|
||||
} as MotionStyle
|
||||
}
|
||||
/>
|
||||
|
||||
<Section
|
||||
style={{
|
||||
paddingTop: 88,
|
||||
paddingBottom: 96,
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
{/* Main row */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: 48,
|
||||
flexDirection: isMobile ? 'column' : 'row',
|
||||
}}
|
||||
>
|
||||
{/* Text block */}
|
||||
<div style={{ maxWidth: 600, flex: 1 }}>
|
||||
<Badge>Academic Integrity Platform</Badge>
|
||||
|
||||
<motion.div variants={stagger} initial="hidden" animate="visible">
|
||||
<motion.h1
|
||||
variants={fadeUp(0)}
|
||||
style={{
|
||||
fontFamily: "'Playfair Display', serif",
|
||||
fontSize: 'clamp(42px, 5.5vw, 70px)',
|
||||
fontWeight: 700,
|
||||
lineHeight: 1.09,
|
||||
letterSpacing: '-0.025em',
|
||||
color: C.text,
|
||||
marginBottom: 4,
|
||||
}}
|
||||
>
|
||||
Is Your Work
|
||||
</motion.h1>
|
||||
<motion.h1
|
||||
variants={fadeUp(0.1)}
|
||||
style={{
|
||||
fontFamily: "'Playfair Display', serif",
|
||||
fontStyle: 'italic',
|
||||
fontSize: 'clamp(42px, 5.5vw, 70px)',
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.09,
|
||||
letterSpacing: '-0.025em',
|
||||
color: C.accent,
|
||||
marginBottom: 28,
|
||||
}}
|
||||
>
|
||||
Truly Original?
|
||||
</motion.h1>
|
||||
</motion.div>
|
||||
|
||||
<motion.p
|
||||
variants={fadeUp(0.25)}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: C.textMid,
|
||||
lineHeight: 1.85,
|
||||
maxWidth: 520,
|
||||
marginBottom: 40,
|
||||
}}
|
||||
>
|
||||
Plagiarism is presenting someone else‘s ideas or words as
|
||||
your own. In academia and professional life, it carries serious
|
||||
consequences. Our platform detects it in seconds — so you can
|
||||
submit with full confidence.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
variants={fadeUp(0.38)}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: 16,
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
>
|
||||
<StartButton onClick={onStart} />
|
||||
<span
|
||||
style={{
|
||||
color: C.textMuted,
|
||||
fontSize: 12,
|
||||
fontFamily: "'DM Mono', monospace",
|
||||
}}
|
||||
>
|
||||
Certificate issued within 24h
|
||||
</span>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Illustration (hidden on mobile) */}
|
||||
{!isMobile && <DocIllustration />}
|
||||
</div>
|
||||
|
||||
{/* Stats row */}
|
||||
<motion.div
|
||||
variants={fadeUp(0.52)}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: isMobile ? 28 : 56,
|
||||
flexWrap: 'wrap',
|
||||
marginTop: 72,
|
||||
paddingTop: 36,
|
||||
borderTop: `1px solid ${C.border}`,
|
||||
}}
|
||||
>
|
||||
{STATS.map((s) => (
|
||||
<Stat key={s.label} value={s.value} label={s.label} />
|
||||
))}
|
||||
</motion.div>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
87
src/widgets/home/components/InfoCard.tsx
Normal file
87
src/widgets/home/components/InfoCard.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import { useRef, type FC } from 'react';
|
||||
import { motion, useInView } from 'framer-motion';
|
||||
import { fadeUp } from '../animations';
|
||||
import { C } from '../tokens';
|
||||
import type { InfoCardData } from '../types';
|
||||
|
||||
const InfoCard: FC<InfoCardData> = ({
|
||||
title,
|
||||
text,
|
||||
icon,
|
||||
accent,
|
||||
bg,
|
||||
delay,
|
||||
}) => {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const inView = useInView(ref, { once: true, margin: '-40px' });
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
variants={fadeUp(delay)}
|
||||
initial="hidden"
|
||||
animate={inView ? 'visible' : 'hidden'}
|
||||
style={{
|
||||
flex: '1 1 280px',
|
||||
background: C.surface,
|
||||
border: `1px solid ${C.border}`,
|
||||
borderRadius: 12,
|
||||
padding: 32,
|
||||
boxShadow: `0 2px 12px ${C.shadow}`,
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{/* Top accent bar */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: 3,
|
||||
background: accent,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Icon */}
|
||||
<div
|
||||
style={{
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 10,
|
||||
background: bg,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: 20,
|
||||
marginBottom: 18,
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
|
||||
<h3
|
||||
style={{
|
||||
fontFamily: "'Playfair Display', serif",
|
||||
fontSize: 18,
|
||||
fontWeight: 700,
|
||||
color: C.text,
|
||||
marginBottom: 12,
|
||||
marginTop: 0,
|
||||
lineHeight: 1.3,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</h3>
|
||||
|
||||
<p
|
||||
style={{ color: C.textMuted, fontSize: 14, lineHeight: 1.8, margin: 0 }}
|
||||
>
|
||||
{text}
|
||||
</p>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InfoCard;
|
||||
55
src/widgets/home/components/InfoSection.tsx
Normal file
55
src/widgets/home/components/InfoSection.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import type { FC } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { fadeUp } from '../animations';
|
||||
import { C } from '../tokens';
|
||||
import { INFO_CARDS } from '../constants';
|
||||
import InfoCard from './InfoCard';
|
||||
import Section from './Section';
|
||||
|
||||
const InfoSection: FC = () => (
|
||||
<div style={{ background: C.surfaceWarm }}>
|
||||
<Section style={{ paddingTop: 96, paddingBottom: 96 }}>
|
||||
{/* Heading */}
|
||||
<motion.div
|
||||
variants={fadeUp()}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
style={{ marginBottom: 48 }}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "'DM Mono', monospace",
|
||||
fontSize: 11,
|
||||
color: C.accent,
|
||||
letterSpacing: '0.14em',
|
||||
textTransform: 'uppercase',
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
Why It Matters
|
||||
</p>
|
||||
<h2
|
||||
style={{
|
||||
fontFamily: "'Playfair Display', serif",
|
||||
fontSize: 'clamp(26px, 3.5vw, 40px)',
|
||||
fontWeight: 700,
|
||||
color: C.text,
|
||||
lineHeight: 1.2,
|
||||
}}
|
||||
>
|
||||
Understanding Plagiarism
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
{/* Cards */}
|
||||
<div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
|
||||
{INFO_CARDS.map((card) => (
|
||||
<InfoCard key={card.title} {...card} />
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default InfoSection;
|
||||
16
src/widgets/home/components/Section.tsx
Normal file
16
src/widgets/home/components/Section.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import type { CSSProperties, FC, ReactNode } from 'react';
|
||||
|
||||
interface SectionProps {
|
||||
children: ReactNode;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
const Section: FC<SectionProps> = ({ children, style = {} }) => (
|
||||
<section
|
||||
style={{ maxWidth: 1120, margin: '0 auto', padding: '0 24px', ...style }}
|
||||
>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Section;
|
||||
43
src/widgets/home/components/StartButton.tsx
Normal file
43
src/widgets/home/components/StartButton.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
'use client';
|
||||
import { useState, type FC } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { C } from '../tokens';
|
||||
|
||||
interface StartButtonProps {
|
||||
onClick: () => void;
|
||||
small?: boolean;
|
||||
}
|
||||
|
||||
const StartButton: FC<StartButtonProps> = ({ onClick, small = false }) => {
|
||||
const [hovered, setHovered] = useState(false);
|
||||
|
||||
return (
|
||||
<motion.button
|
||||
whileTap={{ scale: 0.97 }}
|
||||
onHoverStart={() => setHovered(true)}
|
||||
onHoverEnd={() => setHovered(false)}
|
||||
onClick={onClick}
|
||||
style={{
|
||||
padding: small ? '10px 28px' : '15px 44px',
|
||||
borderRadius: 6,
|
||||
border: 'none',
|
||||
background: hovered ? C.accentHover : C.accent,
|
||||
color: '#fff',
|
||||
fontFamily: "'DM Mono', monospace",
|
||||
fontSize: small ? 11 : 13,
|
||||
fontWeight: 500,
|
||||
letterSpacing: '0.07em',
|
||||
textTransform: 'uppercase',
|
||||
cursor: 'pointer',
|
||||
transition: 'background 0.2s, box-shadow 0.25s',
|
||||
boxShadow: hovered
|
||||
? `0 8px 28px ${C.accent}44, 0 2px 8px ${C.accent}22`
|
||||
: `0 2px 8px ${C.accent}22`,
|
||||
}}
|
||||
>
|
||||
Start Checking →
|
||||
</motion.button>
|
||||
);
|
||||
};
|
||||
|
||||
export default StartButton;
|
||||
32
src/widgets/home/components/Stat.tsx
Normal file
32
src/widgets/home/components/Stat.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import type { FC } from 'react';
|
||||
import { C } from '../tokens';
|
||||
import type { StatItem } from '../types';
|
||||
|
||||
const Stat: FC<StatItem> = ({ value, label }) => (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
fontFamily: "'Playfair Display', serif",
|
||||
fontSize: 32,
|
||||
fontWeight: 700,
|
||||
color: C.accent,
|
||||
lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
{value}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
color: C.textMuted,
|
||||
fontSize: 12,
|
||||
marginTop: 5,
|
||||
fontFamily: "'DM Mono', monospace",
|
||||
letterSpacing: '0.05em',
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Stat;
|
||||
108
src/widgets/home/components/StepCard.tsx
Normal file
108
src/widgets/home/components/StepCard.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import { useRef, type FC } from 'react';
|
||||
import { motion, useInView } from 'framer-motion';
|
||||
import { fadeUp } from '../animations';
|
||||
import { C } from '../tokens';
|
||||
import { STEPS } from '../constants';
|
||||
import type { Step } from '../types';
|
||||
|
||||
interface StepCardProps {
|
||||
step: Step;
|
||||
index: number;
|
||||
}
|
||||
|
||||
const StepCard: FC<StepCardProps> = ({ step, index }) => {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const inView = useInView(ref, { once: true, margin: '-50px' });
|
||||
const isLast = index === STEPS.length - 1;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
variants={fadeUp(index * 0.09)}
|
||||
initial="hidden"
|
||||
animate={inView ? 'visible' : 'hidden'}
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: 20,
|
||||
alignItems: 'flex-start',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{/* Vertical connector line */}
|
||||
{!isLast && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: 21,
|
||||
top: 48,
|
||||
width: 2,
|
||||
height: 'calc(100% + 16px)',
|
||||
background: `linear-gradient(to bottom, ${C.border}, transparent)`,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Step number badge */}
|
||||
<div
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 8,
|
||||
border: `1.5px solid ${C.border}`,
|
||||
background: C.surface,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontFamily: "'DM Mono', monospace",
|
||||
fontSize: 11,
|
||||
fontWeight: 500,
|
||||
color: C.accent,
|
||||
letterSpacing: '0.06em',
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
boxShadow: `0 2px 8px ${C.shadow}`,
|
||||
}}
|
||||
>
|
||||
{step.num}
|
||||
</div>
|
||||
|
||||
{/* Step content */}
|
||||
<div style={{ paddingBottom: 28, flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 9,
|
||||
marginBottom: 7,
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: 16 }}>{step.icon}</span>
|
||||
<h3
|
||||
style={{
|
||||
fontFamily: "'Playfair Display', serif",
|
||||
fontSize: 17,
|
||||
color: C.text,
|
||||
margin: 0,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{step.title}
|
||||
</h3>
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
color: C.textMuted,
|
||||
fontSize: 13.5,
|
||||
lineHeight: 1.75,
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
{step.desc}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StepCard;
|
||||
129
src/widgets/home/components/StepsSection.tsx
Normal file
129
src/widgets/home/components/StepsSection.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
import type { FC } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { fadeUp } from '../animations';
|
||||
import { C } from '../tokens';
|
||||
import { STEPS } from '../constants';
|
||||
import { useIsMobile } from '../hooks/useIsMobile';
|
||||
import Section from './Section';
|
||||
import StartButton from './StartButton';
|
||||
import StepCard from './StepCard';
|
||||
|
||||
interface StepsSectionProps {
|
||||
stepsRef: React.RefObject<HTMLDivElement | null>;
|
||||
onScrollTop: () => void;
|
||||
}
|
||||
|
||||
const StepsSection: FC<StepsSectionProps> = ({ stepsRef, onScrollTop }) => {
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
background: C.surface,
|
||||
borderTop: `1px solid ${C.border}`,
|
||||
borderBottom: `1px solid ${C.border}`,
|
||||
}}
|
||||
>
|
||||
<Section style={{ paddingTop: 96, paddingBottom: 96 }}>
|
||||
<div ref={stepsRef} style={{ scrollMarginTop: 72 }}>
|
||||
{/* Heading */}
|
||||
<motion.div
|
||||
variants={fadeUp()}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
style={{ marginBottom: 60 }}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "'DM Mono', monospace",
|
||||
fontSize: 11,
|
||||
color: C.accent,
|
||||
letterSpacing: '0.14em',
|
||||
textTransform: 'uppercase',
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
Process
|
||||
</p>
|
||||
<h2
|
||||
style={{
|
||||
fontFamily: "'Playfair Display', serif",
|
||||
fontSize: 'clamp(26px, 3.5vw, 40px)',
|
||||
fontWeight: 700,
|
||||
color: C.text,
|
||||
lineHeight: 1.2,
|
||||
}}
|
||||
>
|
||||
How It Works
|
||||
</h2>
|
||||
<p
|
||||
style={{
|
||||
color: C.textMuted,
|
||||
fontSize: 14,
|
||||
marginTop: 10,
|
||||
lineHeight: 1.75,
|
||||
}}
|
||||
>
|
||||
Six simple steps from upload to certified report.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Steps grid */}
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
|
||||
gap: '0 72px',
|
||||
}}
|
||||
>
|
||||
{STEPS.map((step, i) => (
|
||||
<StepCard key={step.num} step={step} index={i} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA banner */}
|
||||
<motion.div
|
||||
variants={fadeUp()}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
style={{
|
||||
marginTop: 64,
|
||||
padding: isMobile ? '28px 24px' : '36px 40px',
|
||||
background: C.accentLight,
|
||||
border: `1px solid ${C.accent}22`,
|
||||
borderRadius: 12,
|
||||
display: 'flex',
|
||||
alignItems: isMobile ? 'flex-start' : 'center',
|
||||
flexDirection: isMobile ? 'column' : 'row',
|
||||
justifyContent: 'space-between',
|
||||
gap: 24,
|
||||
boxShadow: `0 4px 24px ${C.accent}10`,
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h3
|
||||
style={{
|
||||
fontFamily: "'Playfair Display', serif",
|
||||
fontSize: 22,
|
||||
color: C.text,
|
||||
marginBottom: 6,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
Ready to verify your document?
|
||||
</h3>
|
||||
<p style={{ color: C.textMuted, fontSize: 13 }}>
|
||||
Get your originality certificate in under 24 hours.
|
||||
</p>
|
||||
</div>
|
||||
<StartButton onClick={onScrollTop} />
|
||||
</motion.div>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StepsSection;
|
||||
51
src/widgets/home/components/Ticker.tsx
Normal file
51
src/widgets/home/components/Ticker.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import type { FC } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { C } from '../tokens';
|
||||
import { TICKER_ITEMS } from '../constants';
|
||||
|
||||
const Ticker: FC = () => {
|
||||
const doubled = [...TICKER_ITEMS, ...TICKER_ITEMS];
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
overflow: 'hidden',
|
||||
borderTop: `1px solid ${C.border}`,
|
||||
borderBottom: `1px solid ${C.border}`,
|
||||
padding: '11px 0',
|
||||
background: C.surfaceWarm,
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
animate={{ x: ['0%', '-50%'] }}
|
||||
transition={{ duration: 20, repeat: Infinity, ease: 'linear' }}
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: 56,
|
||||
whiteSpace: 'nowrap',
|
||||
width: 'max-content',
|
||||
}}
|
||||
>
|
||||
{doubled.map((item, i) => (
|
||||
<span
|
||||
key={i}
|
||||
style={{
|
||||
fontFamily: "'DM Mono', monospace",
|
||||
fontSize: 11,
|
||||
letterSpacing: '0.13em',
|
||||
textTransform: 'uppercase',
|
||||
color: i % 3 === 0 ? C.textMid : C.textMuted,
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
<span style={{ marginLeft: 56, color: C.accent, opacity: 0.3 }}>
|
||||
✦
|
||||
</span>
|
||||
</span>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Ticker;
|
||||
86
src/widgets/home/constants.ts
Normal file
86
src/widgets/home/constants.ts
Normal file
@@ -0,0 +1,86 @@
|
||||
import { C } from './tokens';
|
||||
import type { InfoCardData, StatItem, Step } from './types';
|
||||
|
||||
export const STEPS: Step[] = [
|
||||
{
|
||||
num: '01',
|
||||
icon: '▶',
|
||||
title: 'Click Start',
|
||||
desc: 'Hit the Start button on the homepage to kick off the process.',
|
||||
},
|
||||
{
|
||||
num: '02',
|
||||
icon: '🔐',
|
||||
title: 'Register or Log In',
|
||||
desc: 'Create a free account or sign in to access the checking platform.',
|
||||
},
|
||||
{
|
||||
num: '03',
|
||||
icon: '📄',
|
||||
title: 'Upload Document',
|
||||
desc: "Upload your file and enter the document's topic or theme.",
|
||||
},
|
||||
{
|
||||
num: '04',
|
||||
icon: '📤',
|
||||
title: 'Send for Check',
|
||||
desc: 'Submit your document for deep plagiarism analysis.',
|
||||
},
|
||||
{
|
||||
num: '05',
|
||||
icon: '💳',
|
||||
title: 'Complete Payment',
|
||||
desc: 'Pay securely for the plagiarism checking service.',
|
||||
},
|
||||
{
|
||||
num: '06',
|
||||
icon: '📜',
|
||||
title: 'Get Your Report',
|
||||
desc: 'Receive your official certificate and full plagiarism report.',
|
||||
},
|
||||
];
|
||||
|
||||
export const STATS: StatItem[] = [
|
||||
{ value: '98.7%', label: 'Detection accuracy' },
|
||||
{ value: '50K+', label: 'Documents checked' },
|
||||
{ value: '12+', label: 'Supported formats' },
|
||||
{ value: '24h', label: 'Report turnaround' },
|
||||
];
|
||||
|
||||
export const INFO_CARDS: InfoCardData[] = [
|
||||
{
|
||||
delay: 0,
|
||||
accent: C.accent,
|
||||
bg: C.accentLight,
|
||||
icon: '📖',
|
||||
title: 'What is Plagiarism?',
|
||||
text: "Plagiarism is presenting another person's ideas, words, or creative work without proper attribution. It ranges from direct copy-paste to subtle paraphrasing — both are equally problematic in academic or professional writing.",
|
||||
},
|
||||
{
|
||||
delay: 0.1,
|
||||
accent: C.red,
|
||||
bg: C.redLight,
|
||||
icon: '🛡️',
|
||||
title: 'Why Check Your Document?',
|
||||
text: 'Unintentional plagiarism is more common than you think. Checking before submission protects your reputation, ensures proper citation, meets institutional requirements, and gives you peace of mind.',
|
||||
},
|
||||
{
|
||||
delay: 0.2,
|
||||
accent: C.green,
|
||||
bg: C.greenLight,
|
||||
icon: '📜',
|
||||
title: 'What You Get',
|
||||
text: 'A comprehensive originality report with matched sources, similarity percentages, and an official signed certificate — accepted by universities, publishers, and institutions worldwide.',
|
||||
},
|
||||
];
|
||||
|
||||
export const TICKER_ITEMS: string[] = [
|
||||
'Originality Verified',
|
||||
'Academic Integrity',
|
||||
'Trusted Reports',
|
||||
'Deep Analysis',
|
||||
'Fast Results',
|
||||
'Official Certificate',
|
||||
];
|
||||
|
||||
export const DOC_LINE_WIDTHS: number[] = [100, 88, 95, 72, 90, 60];
|
||||
16
src/widgets/home/hooks/useIsMobile.ts
Normal file
16
src/widgets/home/hooks/useIsMobile.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
'use client';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export function useIsMobile(breakpoint = 768): boolean {
|
||||
const [isMobile, setIsMobile] = useState(
|
||||
typeof window !== 'undefined' ? window.innerWidth <= breakpoint : false,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = () => setIsMobile(window.innerWidth <= breakpoint);
|
||||
window.addEventListener('resize', handler);
|
||||
return () => window.removeEventListener('resize', handler);
|
||||
}, [breakpoint]);
|
||||
|
||||
return isMobile;
|
||||
}
|
||||
29
src/widgets/home/index.tsx
Normal file
29
src/widgets/home/index.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
'use client';
|
||||
import { useRef, type FC } from 'react';
|
||||
import { useScroll, useTransform } from 'framer-motion';
|
||||
import Hero from './components/Hero';
|
||||
import InfoSection from './components/InfoSection';
|
||||
import StepsSection from './components/StepsSection';
|
||||
import Ticker from './components/Ticker';
|
||||
|
||||
const PlagiarismLanding: FC = () => {
|
||||
const stepsRef = useRef<HTMLDivElement>(null);
|
||||
const { scrollY } = useScroll();
|
||||
const blobY = useTransform(scrollY, [0, 600], [0, 80]);
|
||||
|
||||
const scrollToSteps = () =>
|
||||
stepsRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
|
||||
const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
|
||||
return (
|
||||
<>
|
||||
<Hero onStart={scrollToSteps} blobY={blobY} />
|
||||
<Ticker />
|
||||
<InfoSection />
|
||||
<StepsSection stepsRef={stepsRef} onScrollTop={scrollToTop} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlagiarismLanding;
|
||||
20
src/widgets/home/tokens.ts
Normal file
20
src/widgets/home/tokens.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
export const C = {
|
||||
bg: '#F7F5F0',
|
||||
surface: '#FFFFFF',
|
||||
surfaceWarm: '#F0EDE6',
|
||||
border: '#E2DDD6',
|
||||
borderDark: '#C8C2B8',
|
||||
accent: '#1A4FD6',
|
||||
accentLight: '#EEF2FD',
|
||||
accentHover: '#1240B8',
|
||||
text: '#1A1814',
|
||||
textMid: '#4A4640',
|
||||
textMuted: '#8A8680',
|
||||
green: '#1A7A4A',
|
||||
greenLight: '#E8F5EE',
|
||||
red: '#C0392B',
|
||||
redLight: '#FDF0EE',
|
||||
gold: '#B8860B',
|
||||
shadow: 'rgba(26,22,16,0.07)',
|
||||
shadowMd: 'rgba(26,22,16,0.13)',
|
||||
} as const;
|
||||
20
src/widgets/home/types.ts
Normal file
20
src/widgets/home/types.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
export interface Step {
|
||||
num: string;
|
||||
icon: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
}
|
||||
|
||||
export interface StatItem {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface InfoCardData {
|
||||
delay: number;
|
||||
accent: string;
|
||||
bg: string;
|
||||
icon: string;
|
||||
title: string;
|
||||
text: string;
|
||||
}
|
||||
Reference in New Issue
Block a user