new contacts page

next.config.mjs

@@ -20,9 +20,8 @@ const nextConfig = {
   webpack(config) {
     config.cache = false;
     config.module.rules.push({
-      test: /\.svg$/i,
-      issuer: /\.[jt]sx?$/,
-      use: ["@svgr/webpack"],
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
     });
 
     return config;

src/app/contacts/page.tsx

@@ -1,6 +1,63 @@
 import Link from "next/link";
 import Header from "@/app/modules/components/Header";
-import style from '@/app/styles/contacts/contacts.module.css';
+import style from './styles/page.module.css';
+import style_card from './styles/card.module.css';
+import Image from "next/image";
+import { CSSProperties } from "react";
+import { IconBrandTelegram, IconExternalLink } from "@tabler/icons-react";
+
+
+interface CardProps {
+    name: string,
+    image: string,
+    description: string,
+    color: string,
+    site_name: string,
+    links: {
+        name: string,
+        URL: string,
+        type: 'telegram' | 'URL'
+    }[]
+}
+
+const Card = (props: CardProps) => {
+    const links = props.links.map(link => {
+        let icon;
+        switch (link.type) {
+            case 'telegram':
+                icon = <IconBrandTelegram width={24} height={24} />
+                break;
+            default:
+                icon = <IconExternalLink width={24} height={24} />
+                break;
+        }
+        return <Link href={link.URL} key={link.name} target="_blank" className={style_card.link}>{icon} {link.name}</Link>
+    });
+
+    return (
+        <article className={style_card.main}>
+            <Image
+                width={250}
+                height={250}
+                alt={props.name}
+                src={props.image}
+
+                className={style_card.img}
+                style={{ '--shadow-color': props.color } as CSSProperties}
+                unoptimized
+            />
+            <div className={style_card.info_container}>
+                <div className={style_card.names}>
+                    <Link href={`/users/${props.site_name}`} className={style_card.name}>{props.name}</Link>
+                    <p>{props.description}</p>
+                </div>
+                <div className={style_card.links_container}>
+                    {links}
+                </div>
+            </div>
+        </article>
+    )
+}
 
 
 const Home = () => {
@@ -10,10 +67,47 @@ const Home = () => {
             <main className={style.main}>
                 <div className={style.main_container}>
                     <h1 style={{ marginTop: 0, width: '100%', textAlign: 'center', fontSize: '2rem' }}>Контакты</h1>
-                    <p>
-                        <Link href='https://andcool.ru' target="_blank">AndcoolSystems</Link> – Разработчик<br />
-                        <Link href='https://vk.com/shapestd' target="_blank">Shape STD</Link> – Продакшн, дизайн повязок
-                    </p>
+                    <div className={style.cards_container}>
+                        <Card
+                            name="AndcoolSystems"
+                            image="/static/contacts/dino.gif"
+                            description="Главный разработчик"
+                            color="#f8a824"
+                            site_name="andcoolsystems"
+                            links={[
+                                {
+                                    name: 'Telegram',
+                                    URL: 'https://t.me/andcool_systems',
+                                    type: 'telegram'
+                                },
+                                {
+                                    name: 'Сайт',
+                                    URL: 'https://andcool.ru',
+                                    type: 'URL'
+                                }
+                            ]}
+                        />
+
+                        <Card
+                            name="Shape STD"
+                            image="/static/contacts/dino_like.gif"
+                            description="Продакшн, дизайн повязок"
+                            color="#689295"
+                            site_name="gamdav_"
+                            links={[
+                                {
+                                    name: 'Telegram',
+                                    URL: 'https://t.me/shapestd',
+                                    type: 'telegram'
+                                },
+                                {
+                                    name: 'ВК',
+                                    URL: 'https://vk.com/shapestd',
+                                    type: 'URL'
+                                }
+                            ]}
+                        />
+                    </div>
                 </div>
             </main>
         </body>

src/app/contacts/styles/card.module.css

@@ -0,0 +1,93 @@
+.main {
+    position: relative;
+    width: 250px;
+
+    border: 1px solid var(--main-element-color);
+    background-color: var(--main-card-color);
+    box-sizing: border-box;
+    border-radius: 10px;
+
+    display: flex;
+    flex-direction: column;
+}
+
+.info_container {
+    padding: .7rem 1rem 1rem;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: .3rem;
+    height: 100%;
+}
+
+.names {
+    display: flex;
+    flex-direction: column;
+    gap: .3rem;
+}
+
+.name {
+    margin: 0;
+    color: var(--main-text-color);
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 1.3rem;
+    overflow-wrap: anywhere;
+}
+
+.name:hover {
+    text-decoration: underline;
+}
+
+.info_container p {
+    margin: 0;
+    color: #d8d8d8;
+    overflow-wrap: anywhere;
+}
+
+.img {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1;
+    box-sizing: border-box;
+
+    border: 1px solid var(--main-element-color);
+    box-shadow: var(--main-shadow-color) 0 0 5px 0;
+    border-radius: 10px;
+
+    background: linear-gradient(180deg, transparent 0, var(--shadow-color) 100%);
+}
+
+.link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: .3rem;
+
+    padding: .5rem;
+    background-color: var(--main-element-color);
+    border-radius: 10px;
+    text-decoration: none;
+    font-weight: 500;
+
+    transition: background-color .2s;
+}
+
+.link:hover {
+    background-color: var(--hr-color);
+}
+
+.links_container {
+    margin-top: .5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: .5rem;
+}
+
+@media(max-width: 500px) {
+    .main {
+        width: 100%;
+    }
+}

src/app/contacts/styles/page.module.css

@@ -0,0 +1,13 @@
+.main {
+    margin-left: 2rem;
+    margin-right: 2rem;
+}
+
+.cards_container {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    align-items: stretch;
+    flex-wrap: wrap;
+    gap: 1rem;
+}