cloudaitech/header.php at main · vdavidmarques/cloudaitech · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<?php
    $rootDir = "";
    if(strpos($_SERVER['HTTP_HOST'], 'localhost')===FALSE)
    {
    //On Production
    $rootDir = $_SERVER['DOCUMENT_ROOT'];
    } else {
        //On Dev server
        $rootDir = $_SERVER['DOCUMENT_ROOT'] . '/cloudaitech';

        $find = '/var/www/html';
        $replacement = '';
        $root = str_replace($find, $replacement, $rootDir);
    }
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CloudAi Tech</title>
    <!-- <link rel="stylesheet" href="src/css/output.css"> -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="<?php echo $root  ?>/src/js/tailwindcss.js"></script>
    <link rel="stylesheet" href="<?php echo $root  ?>/src/css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/tailwindcss">
        @layer base {
            .container{
                @apply mx-auto px-4 lg:px-8
            }
              /* 20px */
            .heading-title-xxs{
                @apply font-neuro text-sm lg:text-[1.25rem] lg:leading-9 tracking-wide
            }

            /* 30px */
            .heading-title-xs{
                @apply font-neuro text-lg lg:text-[1.875rem] lg:leading-8 tracking-wide
            }

            /* 32px */
            .heading-title-sm{
                @apply font-neuro lg:text-[2rem] lg:leading-[3.125rem] tracking-wide
            }

            /* 46px */
            .heading-title-md{
                @apply font-neuro text-2xl lg:text-[2.875rem] lg:leading-[3.125rem] tracking-wide
            }

            /* 50px */
            .heading-title-lg{
                @apply font-neuro lg:text-[3.125rem] lg:leading-[3.75rem] tracking-wide
            }

            /* 60px */
            .heading-title-xl{
                @apply font-neuro text-5xl lg:text-[3.75rem] lg:leading-[3.125rem] tracking-wide
            }

            /* 65px */
            .heading-title-2xl{
                @apply font-neuro text-[1.625rem] leading-[1.875rem] lg:text-[4.0625rem] lg:leading-[5.4375rem] tracking-wide
            }

            .heading-text-lg{
                @apply lg:text-[1rem] lg:leading-[1.75rem]
            }

            .heading-text-xl{
                @apply text-[0.875rem] leading-6 lg:leading-9 lg:text-[1.25rem]
            }

            .button{
                @apply w-fit h-9 rounded-[0.625rem] uppercase px-5 py-3 flex items-center justify-center heading-title-xxs transition-colors
            }

            .button-first{
                @apply bg-red-dark text-white border border-white hover:bg-red-ultradark
            }

            .button-second{
                @apply bg-white text-red-dark border border-red-dark hover:bg-red-ultradark hover:text-white hover:border-red-ultradark
            }

            .navbar ul li a, .button-first{
                @apply transition-colors
            }

            header .navbar ul li a{
                @apply hover:text-red-dark
            }

            footer .navbar ul li a{
                @apply hover:text-red-ultradark
            }

            .bg-swiper-button-navigation-icon {
                @apply bg-[url('./src/icon/arrow-right-circle.svg')]
            }
            .swiper-button-navigation{
                @apply after:bg-no-repeat bg-cover
            }

            .bg-red-hard-light{
                @apply bg-red-dark w-full h-full absolute top-0 left-0 opacity-90 mix-blend-darken z-10
            }
        }
    </style>
     <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />
</head>
<body class="bg-black text-white font-resamitz text-lg relative">

    <header class="text-white container flex justify-between items-center h-[6.5625rem]">
        <a href="<?php echo $root ?>">
            <img src="<?php echo $root  ?>/src/images/cloudaitech-logo.svg" alt="CloudAi Tech logo" class="w-auto h-[3.875rem] object-contain z-30">
        </a>
        <img src="<?php echo $root  ?>/src/icon/nav-mobile-menu-icon.svg" alt="CloudAi Tech - Menu mobile" class="w-auto h-5 object-contain ml-auto lg:hidden" onclick="openMenu()">
        <img src="<?php echo $root  ?>/src/icon/close-icon.svg" alt="CloudAi Tech - Menu mobile Close" class="close navbar w-auto h-5 object-contain ml-auto" onclick="closeMenu()">
        <nav class="navbar font-neuro text-base tracking-wide">
            <ul class="gap-x-16 lg:flex">
                <li>
                    <a href="<?php echo $root  ?>/about-us">About Us</a>
                </li>
                <li>
                    <a href="<?php echo $root  ?>/services" class="cursor-not-allowed">Services</a>
                </li>
                <li>
                    <a href="<?php echo $root  ?>/contact">Contact</a>
                </li>
                <li>
                    <a href="<?php echo $root  ?>/portfolio">Portfolio</a>
                </li>
            </ul>
        </nav>
    </header>