Skip to content

Commit b52dddc

Browse files
pettinarippettinarip
committed
initial layout
1 parent bf6692d commit b52dddc

File tree

1 file changed

+182
-0
lines changed
  • app/[locale]/trillion-dollar-security

1 file changed

+182
-0
lines changed

‎app/[locale]/trillion-dollar-security/page.tsx

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
import React from "react"
2+
import Image from "next/image"
3+
4+
import MainArticle from "@/components/MainArticle"
5+
import { ButtonLink } from "@/components/ui/buttons/Button"
6+
import {
7+
Card,
8+
CardContent,
9+
CardDescription,
10+
CardFooter,
11+
} from "@/components/ui/card"
12+
13+
const sections = [
14+
{ id: "overview", label: "Overview" },
15+
{ id: "methodology", label: "Methodology" },
16+
{ id: "findings", label: "Key Findings" },
17+
{ id: "recommendations", label: "Recommendations" },
18+
{ id: "conclusion", label: "Conclusion" },
19+
]
20+
21+
export default function TdsPage() {
22+
return (
23+
<MainArticle>
24+
{/* Hero Section */}
25+
<section className="mb-8 w-full">
26+
<Image
27+
src="https://placehold.co/1200x400.png"
28+
alt="Hero Placeholder"
29+
width={1200}
30+
height={400}
31+
className="h-[400px] w-full object-cover"
32+
/>
33+
<p className="mb-2 mt-6 text-center text-lg">Secure the future</p>
34+
<h1 className="mb-20 text-center">Trillion Dollar Security Project</h1>
35+
{/* Hero content below the title */}
36+
<div className="mt-8 flex flex-col gap-8 lg:flex-row lg:items-start">
37+
{/* Left: 3 paragraphs */}
38+
<div className="flex-1 space-y-6">
39+
<p className="text-lg">
40+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
41+
Pellentesque euismod, urna eu tincidunt consectetur, nisi nisl
42+
aliquam nunc, eget aliquam massa nisl quis neque.
43+
</p>
44+
<p className="text-lg">
45+
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
46+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
47+
nisi ut aliquip ex ea commodo consequat.
48+
</p>
49+
<p className="text-lg">
50+
Duis aute irure dolor in reprehenderit in voluptate velit esse
51+
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
52+
cupidatat non proident.
53+
</p>
54+
</div>
55+
{/* Right: Download Card */}
56+
<div className="mx-auto w-full max-w-md flex-shrink-0 lg:mx-0">
57+
<Card className="rounded-2xl border bg-card-gradient-secondary p-8">
58+
<CardContent className="p-0 pb-4">
59+
<CardDescription className="text-lg font-bold text-body">
60+
Ethereum ecosystem security overview report
61+
</CardDescription>
62+
</CardContent>
63+
<CardFooter className="p-0">
64+
<ButtonLink href="#">Download the report</ButtonLink>
65+
</CardFooter>
66+
</Card>
67+
</div>
68+
</div>
69+
</section>
70+
71+
{/* Divider and new heading */}
72+
<div className="my-12 h-0.5 w-full rounded bg-primary" />
73+
<div className="mb-20 flex flex-col items-center">
74+
<h2 className="mb-8 text-center font-extrabold">
75+
Ethereum ecosystem security overview report
76+
</h2>
77+
<p className="max-w-screen-md text-center text-lg">
78+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
79+
euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget
80+
aliquam massa nisl quis neque.
81+
</p>
82+
</div>
83+
84+
{/* Main Content Sections - Each with its own sticky heading */}
85+
<div className="mb-20 w-full space-y-32 px-4 md:mx-6 lg:space-y-48">
86+
{sections.map((section) => (
87+
<section
88+
key={section.id}
89+
id={section.id}
90+
className="mb-8 flex items-start gap-8"
91+
>
92+
{/* Sticky Heading + Image */}
93+
<div className="sticky top-24 hidden h-fit w-[400px] flex-shrink-0 flex-col items-start self-start lg:flex">
94+
<h2 className="mb-4 text-2xl font-bold">{section.label}</h2>
95+
<Image
96+
src="https://placehold.co/600x300.png"
97+
alt={`${section.label} Placeholder`}
98+
width={400}
99+
height={200}
100+
className="mb-4 h-auto w-full rounded-xl"
101+
/>
102+
<p className="mt-4">
103+
{/* Dummy sticky section text */}
104+
This is some sticky section info for {section.label}. Lorem
105+
ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
106+
euismod, urna eu tincidunt consectetur.
107+
</p>
108+
</div>
109+
{/* Section Content */}
110+
<div className="flex-1">
111+
{/* Show heading on mobile */}
112+
<h2 className="mb-4 text-2xl font-bold lg:hidden">
113+
{section.label}
114+
</h2>
115+
{/* Example subsections for demonstration */}
116+
<div className="space-y-10">
117+
<div className="space-y-4">
118+
<h3 className="mb-4 text-xl font-semibold">Overview</h3>
119+
<p className="text-lg">
120+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
121+
Pellentesque euismod, urna eu tincidunt consectetur, nisi
122+
nisl aliquam nunc, eget aliquam massa nisl quis neque.
123+
</p>
124+
<p className="text-lg">
125+
Sed do eiusmod tempor incididunt ut labore et dolore magna
126+
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
127+
ullamco laboris nisi ut aliquip ex ea commodo consequat.
128+
</p>
129+
<p className="text-lg">
130+
Duis aute irure dolor in reprehenderit in voluptate velit
131+
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
132+
occaecat cupidatat non proident.
133+
</p>
134+
</div>
135+
<div className="space-y-4">
136+
<h3 className="mb-4 text-xl font-semibold">
137+
Subsection Title
138+
</h3>
139+
<p className="text-lg">
140+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
141+
Pellentesque euismod, urna eu tincidunt consectetur, nisi
142+
nisl aliquam nunc, eget aliquam massa nisl quis neque.
143+
</p>
144+
<p className="text-lg">
145+
Sed do eiusmod tempor incididunt ut labore et dolore magna
146+
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
147+
ullamco laboris nisi ut aliquip ex ea commodo consequat.
148+
</p>
149+
<p className="text-lg">
150+
Duis aute irure dolor in reprehenderit in voluptate velit
151+
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
152+
occaecat cupidatat non proident.
153+
</p>
154+
</div>
155+
<div className="space-y-4">
156+
<h3 className="mb-4 text-xl font-semibold">
157+
Another Subsection
158+
</h3>
159+
<p className="text-lg">
160+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
161+
Pellentesque euismod, urna eu tincidunt consectetur, nisi
162+
nisl aliquam nunc, eget aliquam massa nisl quis neque.
163+
</p>
164+
<p className="text-lg">
165+
Sed do eiusmod tempor incididunt ut labore et dolore magna
166+
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
167+
ullamco laboris nisi ut aliquip ex ea commodo consequat.
168+
</p>
169+
<p className="text-lg">
170+
Duis aute irure dolor in reprehenderit in voluptate velit
171+
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
172+
occaecat cupidatat non proident.
173+
</p>
174+
</div>
175+
</div>
176+
</div>
177+
</section>
178+
))}
179+
</div>
180+
</MainArticle>
181+
)
182+
}

0 commit comments

Comments
 (0)