Skip to content

Commit c5920eb

Browse files
mvriu5mvriu5
committed
feat: featurecard link button, footer text improvement
1 parent 01a13ef commit c5920eb

File tree

9 files changed

+53
-17
lines changed

9 files changed

+53
-17
lines changed

‎messages/de.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
"title": "Leistungsstarke Funktionen für dein Backend",
5858
"description": "Entdecke die vielseitigen Funktionen von CodeZero, die dir helfen, komplexe Backends schnell und effizient zu erstellen.",
5959
"linkButton": "Lerne mehr über unser Produkt",
60+
"featureLinkButton": "Lerne mehr",
6061
"projectTitle": "Organisationen & Projekte",
6162
"projectDescription": "Verwalte mehrere Projekte und arbeite nahtlos im Team innerhalb einer Organisation.",
6263
"runtimeTitle": "CodeZero Runtime",

‎messages/en.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
"title": "Powerful features for your backend",
5858
"description": "CodeZero offers a range of features designed to simplify backend development and enhance your application's capabilities.",
5959
"linkButton": "Learn more about the product",
60+
"featureLinkButton": "Learn more",
6061
"projectTitle": "Organizations & Projects",
6162
"projectDescription": "Manage multiple projects and collaborate with your team seamlessly within a single organization.",
6263
"runtimeTitle": "CodeZero Runtime",

‎src/components/cards/AdapterCard.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@
33
import { useTranslations } from "next-intl";
44
import React, { useState } from "react";
55
import { motion, AnimatePresence } from "framer-motion";
6-
import { IconDatabase, IconApi, IconBrandStripe } from "@tabler/icons-react";
6+
import { IconDatabase, IconApi, IconBrandStripe, IconArrowUpRight } from "@tabler/icons-react";
77
import { cn } from "@/utils/cn";
88
import { FeatureCard } from "./FeatureCard";
9+
import { Link } from "@/i18n/navigation";
910

1011
const adapters = [
1112
{
@@ -75,6 +76,12 @@ export const AdapterCard: React.FC = () => {
7576
<p className={"text-white/50 text-sm"}>
7677
{t("adapterDescription")}
7778
</p>
79+
<Link href="">
80+
<button className={"mt-2 flex items-center gap-1 text-xs text-white/50 hover:text-brand"}>
81+
{t("featureLinkButton")}
82+
<IconArrowUpRight size={16} />
83+
</button>
84+
</Link>
7885
</div>
7986
</FeatureCard>
8087
)

‎src/components/cards/ProjectCard.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
"use client"
22

33
import React, {useState} from "react"
4-
import {IconFolders, IconHierarchy, IconUsersGroup} from "@tabler/icons-react"
4+
import {IconArrowUpRight, IconFolders, IconHierarchy, IconUsersGroup} from "@tabler/icons-react"
55
import {useTranslations} from "next-intl"
66
import { AnimatedList } from "../AnimatedList"
77
import { FeatureCard } from "./FeatureCard"
8+
import { Link } from "@/i18n/navigation"
89

910
export const ProjectCard: React.FC = () => {
1011
const t = useTranslations("FeatureSection")
@@ -71,6 +72,12 @@ export const ProjectCard: React.FC = () => {
7172
<p className={"text-white/50 text-sm"}>
7273
{t("projectDescription")}
7374
</p>
75+
<Link href="">
76+
<button className={"mt-2 flex items-center gap-1 text-xs text-white/50 hover:text-brand"}>
77+
{t("featureLinkButton")}
78+
<IconArrowUpRight size={16} />
79+
</button>
80+
</Link>
7481
</div>
7582
</FeatureCard>
7683
)

‎src/components/cards/RuntimeCard.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React from 'react'
22
import { useTranslations } from 'next-intl'
33
import { FeatureCard } from './FeatureCard'
44
import { AnimatedChart } from '../AnimatedChart'
5+
import { Link } from '@/i18n/navigation'
6+
import { IconArrowUpRight } from '@tabler/icons-react'
57

68
export const RuntimeCard: React.FC = () => {
79
const t = useTranslations('FeatureSection')
@@ -16,6 +18,12 @@ export const RuntimeCard: React.FC = () => {
1618
<p className={'text-white/50 text-sm text-justify'}>
1719
{t('runtimeDescription')}
1820
</p>
21+
<Link href="">
22+
<button className={"mt-2 flex items-center gap-1 text-xs text-white/50 hover:text-brand"}>
23+
{t("featureLinkButton")}
24+
<IconArrowUpRight size={16} />
25+
</button>
26+
</Link>
1927
</div>
2028
<AnimatedChart />
2129
</div>

‎src/components/cards/SuggestionCard.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22

33
import React from "react"
44
import {useTranslations} from "next-intl"
5-
import {IconChevronDown} from "@tabler/icons-react"
5+
import {IconArrowUpRight, IconChevronDown} from "@tabler/icons-react"
66
import { FeatureCard } from "./FeatureCard"
7+
import { Link } from "@/i18n/navigation"
78

89
export const SuggestionCard: React.FC = () => {
910
const t = useTranslations("FeatureSection")
@@ -28,6 +29,12 @@ export const SuggestionCard: React.FC = () => {
2829
<p className={"text-white/50 text-sm"}>
2930
{t("suggestionDescription")}
3031
</p>
32+
<Link href="">
33+
<button className={"mt-2 flex items-center gap-1 text-xs text-white/50 hover:text-brand"}>
34+
{t("featureLinkButton")}
35+
<IconArrowUpRight size={16} />
36+
</button>
37+
</Link>
3138
</div>
3239

3340
<div className="absolute -bottom-12 -right-2 w-96 bg-linear-to-t from-primary to-[#0d1120] rounded-lg ring ring-white/10 drop-shadow-[0_65px_65px_rgba(0,0,0,0.25)]">

‎src/sections/FeatureSection.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React from "react"
21
import { AdapterCard } from "@/components/cards/AdapterCard"
3-
import {ProjectCard} from "@/components/cards/ProjectCard"
4-
import {RuntimeCard} from "@/components/cards/RuntimeCard"
5-
import {SuggestionCard} from "@/components/cards/SuggestionCard"
6-
import {useTranslations} from "next-intl"
7-
import {IconArrowUpRight} from "@tabler/icons-react"
2+
import { ProjectCard } from "@/components/cards/ProjectCard"
3+
import { RuntimeCard } from "@/components/cards/RuntimeCard"
4+
import { SuggestionCard } from "@/components/cards/SuggestionCard"
5+
import { IconArrowUpRight } from "@tabler/icons-react"
6+
import { useTranslations } from "next-intl"
7+
import React from "react"
88

99
export const FeatureSection: React.FC = () => {
1010
const t = useTranslations("FeatureSection")

‎src/sections/FooterSection.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,29 @@ import React from "react";
44
import Link from "next/link";
55
import {IconBrandDiscord, IconBrandGithub, IconBrandInstagram, IconBrandX} from "@tabler/icons-react"
66
import {Spotlight} from "@/components/Spotlight"
7-
import {useTranslations} from "next-intl"
7+
import { useTranslations } from "next-intl"
8+
import Image from "next/image"
89

910
export const FooterSection: React.FC = () => {
1011
const t = useTranslations("FooterSection")
1112

1213
return (
1314
<div className={"relative bg-primary overflow-hidden"}>
1415
<div className={"absolute inset-0 h-full w-full bg-black/20 border-t border-white/10"}/>
15-
<Spotlight opacity={0.2} duration={20}/>
16+
<Spotlight opacity={0.2} duration={20} />
17+
18+
<p className="absolute -bottom-42 left-1/2 -translate-x-1/2 text-[312px] font-bold opacity-2">CodeZero</p>
1619

1720
<div className="relative flex flex-col gap-16 px-8 lg:px-20 pt-24 lg:pt-40 pb-24 rounded-t-xl overflow-hidden">
1821

1922
<div className={"grid grid-cols-2 lg:grid-cols-4 gap-4"}>
2023
<div className={"flex flex-col lg:justify-between gap-2"}>
21-
<p className={"text-white"}>
22-
{t("name")}
23-
</p>
24+
<div className="flex items-center gap-2">
25+
<Image src={"/code0_logo_white.png"} width={"32"} height={"32"} alt={"Code0 Logo"}/>
26+
<p className={"text-white"}>
27+
{t("name")}
28+
</p>
29+
</div>
2430
<div className={"flex items-center gap-4"}>
2531
<Link href={"https://instagram.com/code0.tech"}>
2632
<IconBrandInstagram size={24} className={"text-white/75"}/>

‎src/sections/UseCaseSection.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -136,8 +136,7 @@ export const UseCaseSection: React.FC = () => {
136136
</div>
137137

138138
<div className={"w-[90%] flex flex-col items-center justify-center mx-auto"}>
139-
<div className={"z-10 relative w-max h-full flex items-center -mb-6 p-2 rounded-2xl bg-[#353343] border border-white/5 shadow-md"}
140-
>
139+
<div className={"z-10 relative w-max h-full flex items-center -mb-6 p-2 rounded-2xl bg-[#353343] border border-white/5 shadow-md"}>
141140
<div className={"flex items-center gap-2"}>
142141
{useCases.map((item) => (
143142
<UseCaseTab key={item}
@@ -150,7 +149,7 @@ export const UseCaseSection: React.FC = () => {
150149
</div>
151150
<motion.div
152151
animate={{...position}}
153-
className={cn("absolute z-40 h-8 rounded-lg bg-white")}
152+
className={cn("absolute z-40 h-8 rounded-lg bg-white ring ring-white/20")}
154153
/>
155154
</div>
156155
<div className="flex w-full h-[600px] rounded-2xl bg-white/2 ring ring-white/5 shadow-lg">

0 commit comments

Comments
 (0)