better padding, bump
p-4 will now be the default for small screens (mobile devices), and p-8 for sm+ sized devices. this does not apply everywhere, like in the TopPick.tsx component
This commit is contained in:
parent
3fe4b7b369
commit
dee931f3a8
9 changed files with 36 additions and 31 deletions
|
@ -8,7 +8,7 @@ interface AIStackProps {
|
|||
|
||||
export default function AIStack({ tools }: AIStackProps) {
|
||||
const getStatusColor = (status: string) => {
|
||||
switch(status) {
|
||||
switch (status) {
|
||||
case 'primary': return 'text-green-400 border-green-400 bg-green-400/10'
|
||||
case 'active': return 'text-blue-400 border-blue-400 bg-blue-400/10'
|
||||
case 'occasional': return 'text-yellow-400 border-yellow-400 bg-yellow-400/10'
|
||||
|
@ -17,7 +17,7 @@ export default function AIStack({ tools }: AIStackProps) {
|
|||
}
|
||||
|
||||
const getStatusLabel = (status: string) => {
|
||||
switch(status) {
|
||||
switch (status) {
|
||||
case 'primary': return 'Primary'
|
||||
case 'active': return 'Active Use'
|
||||
case 'occasional': return 'Occasional Use'
|
||||
|
@ -26,7 +26,7 @@ export default function AIStack({ tools }: AIStackProps) {
|
|||
}
|
||||
|
||||
return (
|
||||
<section className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
|
||||
<section className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
|
||||
<h2 className="text-2xl font-semibold mb-6 text-gray-200 flex items-center gap-2">
|
||||
<Bot size={24} />
|
||||
My AI Stack
|
||||
|
@ -70,4 +70,4 @@ export default function AIStack({ tools }: AIStackProps) {
|
|||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,7 +7,7 @@ interface FavoriteModelsProps {
|
|||
|
||||
export default function FavoriteModels({ models }: FavoriteModelsProps) {
|
||||
return (
|
||||
<section className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
|
||||
<section className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
|
||||
<h2 className="text-2xl font-semibold mb-6 text-gray-200 flex items-center gap-2">
|
||||
<Star size={24} />
|
||||
Favorite Models
|
||||
|
@ -36,4 +36,4 @@ export default function FavoriteModels({ models }: FavoriteModelsProps) {
|
|||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,7 +7,7 @@ interface ToolReviewsProps {
|
|||
|
||||
export default function ToolReviews({ reviews }: ToolReviewsProps) {
|
||||
return (
|
||||
<section className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
|
||||
<section className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
|
||||
<h2 className="text-2xl font-semibold mb-6 text-gray-200 flex items-center gap-2">
|
||||
<MessageSquare size={24} />
|
||||
Tool Reviews
|
||||
|
@ -51,4 +51,4 @@ export default function ToolReviews({ reviews }: ToolReviewsProps) {
|
|||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,7 +9,7 @@ export default function TopPick() {
|
|||
<Trophy size={32} />
|
||||
Top Pick of 2025
|
||||
</h2>
|
||||
<div className="p-8 border-2 border-[#c15f3c] rounded-lg bg-orange-500/5">
|
||||
<div className="p-6 sm:p-8 border-2 border-[#c15f3c] rounded-lg bg-orange-500/5">
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<SiClaude className="text-6xl text-[#c15f3c]" />
|
||||
|
@ -46,4 +46,4 @@ export default function TopPick() {
|
|||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue